qwind

? Qwind

Qwind est un modèle gratuit et open source pour créer votre site Web à l'aide de Qwik + Tailwind CSS . Prêt à démarrer un nouveau projet et conçu en tenant compte des meilleures pratiques.

Caractéristiques

• ✅ Intégration avec Tailwind CSS prenant en charge le mode sombre .
• ✅ Scores prêts pour la production dans les rapports Lighthouse et PageSpeed ​​Insights.
• ✅ Optimisation des images et optimisation des polices .

Table des matières

• Démo
• Commencer
  • Structure du projet
  • Commandes
  • Configuration
  • Déployer
• Feuille de route
• Contribuer
• Remerciements
• Licence

Démo

? https://qwind.pages.dev/

Commencer

Ce projet utilise Qwik avec QwikCity. QwikCity n'est qu'un ensemble d'outils supplémentaires en plus de Qwik pour faciliter la création d'un site complet, y compris le routage basé sur des répertoires, les mises en page, etc.

Structure du projet

Dans le modèle Qwind , vous verrez les dossiers et fichiers suivants :

 /
├── adaptors/
|   └── static/
|       └── vite.config.ts
├── public/
│   ├── favicon.svg
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── assets/
│   │   ├── images/
|   |   └── styles/
|   |       └── global.css
│   ├── components/
│   │   ├── atoms/
│   │   ├── core/
│   │   ├── icons/
|   |   └── widgets/
|   |       ├── Hero.tsx
|   |       ├── Features.tsx
|   |       └── ...
│   ├── content/
│   |   └── blog/
│   |       ├── post-slug-1.md
│   |       ├── post-slug-2.md
│   |       └── ...
│   ├── routes/
│   |   ├── blog/
│   |   ├── index.tsx
|   |   ├── layout.tsx
|   |   ├-- service-worker.ts
│   |   └-- ...
│   ├── config.mjs
│   ├── entry.dev.tsx
│   ├── entry.preview.tsx
│   ├── entry.ssr.tsx
│   └── root.tsx
├── package.json
└── ...

• src/routes : Fournit le routage basé sur un répertoire, qui peut inclure une hiérarchie de fichiers de mise en page layout.tsx et un fichier index.tsx comme page. De plus, les fichiers index.ts sont des points de terminaison. Veuillez consulter les documents de routage pour plus d'informations.

• src/components : Répertoire recommandé pour les composants.

• public : tous les actifs statiques, comme les images, peuvent être placés dans le répertoire public. Veuillez consulter l'annuaire public Vite pour plus d'informations.

Expert chevronné du Qwik ? Supprimez ce fichier. Mettez à jour config.mjs et son contenu. Amusez-vous!

Commandes

Toutes les commandes sont exécutées depuis la racine du projet, depuis un terminal :

Commande	Action
npm install	Installe les dépendances
npm run dev	Démarre le serveur de développement local à 127.0.0.1:5173/
npm run build	Construisez votre site de production sur ./dist/
npm run preview	Prévisualisez votre build localement, avant de le déployer
npm run fmt	Formater les codes avec Prettier
npm run lint	Exécuter Eslint
npm run qwik ...	Exécutez des commandes CLI comme qwik add , qwik build

Configuration

Fichier de configuration de base : ./src/config.mjs

 export const SITE = {
  name : "Example" ,

  origin : "https://example.com" ,
  basePathname : "/" , // Change this if you need to deploy to Github Pages, for example
  trailingSlash : true , // Generate permalinks with or without "/" at the end
} ;

Déployer

Déployer en production (manuel)

Vous pouvez créer une version de production optimisée avec :

npm run build

Maintenant, votre site Web est prêt à être déployé. Tous les fichiers générés se trouvent dans le dossier dist , que vous pouvez déployer sur n'importe quel service d'hébergement de votre choix.

Déployer sur Netlify

Clonez ce référentiel sur votre propre compte GitHub et déployez-le sur Netlify :

Déployer sur Vercel

Clonez ce référentiel sur votre propre compte GitHub et déployez-le sur Vercel :

Feuille de route

Base

• Créez des utilitaires pour générer des permaliens adaptés au domaine et au chemin d'accès de base.
• Simplifiez la manière d’optimiser les images.
• Créez un composant pour rendre le référencement plus simple et plus intuitif.
• Créez un blog configurable avec des catégories, des balises et des auteurs à l'aide de MDX.
• Ajoutez des pages plus fréquemment utilisées (Portfolio, Services, Contact, Docs...).
• Recherchez ou créez une bibliothèque pour disposer de plus de sources d'icônes.
• Refactorisez du code qui ne respecte pas encore les conventions Qwik.

Avancé

• Obtenez un score parfait de 100 % de vitesse de page Google.
• Insérez un exemple de widget javascript complexe sur la page d'accueil pour démontrer les fonctionnalités de Qwik.
• Créez un petit backend d’administration illustratif.

Contribuer

Si vous avez des idées, des suggestions ou trouvez des bugs, n'hésitez pas à ouvrir une discussion, un problème ou à créer une pull request. Cela serait très utile pour nous tous et nous serions heureux de vous écouter et d’agir.

Remerciements

Initialement créé par onWidget et maintenu par une communauté de contributeurs.

Licence

Qwind est sous licence MIT — voir le fichier LICENSE pour plus de détails.