itziarZG
9d8338cbef
SEO - BaseLayout: canonical, hreflang, author, extended robots, full OG and Twitter tags with default social image. - Add JSON-LD @graph: Organization + WebSite + page-specific type; homepage adds ItemList with one Article per aviso. - Add public/og-default.svg (1200x630) used as fallback social card. - New src/pages/404.astro with noindex meta. - Filters now use fieldset+legend and aria-controls; counter is role=status with initial SSR value; noscript fallback included. - Filter pills taller (min-height 2.25rem) and switch from style.display to the hidden attribute. Accessibility - Map markers become keyboard accessible (role=button, tabindex, aria-label, aria-keyshortcuts); opening a popup moves focus to its first link and returns focus on close. Map container upgraded to role=region with aria-describedby. - Page introduces a textual per-municipio summary as the accessible equivalent of the map. - Focus-visible outline extended to summary and [tabindex]; outline contrast tuned for active filter pills and Leaflet interactive layer. - EntryCard exposes id+aria-labelledby; tema list now has aria-label; stamp color tightened for AA contrast. - BaseLayout: header gains an aria-labelled nav with aria-current; main gets a focus ring when targeted by the skip link. - Markers read their colors from CSS custom properties instead of hardcoded hex.
Ibiza Environmental Watch — frontend
Frontend estático (Astro) para el proyecto de vigilancia ambiental de
Eivissa i Formentera. Consume boib_entradas y noticias_prensa
(es_ambiental = true) directamente de Postgres, en build-time, y
publica HTML estático servido por Caddy. No hay servidor Node en producción.
Contexto completo del proyecto (infraestructura, esquema, decisiones ya tomadas) en el documento de traspaso que se usó para construir esto.
Arrancar en local
npm install
npm run dev
Sin DATABASE_URL definida, el sitio usa datos de ejemplo
(src/lib/fixtures.ts) con la misma forma que las tablas reales — sirve
para maquetar sin acceso al servidor privado de Hetzner.
Build de producción
DATABASE_URL="postgres://usuario:pass@host-privado:5432/dbname" npm run build
El resultado (dist/) es estático: se sirve con Caddy, sin necesidad de
Node corriendo.
Variables de entorno
| Variable | Uso |
|---|---|
DATABASE_URL |
Conexión a Postgres, solo se usa durante npm run build |
Como el build corre en la misma red privada de Hetzner (vía Coolify), la conexión no necesita salir a internet.
Estructura
src/lib/db.ts— única consulta a Postgres, una vez por build.src/lib/types.ts— forma unificada de un "aviso" (BOIB o prensa).src/components/EntryCard.astro— tarjeta de un aviso (siempre estática).src/components/Filters.astro— filtro por municipio/tema/fuente, JS vanilla que filtra el DOM ya renderizado (sin re-fetch).src/components/MapView.tsx— mapa Leaflet, componente Preact que solo se hidrata en escritorio (client:media="(min-width: 900px)"). En móvil ni Leaflet ni Preact se descargan.src/pages/huella.astro— página de huella (pendiente de rellenar con medición real tras el primer despliegue).
Pendiente para conectar el rebuild automático
Añadir un nodo HTTP Request al final del workflow de n8n de clasificación (tras cada lote) que llame al webhook de deploy de Coolify para esta app, para que el sitio se regenere solo sin intervención manual. La URL del webhook la genera Coolify al crear la aplicación (Settings → Webhooks).
Pendiente de datos
- Unificar
'Ibiza'→'Eivissa'ennoticias_prensa.municipioya está resuelto en la query (case when municipio = 'Ibiza' then 'Eivissa' ...), pero conviene aplicar también elUPDATEen la tabla para no depender de ese parche en cada query. - Sumar Diario de Ibiza como fuente cuando estén confirmadas las URLs RSS.
- Las coordenadas de
municipioCoords(enfixtures.ts, reutilizadas por el mapa) son aproximadas por municipio — no hay geocodificación por entrada individual, ni falta: el mapa agrupa, no geolocaliza cada aviso.