documentacion

Análisis y Documentación de Roms43

Este documento proporciona un análisis exhaustivo del proyecto roms43, desglosando la estructura, componentes, configuraciones y tecnologías empleadas en la construcción del sitio.

1. Visión General del Proyecto

Roms43 (Roms en español) es un sitio web rápido y moderno de contenido basado en generador de sitios estáticos (SSG). Está estructurado para servir como una biblioteca y blog de juegos retro (ROMs), con soporte para taxonomías (categorías, series, tags) y funcionalidad de búsqueda.

2. Tecnologías Principales y Stack

• Generador de Sitios Estáticos (SSG): Hugo (Extendido para soporte nativo SCSS/SASS).
• Gestor de Paquetes y Tareas: Node.js (vía NPM o Yarn) para dependencias de desarrollo y scripts de compilación (package.json).
• Tema Base: logbook-hugo versión 2.2.5 (Autor original: gethugothemes).
• Procesador CSS: PostCSS (configurado con Autoprefixer y PurgeCSS a través de postcss.config.js).
• Lenguaje de Plantillas: Go Templates (utilizado extensivamente en la carpeta layouts/).

3. Componentes Frontend (Assets y Librerías)

El proyecto utiliza un conjunto sólido de librerías en el frontend para manejar la interfaz de usuario:

• Framework CSS: Bootstrap 5 (o similar compatible con las utilidades de grid y spacing configuradas en style.scss).
• Iconografía: Font Awesome 6 Free (Brands, Icons, Regular, Solid).
• Tipografía:
  • Gestionada mediante webfont-loader (v2).
  • Fuente Primaria y Secundaria: Open Sans y Lato servidas desde Google Fonts.
• Librerías de UI/UX:
  • Swiper (swiper-bundle.js / .css): Utilizado para los sliders de artículos destacados, slider de consolas y galería.
  • GLightbox (glightbox.js / .css): Proporciona los popups modales e imágenes ampliadas (lightboxes).
• Scripts Personalizados (Vanilla JS):
  • script.js: Controlador central de interacciones del DOM y carruseles.
  • search.js: Funcionalidad de motor de búsqueda de cliente leyendo desde el JSON generado por Hugo.
  • consoles-slider.js, gallery-slider.js, tab.js, accordion.js: Scripts modulares.

4. Estructura de Directorios

La estructura sigue la convención estándar y organizada de un proyecto avanzado de Hugo:

• config/: Carpeta principal de configuración dividida modularmente.
  • _default/hugo.toml: Configuración global, cachés, módulos y definición de taxonomías.
  • _default/params.toml: Datos vitales del sitio, perfiles sociales, plugins, scripts de tracking, SEO.
  • _default/menus.es.toml: Menús de navegación específicos del idioma.
• content/: Todos los artículos, posts y páginas en formato Markdown (extensión .md).
• themes/logbook-hugo/: Código fuente del tema de interfaz de usuario.
  • assets/scss/: Hojas de estilo estructuradas (Mixins, Typografy, Custom, Components).
  • layouts/: Las plantillas HTML para la renderización.
• public/: Directorio autogenerado que contiene el sitio estático final.

5. Módulos y Análisis de Configuración

5.1 SEO y Analíticas

El sitio está completamente preparado para posicionamiento en buscadores:

• Generación de manifest.json (WebAppManifest) para integración PWA (Progressive Web App).
• Generación nativa de RSS feeds y searchindex.json.
• Integraciones disponibles con Google Analytics (G-Q0WQC67M86), Matomo, Baidu, Plausible y Counter Analytics.
• Plantillas OpenGraph (basic-seo.html) listas para Twitter y Facebook.

5.2 Compilación y Optimización (Performance)

• Scripts Asíncronos: Modificaciones recientes garantizan que tanto bootstrap.js como la concatenación de los plugins JS (Swiper, GLightbox, etc.) se carguen mediante referencias externas (<script src="...">) y utilizando el atributo defer.
• Manejo de CSS: Hugo compila SASS a CSS en tiempo de construcción y PostCSS lo minimiza, purgando el CSS no utilizado (@fullhuman/postcss-purgecss).
• Optimización de Imágenes: Usando la librería nativa de manipulación de imágenes de Hugo (filtro Lanczos, calidad 90 por defecto).

6. Pipeline de Despliegue (CI/CD)

El proyecto contiene múltiples archivos de despliegue listos para la integración continua:

• Vercel: Utiliza vercel.json y el script vercel-build.sh para gestionar instalaciones de dependencias y compilar mediante hugo --gc --minify.
• GitLab CI: Configurado con .gitlab-ci.yml para el pipeline en caso de usar el ecosistema de GitLab.

7. Componentes de UI Clave Identificados

1. Tarjetas de Descarga (descargas.html): Shortcode personalizado importado en roms43 para presentar opciones de descarga desde servicios en la nube con un estilo tipo “card” (#184397 hover background).
2. Taxonomías (terms.html): Página donde se listan dinámicamente las Series, Etiquetas (Tags) y Categorías disponibles con contadores badge adaptativos.
3. Header Search Panel: Motor de búsqueda integrado directamente en la barra de navegación para búsqueda instantánea.
4. Cookie Consent & PWA: Scripts nativos para solicitar permiso de cookies y configurar el sitio como una aplicación web instalable en dispositivos móviles.