26 |
69 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 | # 📣 ¡IMPORTANTE!
2 |
3 | Antes de enviar tu Pull Request, asegúrate de utilizar las plantillas de PR proporcionadas en este repositorio. Esto ayudará a garantizar que tu PR sea revisada y aprobada de manera rápida y eficiente.
4 |
5 | Para utilizar una de las plantillas añade el siguiente texto al final de la URL de tu PR:
6 |
7 | ```txt
8 | &template=nombre_de_la_plantilla.md
9 | ```
10 |
11 | Si quieres utilizar la plantilla de [bug.md][bug-template], deberás agregar el siguiente texto al final de la URL de tu PR:
12 |
13 | ```txt
14 | &template=bug.md
15 | ```
16 |
17 | Si quieres utilizar la plantilla de [documentation.md][documentation-template], deberás agregar el siguiente texto al final de la URL de tu PR:
18 |
19 | ```txt
20 | &template=documentation.md
21 | ```
22 |
23 | Si quieres utilizar la plantilla de [feature.md][feature-template], deberás agregar el siguiente texto al final de la URL de tu PR:
24 |
25 | ```txt
26 | &template=feature.md
27 | ```
28 |
29 | Si quieres utilizar la plantilla de [hotfix.md][hotfix-template], deberás agregar el siguiente texto al final de la URL de tu PR:
30 |
31 | ```txt
32 | &template=hotfix.md
33 | ```
34 |
35 | Si quieres utilizar la plantilla de [refactor.md][refactor-template], deberás agregar el siguiente texto al final de la URL de tu PR:
36 |
37 | ```txt
38 | &template=refactor.md
39 | ```
40 |
41 | Puedes ver todas las plantillas disponibles en el siguiente enlace, asegurándote de utilizar la plantilla correcta:
42 |
43 | https://github.com/UXCorpRangel/boilerplate/tree/main/.github/PULL_REQUEST_TEMPLATE
44 |
45 | Esta es una limitación de GitHub que no permite utilizar plantillas de PR en los Pull Requests desde la interfaz web (como lo indica en el punto número 3 de la documentación de GitHub sobre plantillas de PR).
46 |
47 | Referencias:
48 |
49 | - https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository
50 | - https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/using-query-parameters-to-create-a-pull-request
51 |
52 | ¡Gracias por tu contribución! 💖
53 |
54 | [bug-template]: ./PULL_REQUEST_TEMPLATE/bug.md
55 | [documentation-template]: ./PULL_REQUEST_TEMPLATE/documentation.md
56 | [feature-template]: ./PULL_REQUEST_TEMPLATE/feature.md
57 | [hotfix-template]: ./PULL_REQUEST_TEMPLATE/hotfix.md
58 | [refactor-template]: ./PULL_REQUEST_TEMPLATE/refactor.md
59 |
--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import { defineConfig } from 'astro/config'
4 | import { URL } from './src/data/constants'
5 |
6 | import { composeVisitors } from 'lightningcss'
7 | import pxtorem from 'lightningcss-plugin-pxtorem'
8 |
9 | import icon from 'astro-icon'
10 | import playformInline from '@playform/inline'
11 | import sitemap from 'astro-sitemap'
12 | import playformCompress from '@playform/compress'
13 | import compressor from 'astro-compressor'
14 |
15 | // https://astro.build/config
16 | export default defineConfig({
17 | site: URL,
18 | trailingSlash: 'never',
19 | server: {
20 | host: true
21 | },
22 | prefetch: {
23 | prefetchAll: true,
24 | defaultStrategy: 'viewport'
25 | },
26 | compressHTML: false,
27 | vite: {
28 | css: {
29 | transformer: 'lightningcss',
30 | lightningcss: {
31 | visitor: composeVisitors([pxtorem()])
32 | }
33 | }
34 | },
35 | integrations: [
36 | icon(),
37 | playformInline(),
38 | sitemap({
39 | canonicalURL: URL,
40 | lastmod: new Date(),
41 | createLinkInHead: false,
42 | xmlns: {
43 | news: false,
44 | video: false,
45 | image: false,
46 | xhtml: true
47 | },
48 | i18n: {
49 | defaultLocale: 'es',
50 | locales: {
51 | es: 'es'
52 | }
53 | },
54 | // Remove trailing slash
55 | serialize(item) {
56 | item.url = item.url.replace(/\/$/g, '')
57 | return item
58 | }
59 | }),
60 | playformCompress({
61 | HTML: {
62 | 'html-minifier-terser': {
63 | collapseBooleanAttributes: true,
64 | collapseWhitespace: true,
65 | conservativeCollapse: true,
66 | maxLineLength: 0,
67 | minifyCSS: true,
68 | minifyJS: true,
69 | minifyURLs: true,
70 | noNewlinesBeforeTagClose: true,
71 | removeAttributeQuotes: false,
72 | removeComments: true,
73 | removeEmptyAttributes: true,
74 | removeRedundantAttributes: true,
75 | removeScriptTypeAttributes: true,
76 | removeStyleLinkTypeAttributes: true,
77 | sortAttributes: true,
78 | sortClassName: true,
79 | useShortDoctype: true
80 | }
81 | },
82 | JavaScript: {
83 | terser: {
84 | compress: {
85 | arguments: true,
86 | drop_console: true
87 | },
88 | format: {
89 | comments: false,
90 | indent_level: 2
91 | },
92 | ecma: 2020
93 | }
94 | },
95 | Cache: true,
96 | CSS: false,
97 | Image: false,
98 | SVG: false
99 | }),
100 | compressor()
101 | ]
102 | })
103 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE/bug.md:
--------------------------------------------------------------------------------
1 | # 🐛 [Solución de Bug: Nombre del Bug]
2 |
3 | ### Descripción del Problema
4 |
5 | **Resumen del bug:**
6 | _Explica aquí de manera breve el bug que estás solucionando. ¿Qué comportamiento incorrecto ocurría? ¿Qué efectos tenía en el proyecto?_
7 |
8 | **Issue relacionado (si existe):**
9 | _Si el bug está asociado a un issue existente, menciónalo aquí (ej. Closes #123). De lo contrario, por favor crea un [nuevo issue](issue)._
10 |
11 | ### 🔧 Solución Propuesta
12 |
13 | **Descripción de la solución:**
14 | _Detalla cómo abordaste el problema y qué cambios específicos realizaste para solucionarlo. Explica cómo el código fue modificado y cuál es el resultado esperado con la solución._
15 |
16 | **Archivos modificados:**
17 | _Enumera los archivos que fueron cambiados o afectados por la solución, por ejemplo:_
18 |
19 | - `src/components/Header.js`
20 | - `src/utils/handleData.js`
21 |
22 | ### 🧪 Pruebas Realizadas
23 |
24 | **Pruebas que he realizado:**
25 | _Detalla las pruebas que has ejecutado para asegurarte de que el bug fue corregido. Puedes mencionar tanto pruebas manuales como automatizadas que confirmen que el error ya no ocurre._
26 |
27 | - [ ] Prueba manual en varios navegadores.
28 | - [ ] Google Chrome
29 | - [ ] Mozilla Firefox
30 | - [ ] Microsoft Edge
31 | - [ ] Opera
32 | - [ ] Otros. Por favor describir.
33 | - [ ] Pruebas unitarias actualizadas (si aplica).
34 | - [ ] Pruebas end-to-end realizadas (si aplica).
35 |
36 | ### ✅ Comportamiento Esperado
37 |
38 | **Resultado esperado tras la solución:**
39 | _Describe el comportamiento correcto que debería observarse después de aplicar la solución. Esto ayuda a los revisores a entender el objetivo final y cómo debería funcionar la aplicación sin el bug._
40 |
41 | ### 📸 Capturas de pantalla, videos o GIFs (Opcional)
42 |
43 | _Incluye aquí capturas de pantalla, videos o GIFs que muestren el antes y después, o simplemente el resultado de la solución, para que los revisores puedan visualizar rápidamente el cambio. Si no aplica, puedes eliminar esta sección._
44 |
45 | ### 🗒️ Notas Adicionales
46 |
47 | _Si hay algo más relevante que debería mencionarse, como detalles técnicos, posibles efectos secundarios o sugerencias para mejorar otras partes relacionadas del código, menciónalo aquí. Si no aplica, puedes eliminar esta sección._
48 |
49 | ### 📦 Checklist
50 |
51 | Antes de enviar la Pull Request, asegúrate de completar el siguiente checklist:
52 |
53 | - [ ] He revisado que el código sea coherente con la guía de estilo del proyecto.
54 | - [ ] Mi solución no rompe ninguna funcionalidad existente.
55 | - [ ] Mi PR está vinculada correctamente a un issue.
56 | - [ ] Todas las pruebas relevantes han sido ejecutadas y pasadas (si aplica).
57 | - [ ] Acepto que mi PR se alinea con el [Código de Conducta de UXCorpRangel][codigo-de-conducta].
58 |
59 | ¡Gracias por su tiempo al revisar esta PR! Estoy abierto/a a cualquier sugerencia o mejora adicional. 😄
60 |
61 | [issue]: https://github.com/UXCorpRangel/boilerplate/issues/new
62 | [codigo-de-conducta]: https://github.com/UXCorpRangel/.github/blob/main/CODE_OF_CONDUCT.md
63 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE/documentation.md:
--------------------------------------------------------------------------------
1 | # 📚 Actualización de documentación: [Título breve]
2 |
3 | ### 📋 Descripción
4 |
5 | **Resumen de los cambios en la documentación:**
6 | _Describe brevemente qué cambios realizaste en la documentación. Puede incluir secciones nuevas, actualizaciones de contenido existente o correcciones, ya sea de código o del repositorio._
7 | _Ejemplo: Se añadieron instrucciones para la configuración de ambiente local._
8 |
9 | ### 🔧 Secciones modificadas/añadidas
10 |
11 | **Archivos o secciones de documentación afectadas:**
12 | _Lista aquí los archivos o secciones del proyecto que fueron modificados o añadidos. Esto ayuda a los revisores a localizar rápidamente las áreas afectadas._
13 | _Ejemplo:_
14 |
15 | - `docs/setup.md` (Nueva sección añadida)
16 | - `README.md` (Actualización de pasos de instalación)
17 | - `docs/api/overview.md` (Corrección de errores tipográficos)
18 |
19 | **Issue relacionado (si existe):**
20 | _Si la actualización o cambio añadido a la documentación está asociado a un issue existente o solicitud de la comunidad, menciónalo aquí (ej. Closes #123). De lo contrario, por favor crea un [nuevo issue][issue]._
21 |
22 | ### 📝 Razón para los cambios
23 |
24 | **Motivación de la actualización:**
25 | _Explica por qué se realizaron estos cambios en la documentación. ¿Fue para agregar más claridad? ¿Para actualizar contenido obsoleto? ¿Hubo un cambio en la funcionalidad que necesitaba ser documentado?_
26 | _Ejemplo: Se añadieron nuevas instrucciones para configurar variables de entorno, ya que la funcionalidad del proyecto ha cambiado._
27 |
28 | ### ✅ Detalles técnicos relevantes
29 |
30 | **Cambios técnicos relacionados (si aplica):**
31 | _Si la actualización de la documentación está relacionada con algún cambio técnico reciente, menciónalo aquí. Por ejemplo, si una nueva feature fue añadida y ahora necesita estar documentada, o si hubo una refactorización que afecta a la documentación._
32 |
33 | ### 📸 Capturas de Pantalla, videos o GIFs (Opcional)
34 |
35 | _Si has realizado cambios significativos en la documentación que afectan la interfaz de usuario (UI), puedes incluir capturas de pantalla, videos o GIFs que muestren cómo se ven esos cambios. Esto puede ser útil para visualizar cómo debería aparecer la documentación o una funcionalidad descrita. Si no aplica, puedes eliminar esta sección._
36 |
37 | ### 🔄 Checklist
38 |
39 | Revisa los siguientes puntos antes de enviar la PR:
40 |
41 | - [ ] Se revisó que los cambios estén alineados con el estilo y formato del resto de la documentación.
42 | - [ ] Se verificó que no haya errores tipográficos o de sintaxis en el contenido actualizado.
43 | - [ ] Se ha comprobado que todos los enlaces y referencias dentro de la documentación sean correctos y funcionen.
44 | - [ ] La documentación está actualizada y clara para nuevos colaboradores o usuarios del proyecto.
45 | - [ ] Los cambios realizados son precisos y reflejan correctamente las funcionalidades actuales del proyecto (si aplica).
46 | - [ ] Acepto que mi PR se alinea con el [Código de Conducta de UXCorpRangel][codigo-de-conducta].
47 |
48 | Agradezco de antemano la revisión de esta actualización. Estoy abierto/a a cualquier sugerencia para mejorar la claridad o el formato de la documentación. 😄
49 |
50 | [issue]: https://github.com/UXCorpRangel/boilerplate/issues/new
51 | [codigo-de-conducta]: https://github.com/UXCorpRangel/.github/blob/main/CODE_OF_CONDUCT.md
52 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE/feature.md:
--------------------------------------------------------------------------------
1 | # ✨ Nueva feature: [Título de la nueva feature]
2 |
3 | ### 📋 Descripción de la feature
4 |
5 | **Resumen de la nueva feature:**
6 | _Añade una breve descripción de la nueva feature que estás implementando. ¿Qué aporta esta nueva funcionalidad al proyecto? ¿Por qué es útil o necesaria?_
7 |
8 | **Motivación:**
9 | _Explica por qué decidiste añadir esta feature y qué problema o necesidad busca resolver._
10 |
11 | **Issue relacionado (si existe):**
12 | _Si la feature está asociado a un issue existente o solicitud de la comunidad, menciónalo aquí (ej. Closes #123). De lo contrario, por favor crea un [nuevo issue][issue]._
13 |
14 | ### 🔧 Implementación
15 |
16 | **Detalles técnicos:**
17 | _Detalla cómo implementaste la nueva feature. Explica los principales cambios realizados en el código, las decisiones técnicas que tomaste, y cualquier cosa relevante para entender cómo funciona la nueva funcionalidad._
18 |
19 | **Archivos modificados/añadidos:**
20 | _Lista los archivos que fueron modificados o añadidos para la implementación de esta feature, por ejemplo:_
21 |
22 | - `src/components/FeatureComponent.js` (nuevo archivo)
23 | - `src/utils/featureHelper.js` (modificación)
24 |
25 | ---
26 |
27 | ### 🧪 Pruebas
28 |
29 | **Pruebas que realizaste:**
30 | _Describe las pruebas que ejecutaste para asegurar que la nueva feature funciona correctamente. Esto puede incluir pruebas unitarias, funcionales, y/o manuales._
31 |
32 | - [ ] Pruebas manuales para confirmar que la feature se comporta como se esperaba.
33 | - [ ] He comprobado que la feature no afecta negativamente otras partes del proyecto.
34 | - [ ] Pruebas unitarias para validar la funcionalidad (si aplica).
35 |
36 | ### 📸 Capturas de pantalla, videos o GIFs (Opcional)
37 |
38 | _Si son cambios de interfaz, incluye capturas de pantalla, videos o GIFs que muestren la nueva feature en acción. Esto ayudará a los revisores a visualizar fácilmente la funcionalidad añadida._
39 |
40 | ### ✅ Comportamiento esperado
41 |
42 | **Descripción del comportamiento:**
43 | _Explica el comportamiento esperado con la nueva feature. Esto incluye cómo se integra en el flujo actual del proyecto y cómo deberían interactuar los usuarios con la nueva funcionalidad._
44 |
45 | ### ⚙️ Consideraciones técnicas
46 |
47 | **Impacto en el proyecto:**
48 | _Añade si esta nueva feature puede tener impacto en otras áreas del proyecto o si introduce alguna dependencia adicional. También indico si hay algún cambio importante en la estructura del código._
49 | _Si la feature requiere configuraciones adicionales o migraciones menciónalas aquí. Si no aplica, puedes eliminar esta sección._
50 |
51 | ### 🔄 Checklist
52 |
53 | Antes de enviar esta Pull Request, he verificado lo siguiente:
54 |
55 | - [ ] He revisado que mi código sigue la guía de estilo del proyecto.
56 | - [ ] La nueva feature no afecta negativamente la funcionalidad existente.
57 | - [ ] Mi PR está vinculada a un issue.
58 | - [ ] Todas las pruebas relevantes han sido ejecutadas y pasadas (si aplica).
59 | - [ ] Acepto que mi PR se alinea con el [Código de Conducta de UXCorpRangel][codigo-de-conducta].
60 |
61 | Agradezco su tiempo y revisión. Estoy abierto/a a cualquier comentario o sugerencia que puedan tener para mejorar esta nueva feature. ¡Espero que esta adición sea útil para el proyecto! 😄
62 |
63 | [issue]: https://github.com/UXCorpRangel/boilerplate/issues/new
64 | [codigo-de-conducta]: https://github.com/UXCorpRangel/.github/blob/main/CODE_OF_CONDUCT.md
65 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "boilerplate",
3 | "version": "1.0.0",
4 | "private": true,
5 | "description": "Boilerplate que incluye integraciones y configuraciones enfocadas en buenas prácticas para construir sitios rápidos, accesibles y listos para producción.",
6 | "keywords": [
7 | "astro",
8 | "astrojs",
9 | "astro-boilerplate",
10 | "astro-template",
11 | "boilerplate",
12 | "starter",
13 | "starter-template",
14 | "template"
15 | ],
16 | "bugs": {
17 | "url": "https://github.com/UXCorpRangel/boilerplate/issues"
18 | },
19 | "repository": {
20 | "type": "git",
21 | "url": "https://github.com/UXCorpRangel/boilerplate.git"
22 | },
23 | "license": "MIT",
24 | "author": "UXCorpRangel - Felix Icaza ",
25 | "type": "module",
26 | "scripts": {
27 | "astro": "astro",
28 | "build": "astro check && astro build",
29 | "dev": "astro dev",
30 | "prepare": "simple-git-hooks",
31 | "preview": "astro preview",
32 | "start": "astro dev"
33 | },
34 | "simple-git-hooks": {
35 | "pre-commit": "pnpm lint-staged && pnpm ls-lint",
36 | "commit-msg": "pnpm commitlint -c -e ${1}"
37 | },
38 | "lint-staged": {
39 | "./**/*.{js,mjs,cjs}": [
40 | "eslint --cache --fix ./",
41 | "prettier --cache --write \"./**/*.{js,mjs,cjs}\""
42 | ],
43 | "./**/*.ts": [
44 | "eslint --cache --fix ./",
45 | "prettier --cache --write \"./**/*.ts\""
46 | ],
47 | "./src/**/*.astro": [
48 | "eslint --cache --fix ./src/",
49 | "prettier --cache --write \"./src/**/*.astro\""
50 | ],
51 | "./src/**/*.css": "prettier --cache --write \"./src/**/*.css\"",
52 | "./**/*.svg": "prettier --cache --write \"./**/*.svg\"",
53 | "./**/*.json": "prettier --cache --write \"./**/*.json\"",
54 | "./**/*.{yaml,yml}": "prettier --cache --write \"./**/*.{yaml,yml}\""
55 | },
56 | "dependencies": {
57 | "@astrojs/check": "0.9.4",
58 | "@playform/compress": "0.1.9",
59 | "@playform/inline": "0.1.2",
60 | "astro": "5.6.1",
61 | "astro-capo": "0.0.1",
62 | "astro-compressor": "1.0.0",
63 | "astro-icon": "1.1.5",
64 | "astro-seo-schema": "5.0.0",
65 | "astro-sitemap": "1.0.0",
66 | "lightningcss": "1.29.3",
67 | "lightningcss-plugin-pxtorem": "0.0.8",
68 | "sanitize.css": "13.0.0",
69 | "schema-dts": "1.1.5",
70 | "sharp": "0.34.1",
71 | "typescript": "5.8.3"
72 | },
73 | "devDependencies": {
74 | "@astrojs/ts-plugin": "1.10.4",
75 | "@commitlint/cli": "19.8.0",
76 | "@commitlint/config-conventional": "19.8.0",
77 | "@eslint/js": "9.24.0",
78 | "@ianvs/prettier-plugin-sort-imports": "4.4.1",
79 | "@ls-lint/ls-lint": "2.3.0",
80 | "@typescript-eslint/parser": "8.29.1",
81 | "astro-eslint-parser": "1.2.2",
82 | "eslint": "9.24.0",
83 | "eslint-config-prettier": "10.1.2",
84 | "eslint-plugin-astro": "1.3.1",
85 | "eslint-plugin-jsx-a11y": "6.10.2",
86 | "globals": "16.0.0",
87 | "lint-staged": "15.5.1",
88 | "neostandard": "0.12.1",
89 | "prettier": "3.5.3",
90 | "prettier-plugin-astro": "0.14.1",
91 | "simple-git-hooks": "2.12.1"
92 | },
93 | "engines": {
94 | "node": ">=20.18.3",
95 | "pnpm": ">=10.5.0"
96 | },
97 | "pnpm": {
98 | "onlyBuiltDependencies": [
99 | "esbuild",
100 | "sharp",
101 | "simple-git-hooks"
102 | ]
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE/hotfix.md:
--------------------------------------------------------------------------------
1 | # 🚑 Hotfix: [Título breve del hotfix]
2 |
3 | ### 📋 Descripción del problema
4 |
5 | **Resumen del problema crítico:**
6 | _Explica de manera concisa el problema urgente que está causando un comportamiento inadecuado o bloqueo en la aplicación. ¿Qué es lo que no estaba funcionando? ¿Qué impacto tuvo en los usuarios o en el sistema?_
7 |
8 | **Contexto y urgencia:**
9 | _Detalla por qué este hotfix es necesario de manera inmediata. ¿Afecta a todos los usuarios? ¿Está provocando fallos en producción?_
10 |
11 | **Issue relacionado (si existe):**
12 | _Si el bug está asociado a un issue existente, menciónalo aquí (ej. Closes #123). De lo contrario, por favor crea un [nuevo issue][issue]._
13 |
14 | ### 🔧 Solución propuesta
15 |
16 | **Descripción de la Solución:**
17 | _Describe los cambios aplicados para resolver el problema crítico. Explica de manera técnica qué has cambiado y por qué la solución resuelve el problema urgentemente._
18 |
19 | **Archivos modificados:**
20 | _Indica los archivos en los que realizaste los cambios, por ejemplo:_
21 |
22 | - `src/components/Auth.js`
23 | - `src/utils/errorHandler.js`
24 |
25 | ### 🧪 Pruebas realizadas
26 |
27 | **Pruebas para Validar la Solución:**
28 | _Describe las pruebas manuales y automatizadas que realizaste para asegurarte de que el hotfix resuelve el problema sin introducir otros errores._
29 |
30 | - [ ] Validación de que el problema ya no ocurre bajo las condiciones específicas que lo provocaban.
31 | - [ ] Test automatizados actualizados o añadidos (si es aplicable).
32 |
33 | ### ⏩ Comportamiento esperado
34 |
35 | **Resultado tras el hotfix:**
36 | _Detalla el comportamiento correcto esperado después de aplicar este hotfix. Explica qué se espera que funcione correctamente ahora que el problema ha sido solucionado._
37 |
38 | ### 📸 Capturas de pantalla, videos o GIFs (Opcional)
39 |
40 | _Incluye capturas de pantalla, videos o GIFs que muestren el error antes del hotfix y su solución en acción. Esto ayudará a los revisores a ver rápidamente el impacto del hotfix. Si no aplica, puedes eliminar esta sección._
41 |
42 | ### ⚠️ Impacto del hotfix
43 |
44 | **Impacto potencial:**
45 | _Explica si este hotfix podría tener efectos colaterales o si es un cambio contenido que solo afecta la parte problemática del código. ¿Hay algún riesgo en otras áreas de la aplicación?. Si no aplica, puedes eliminar esta sección._
46 |
47 | ### 🔄 Siguientes Pasos
48 |
49 | _Si este hotfix es solo una solución temporal, menciona los próximos pasos para resolver el problema de forma definitiva, o si es necesario refactorizar o mejorar alguna parte del código más adelante._
50 |
51 | ### 📦 Checklist
52 |
53 | Antes de enviar la Pull Request, asegúrate de haber completado este checklist:
54 |
55 | - [ ] He probado la solución en el entorno de staging.
56 | - [ ] El hotfix está enfocado únicamente en resolver el problema crítico.
57 | - [ ] Mi PR está vinculada correctamente a un issue o ticket de urgencia.
58 | - [ ] Todas las pruebas relevantes han sido ejecutadas y pasadas (si aplica).
59 | - [ ] Acepto que mi PR se alinea con el [Código de Conducta de UXCorpRangel][codigo-de-conducta].
60 |
61 | Agradezco su pronta revisión y colaboración en este hotfix. Estoy disponible para cualquier comentario o ajuste necesario para que el hotfix sea implementado rápidamente. ¡Gracias por su apoyo! 😄
62 |
63 | [issue]: https://github.com/UXCorpRangel/boilerplate/issues/new
64 | [codigo-de-conducta]: https://github.com/UXCorpRangel/.github/blob/main/CODE_OF_CONDUCT.md
65 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contribuyendo a esta plantilla
2 |
3 | ¡Gracias por tu interés en contribuir! Para garantizar una colaboración fluida y eficiente, por favor sigue estas directrices.
4 |
5 | ## Tabla de contenidos
6 |
7 | - [Cómo Contribuir](#c%C3%B3mo-contribuir)
8 | - [Código de Conducta](#c%C3%B3digo-de-conducta)
9 | - [Cómo Reportar Problemas](#c%C3%B3mo-reportar-problemas)
10 | - [Cómo Proponer Nuevas Características](#c%C3%B3mo-proponer-nuevas-caracter%C3%ADsticas)
11 | - [Cómo Enviar un Pull Request](#c%C3%B3mo-enviar-un-pull-request)
12 | - [Guía de Estilo](#gu%C3%ADa-de-estilo)
13 | - [Licencia](#licencia)
14 | - [Envío de Issues](#env%C3%ADo-de-issues)
15 | - [Cómo Hacer un Fork](#c%C3%B3mo-hacer-un-fork)
16 |
17 | ## ¿Cómo contribuir?
18 |
19 | 1. **Explora el Proyecto**: Revisa el [README](./README.md), la estructura y el código para entender el proyecto.
20 | 2. **Revisa Issues Abiertos**: Consulta la [sección de Issues](https://github.com/UXCorpRangel/boilerplate/issues) para ver cómo puedes ayudar o deja una issue para sugerir una nueva característica o error.
21 | 3. **Fork y Clona**: Haz un fork del repositorio y clónalo en tu máquina local.
22 |
23 | ## Código de conducta
24 |
25 | Nos comprometemos a mantener un ambiente de colaboración respetuoso y acogedor.
26 |
27 | ## ¿Cómo reportar problemas?
28 |
29 | Si encuentras un error o problema:
30 |
31 | 1. **Busca en Issues**: Verifica si el problema ya ha sido reportado.
32 | 2. **Crea un Nuevo Issue**: Si el problema es nuevo, abre un issue en la [sección de Issues](https://github.com/UXCorpRangel/boilerplate/issues) con una descripción clara y concisa del problema.
33 |
34 | ## ¿Cómo proponer nuevas características?
35 |
36 | Para proponer una nueva característica:
37 |
38 | 1. **Abre un Issue**: Antes de comenzar a trabajar en la nueva característica, abre un nuevo issue para discutir la idea en la [sección de Issues](https://github.com/UXCorpRangel/boilerplate/issues).
39 | 2. **Recibe Retroalimentación**: Espera comentarios y sugerencias de los colaboradores o mantenedores antes de proceder.
40 |
41 | ## ¿Cómo hacer un fork?
42 |
43 | Para contribuir a Portfolios Dev, primero necesitas hacer un fork del repositorio:
44 |
45 | 1. **Ve al Repositorio en GitHub**: Accede a [Portfolios Dev en GitHub](https://github.com/UXCorpRangel/boilerplate).
46 | 2. **Haz un Fork**: En la esquina superior derecha de la página del repositorio, haz clic en el botón **Fork**. Esto creará una copia del repositorio en tu cuenta de GitHub.
47 | 3. **Clona tu Fork**: Abre una terminal en tu máquina local y usa el siguiente comando para clonar tu fork:
48 |
49 | ```bash
50 | git clone https://github.com/TU_USUARIO/boilerplate.git
51 | ```
52 |
53 | ## ¿Cómo enviar un pull request?
54 |
55 | Para enviar un pull request (PR):
56 |
57 | 1. **Sincroniza tu Repositorio**: Asegúrate de que tu rama esté actualizada con la rama principal del repositorio.
58 | 2. **Crea una Rama Nueva**: Trabaja en tus cambios en una rama separada y realiza commits con mensajes claros.
59 | 3. **Prueba tus Cambios**: Asegúrate de que tus cambios no introduzcan errores y que todo funcione como se espera.
60 | 4. **Abre el Pull Request**: Envía un PR desde tu rama a la rama principal del repositorio, incluyendo una descripción detallada de los cambios.
61 | 5. **Espera Revisión**: Los mantenedores revisarán tu PR y proporcionarán comentarios. Realiza las modificaciones necesarias.
62 |
63 | ## Envío de issues
64 |
65 | Para asegurar que tu issue sea procesado de manera eficiente:
66 |
67 | 1. **Proporciona Información Detallada**: Incluye detalles relevantes sobre el problema o la mejora propuesta. Esto puede incluir pasos para reproducir el problema, capturas de pantalla, o ejemplos de código.
68 | 2. **Utiliza Etiquetas Adecuadas**: Si es posible, utiliza las etiquetas proporcionadas para categorizar tu issue (como `bug`, `enhancement`, etc.).
69 | 3. **Sé Claro y Conciso**: Escribe una descripción clara y al punto para que los mantenedores puedan entender rápidamente el problema o la solicitud.
70 | 4. **Revisa Issues Anteriores**: Antes de abrir un nuevo issue, revisa los issues existentes para asegurarte de que no se haya reportado el mismo problema o propuesta.
71 |
72 | ## Licencia
73 |
74 | Al contribuir a Portfolios Dev, aceptas que tus contribuciones estén sujetas a la [Licencia del Proyecto](./LICENSE).
75 |
76 | ---
77 |
78 | Gracias por tu interés y tu contribución a Portfolios Dev. ¡Tu ayuda es muy valiosa!
79 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE/refactor.md:
--------------------------------------------------------------------------------
1 | # 🔄 Refactorización: [Título breve del refactor realizado]
2 |
3 | ### 📋 Descripción general
4 |
5 | **Resumen del refactor:**
6 | _Describe brevemente qué has refactorizado y por qué. ¿Qué áreas del código fueron optimizadas, simplificadas o mejoradas? ¿Qué motivó esta refactorización?_
7 | _Ejemplo: Refactorización del componente `UserProfile` para mejorar la legibilidad del código y reducir la duplicación de lógica._
8 |
9 | **Issue relacionado (si existe):**
10 | _Si refactor añadido está asociado a un issue existente o solicitud de la comunidad, menciónalo aquí (ej. Closes #123). De lo contrario, por favor crea un [nuevo issue][issue]._
11 |
12 | ### 🔧 Cambios principales
13 |
14 | **Descripción detallada de los cambios:**
15 | _Explica los principales cambios que has realizado. Sé claro/a acerca de las decisiones técnicas y las mejoras introducidas. Indica si has reemplazado patrones antiguos por otros más eficientes, optimizado funciones, o simplificado estructuras._
16 |
17 | **Archivos y componentes afectados:**
18 | _Lista los archivos, componentes o módulos que fueron refactorizados. Esto ayudará a los revisores a localizar rápidamente las partes afectadas del código._
19 | _Ejemplo:_
20 |
21 | - `src/components/UserProfile.js` (Optimización de lógica condicional)
22 | - `src/utils/dataFormatter.js` (Refactorización de funciones para mejorar la reutilización)
23 |
24 | ### 📝 Motivación
25 |
26 | **Razón de la Refactorización:**
27 | _Describe por qué esta refactorización era necesaria. ¿Buscabas mejorar el rendimiento, legibilidad, o mantenimiento del código? ¿Había una deuda técnica que necesitaba ser resuelta?_
28 | _Ejemplo: Se simplificó la lógica de `UserProfile` para mejorar la comprensión del código por parte de otros desarrolladores y reducir errores futuros. Si no aplica, puedes eliminar esta sección._
29 |
30 | ### ✅ Beneficios esperados
31 |
32 | **Resultados y beneficios:**
33 | _Indica los beneficios que se obtienen gracias a la refactorización. Puede ser código más limpio, más rápido, menos propenso a errores o más fácil de extender. Esto le dará al revisor una idea clara del impacto positivo que tiene tu trabajo._
34 |
35 | _Ejemplo:_
36 |
37 | - Mejor legibilidad del código.
38 | - Reducción de líneas de código redundante.
39 | - Mayor eficiencia en el manejo de datos.
40 |
41 | ### 🧪 Pruebas
42 |
43 | **Pruebas Realizadas y consideraciones:**
44 | _Asegúrate de haber probado que los cambios no introducen errores. Explica cómo probaste el código refactorizado (pruebas unitarias, manuales, etc.). Si añadiste o modificaste tests, indícalo aquí._
45 |
46 | - [ ] Pruebas manuales para asegurar que el comportamiento sigue siendo el esperado.
47 | - [ ] Se verificó que el código refactorizado no afecta otras áreas del proyecto.
48 | - [ ] Pruebas unitarias actualizadas para cubrir los cambios (si aplica).
49 |
50 | ### 📸 Capturas de pantalla, videos o GIFs (Opcional)
51 |
52 | _Si el refactor tiene un impacto visible en la interfaz de usuario (UI), añade aquí capturas de pantalla, videos o GIFs que muestren las mejoras o cambios visuales (si los hay). Esto es especialmente útil para componentes front-end refactorizados. Si no aplica, puedes eliminar esta sección._
53 |
54 | ### 🛠️ Consideraciones técnicas y notas
55 |
56 | **Impacto en el proyecto:**
57 | _Indica si la refactorización puede tener algún impacto en otras partes del proyecto, y si se necesitarán ajustes adicionales en el futuro. Si la refactorización incluye cambios importantes en la arquitectura o estructura del código, es importante mencionarlo._
58 |
59 | _Ejemplo: Debido a la refactorización, algunos componentes ahora comparten una lógica común, lo que puede facilitar futuras extensiones. No se prevén cambios en el comportamiento existente._
60 |
61 | ### 🔄 Checklist
62 |
63 | Antes de enviar esta Pull Request, asegúrate de cumplir con lo siguiente:
64 |
65 | - [ ] El código refactorizado sigue la guía de estilo del proyecto.
66 | - [ ] La refactorización no introduce nuevas dependencias o complejidad innecesaria.
67 | - [ ] Se ha revisado que el comportamiento actual del proyecto no haya sido alterado negativamente.
68 | - [ ] Mi PR está vinculada a un issue.
69 | - [ ] Todas las pruebas relevantes han sido ejecutadas y pasadas (si aplica).
70 | - [ ] Acepto que mi PR se alinea con el [Código de Conducta de UXCorpRangel][codigo-de-conducta].
71 |
72 | Me gustaría recibir feedback sobre la estructura del refactor para ver si se puede optimizar aún más. ¡Gracias por su tiempo y revisión!\_ 😄
73 |
74 | [issue]: https://github.com/UXCorpRangel/boilerplate/issues/new
75 | [codigo-de-conducta]: https://github.com/UXCorpRangel/.github/blob/main/CODE_OF_CONDUCT.md
76 |
--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import LinkCardGrid from '@sections/index/LinkCardGrid.astro'
3 | import Layout from '@layouts/Layout.astro'
4 | import OpenGraph from '@components/OpenGraph.astro'
5 |
6 | const options = {
7 | title: 'Boilerplate | UXCorpRangel',
8 | description:
9 | 'Boilerplate que incluye integraciones y configuraciones enfocadas en buenas prácticas para construir sitios rápidos, accesibles y listos para producción.'
10 | }
11 | ---
12 |
13 |
14 |
20 |
21 |
22 |
50 |
Welcome to Astro
51 |
52 | To get started, open the directory src/pages in your project.
54 | Code Challenge: Tweak the "Welcome to Astro" message above.
55 |
56 |
57 |
58 |
59 |
60 |
115 |
--------------------------------------------------------------------------------
/src/layouts/Base.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { type Options } from '@contracts'
3 | import { Head } from 'astro-capo'
4 | import { Schema } from 'astro-seo-schema'
5 | import Favicons from '@components/Favicons.astro'
6 | import 'sanitize.css'
7 | import 'sanitize.css/forms.css'
8 | import 'sanitize.css/assets.css'
9 | import 'sanitize.css/typography.css'
10 | import 'sanitize.css/reduce-motion.css'
11 |
12 | interface Props {
13 | options: Options
14 | }
15 |
16 | const { options } = Astro.props
17 | const { title, description, metaRobots } = options
18 | ---
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | {title}
27 |
28 |
29 |
30 |
31 |
32 |
33 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 | {description && }
118 | {description && }
119 |
123 |
124 |
125 | {
126 | description && (
127 |
148 | )
149 | }
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🚀 Astro Boilerplate
2 |
3 | Astro boilerplate que incluye integraciones y configuraciones iniciales enfocadas en buenas prácticas para construir sitios rápidos, accesibles y listos para producción.
4 |
5 | ## 👀 Características
6 |
7 | - 🚀 Última versión de Astro
8 | - ✅ ESLint y Prettier configurados sin complicadas reglas
9 | - ✉️ Reglas para commits semánticos
10 | - 🗃️ Reglas para nombres de archivos y carpetas
11 | - 🤖 Dependabot para actualizaciones automáticas
12 | - 🔄 Plantillas para Pull Requests
13 | - ⚡ Enfocado en Performance
14 | - ⚙️ Enfocado en SEO
15 | - ✨ Soporte iconos SVG
16 | - 🪄 View transitions entre documentos ([Referencia](https://developer.chrome.com/docs/web-platform/view-transitions/cross-document))
17 |
18 | ## 🤔 ¿Cómo usar la plantilla?
19 |
20 | Para utilizar la plantilla puedes copiar y ejecutar el siguiente comando en tu terminal:
21 |
22 | Con NPM:
23 |
24 | ```bash
25 | npm create astro@latest -- --template UXCorpRangel/boilerplate
26 | ```
27 |
28 | Con PNPM:
29 |
30 | ```bash
31 | pnpm create astro@latest --template UXCorpRangel/boilerplate
32 | ```
33 |
34 | Haz clic en el siguiente enlace para generar un repositorio a partir de este Boilerplate:
35 |
36 | [](https://github.com/new?template_name=boilerplate&template_owner=UXCorpRangel)
37 |
38 | ## 🛠️ Estructura del proyecto
39 |
40 | - [public/favicons/](./public/favicons/): Contiene los archivos de favicon utilizados en la aplicación.
41 |
42 | - [public/media/](./public/media/): Almacena archivos multimedia como videos o audios que son utilizados en la aplicación.
43 |
44 | - [public/og/](./public/og/): Esta carpeta almacena las imágenes Open Graph que son utilizadas para previsualizaciones cuando la página es compartida en redes sociales.
45 |
46 | - [src/components/](./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.
47 |
48 | - [src/components/ui](./src/components/): Contiene los componentes de UI reutilizables.
49 |
50 | - [src/contracts/](./src/contracts/): Contiene los contratos de tipos de datos (type definitions) que se utilizan en la aplicación.
51 |
52 | - [src/data/](./src/data/): Esta carpeta almacena los datos estáticos o archivos que contienen la información que la aplicación necesita.
53 |
54 | - [src/icons/](./src/icons/): Incluye los íconos utilizados en la aplicación.
55 |
56 | - [src/images/](./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 `` o ``_.
57 |
58 | - [src/layouts/](./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.
59 |
60 | - [src/pages/](./src/pages/): Contiene las páginas principales de la aplicación.
61 |
62 | - [src/pages/\_index](./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](./src/pages/_index/) contiene las secciones de la página de inicio.
63 |
64 | - [src/scripts/](./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.
65 |
66 | - [src/styles/](./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.
67 |
68 | ## 📦 Dependencias
69 |
70 | Descubre las principales integraciones de Astro utilizadas en este proyecto:
71 |
72 | - [@playform/compress](https://www.npmjs.com/package/@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.
73 |
74 | - [@playform/inline](https://www.npmjs.com/package/@playform/inline): Es una herramienta que se enfoca en la extracción de CSS Critico para la aplicación.
75 |
76 | - [astro-capo](https://github.com/natemoo-re/astro-capo): Esta integración se encarga de organizar las etiquetas dentro de `` usando [`capo.js`](https://github.com/rviscomi/capo.js).
77 |
78 | - [astro-compressor](https://www.npmjs.com/package/astro-compressor): Es una integración que se encarga de comprimir los archivos a Brotli y Gzip durante el proceso de build.
79 |
80 | - [astro-icon](https://www.npmjs.com/package/astro-icon): Es una integración que facilita la gestión e inserción de íconos SVG en tu proyecto de Astro.
81 |
82 | - [astro-seo-schema](https://www.npmjs.com/package/astro-seo-schema): Es una integración que genera automáticamente datos estructurados de esquema ([schema.org](https://schema.org/)) para tu sitio web de Astro.
83 |
84 | - [astro-sitemap](https://www.npmjs.com/package/astro-sitemap): Genera automáticamente un sitemap XML para tu sitio web de Astro.
85 |
86 | - [sanitize.css](https://www.npmjs.com/package/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.
87 |
88 | ## 🤝 Contribuir
89 |
90 | Si deseas contribuir a este proyecto, puedes hacerlo leyendo la [Guía de Contribución](./CONTRIBUTING.md).
91 |
92 | ## 📄 Licencia
93 |
94 | Este proyecto utiliza la Licencia MIT. Consulte el [Archivo de Licencia](./LICENCE) para obtener más información.
95 |
96 | ---
97 |
98 | Hecho con ❤️ por [Felix Icaza](https://felixicaza.com).
99 |
--------------------------------------------------------------------------------