MarkeUp Blog Obsidian System
Arquitectura de todo el sistema

Arquitectura de todo el sistema

#tag-1 #tag-2

Arquitectura y Mapeo del sistema

Resumen General del Ecosistema de Software: MarkeUP

Este documento actúa como el mapa de dependencias, responsabilidades e interconexiones de los archivos que componen el ecosistema. Está organizado de forma jerárquica, situando primero los componentes globales y estratégicos, seguidos de la lógica y componentes de interfaz, y finalmente las utilidades y scripts.

📂 1. Núcleo Global, Configuración y Documentación Maestra

[[BLUEPRINT]]

  • Ruta: /Users/ernestouriszar/markeup/BLUEPRINT.md
  • Responsabilidad: Plano maestro y hoja de ruta estratégica del ecosistema “MarkeUp”. Funciona como la “fuente de la verdad” para la arquitectura, el stack tecnológico y el estado de desarrollo del proyecto. Define los estándares de seguridad (modelo [[Zero-Server Storage]]), la estructura de directorios, la configuración de la infraestructura técnica ([[Astro]], [[Tailwind]], [[Obsidian]]) y el progreso detallado a través de sus fases de implementación, desde los cimientos hasta la optimización avanzada de rendimiento y diseño “[[Zen]]”.
  • Relaciones y Dependencias:
    • Depende de: N/A (Es un documento de referencia interna y especificación).
    • Dependen de este: Todos los archivos del proyecto (sirve como guía de arquitectura para cualquier mantenimiento o expansión futura).
  • Observaciones útiles: El archivo es fundamental para entender la filosofía del proyecto: rendimiento extremo (Astro 6), enfoque en componentes y la integración con Obsidian como gestor de contenido. Indica que el proyecto ha alcanzado un estado de “Finalizado y Optimizado” en mayo de 2026, lo que implica que cualquier modificación debe respetar el alto nivel de performance (Lighthouse 100/100) y la estructura de transiciones de vista definida.

[[SYSTEM_INSTRUCTIONS]]

  • Ruta: /Users/ernestouriszar/markeup/SYSTEM_INSTRUCTIONS.md
  • Responsabilidad: Documento maestro de directrices para la IA del proyecto. Define el contexto operativo, las tecnologías utilizadas, los objetivos de calidad y las reglas que debe seguir la IA al asistir en el desarrollo y mantenimiento del proyecto. Actúa como fuente central de referencia para garantizar coherencia técnica, estética y metodológica.
  • Relaciones y Dependencias:
    • Archivos de los que depende: No tiene dependencias directas.
    • Archivos que dependen de este: [[sync_context.sh]] y herramientas de [[IA]] que carguen el contexto del proyecto.
  • Observaciones útiles: Establece [[Astro]] 6, [[Tailwind]] 4 y [[DaisyUI]] 5 como tecnologías base. Define [[MarkeUp]] OS 5.1 como [[CMS]] apoyado en [[GitHub]] API y contenido procedente de [[Obsidian]]. Prioriza [[SEO]], accesibilidad [[WCAG]], rendimiento [[Lighthouse]], despliegue mediante Cloudflare Pages y mantenimiento de [[View Transitions]] fluidas. Indica además que las explicaciones técnicas deben adaptarse a un usuario con conocimientos básicos de programación y que cualquier cambio estructural debe plantearse mediante alternativas seguras antes de su aplicación.

[[astro.config.mjs]]

  • Ruta: /Users/ernestouriszar/markeup/astro.config.mjs
  • Responsabilidad: Configuración central del framework Astro y sus integraciones. Este archivo actúa como el punto de entrada para la configuración global del proyecto Astro. Define cómo se comporta el [[framework]] durante el desarrollo y la construcción (build), gestionando la integración de Vite y plugins específicos. En este caso particular, configura el plugin de Tailwind CSS junto con DaisyUI, definiendo los temas disponibles para el diseño de la interfaz y estableciendo una paleta de colores personalizada llamada “biodanza”.
  • Relaciones y Dependencias:
    • Depende de: [[package.json]] (para las dependencias de astro y @tailwindcss/vite), tailwind.config.js (si existiera una configuración externa, aunque aquí está embebida).
    • Dependen de este: Todos los componentes, layouts y páginas del sitio (al definir los estilos globales y los tokens de diseño que utiliza Tailwind/DaisyUI en toda la aplicación).
  • Observaciones útiles: La configuración de DaisyUI está inyectada directamente en el plugin de [[Vite]]. Esto significa que cualquier cambio en los temas debe hacerse aquí. El tema “biodanza” es una extensión personalizada que sobrescribe o añade colores base, lo cual es ideal para mantener la identidad visual del sitio de forma centralizada.

[[tailwind.config.mjs]]

  • Ruta: /Users/ernestouriszar/markeup/tailwind.config.mjs
  • Responsabilidad: Configuración global de [[Tailwind CSS ]]y animaciones personalizadas. Define la configuración principal de Tailwind [[CSS]] para el proyecto. Especifica las rutas que deben analizarse para generar las clases utilizadas, amplía el tema con animaciones y keyframes personalizados, e integra DaisyUI como plugin para proporcionar componentes y variables de diseño.
  • Relaciones y Dependencias:
    • Archivos de los que depende: tailwindcss, daisyui y todos los archivos ubicados en ./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}.
    • Archivos que dependen de este: Todos los componentes y páginas que utilicen clases Tailwind CSS; todos los componentes que utilicen las animaciones fade-blur-in, loop-zoom, fade-blur-zoom y slide-up; todos los componentes que utilicen variables y componentes de DaisyUI.
  • Observaciones útiles: Registra cuatro animaciones reutilizables mediante keyframes personalizados orientados a efectos de aparición, desenfoque, zoom y desplazamiento vertical. El escaneo de contenido determina qué clases CSS se incluyen en la compilación final, por lo que las rutas configuradas deben mantenerse actualizadas. DaisyUI se carga como plugin global, permitiendo el uso de temas, colores semánticos y componentes predefinidos en todo el proyecto.

[[package.json]]

  • Ruta: /Users/ernestouriszar/markeup/package.json
  • Responsabilidad: Manifiesto de dependencias y [[scripts]] de automatización del proyecto. Este archivo es el núcleo de gestión del proyecto. Define los metadatos de la aplicación (nombre, versión, descripción), lista todas las dependencias necesarias para el funcionamiento del ecosistema ([[Astro]], [[Tailwind]], [[DaisyUI]], herramientas de procesamiento, etc.) y establece los comandos personalizados (scripts) necesarios para ejecutar el servidor de desarrollo, construir el sitio para producción y realizar tareas de mantenimiento. Es el archivo que npm/pnpm utiliza para reconstruir el entorno de trabajo.
  • Relaciones y Dependencias:
    • Depende de: N/A (Es el archivo raíz que define la estructura del proyecto).
    • Dependen de este: [[package-lock.json]] (que bloquea las versiones de lo aquí definido), [[astro.config.mjs]] (que utiliza las librerías aquí listadas), y todo el proceso de despliegue en Vercel/Netlify.
  • Observaciones útiles: El archivo debe mantenerse limpio de dependencias no utilizadas para asegurar que el peso final del proyecto y el tiempo de instalación sean óptimos. Cualquier cambio en las versiones aquí debe ir acompañado de una actualización en el package-lock.json mediante la ejecución de npm install. Es crucial revisar periódicamente los scripts aquí definidos para asegurar que los flujos de trabajo (build, preview, dev) sigan alineados con las últimas optimizaciones del framework Astro 6.

[[package-lock.json]]

  • Ruta: /Users/ernestouriszar/markeup/package-lock.json
  • Responsabilidad: Registro determinista y bloqueador de versiones de dependencias. Este archivo es generado automáticamente por npm cada vez que se realizan cambios en el árbol de node_modules o en el package.json. Su función crítica es registrar el árbol de dependencias exacto —incluyendo versiones específicas, hashes de integridad y ubicaciones de origen— para garantizar que el proyecto se instale de manera idéntica en cualquier entorno (desarrollo, CI/CD o producción), evitando las inconsistencias que podrían surgir por actualizaciones menores de paquetes.
  • Relaciones y Dependencias:
    • Depende de: [[package.json]] (del cual toma las definiciones de alto nivel).
    • Dependen de este: Todos los procesos de instalación (npm install), el sistema de despliegue y el entorno de desarrollo de todos los colaboradores del proyecto.
  • Observaciones útiles: Aunque el archivo puede ser extenso, nunca debe editarse manualmente. Es imperativo que se mantenga bajo control de versiones (Git) para asegurar la reproducibilidad del proyecto. Su presencia no solo garantiza estabilidad, sino que también mejora la velocidad de instalación al evitar que npm tenga que resolver el árbol de dependencias desde cero cada vez.

[[README]]

  • Ruta: /Users/ernestouriszar/markeup/README.md
  • Responsabilidad: Documento de presentación y guía de inicio del proyecto. Sirve como la carta de presentación pública y la guía fundamental para cualquier usuario o colaborador que acceda al repositorio. Proporciona una descripción clara del proyecto, explica su propósito, destaca el stack tecnológico utilizado (Astro 6, Tailwind CSS v4, DaisyUI v5) y ofrece instrucciones básicas sobre cómo clonar, instalar las dependencias y ejecutar el entorno de desarrollo local.
  • Relaciones y Dependencias:
    • Depende de: [[package.json]] (del cual toma las referencias para las instrucciones de ejecución) y [[BLUEPRINT]] (del cual suele derivar la información de arquitectura).
    • Dependen de este: Usuarios externos, otros desarrolladores que deseen contribuir al proyecto y la documentación del repositorio en [[GitHub]].
  • Observaciones útiles: Es la puerta de entrada al repositorio. Su mantenimiento es crucial para reflejar el estado actual del proyecto (actualmente marcado como “Finalizado y Optimizado” en mayo de 2026). Se recomienda que cualquier cambio importante en el flujo de trabajo (como una nueva forma de despliegue o cambio de comandos) se vea reflejado aquí inmediatamente para mantener la coherencia con el BLUEPRINT.md.

[[project_map.txt]]

  • Ruta: /Users/ernestouriszar/markeup/project_map.txt
  • Responsabilidad: Índice de rutas y estructura jerárquica del proyecto. Funciona como un esquema de navegación interna del repositorio. Mapea la ubicación de los archivos clave, directorios de contenido y componentes críticos, permitiendo una visión rápida del árbol de directorios sin tener que explorar toda la estructura del sistema de archivos. Es una herramienta de orientación rápida para desarrolladores que necesitan localizar rápidamente componentes, assets o configuraciones dentro del proyecto.
  • Relaciones y Dependencias:
    • Depende de: N/A (Es un documento de referencia estático que refleja la arquitectura definida en [[BLUEPRINT]]).
    • Dependen de este: El desarrollador (como guía de consulta rápida) y, potencialmente, cualquier proceso de auditoría o documentación técnica.
  • Observaciones útiles: A diferencia de BLUEPRINT.md, que explica el “porqué” y la estrategia, project_map.txt se enfoca puramente en el “dónde”. Es un complemento excelente para cuando el proyecto escala y la jerarquía de carpetas se vuelve más profunda, asegurando que la estructura de nombres y ubicaciones se mantenga consistente y legible.

🎨 2. Capa de Estilos Globales y Diseño (Design Tokens)

[[global.css]]

  • Ruta: /Users/ernestouriszar/markeup/src/styles/global.css
  • Responsabilidad: Orquestador Central de Estilos (Main Stylesheet). Su función es importar y consolidar todos los módulos de estilo (bases, componentes y contenido editorial) y configurar las utilidades personalizadas que utiliza el sitio web. Es el archivo que el MainLayout.astro carga para inyectar la identidad visual en todas las páginas.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]], [[components.css]], [[post-content.css]] y Tailwind CSS.
    • Dependen de este: El componente raíz [[MainLayout.astro]] y, por extensión, todos los componentes del sitio.
  • Observaciones útiles: Utiliza directivas de importación para organizar el CSS por responsabilidades. Define la clase .reveal y su estado .reveal-active para gestionar apariciones físicas fluidas en scroll, y añade la utilidad .text-balance.

[[base.css]]

  • Ruta: /Users/ernestouriszar/markeup/src/styles/base.css
  • Responsabilidad: Motor de Estilos Globales y [[Sistema de Diseño (Design Tokens).]] Este archivo es el punto único de consolidación para la identidad visual de “[[MarkeUp]]”. Combina la definición de tipografías variables, la configuración de variables [[CSS]] (Design Tokens) y las animaciones globales del sitio, asegurando que todos los componentes compartan un lenguaje visual coherente.
  • Relaciones y Dependencias:
    • Depende de: Recursos de fuentes en /public/fonts/ y el motor de [[Tailwind]]/[[DaisyUI]].
    • Dependen de este: Todos los componentes (.astro) que requieren acceso a variables de diseño o animaciones predefinidas.
  • Observaciones útiles: Define tokens semánticos en espacio de color[[ oklch ]](--color-primary, etc.) e importa la tipografía variable Roboto Flex ajustando sus ejes dinámicos. Centraliza las animaciones core como fadeBlurIn, loop-zoom y slide-up.

[[theme.css]]

  • Ruta: /Users/ernestouriszar/markeup/src/styles/base/theme.css
  • Responsabilidad: Configuración del Sistema de Diseño (Design Tokens y Temas). Define las variables de diseño y los esquemas de color (temas) del proyecto utilizando la arquitectura de CSS moderno y el motor de DaisyUI. Es el corazón de la identidad visual de “MarkeUp”.
  • Relaciones y Dependencias:
    • Depende de: Tailwind CSS y DaisyUI como motores de renderizado.
    • Dependen de este: Todos los componentes visuales del sitio, ya que define el tema biodanza como el predeterminado y configura las fuentes corporativas.
  • Observaciones útiles: Los valores del tema biodanza se configuran en formato [[oklch]] para una percepción de color óptima y uniforme. La propiedad themes: all permite conmutaciones rápidas.

[[fonts.css]]

  • Ruta: /Users/ernestouriszar/markeup/src/styles/base/fonts.css
  • Responsabilidad: Gestión de [[Tipografía]] Personalizada. Centraliza la declaración de las fuentes tipográficas del proyecto. Utiliza la regla @font-face para importar tipografías optimizadas en formato woff2, asegurando una carga eficiente y un rendimiento óptimo (font-display: swap).
  • Relaciones y Dependencias:
    • Depende de: Los archivos de fuentes ubicados en el directorio /public/fonts/.
    • Dependen de este: [[global.css]] (donde se integra para aplicar las fuentes a todo el sitio).
  • Observaciones útiles: Declara ‘Roboto Flex’, permitiendo variar peso (100 a 1000) y anchura (25% a 151%) desde un único archivo físico de tipografía, optimizando críticamente las llamadas de red.

[[reset.css]]

  • Ruta: /Users/ernestouriszar/markeup/src/styles/base/reset.css
  • Responsabilidad: Normalización y Configuración Base (Reset de Estilos). Establece la base tipográfica y estructural del sitio. Su objetivo es unificar el comportamiento de los elementos HTML nativos para asegurar una experiencia visual consistente, aplicando una escala tipográfica coherente basada en la fuente Roboto Flex.
  • Relaciones y Dependencias:
    • Depende de: [[fonts.css]] (para la definición de la tipografía base).
    • Dependen de este: Todos los componentes del sitio, al ser importado globalmente a través de [[MainLayout.astro]].
  • Observaciones útiles: Forza encabezados a usar font-sans con text-wrap: balance e inyecta la escala calculada en la capa @layer base de Tailwind para su correcto orden de precedencia.

[[components.css]]

  • Ruta: /Users/ernestouriszar/markeup/src/styles/components.css
  • Responsabilidad: Motor de Estilos de Componentes (Design System). Centraliza la personalización visual de los componentes reutilizables (como botones, tarjetas y elementos de hero). Aprovecha las directivas de Tailwind CSS para aplicar estilos avanzados, transiciones físicas y efectos de sombras que definen la estética “premium” y moderna de Oasis Biodanza.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] y [[theme.css]] (para acceder a las variables CSS, tokens de diseño y tipografías).
    • Dependen de este: Todos los componentes visuales ([[Hero.astro]], [[CTA.astro]], etc.) que utilicen estas clases personalizadas.
  • Observaciones útiles: Implementa la lógica avanzada de .btn-premium, variaciones .card-featured, e interfaces traslúcidas .glass ([[Glassmorphism]]). Gestiona el comportamiento de escala del texto masivo del título .hero-title-premium. Utiliza la directiva @reference para heredar las utilidades de Tailwind.

[[post-content.css]] (Componentes / Raíz)

  • Rutas asociadas:
    • /Users/ernestouriszar/markeup/src/styles/components/post-content.css
    • /Users/ernestouriszar/markeup/src/styles/post-content.css
  • Responsabilidad: Motor de Estilos para Contenido Editorial ([[Tipografía]] y Legibilidad). Define los estilos específicos aplicados a la clase .prose, encargada de renderizar el contenido [[Markdown]] de los artículos del blog. Su objetivo es optimizar la experiencia de lectura (reducir la fatiga visual) y asegurar que todos los elementos generados desde archivos Markdown sigan la línea gráfica del proyecto.
  • Relaciones y Dependencias:
    • Depende de: Las variables de diseño definidas en [[base.css]] y [[theme.css]].
    • Dependen de este: El componente [[…slug].astro] para estructurar el blog.
  • Observaciones útiles: Modula los encabezados con text-wrap: balance y los párrafos con text-wrap: pretty para evitar líneas huérfanas. Limita el ancho de lectura a un confortable máximo de max-w-3xl e introduce selectores específicos para elementos hijos nativos del Markdown (blockquote, table, img).

🏗️ 3. Estructura Raíz y Gestión de Datos

[[MainLayout.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/layouts/MainLayout.astro
  • Responsabilidad: Componente de estructura raíz (Layout Global). Define la arquitectura base de todas las páginas del sitio. Se encarga de inyectar el [[SEO]] crítico, gestionar la carga de estilos globales, configurar las transiciones de vista ([[View Transitions]]) y envolver el contenido principal entre el Header y el Footer. Es el contenedor que garantiza que todas las secciones del sitio compartan la misma identidad visual, navegación y lógica de cookies/avisos legales.
  • Relaciones y Dependencias:
    • Depende de: [[HeadSeo.astro]], [[Header.astro]], [[Footer.astro]], [[Privacidad.astro]], [[Legal.astro]], [[CookieBanner.astro]], [[Cookies.astro]] y [[global.css]].
    • Dependen de este: Todas las páginas de la aplicación (como [[index.astro]] de la raíz, páginas de blog, etc.).
  • Observaciones técnicas:
    • [[ClientRouter]]: Implementa ClientRouter (antiguo ViewTransitions) para una navegación fluida tipo [[SPA]], optimizando la carga entre páginas.
    • Gestión de Temas: Incluye un script inline en el <head> que recupera el tema del localStorage y lo aplica antes del renderizado del contenido para evitar el efecto “flicker” o parpadeo visual.
    • Scroll y Animaciones: Define un scroll-margin-top para que los enlaces internos a IDs se posicionen correctamente bajo el header fijo y aplica transiciones suaves de vista para cambios de tema.
    • Accesibilidad: Configura scroll-smooth a nivel de etiqueta html.

[[content.config.ts]]

  • Ruta: /Users/ernestouriszar/markeup/src/content.config.ts
  • Responsabilidad: Configuración del motor de contenido (Content Collections). Este archivo es el núcleo de la arquitectura de datos del blog. Define el esquema [[(schema)]] y el cargador (loader) para la colección de artículos del sitio web, asegurando la consistencia de los metadatos mediante la validación con [[Zod]]. Su función principal es garantizar que cada entrada de blog tenga los campos necesarios para el SEO, el control de versiones (fechas de creación/modificación) y la correcta renderización de imágenes, facilitando una gestión de contenido tipada y robusta.
  • Relaciones y Dependencias:
    • Depende de: astro:content (biblioteca central de Astro), zod (librería de validación de esquemas).
    • Dependen de este: Todos los archivos Markdown (.md) ubicados en src/content/blog/, que deben cumplir con el contrato de datos aquí definido para ser correctamente procesados por el sitio.
  • Observaciones útiles:
    • Validación robusta: Implementa pre-procesamiento para los campos tags y keywords, lo que permite introducir etiquetas tanto como strings separados por comas o como arrays de JavaScript sin generar errores.
    • Estructura de archivos: Está configurado para ignorar directorios internos como _templates, .obsidian y _assets mediante la propiedad exclude del glob loader, manteniendo la limpieza del repositorio.
    • SEO-Friendly: Incluye campos específicos para la gestión del ciclo de vida del contenido (status, published, readingTime), lo que permite filtrar fácilmente qué contenido es visible en producción y cuál está en fase de borrador o revisión.

[[contenido.json]]

  • Ruta: /Users/ernestouriszar/markeup/src/data/contenido.json
  • Responsabilidad: Archivo de configuración de datos maestros ([[Data-Driven Content)]]. Funciona como una base de datos centralizada (fuente única de verdad) para los contenidos dinámicos del sitio. Permite gestionar información operativa y de contacto sin necesidad de modificar el código fuente de los componentes .astro. Al separar los datos de la lógica de presentación, se facilita el mantenimiento, las actualizaciones de horarios y los cambios en la información de contacto para cualquier miembro del equipo administrativo.
  • Relaciones y Dependencias:
    • Depende de: Es consumido por los componentes principales (como [[Hero.astro]], [[Facilitador.astro]], [[Horarios.astro]] y [[Localizacion.astro]]) mediante importaciones directas o a través de una capa de servicio.
    • Dependen de este: Prácticamente todos los componentes que muestran información variable de negocio.
  • Observaciones útiles: El archivo está segmentado en objetos lógicos (hero, facilitador, contacto, clases), lo que permite una edición intuitiva y predecible. Es fundamental asegurar que cualquier cambio en las claves de este [[JSON]] se refleje en los archivos .astro que consumen estos datos para evitar errores de compilación o datos indefinidos. Es ideal para alimentar futuras funcionalidades como listados dinámicos de eventos o cambio de precios de clases.

🌐 4. Orquestación de Páginas y Enrutamiento Dinámico

[[index.astro]] (Raíz de la Landing)

  • Ruta: /Users/ernestouriszar/markeup/src/pages/index.astro
  • Responsabilidad: Página principal y orquestador de la landing. Define la página de inicio del sitio. Actúa como contenedor principal de la landing, configurando el layout general, los metadatos SEO básicos y ensamblando todas las secciones visuales en el orden en que se muestran al usuario.
  • Relaciones y Dependencias:
    • Archivos de los que depende:
      • [[MainLayout.astro]]
      • [[Hero.astro]], [[QueEs.astro]], [[Principios.astro]], [[RolandoToro.astro]], [[Facilitador.astro]], [[Testimonios.astro]], [[CTA.astro]], [[Cursos.astro]], [[Descuentos.astro]], [[Horarios.astro]], [[Localizacion.astro]], [[Contacto.astro]], [[SectionDivider.astro]].
    • Archivos que dependen de este: No determinable a partir de este archivo.
  • Observaciones útiles: No contiene lógica de negocio ni procesamiento de datos de forma directa. Su función es exclusivamente estructural y de composición. Define el título y la descripción SEO de la página principal y organiza las distintas secciones de la landing mediante componentes reutilizables separados por divisores visuales. Cualquier cambio en el orden de las secciones o en los metadatos principales del sitio se realiza desde este archivo.

[[index.astro]] (Panel del Blog)

  • Ruta: /Users/ernestouriszar/markeup/src/pages/blog/index.astro
  • Responsabilidad: Página de listado y filtrado dinámico de artículos. Esta página actúa como el índice principal de tu colección de contenidos. Está diseñada con una jerarquía visual clara que destaca el artículo más reciente como un “Hero” de blog, seguido de una cuadrícula de artículos anteriores. Incluye un sistema de filtrado dinámico por subtipos, lo que permite a los usuarios navegar por las distintas categorías de contenido sin recargar la página.
  • Relaciones y Dependencias:
    • Depende de: Colección de posts en src/content/blog/, [[MainLayout.astro]], y componentes de assets (Image de Astro).
    • Lógica de datos: Obtiene la colección blog mediante getCollection, filtra automáticamente por estado (published: true) y tipo (Blog), y los ordena descendentemente por su identificador numérico (id).
  • Observaciones útiles: Separa automáticamente el post más reciente (heroPost) del resto de entradas (gridPosts), creando una estructura de revista editorial. Utiliza un select (subtype-select) que interactúa mediante JavaScript en el cliente para ocultar/mostrar artículos (filterable-item) basándose en su data-subtype, con soporte para estados vacíos (no-results). El script de filtrado está registrado con astro:page-load para garantizar compatibilidad total con View Transitions. Formatea fechas con el local es-ES.

[[…slug].astro]

  • Ruta: /Users/ernestouriszar/markeup/src/pages/blog/\[...slug\].astro
  • Responsabilidad: Generador dinámico de páginas de [[Blog]] (Ruta de Colección). Este archivo es una ruta dinámica de Astro encargada de procesar, validar y mostrar los artículos del blog. Implementa un sistema de filtrado para asegurar que solo se rendericen entradas de tipo “blog” que estén marcadas como publicadas (published: true). Además, gestiona la navegación entre posts (siguiente/anterior) basándose en un índice numérico, garantizando una experiencia de lectura fluida.
  • Relaciones y Dependencias:
    • Depende de: astro:content (para obtener los datos de la colección blog), [[MainLayout.astro]] y render (para procesar el contenido Markdown/MDX).
    • Arquitectura: Utiliza la función getStaticPaths para generar las rutas en tiempo de compilación. Aplica una lógica de limpieza de slugs para ignorar extensiones de archivo (.md, .mdx) y rutas de etiquetas (tag/).
  • Observaciones útiles: Calcula automáticamente el post anterior y siguiente para facilitar la navegación lineal del usuario. Incluye un script cliente (setupCopyBtn) que permite al usuario copiar la URL del post al portapapeles con la [[API]] navigator.clipboard. Ofrece flexibilidad al permitir utilizar el id del archivo o el campo slug del [[Frontmatter]]. El orden de los posts se basa en el campo numérico id del Frontmatter (Number(a.data.id || 0)).

[[tag].astro]

  • Ruta: /Users/ernestouriszar/markeup/src/pages/tags/\[tag\].astro
  • Responsabilidad: Página dinámica de listado de artículos por etiqueta. Genera automáticamente una página estática para cada etiqueta existente en los artículos publicados del blog. Filtra el contenido, agrupa las entradas por etiqueta, muestra los artículos asociados a la etiqueta actual y presenta una nube de etiquetas con tamaños visuales proporcionales a su frecuencia de uso.
  • Relaciones y Dependencias:
    • Archivos de los que depende: [[MainLayout.astro]], astro:content (Colección de contenido “blog”).
    • Archivos que dependen de este: No determinable a partir de este archivo.
  • Observaciones útiles: Utiliza getStaticPaths() para generar rutas estáticas por etiqueta durante la compilación. Solo incluye artículos con type="Blog" y published=true. Normaliza las etiquetas convirtiéndolas a minúsculas y sustituyendo espacios por guiones. Calcula dinámicamente clases CSS para crear una nube de etiquetas escalada según la cantidad de artículos asociados. Cada artículo enlaza a su página individual mediante su slug y cada etiqueta enlaza a su correspondiente página de filtrado.

[[editor.astro]] (Oasis OS 5.1)

  • Ruta: /Users/ernestouriszar/markeup/src/pages/admin/editor.astro
  • Responsabilidad: Sistema de Administración y Control Maestro (“God-Tier Editor”). Este archivo constituye el entorno administrativo del proyecto. Funciona como un [[CMS]] interno que permite la gestión de contenidos Markdown y la personalización visual ([[CSS]] Builder) del sitio en tiempo real. Está diseñado con una capa de seguridad basada en un PIN para proteger el acceso a las funciones de edición y sincronización con GitHub.
  • Relaciones y Dependencias:
    • Depende de: [[MainLayout.astro]] (desactivando la navegación principal showNav={false}), y utiliza librerías externas implícitas en el cliente para la gestión de YAML y edición de texto.
    • Arquitectura: Se basa en una pantalla de bloqueo (lock screen) y una interfaz de usuario segmentada para separar la configuración de la edición de contenido.
  • Observaciones técnicas: Implementa una barrera mediante PIN guardado en localStorage, impidiendo el acceso a usuarios no autorizados. Permite gestionar tokens de [[GitHub]] (oasis_gh_token), usuarios y repositorios de manera local para habilitar la sincronización. Incluye herramientas para copiar colores y realizar ajustes visuales rápidos mediante una paleta interactiva. Preparado para flujos de trabajo de [[CI/CD]] (con placeholders para la lógica de syncFromGithub y saveCSS). La herramienta debe ser accesible solo bajo un entorno [[HTTPS]].

[[…route].ts]

  • Ruta: /Users/ernestouriszar/markeup/src/pages/open-graph/\[...route\].ts
  • Responsabilidad: Generador dinámico de imágenes [[Open Graph]] (OG). Este archivo utiliza la librería astro-og-canvas para crear dinámicamente imágenes de previsualización para los artículos del [[blog]]. En lugar de diseñar una imagen a mano por cada post, el sistema toma el título y la descripción del Frontmatter y genera un archivo de imagen único al vuelo durante el proceso de compilación (build), asegurando que cada enlace compartido en redes sociales luzca profesional y relevante.
  • Relaciones y Dependencias:
    • Depende de: astro:content (para obtener los datos de la colección blog) y astro-og-canvas (motor de renderizado de imágenes).
    • Arquitectura: Se ejecuta como una ruta de servidor/build ([[API]] endpoint) que intercepta las peticiones de imágenes para los posts del blog.
  • Observaciones útiles: Define un gradiente corporativo específico (verde y naranja) que mantiene la identidad de marca de “MarkeUp”. Integra el logo del sitio (favicon.svg), ajusta el tamaño del título y la descripción, y añade un borde distintivo. Solo procesa artículos marcados como published: true. La configuración de fuentes ([[Roboto Flex]]) y los colores están parametrizados en el objeto getImageOptions.

🧩 5. Componentes Atómicos de Interfaz (UI)

[[Hero.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Hero.astro
  • Responsabilidad: Componente de impacto visual y sección principal de bienvenida. Está diseñado para proyectar una imagen imponente y premium mediante una fotografía de fondo optimizada y una versión a gran escala del logo “Árbol de la Vida”. Utiliza animaciones cinemáticas (fade, blur, zoom) para crear una primera impresión memorable.
  • Relaciones y Dependencias:
    • Depende de: src/imagenes/hero.webp (imagen principal), public/favicon.svg (logo), y src/styles/components/hero.css (clases personalizadas .hero-title-premium y animaciones).
    • Dependen de este: [[index.astro]] de la raíz, sirviendo como el contenedor inicial “Above the fold”.
  • Observaciones útiles: Utiliza breakpoints agresivos (lg:, xl:, 2xl:) para ajustar el tamaño del logo. Mantener hero.webp optimizado es vital para los indicadores de rendimiento del [[Largest Contentful Paint (LCP) ]]en [[PageSpeed Insights.]]

[[QueEs.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/QueEs.astro
  • Responsabilidad: Componente de introducción conceptual (“¿Qué es?”). Actúa como la sección principal de explicación teórica del sitio. Su objetivo es definir la Biodanza de manera inspiradora y profesional, utilizando una estética visual limpia con efectos de [[glassmorphism]] y elementos decorativos orgánicos (círculos difusos en el fondo). Se apoya en un diseño asimétrico de tarjetas interactivas, culminando en una cita destacada.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (gestión de variables de diseño y temas de DaisyUI), así como de las animaciones globales de reveal para el efecto de aparición al hacer scroll.
    • Dependen de este: [[index.astro]] de la raíz, donde se sitúa como primera sección de contenido tras el Hero.
  • Observaciones útiles: La sección de cita final utiliza una arquitectura de capas (relative z-10) para destacar sobre el fondo decorativo. El uso de grid-cols asegura que las tarjetas se apilen correctamente en pantallas pequeñas sin sobrecargar la interfaz móvil.

[[Principios.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Principios.astro
  • Responsabilidad: Componente de presentación filosófica y teórica. Este componente es el vehículo narrativo para explicar los fundamentos teóricos de la Biodanza. Utiliza un estilo “Minimalismo Editorial”, caracterizado por el uso de gran tipografía (especialmente para indicadores numéricos), asimetría en el layout y una jerarquía tipográfica pensada para el consumo pausado y reflexivo de conceptos abstractos.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (gestión de variables de diseño y tipografía) y los estilos globales de selección y espaciado.
    • Dependen de este: [[index.astro]] de la raíz, actuando como sección de autoridad intelectual tras la introducción conceptual.
  • Observaciones útiles: La estructura es altamente jerárquica, utilizando una cuadrícula (grid) de 12 columnas que permite una gran flexibilidad visual. Los bloques de contenido están encapsulados semánticamente, lo cual beneficia la accesibilidad y el SEO. Es crucial mantener la relación entre el número de principio (ej. “02”) y su explicación.

[[RolandoToro.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/RolandoToro.astro
  • Responsabilidad: Componente de tributo biográfico al creador del sistema. Dedicado a honrar la figura de Rolando Toro, el creador de la Biodanza. Utiliza una estética visual cinematográfica, con una imagen a gran formato de fondo que reacciona con un zoom suave al hacer hover, contrastada con tipografía elegante y una arquitectura de cajas con glassmorphism.
  • Relaciones y Dependencias:
    • Depende de: src/imagenes/RolandoToro.jpeg (recurso fotográfico), [[base.css]] (variables de diseño y temas de DaisyUI).
    • Dependen de este: [[index.astro]] de la raíz, situándose como sección de fundamentos intelectuales y linaje histórico.
  • Observaciones útiles: Gestiona eficientemente capas y gradientes sobre la imagen (bg-gradient-to-r/t), asegurando el contraste y legibilidad del texto superpuesto. Al cargar una imagen fotográfica pesada, requiere optimización nativa.

[[Facilitador.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Facilitador.astro
  • Responsabilidad: Componente de perfil biográfico del guía. Diseñado para presentar al facilitador del centro de una manera personal y visualmente dinámica. Su característica más destacada es una animación CSS personalizada denominada “respira-color”, que alterna entre una imagen en blanco y negro con zoom neutro y una imagen a color con un efecto de zoom suave.
  • Relaciones y Dependencias:
    • Depende de: src/imagenes/fotoDiego.webp (recurso de imagen estática), [[base.css]] (variables de diseño y temas de DaisyUI).
    • Dependen de este: [[index.astro]] de la raíz, sirviendo como punto de confianza y autoridad humana antes de los bloques de conversión.
  • Observaciones útiles: El uso de <Image /> de Astro garantiza que la fotografía se procese y sirva de manera optimizada (WebP). La animación CSS está definida dentro del mismo archivo para garantizar el encapsulamiento.

[[Horarios.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Horarios.astro
  • Responsabilidad: Componente de gestión de agenda y bloques de clases. Presenta la oferta horaria de las sesiones de Biodanza (Iniciación y Profundización) con un enfoque de diseño editorial premium. Utiliza tipografía Serif, espaciado generoso y una jerarquía visual marcada para facilitar la lectura de los días y horas. Además, integra una “Alerta Inferior Premium” que destaca la política de clase de prueba.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (para el sistema de temas y paleta de colores) y elementos gráficos como /favicon.svg para el refuerzo de marca.
    • Dependen de este: [[index.astro]] de la raíz, ubicado como sección central de información logística.
  • Observaciones útiles: El componente es altamente adaptable mediante la constante clases, lo que permite modificar horarios o añadir nuevos grupos simplemente editando un objeto JavaScript. Emplea animaciones reveal para una aparición elegante al hacer scroll.

[[Localizacion.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Localizacion.astro
  • Responsabilidad: Componente de ubicación y contacto geográfico. Sirve como referencia visual y logística del centro de Biodanza Valladolid. Utiliza un diseño de “ventana de navegador” (mockup-window) de DaisyUI para presentar un mapa (o placeholder de mapa) de manera estética y profesional. Incluye una tarjeta de información flotante con glassmorphism que detalla la dirección exacta y un botón para redirigir a Google Maps.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (para los estilos de las tarjetas y el sistema de temas) y componentes de DaisyUI (mockup-browser).
    • Dependen de este: [[index.astro]] de la raíz, integrado como sección fundamental de información práctica.
  • Observaciones útiles: El componente incluye un script propio de IntersectionObserver para gestionar la animación de aparición (efecto reveal). Requiere la correcta configuración del enlace a Google Maps. La dirección especificada es Pío del Río Hortega, 14, Valladolid.

[[Cursos.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Cursos.astro
  • Responsabilidad: Componente de visualización de oferta formativa y metodología. Presenta la oferta de cursos y talleres de manera elegante. Utiliza una estética “premium” basada en efectos de glassmorphism, tipografía destacada y elementos visuales fluidos (círculos difusos de fondo) para resaltar el valor de los programas formativos. Facilita la conversión a través de una llamada a la acción clara.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (variables de diseño, espaciados y temas de DaisyUI/Tailwind), y utiliza clases de animación globales para el efecto reveal.
    • Dependen de este: [[index.astro]] de la raíz, actuando como sección informativa principal del catálogo de servicios.
  • Observaciones útiles: El diseño es modular: la lista de beneficios utiliza un mapeo (map) de datos en el propio componente, lo que facilita añadir o modificar puntos clave de la metodología sin alterar la estructura HTML. Se debe verificar el comportamiento de los círculos difusos de fondo en resoluciones móviles.

[[Descuentos.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Descuentos.astro
  • Responsabilidad: Componente de visualización de promociones y beneficios económicos. Diseñado para mostrar las diferentes facilidades económicas (bonos, descuentos por pronto pago, desempleo, etc.) que ofrece el centro. Utiliza un diseño de tarjetas de precios (pricing cards) con un estilo visual “premium” que incluye efectos de elevación 3D (hover 3D), iconos distintivos y una tipografía clara.
  • Relaciones y Dependencias:
    • Depende de: [[post-content.css]] (donde residen las clases personalizadas card-pricing y card-body-pricing) y [[base.css]] (para el sistema de temas y paleta de colores).
    • Dependen de este: [[index.astro]] de la raíz, ubicándose como sección de valor de usuario previo a las llamadas a la acción finales.
  • Observaciones útiles: Emplea animaciones de tipo reveal con retardos (delay) para que las tarjetas aparezcan secuencialmente al hacer scroll. La estructura grid-cols-1 md:grid-cols-3 se ajusta automáticamente si se añaden más tarjetas, pero se debe vigilar la longitud del texto.

[[Testimonios.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Testimonios.astro
  • Responsabilidad: Componente de validación social y construcción de comunidad. Diseñado para generar confianza y fortalecer la identidad comunitaria de Biodanza Valladolid. A través de una cuadrícula de testimonios, presenta las experiencias personales de alumnos reales, destacando el valor humano del grupo de apoyo. Utiliza tarjetas de alta calidad y animaciones de entrada progresiva.
  • Relaciones y Dependencias:
    • Depende de: Recursos de imagen (MariaG.jpeg, JuanCarlos.webp, ElenaR.webp), [[base.css]] (variables de diseño y temas), y el sistema de animaciones global para el efecto reveal.
    • Dependen de este: [[index.astro]] de la raíz, sirviendo como prueba social crítica previa al formulario de contacto.
  • Observaciones útiles: Utiliza un array de datos (testimonios) definido en la parte superior, permitiendo escalar el número de reseñas de forma ágil sin alterar el código HTML. Las imágenes están optimizadas mediante el componente Image de Astro. Incluye una cita final de refuerzo que actúa como un CTA emocional.

[[Contacto.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Contacto.astro
  • Responsabilidad: Componente de interfaz para la gestión de formularios de contacto y conversión. Responsable de renderizar el formulario de contacto en el sitio. Está diseñado para capturar la interacción del usuario y facilitar la comunicación con el equipo. Integra la lógica de envío de datos (servicios como Formspree o Netlify) y valida que los campos esenciales estén presentes.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (para los estilos globales y variables de tema), y servicios externos de procesamiento de formularios (vía acción POST).
    • Dependen de este: [[index.astro]] de la raíz, donde se ensambla como sección de cierre de contacto.
  • Observaciones útiles: El componente está optimizado bajo los estándares de accesibilidad mencionados en el [[BLUEPRINT]], asegurando el uso correcto de etiquetas <label> y atributos required. Al no tener una base de datos propia, su robustez depende de la correcta configuración de la API externa que procese el formulario.

[[CTA.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/CTA.astro
  • Responsabilidad: Componente de “Llamada a la Acción” (Call to Action) principal. Es la pieza clave para la conversión de usuarios dentro del ecosistema de Biodanza Valladolid. Se presenta como una sección visualmente impactante, con un fondo de gradiente dinámico que transiciona entre los colores primario y secundario del tema “biodanza”. Su diseño incluye efectos de profundidad, sombras proyectadas de gran formato y elementos decorativos animados (esferas de luz con desenfoque).
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (para la definición de los gradientes de marca, variables de tema y tipografías).
    • Dependen de este: [[index.astro]] de la raíz (usualmente antes del footer para incitar a la acción) y cualquier otra sección que actúe como landing page.
  • Observaciones útiles: Utiliza clases de Tailwind para gestionar estados de animación (como animate-pulse en los elementos decorativos). Es altamente sensible a cambios en los colores de la marca definidos en [[astro.config.mjs]]; cualquier modificación en su estructura de gradientes debe probarse en diferentes resoluciones para asegurar el contraste.

[[SectionDivider.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/SectionDivider.astro
  • Responsabilidad: Componente de separación visual minimalista. Cumple una función puramente estética y de estructura visual dentro de las páginas largas (como la landing page principal). Su objetivo es romper la monotonía del contenido mediante un separador sutil que utiliza gradientes suaves y un punto central, ayudando a guiar al usuario a través de las diferentes secciones.
  • Relaciones y Dependencias:
    • Depende de: Clases de utilidades de Tailwind (relacionadas con gradientes y opacidad) y la clase global reveal para su animación de aparición.
    • Dependen de este: Cualquier página de contenido extenso (como [[index.astro]]) que requiera una separación elegante entre bloques temáticos.
  • Observaciones útiles: Es un componente extremadamente ligero y versátil. Su diseño está pensado para integrarse de forma invisible en el flujo de la página, por lo que es ideal para situarlo tras secciones pesadas antes de pasar a una sección nueva.

🛠️ 6. Componentes Globales del Sistema (Navegación, SEO y Modales)

[[Header.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Header.astro
  • Responsabilidad: Componente de navegación principal y sistema de identidad. Actúa como la barra de navegación superior (navbar) fija del sitio web. Proporciona acceso directo a todas las secciones principales (ancladas mediante IDs) y al blog, integrando además el selector de temas visuales para la personalización de la experiencia de usuario. Emplea un efecto de desenfoque (backdrop-blur) sobre un fondo semitransparente.
  • Relaciones y Dependencias:
    • Depende de: [[ThemeSelector.astro]] (para gestionar el cambio dinámico de temas), [[base.css]] (estilos de layout de la navbar), y activos como favicon.svg para el branding.
    • Dependen de este: [[MainLayout.astro]], actuando como un elemento estructural desplegado en todas las páginas para garantizar la navegación consistente.
  • Observaciones útiles: Maneja una lógica interna de menú móvil (mobile-menu) mediante una transición CSS de desplazamiento lateral (translate-x-full). Al añadir nuevas secciones al sitio, es necesario actualizar el array navItems dentro del componente para que aparezcan reflejadas tanto en el menú de escritorio como en el móvil.

[[Footer.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Footer.astro
  • Responsabilidad: Componente de cierre y navegación final con diseño oscuro de alto contraste. Define la estructura del pie de página del sitio. Utiliza una estética de “Negro Puro” que refuerza el estilo premium y minimalista del proyecto. Incluye una sección de captación de suscriptores (newsletter) mediante integración con Formspree, enlaces a redes sociales, y una sección legal que invoca al componente Legal.astro.
  • Relaciones y Dependencias:
    • Depende de: [[Legal.astro]] (para desplegar información legal), variables de estilo globales en [[base.css]], y servicios externos como Formspree para el procesamiento del formulario de newsletter.
    • Dependen de este: [[MainLayout.astro]] (donde se integra como el cierre estándar de todas las páginas del sitio).
  • Observaciones útiles: El formulario de newsletter es funcional y requiere que el ID de Formspree sea reemplazado por el identificador real del cliente en el atributo action. Utiliza etiquetas semánticas y un sistema de rejilla flexible para asegurar que el diseño sea responsivo en móviles. Los derechos de autor son auto-calculados con JS.

[[HeadSeo.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/seo/HeadSeo.astro
  • Responsabilidad: Componente de gestión de metadatos y optimización para buscadores (SEO/GEO). Este componente es el motor de posicionamiento del sitio. Centraliza la configuración de etiquetas meta críticas para SEO, Open Graph (redes sociales) y Twitter Cards, pero su valor diferenciador reside en su capacidad para la Generación de Contenido por Motores (GEO - Generative Engine Optimization). Permite inyectar datos estructurados geográficos y de entidad (Wikidata) para que asistentes de IA comprendan mejor el contexto local del negocio en Valladolid.
  • Relaciones y Dependencias:
    • Depende de: Props estándar de Astro para personalizar el título, descripción y metadatos específicos por página.
    • Dependen de este: [[MainLayout.astro]] (es un componente de cabecera incluido en el <head> de todas las páginas para asegurar consistencia SEO).
  • Observaciones útiles: El componente incluye por defecto las coordenadas de Valladolid, lo que es vital para la visibilidad local en buscadores. Utiliza un sistema de breadcrumbs (migas de pan) que ayuda a los buscadores a indexar la jerarquía del sitio. Al añadir páginas nuevas al proyecto, asegúrate de pasar los parámetros geoLocation y wikidataId (si corresponde) a través de los props de este componente para maximizar la relevancia en búsquedas geolocalizadas.

[[ThemeSelector.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/ThemeSelector.astro
  • Responsabilidad: Componente de personalización visual mediante temas dinámicos. Proporciona una interfaz tipo “menú desplegable” (dropdown) que permite al usuario alternar entre distintos esquemas de color (temas) del sitio. Al integrar DaisyUI, el selector permite aplicar de forma instantánea cambios de paleta cromática, tipografía y estilos globales.
  • Relaciones y Dependencias:
    • Depende de: El sistema de temas configurado en DaisyUI/Tailwind y el almacenamiento local del navegador (localStorage) para persistir la elección del usuario entre sesiones.
    • Dependen de este: [[Header.astro]] (donde se integra como control de personalización).
  • Observaciones útiles: Utiliza document.startViewTransition (si está soportado por el navegador) para animar de forma suave la transición de colores al cambiar de tema. La lista de temas disponibles está definida en el array themes interno. La implementación utiliza delegación de eventos en el document, lo que garantiza que los botones sigan siendo funcionales incluso tras recargas dinámicas de contenido o transiciones de vista (View Transitions).

[[CookieBanner.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/CookieBanner.astro
  • Responsabilidad: Componente de interfaz para la gestión y aceptación de cookies. Implementa un banner de aviso de cookies diseñado para aparecer de forma persistente y no intrusiva en la parte inferior de la pantalla. Su objetivo principal es informar al usuario sobre el uso de cookies para analítica y mejora de la experiencia, bloqueando la carga de scripts de rastreo hasta que el usuario otorgue su consentimiento explícito.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (para los estilos globales y las variables de diseño de DaisyUI/Tailwind), y depende de la existencia de una función global window.loadAnalytics para activar los servicios de rastreo tras la aceptación.
    • Dependen de este: [[MainLayout.astro]] (donde se incluye) y potencialmente los scripts de analítica de terceros.
  • Observaciones útiles: El banner cuenta con una animación de entrada (fade-in y traslación) controlada mediante clases de transición, que se activa con un pequeño retardo tras la carga de la página. Utiliza localStorage para recordar la preferencia del usuario, lo que evita que el banner vuelva a aparecer en visitas sucesivas una vez aceptado. Asegurar que el identificador accept-cookies y la lógica de validación se mantengan sincronizados.

[[Cookies.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Cookies.astro
  • Responsabilidad: Componente modal informativo para la Política de [[Cookies]]. Define la estructura y el contenido de la ventana modal que detalla la política de cookies del sitio web. Está diseñado para ofrecer transparencia al usuario, explicando qué son las cookies, cómo se utilizan en la plataforma y proporcionando enlaces externos oficiales. Utiliza la arquitectura de modales de DaisyUI para mostrar la información sobre la página actual sin necesidad de navegar a una ruta distinta.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (para el estilo del componente prose y la consistencia visual) y la integración de DaisyUI (clases modal-toggle, modal-box).
    • Dependen de este: [[CookieBanner.astro]] (ya que este último contiene un label con el atributo for="modal-cookies" que activa la apertura de este componente) y [[MainLayout.astro]] (donde suele estar ubicado para ser accesible desde cualquier parte del sitio).
  • Observaciones útiles: La comunicación entre el banner y el modal se realiza mediante el atributo id="modal-cookies" y un input type="checkbox" de tipo modal-toggle. Esto es un patrón técnico eficiente que evita dependencias de JavaScript complejo para la gestión de estados de visibilidad de la interfaz. Al actualizar la información (como la fecha de “Última actualización”), recuerda revisar la precisión legal.

[[Legal.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Legal.astro
  • Responsabilidad: Componente modal de Aviso Legal y cumplimiento normativo. Implementa el Aviso Legal profesional del sitio web, garantizando el cumplimiento de la normativa española vigente (LSSI-CE y RGPD). Utiliza un diseño modal de DaisyUI que permite desplegar toda la información legal (identificación del titular, exclusión de responsabilidad, enlaces externos y jurisdicción aplicable) sin interrumpir la navegación del usuario. Su estética está alineada con el resto de la identidad del sitio, utilizando los colores corporativos para el encabezado del modal.
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (para la tipografía, variables de color y consistencia visual en el estilo prose) y los componentes de layout de DaisyUI (modal, modal-box).
    • Dependen de este: [[Footer.astro]] (donde se invoca para proporcionar acceso a la información legal desde cualquier página).
  • Observaciones útiles: La gestión de visibilidad se realiza mediante un input type="checkbox" con id="modal-legal", lo que permite una apertura eficiente y sin dependencias de scripts complejos. Al ser un documento legal, cualquier cambio en la estructura de la empresa o en la jurisdicción debe actualizarse aquí. Es recomendable verificar periódicamente que los enlaces externos sigan activos y que la fecha de “Última actualización” se mantenga al día.

[[Privacidad.astro]]

  • Ruta: /Users/ernestouriszar/markeup/src/components/Privacidad.astro
  • Responsabilidad: Componente modal de Política de Privacidad y protección de datos (RGPD). Proporciona una ventana modal completa que detalla la Política de Privacidad del sitio, asegurando el cumplimiento con el Reglamento General de Protección de Datos (RGPD). Explica de forma clara quién es el responsable del tratamiento, qué datos se recogen, con qué finalidad, durante cuánto tiempo se conservan y cuáles son los derechos fundamentales de los usuarios (acceso, rectificación, supresión, etc.).
  • Relaciones y Dependencias:
    • Depende de: [[base.css]] (para la tipografía y el estilo prose que asegura una lectura cómoda) y los componentes de layout de DaisyUI (modal, modal-box).
    • Dependen de este: Potencialmente el [[Footer.astro]] (si se incluye como enlace de consulta legal) o cualquier sección donde se solicite información personal al usuario.
  • Observaciones útiles: Al igual que [[Legal.astro]], este componente utiliza el mecanismo de modal-toggle (checkbox oculto) para su activación. Es crítico que la dirección de correo electrónico de contacto (hola@biodanzavalladolid.com) y la fecha de última actualización (Mayo 2026) se mantengan precisas. Cualquier cambio en las prácticas de recolección de datos del sitio web debe reflejarse inmediatamente en este componente.

🛠️ 7. Automatización, Utilidades y Scripts de Mantenimiento

[[migrate-frontmatter.js]]

  • Ruta: /Users/ernestouriszar/markeup/scratch/migrate-frontmatter.js
  • Responsabilidad: [[Script]] de automatización para la migración y estandarización del frontmatter. Este archivo es una utilidad de mantenimiento diseñada para procesar archivos [[Markdown]] en lote. Su función principal es leer, validar y transformar los metadatos (frontmatter) de los archivos de contenido. Automatiza la corrección de formatos antiguos, la normalización de etiquetas ([/tags]]) y la actualización de campos según el nuevo esquema definido en src/content.config.ts, asegurando que el contenido sea compatible con las nuevas capacidades del sitio.
  • Relaciones y Dependencias:
    • Depende de: [[content.config.ts]] (de donde toma el esquema de validación) y los archivos Markdown ubicados en src/content/.
    • Dependen de este: El equipo de desarrollo (cuando necesitan realizar actualizaciones masivas de metadatos sin intervención manual) y el sistema de gestión de contenido [[(Obsidian)]].
  • Observaciones útiles: Este es un script de ejecución única o esporádica (utility script). Es una herramienta potente pero potencialmente destructiva si no se ejecuta sobre una copia de seguridad o tras haber verificado el estado del repositorio con git status. Es muy útil para garantizar la integridad de los datos durante cambios estructurales en el “Segundo Cerebro” (Obsidian).

[[sync_context.sh]]

  • Ruta: /Users/ernestouriszar/markeup/sync_context.sh
  • Responsabilidad: Script de recarga y consideración de contexto para la IA. Automatiza la reconstrucción del contexto de trabajo concatenando varios archivos de documentación del proyecto en un único archivo temporal. Muestra mensajes informativos en consola antes y después del proceso para indicar el estado de la operación.
  • Relaciones y Dependencias:
    • Archivos de los que depende: [[SYSTEM_INSTRUCTIONS]], [[BLUEPRINT]], [[README]].
    • Archivos que dependen de este: No determinable a partir de este archivo (utilizado por asistentes de IA o herramientas de automatización local).
  • Observaciones útiles: Genera el archivo temporal .context_tmp mediante la concatenación de los documentos especificados usando el comando cat. Sobrescribe el contenido previo de dicho archivo en cada ejecución. Está diseñado para facilitar la carga de contexto consolidado por parte de asistentes de IA o herramientas de automatización que necesiten una visión unificada de la documentación del proyecto.
← Volver al blog