🚀 Boilerplate

Boilerplate opinionado que incluye integraciones y configuraciones enfocadas en buenas prácticas para construir sitios rápidos, accesibles y listos para producción.

👀 Características

• 🚀 Última versión de Astro
• ✅ ESLint y Prettier configurados sin complicadas reglas
• ✉️ Reglas para commits semánticos
• 🗃️ Reglas para nombres de archivos y carpetas
• 🤖 Dependabot para actualizaciones automáticas
• 🔄 Plantillas para Pull Requests
• 🌐 Configuración para Tunnels
• ⚡ Enfocado en Performance
• ⚙️ Enfocado en SEO
• ✨ Soporte iconos SVG
• 🪄 View transitions entre documentos (Reference)

🤔 ¿Cómo usar la plantilla?

Para utilizar la plantilla puedes copiar y ejecutar el siguiente comando en tu terminal:

Con NPM:

npm create astro@latest -- --template UXCorpRangel/boilerplate

Con PNPM:

pnpm create astro@latest --template UXCorpRangel/boilerplate

Haz clic en el siguiente enlace para generar un repositorio a partir de este Boilerplate:

🛠️ Estructura del proyecto

• public/favicons/: Contiene los archivos de favicon utilizados en la aplicación.

• public/media/: Almacena archivos multimedia como videos o audios que son utilizados en la aplicación.

• public/og/: Esta carpeta almacena las imágenes Open Graph que son utilizadas para previsualizaciones cuando la página es compartida en redes sociales.

• src/components/: Contiene los componentes reutilizables que no tienen que ver con la UI que pueden ser usados en diferentes partes de la aplicación.

• src/components/ui: Contiene los componentes de UI reutilizables.

• src/contracts/: Contiene los contratos de tipos de datos (type definitions) que se utilizan en la aplicación.

• src/data/: Esta carpeta almacena los datos estáticos o archivos que contienen la información que la aplicación necesita.

• src/icons/: Incluye los íconos utilizados en la aplicación.

• src/images/: Contiene todas las imágenes que son utilizadas en la aplicación, ya sean para fondos, gráficos u otros elementos visuales. IMPORTANTE: Debes añadir acá las imágenes que quieres que sean procesadas por Astro utilizando el componente <Image> o <Picture>.

• src/layouts/: Almacena los componentes de disposición general de la aplicación, como estructuras de páginas completas para a mantener una consistencia visual en diferentes páginas.

• src/pages/: Contiene las páginas principales de la aplicación.

• src/pages/_index: Las carpetas que inician con guión bajo dentro de src/pages contienen las secciones de cada página. Por ejemplo, src/pages/_index contiene las secciones de la página de inicio.

• src/scripts/: Contiene los scripts adicionales necesarios para la funcionalidad del proyecto. Estos scripts pueden incluir utilidades, funciones auxiliares o cualquier lógica que esté relacionada con la UI.

• src/styles/: Almacena los archivos de estilos que definen la apariencia visual de la aplicación. Aquí se definen colores, tipografías, márgenes, entre otros elementos visuales o estilos globales.

📦 Dependencias

Descubre las principales integraciones de Astro utilizadas en este proyecto:

• @playform/compress: Es una herramienta que se enfoca en la compresión de activos, como imágenes, scripts y estilos, durante el proceso de construcción.

• @playform/inline: Es una herramienta que se enfoca en la extracción de CSS Critico para la aplicación.

• astro-compressor: Es una integración que se encarga de comprimir los archivos a Brotli y Gzip durante el proceso de build.

• astro-icon: Es una integración que facilita la gestión e inserción de íconos SVG en tu proyecto de Astro.

• astro-seo-schema: Es una integración que genera automáticamente datos estructurados de esquema (schema.org) para tu sitio web de Astro.

• astro-sitemap: Genera automáticamente un sitemap XML para tu sitio web de Astro.

• astro-tunnel: Permite exponer localmente tu proyecto de Astro a través de una URL pública.

• sanitize.css: Es una hoja de estilos que ofrece un reinicio (reset) y una normalización de los estilos CSS por defecto en los navegadores. Garantiza una apariencia más consistente entre distintos navegadores, eliminando las diferencias en estilos por defecto, lo que permite un desarrollo más predecible y coherente de la UI.

🤝 Contribuir

Si deseas contribuir a este proyecto, puedes hacerlo leyendo la Guía de Contribución.

📄 Licencia

Este proyecto utiliza la Licencia MIT. Consulte el Archivo de Licencia para obtener más información.

---

Hecho con ❤️ por Felix Icaza.