Documento interno · Arquitectura
Los 7 dominios del grupo y este sitio de diseño salen del mismo proyecto Eleventy. Esta página explica cómo construir, correr, extender y verificar todo el sistema.
01 / El pipeline
Entradas
Proceso (scripts/build.js)
Salidas
* Los PDF no están en git: se regeneran con scripts/harvest.sh desde los sitios legados.
02 / Construir y correr
| Comando | Qué hace |
|---|---|
npm install | Instala dependencias y copia los assets vendored (postinstall: Alpine, HTMX, fuentes woff2). |
npm run build | Tailwind → src/assets/css/main.css, luego Eleventy ×8 → dist/<dominio>/ (7 sitios + diseno). |
node scripts/build.js --only=mim,migsa | Build parcial de un subconjunto de sitios. |
SITE_ID=mibqro node scripts/build.js | Build de un solo sitio (equivale a --only=mibqro). |
npm run serve | Servidor estático zero-dep en http://localhost:8080 con índice de sitios en /. |
npm start | build + serve en un solo paso. |
npm run qa | Batería de verificación: datos, enlaces, meta, HTML, a11y, contraste, sitemap, perf. |
./scripts/harvest.sh | Descarga los PDF (catálogos y legales) desde los sitios legados — no se versionan en git. |
Prerrequisitos: Node 20+. Playwright (raíz del repo) solo para las capturas QA — requiere executablePath al headless-shell cacheado (ver qa/shots-mim.js).
03 / Eleventy en la práctica
Cascada de datos
src/_data/sites/<id>.json → mapa global sites; el sitio activo se lee como sites[siteId].src/_data/siteId.js → process.env.SITE_ID (lo fija el build loop).src/_data/shared/*.json → contenido compartido (familias, catálogos, directorio…).src/_data/siteOrder.json → los 7 ids comerciales (diseno queda fuera).pages/pages.11tydata.js restaura el mapa sites vía eleventyComputed (el front matter sites: lo ocultaría).Filtrado multi-sitio
---
sites: all # los 7 comerciales
sites: branches # los 7 menos mim
sites: [mim] # solo grupo-mim.com
sites: [diseno] # solo este sitio
---eleventy.config.js pre-escanea el front matter y mete a ignores lo que no aplica al SITE_ID activo. Cada página declara su permalink explícito (sin prefijo /pages).
Filtros propios
| url / | href — anteponen el path prefix del dominio (externos y anchors intactos).| interpolate(site) — resuelve {name} {short} {city} {phone}… en metadescripciones.| digits — "(55) 58 99 24 00" → "5558992400" para tel:+52….| yearsSince — años desde 1972 (el "54+" se actualiza solo).Parciales y macros
Todo bloque repetido es un parcial en src/_includes/partials/ (header, footer, hero, cards, spec-table, aviso-modal, contact-form…). Los macros viven en icon.njk y logo-block.njk. Ojo Nunjucks: un macro importado no ve el contexto global — importar siempre {% import x with context %} cuando use shared.* o sites.*.
04 / Assets
En git
Fuera de git (regenerables)
scripts/harvest.sh.dist/ completo → npm run build.qa/shots/ → scripts de qa/.src/assets/css/main.css → npm run build:css.Optimización de imágenes
scripts/optimize-images.js y optimize-photos.js (sharp): héroes 1920w, tarjetas 800w, thumbs 400w, webp q80. Las páginas referencian siempre las variantes img/opt/; los originales quedan como máster.
05 / Extender el sistema
Nueva página (todos los sitios)
src/pages/mi-pagina.njk con layout: layouts/base.njk, sites: all, permalink: /mi-pagina/, title y description (con tokens {name}…).nav de cada sites/*.json que aplique.npm run build + npm run qa en verde.Nuevo sitio (p. ej. 8.ª filial)
src/_data/sites/nueva.json (copiar una existente: dominio, acento, contacto, nav, hero/secondary images, aviso).siteOrder.json y a SITES en scripts/build.js.shared/directorio.json y en shared/avisos.json.scripts/redirects.js y build completo.06 / Verificación
validate-data
Esquema de _data + cruce con assets en disco.
check-links
0 enlaces internos rotos en los 8 dominios.
check-meta
Título, descripción, canonical y OG por página.
check-html
Doctype, un h1, etiquetas balanceadas, & escapado.
check-a11y
Alt, labels, títulos de iframe.
check-contrast
Ratios WCAG de acentos × usos con texto.
check-sitemap
Sitemaps bien formados, URLs existentes.
check-perf
Peso de páginas; imágenes >500 KB sin webp.
Todo se corre con npm run qa. Las capturas visuales (Playwright) están en qa/shots-mim.js y qa/shots-branches.js.
07 / Despliegue y runtime
Hoy — estático
dist/<dominio>/ es un sitio estático completo: sirve en cualquier host (IIS, nginx, Netlify…).<dominio>.web.config → web.config (IIS) o incluir el .nginx.conf — en deploy/redirects/.forms.live: false).Mañana — fase ERP (ADR-001)
MimPortal.Sitios por dominio en IIS: sirve el estático + endpoints /api/* mismo origen (catálogos, contacto).MimPortal.Entities; sitios sin autenticación, rol DB mim_web de solo lectura.docs/ARCHITECTURE.md.Mapa del proyecto
sites/redesign/ ├── eleventy.config.js # config + filtros + filtrado multi-sitio ├── tailwind.config.js # tokens (acero, naranja, fuentes, radius 0) ├── scripts/ # build, serve, harvest, sitemap, redirects, checks… ├── src/ │ ├── _data/ # sites/<id>.json · shared/*.json · siteOrder │ ├── _includes/ # layouts + partials (header, footer, hero…) │ ├── pages/ # plantillas con `sites:` y `permalink` │ ├── styles/main.css # entrada Tailwind + clases de componente │ └── assets/ # img (originales + opt webp), fonts, vendor, PDF* ├── deploy/redirects/ # 7 dominios × (csv · web.config · nginx) ├── qa/ # scripts de captura y overflow └── docs/ # ARCHITECTURE.md + research/ (5 documentos)
← Volver al Sistema de Identidad Digital