Folletos Digitales

Static Astro site that publishes digital self-protection brochures for civil protection topics in Venezuela. The home page is a central dashboard linking to two topic menus: /prevencion-escolar (school prevention) and /prevencion-y-gestion-de-riesgo (risk management). The general brochures are reached via /general, which is currently not linked from the home page.

Purpose

The project turns summarized emergency guidance into mobile-first pages that are easy to open, review, and compare by reading mode while preserving one consistent Protección Civil visual identity.

For the canonical domain vocabulary used across the code and docs — in particular the two parallel content models (Brochure vs EmergencyTopic) and the reading-mode vs style-variant distinction — see CONTEXT.md.

Content overview

The site has two content models (see CONTEXT.md):

• Brochures (src/data/brochures.ts) — card-based guides. General topics: sismos, inundaciones, orden-publico, otros-riesgos. School planning brochures: brigadas-escolares, plan-escolar-pegir, evacuacion-simulacros, senales-seguridad.
• Emergency topics (src/data/emergencyTopics.ts and src/data/schoolEmergencyTopics.ts) — extended topic content (phases, map nodes, infographic, visual steps). Ids: sismos, tsunamis, inundaciones, incendios, deslizamientos, prevencion-sustancias-quimicas.

Stack

Area	Choice
Framework	Astro 6
UI runtime	Static Astro pages
Styling	Tailwind CSS 4 via @tailwindcss/vite
Icons	lucide-react
Language	TypeScript-compatible Astro project
Node.js	>=22.12.0

Although React support is configured, the current site is implemented with .astro pages and shared data/components only.

Design system

The site follows the PC-VENEZUELA style guide documented in docs/design_guide.md. The active implementation uses:

• institutional orange/blue design tokens
• uppercase headline hierarchy with Montserrat
• hard shadows and straight geometry
• alert ribbons, hazard stripes, and diagonal card treatment
• dark and light reading variants within the same visual language

Routes

Two topic menus plus their dynamic subpages, the general brochures, and the school brochure matrix (reading mode × style variant). The single source of truth for the route inventory — patterns, counts, and data sources — is docs/routes.md.

Project structure

.
├── public/
│   ├── assets/                       # Logo and brochure illustrations
│   └── favicon.*
├── src/
│   ├── data/
│   │   ├── brochures.ts              # Card-based Brochure content (general + school planning)
│   │   ├── emergencyTopics.ts        # Extended EmergencyTopic content (risk management)
│   │   └── schoolEmergencyTopics.ts  # Extended EmergencyTopic content (school variant)
│   ├── components/
│   │   ├── BrochurePage.astro        # Renders a Brochure
│   │   ├── EmergencyTopicSection.astro  # Renders an EmergencyTopic
│   │   ├── EmergencyHeader.astro
│   │   ├── SismosInteractiveInfographic.astro
│   │   ├── HomeButton.astro
│   │   ├── ModeSwitch.astro          # dark/light reading mode
│   │   ├── StyleSwitch.astro         # default/rounded-glass/timeline-step
│   │   ├── SponsorsFooter.astro      # Required on every view
│   │   └── Welcome.astro
│   ├── layouts/
│   │   └── Layout.astro              # Shared HTML shell and font loading
│   ├── pages/
│   │   ├── index.astro               # Dashboard
│   │   ├── general.astro             # Single long-scroll page (hidden from menu)
│   │   ├── prevencion-escolar.astro  # School menu
│   │   ├── prevencion-escolar/[topic].astro
│   │   ├── prevencion-y-gestion-de-riesgo.astro  # Risk-management menu
│   │   ├── prevencion-y-gestion-de-riesgo/[topic].astro
│   │   ├── [slug]-[mode].astro       # General brochures (dark/light)
│   │   └── [slug]-[style]-[mode].astro  # School brochures (style × mode)
│   └── styles/
│       └── global.css                # Tailwind import, tokens, and guide utilities
├── docs/
│   ├── adr/                          # Architecture decision records (0001, 0002, …)
│   ├── agents/                       # Per-repo config for the engineering skills
│   ├── design_guide.md               # PC-VENEZUELA design system
│   └── routes.md                     # Full route inventory
├── CONTEXT.md                        # Domain glossary
├── pdf_content.txt                   # Source summary extracted from the reference PDF
└── astro.config.mjs

Local development

npm install
npm run dev

Other available commands:

npm run build
npm run preview

Base path configuration (deploying behind a reverse proxy)

To serve the site under a subpath or directory (for example /folleto behind an Apache/Nginx reverse proxy), set the base path at runtime with the BASE_PATH environment variable.

• Local development under a subpath:

  BASE_PATH=/folleto npm run dev
  

  (The site is served at http://localhost:4321/folleto/.)

• Production build under a subpath:

  BASE_PATH=/folleto npm run build
  

  (All assets, styles, and internal links are built prefixed with /folleto.)

• Default behavior: if BASE_PATH is not set, it defaults to /, serving content from the domain root.

Content source

The brochure copy appears to be derived from the technical reference material summarized in pdf_content.txt, which in turn references Venezuelan civil protection and risk-management guidance such as FUNVISIS and INAMEH material.

This repository currently contains curated static copy. There is no CMS, API, database, or automated content ingestion pipeline.

Notes for maintainers

• Shared page chrome lives in src/layouts/Layout.astro.
• Shared institutional tokens and utilities live in src/styles/global.css.
• Card-based brochure content is centralized in src/data/brochures.ts and rendered by src/components/BrochurePage.astro.
• Extended topic content lives in src/data/emergencyTopics.ts and src/data/schoolEmergencyTopics.ts, rendered by src/components/EmergencyTopicSection.astro.
• The <SponsorsFooter /> component must remain present on every view.
• The repository does not define lint or test scripts at the moment; npm run build is the main project health check.
• Engineering-workflow config for AI agents lives in docs/agents/ and the domain glossary in CONTEXT.md.