qwind

? Qviento

Qwind es una plantilla gratuita y de código abierto para crear su sitio web utilizando Qwik + Tailwind CSS . Listo para iniciar un nuevo proyecto y diseñado teniendo en cuenta las mejores prácticas.

Características

• ✅ Integración con Tailwind CSS compatible con el modo oscuro .
• ✅ Puntuaciones listas para producción en informes Lighthouse y PageSpeed ​​Insights.
• ✅ Optimización de imágenes y optimización de fuentes .

Tabla de contenido

• Manifestación
• Empezando
  • Estructura del proyecto
  • Comandos
  • Configuración
  • Desplegar
• Hoja de ruta
• Contribuyendo
• Expresiones de gratitud
• Licencia

Manifestación

? https://qwind.pages.dev/

Empezando

Este proyecto utiliza Qwik con QwikCity. QwikCity es solo un conjunto adicional de herramientas además de Qwik para facilitar la creación de un sitio completo, incluido enrutamiento basado en directorios, diseños y más.

Estructura del proyecto

Dentro de la plantilla Qwind , verá las siguientes carpetas y archivos:

 /
├── 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 : proporciona el enrutamiento basado en directorio, que puede incluir una jerarquía de archivos de diseño layout.tsx y un archivo index.tsx como página. Además, los archivos index.ts son puntos finales. Consulte los documentos de enrutamiento para obtener más información.

• src/components : directorio recomendado para componentes.

• public : cualquier activo estático, como imágenes, se puede colocar en el directorio público. Consulte el directorio público de Vite para obtener más información.

¿Experto experimentado en qwik? Elimina este archivo. Actualice config.mjs y contenidos. ¡Divertirse!

Comandos

Todos los comandos se ejecutan desde la raíz del proyecto, desde una terminal:

Dominio	Acción
npm install	Instala dependencias
npm run dev	Inicia el servidor de desarrollo local en 127.0.0.1:5173/
npm run build	Construya su sitio de producción en ./dist/
npm run preview	Obtenga una vista previa de su compilación localmente, antes de implementarla
npm run fmt	Formatear códigos con Prettier
npm run lint	Ejecutar Eslint
npm run qwik ...	Ejecute comandos CLI como qwik add , qwik build

Configuración

Archivo de configuración básica: ./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
} ;

Desplegar

Implementar en producción (manual)

Puede crear una compilación de producción optimizada con:

npm run build

Ahora su sitio web está listo para ser implementado. Todos los archivos generados se encuentran en la carpeta dist , que puede implementar en cualquier servicio de alojamiento que prefiera.

Implementar en Netlify

Clone este repositorio en su propia cuenta de GitHub e impleméntelo en Netlify:

Implementar en Vercel

Clone este repositorio en su propia cuenta de GitHub e impleméntelo en Vercel:

Hoja de ruta

Base

• Cree utilidades para generar enlaces permanentes adaptados al dominio y la ruta base.
• Simplifica la forma de optimizar imágenes.
• Cree un componente para hacer el SEO más simple e intuitivo.
• Cree un blog configurable con categorías, etiquetas y autores utilizando MDX.
• Agregue páginas de uso más frecuente (Portafolio, Servicios, Contacto, Documentos...).
• Busque o cree una biblioteca para tener más fuentes de iconos disponibles.
• Refactorice algún código que aún no siga las convenciones de Qwik.

Avanzado

• Consiga una puntuación perfecta del 100 % en la velocidad de la página de Google.
• Inserte un widget de ejemplo de JavaScript complejo en la página de inicio para demostrar las funciones de Qwik.
• Cree un pequeño backend de administración ilustrativo.

Contribuyendo

Si tiene alguna idea, sugerencia o encuentra algún error, no dude en abrir una discusión, un problema o crear una solicitud de extracción. Esto sería muy útil para todos nosotros y estaremos encantados de escucharlo y actuar.

Expresiones de gratitud

Creado inicialmente por onWidget y mantenido por una comunidad de contribuyentes.

Licencia

Qwind tiene la licencia MIT; consulte el archivo LICENCIA para obtener más detalles.