Rediseño XauenDevs

Puedes colaborar con el rediseño de la web de XauenDevs, no solo estás colaborando con la comunidad sino que puedes practicar/aprender algo nuevo como Astro.
Diseño de Figma · Reportar error · Sugerir algo

Tabla de contenidos

• Para empezar
  • Prerequisitos
  • Instalación
• Contribuir al proyecto
• 🛠️ Stack

(volver arriba)

Para empezar

Prerequisitos

• NPM

  npm install npm@latest -g
  

Instalación

1. Clona el repositorio

   git clone https://github.com/xauendevs/xauendevs-astro
   

2. Instala los paquetes de NPM

   npm install
   

3. Ejecuta el proyecto

   npm run dev
   

(volver arriba)

Contribuir al proyecto

Las contribuciones son lo que hacen que la comunidad de código abierto sea un lugar increíble para aprender, inspirar y crear. ¡Cualquier contribución que hagas es muy apreciada!

Si tienes alguna sugerencia que podría mejorar el proyecto, por favor haz un fork del repositorio y crea una pull request. También puedes simplemente abrir un issue con la etiqueta "enhancement".

Aquí tienes una guía rápida:

1. Haz un fork del Proyecto
2. Clona tu fork (git clone <URL del fork>)
3. Añade el repositorio original como remoto (git remote add upstream <URL del repositorio original>)
4. Crea tu Rama de Funcionalidad (git switch -c feature/CaracteristicaIncreible)
5. Realiza tus Cambios (git commit -m 'Add: alguna CaracterísticaIncreible')
6. Haz Push a la Rama (git push origin feature/CaracteristicaIncreible)
7. Abre una pull request

Por favor, consulta nuestra guía de contribución para saber cómo puedes empezar de la mejor manera y siguiendo buenas prácticas.

(volver arriba)

🛠️ Stack

• - The web framework for content-driven websites.
• - JavaScript with syntax for types.
• - A utility-first CSS framework for rapidly building custom designs.

¡Gracias a todos por colaborar!

(volver arriba)

Temporadas (Halloween, Navidad…)

La web tiene un diseño base (el de siempre) y temporadas que se activan y desactivan sin desplegar, con Vercel Global Config (antes Edge Config). Cada año se vuelve a activar la que toque; no hay que borrar nada.

Activar una temporada

1. Vercel → Storage → crear un Global Config y conectarlo al proyecto (Vercel añade la variable GLOBAL_CONFIG).
2. Claves del store:
   • site_theme: "halloween" · "navidad" · "default". Cualquier otro valor (o ninguno) deja la web exactamente como siempre.
   • hack_intro: true / false (broma de entrada; usa los textos de la temporada activa).
   • maintenance: true / false (modo mantenimiento: todas las páginas muestran «Volvemos enseguida» con un 503; la API, el panel interno y los estáticos siguen funcionando. Ver src/middleware.ts).
3. Guardar: se ve en ≤ 1 min (caché de la CDN, s-maxage=60).

Alternativa sin Global Config: variables SITE_THEME, SITE_HACK_INTRO y SITE_MAINTENANCE (requieren Redeploy: Vercel solo aplica las variables de entorno a despliegues nuevos).

Cómo está montado

• src/lib/site-theme.ts resuelve la temporada (Global Config → env → default); src/lib/season.ts la memoiza por petición y guarda los textos/rutas por temporada (SEASON_CONTENT).
• <body data-theme="navidad" data-festive>: data-festive está con cualquier temporada, data-theme dice cuál.
• Colores y recursos por temporada = tokens CSS en src/styles/seasons.css (--season-rgb, --night-rgb, --glow-*, --season-overlay, --season-hero-photo…). Tailwind los expone como bg-season, text-season, bg-night…
• Variantes de Tailwind: fest: (cualquier temporada), halloween: y navidad: (solo esa). Ej.: bg-white fest:bg-white/[0.04] navidad:border-red-500.
• Decoraciones que cambian de forma según la temporada: SeasonMark (calabaza/árbol), SeasonFlyer (murciélago/copo), SeasonCorner (telaraña/guirnalda) en src/components/season/.
• Lo que solo existe con temporada: FestiveHero (hero), PageHeader, RealCommunity, HackIntro.
• Las páginas dependientes de la temporada son SSR (prerender = false).

Añadir una temporada nueva (p. ej. Reyes, Semana Santa…)

1. Añadirla a THEMES (src/lib/site-theme.ts) y a SEASON_CONTENT (src/lib/season.ts).
2. Definir sus tokens en src/styles/seasons.css (+ variante x: en tailwind.config.mjs si quieres estilos propios).
3. Generar sus imágenes (overlay, foto del hero y de la comunidad). Las de Navidad se generan con python3 tools/make-navidad-assets.py; sirve de plantilla.
4. Decoraciones: añadir su rama en SeasonMark/Flyer/Corner y los textos de la broma en COPY (src/scripts/hack-intro.ts).

Broma de entrada: /?hack=1 la fuerza (también sin temporada) · /?nohack la salta.

Panel interno y usuarios

Panel con la asistencia a cada Pivo (solo recuentos, nunca nombres ni emails), con login de usuario y contraseña.

Variables (Vercel → Settings → Environment Variables, marcadas como Sensitive)

• JWT_SECRET: firma las sesiones. Mínimo 32 caracteres; cambiarlo cierra todas las sesiones abiertas.
• ADMIN_PATH: ruta del panel (https://xauendevs.io/<ADMIN_PATH>). Mínimo 16 caracteres y un solo tramo (sin /). No está en el código: cualquier otra ruta da el 404 normal.

Sin alguna de las dos (o con valores demasiado cortos), el panel no existe y el login no emite sesiones. Para generarlas:

node -e "console.log(require('crypto').randomBytes(48).toString('base64url'))"

Usuarios

No hay registro público: las cuentas se crean con un script que escribe directamente en Turso (usa las credenciales de .env). La contraseña se pide por teclado, sin mostrarla, y debe tener al menos 12 caracteres.

pnpm user:create --email ana@example.com --name "Ana" --role admin
pnpm user:create --email ana@example.com --update   # nueva contraseña; cierra sus sesiones

Roles: admin (ve el panel) y member (puede iniciar sesión, pero aún no tiene nada que ver).

Cómo está montado

• src/lib/password.ts: hash PBKDF2-SHA256 (600.000 iteraciones, sal por usuario). Lo usan el servidor y el script.
• src/lib/auth.ts: JWT HS256 en una cookie HttpOnly, Secure, SameSite=Strict con prefijo __Host-, de 8 h. En cada petición se vuelve a leer el usuario de la base, así que borrarlo o cambiarle la contraseña o el rol surte efecto al momento.
• POST /api/auth/login y /api/auth/logout: solo aceptan peticiones desde la propia web (Sec-Fetch-Site, o Origin frente al host si el navegador no lo envía). Máximo 10 intentos por IP cada 15 min y bloqueo de la cuenta 15 min tras 5 fallos. Siempre responde lo mismo, exista o no el email.
• src/pages/[panel].astro: el panel. Los datos se pintan en el servidor y la página nunca se guarda en caché.