feat: pages contenu + SEO + Umami + sitemap

- Pages /a-propos, /mentions-legales, /dependances, /soutenir (Ko-fi)
- Header/footer enrichis (lien Soutenir, mentions, API publique)
- @astrojs/sitemap + /sitemap-departements.xml.ts (96 dépts)
- robots.txt + og-image.svg + JSON-LD Schema.org
- Meta tags Open Graph + Twitter Card + canonical
- Umami snippet conditionnel (UMAMI_WEBSITE_ID env)
- Slot SENTRY_DSN dans .env.tmpl (GlitchTip — SDK à wire ultérieurement)
- @tailwindcss/typography pour les pages contenu

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/pages/a-propos.astro

@@ -0,0 +1,91 @@
+---
+import Base from '../layouts/Base.astro';
+
+export const prerender = false;
+---
+
+<Base
+  title="À propos — Info Canicule"
+  description="Info Canicule est un site d'information publique gratuit, non lucratif, qui agrège les alertes Vigilance Météo France et les conseils officiels."
+>
+  <section class="bg-gradient-to-b from-canicule-50 to-white">
+    <div class="container-tight py-10">
+      <h1 class="text-3xl font-bold sm:text-4xl">À propos d'Info Canicule</h1>
+      <p class="mt-2 text-slate-600">
+        Pourquoi ce site existe, comment il fonctionne, ce qu'il ne fait pas.
+      </p>
+    </div>
+  </section>
+
+  <section class="container-tight py-8 prose prose-slate max-w-none">
+    <h2>Pourquoi ce site ?</h2>
+    <p>
+      Les épisodes de canicule, d'orages violents ou de fortes pluies tuent des dizaines de personnes
+      chaque année en France. Les informations existent — Météo France publie des bulletins Vigilance
+      détaillés, le gouvernement diffuse des conseils — mais elles sont éparpillées, parfois difficiles
+      à trouver, souvent enfouies sous des bannières publicitaires sur les sites grand public.
+    </p>
+    <p>
+      <strong>Info Canicule</strong> est un site d'utilité publique qui ne fait qu'une chose :
+      afficher clairement, gratuitement, sans publicité ni traceurs commerciaux, la Vigilance Météo
+      France en temps réel et les conseils officiels à appliquer.
+    </p>
+
+    <h2>Comment ça marche</h2>
+    <ul>
+      <li>
+        <strong>Données Vigilance</strong> : récupérées toutes les 15 minutes depuis le portail
+        Opendatasoft qui rediffuse les bulletins Météo France. Bulletin officiel mis à jour deux fois
+        par jour (matin et après-midi).
+      </li>
+      <li>
+        <strong>Données climatologiques</strong> : températures journalières des 30 derniers jours,
+        récupérées depuis <a href="https://meteo.data.gouv.fr/" rel="noopener">meteo.data.gouv.fr</a>
+        (jeu de données <em>Données climatologiques de base — quotidiennes</em>), agrégées en moyenne
+        sur toutes les stations du département.
+      </li>
+      <li>
+        <strong>Conseils officiels</strong> : repris des publications de
+        <a href="https://www.meteofrance.fr/" rel="noopener">Météo France</a>,
+        <a href="https://sante.gouv.fr/" rel="noopener">santé.gouv.fr</a> et
+        <a href="https://www.gouvernement.fr/" rel="noopener">gouvernement.fr</a>.
+      </li>
+    </ul>
+
+    <h2>Ce que ce site n'est pas</h2>
+    <ul>
+      <li><strong>Pas un service officiel</strong>. En cas d'urgence, suivre les consignes de la Préfecture (
+        <a href="tel:112">112</a>).</li>
+      <li><strong>Pas un site commercial</strong>. Aucune publicité, aucune monétisation, aucun affiliation,
+        aucune vente de données.</li>
+      <li><strong>Pas un outil de prévision</strong>. Les prévisions affichées sont celles de Météo France,
+        pas un modèle indépendant.</li>
+    </ul>
+
+    <h2>Statut juridique</h2>
+    <p>
+      Info Canicule est édité <strong>à titre personnel, sans but lucratif</strong>, sur fonds propres
+      par un développeur indépendant. Le site n'est pas une association loi 1901, pas une entreprise,
+      pas un service public. Les données affichées sont publiques et réutilisables sous
+      <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence/" rel="noopener">Licence Ouverte 2.0</a>.
+    </p>
+    <p>
+      Voir aussi : <a href="/mentions-legales">mentions légales</a>,
+      <a href="/dependances">dépendances logicielles</a>,
+      <a href="/soutenir">soutenir le projet</a>.
+    </p>
+
+    <h2>Code source</h2>
+    <p>
+      Le site est entièrement open source. Le code est disponible sur
+      <a href="https://git.nocleus.com/florian/info-canicule" rel="noopener">git.nocleus.com/florian/info-canicule</a>
+      (instance Forgejo personnelle). Contributions, signalements de bugs et améliorations bienvenus.
+    </p>
+
+    <h2>Contact</h2>
+    <p>
+      Mail : <a href="mailto:florian@nocleus.com">florian@nocleus.com</a> — pour toute question,
+      remarque ou correction (typo, erreur dans un conseil, donnée incohérente).
+    </p>
+  </section>
+</Base>

src/pages/dependances.astro

@@ -0,0 +1,215 @@
+---
+import Base from '../layouts/Base.astro';
+import pkg from '../../package.json';
+
+export const prerender = false;
+
+const deps = Object.entries(pkg.dependencies as Record<string, string>).sort(([a], [b]) =>
+  a.localeCompare(b),
+);
+const devDeps = Object.entries(pkg.devDependencies as Record<string, string>).sort(([a], [b]) =>
+  a.localeCompare(b),
+);
+
+// Catalogue manuel : description + license + URL pour chaque dépendance principale.
+const META: Record<string, { desc: string; license: string; url: string }> = {
+  astro: {
+    desc: "Framework web orienté contenu (rendu serveur, île d'interactivité).",
+    license: 'MIT',
+    url: 'https://astro.build/',
+  },
+  '@astrojs/node': {
+    desc: 'Adapter Astro pour exécution sur Node.js (mode standalone).',
+    license: 'MIT',
+    url: 'https://docs.astro.build/en/guides/integrations-guide/node/',
+  },
+  '@astrojs/tailwind': {
+    desc: 'Intégration TailwindCSS pour Astro.',
+    license: 'MIT',
+    url: 'https://docs.astro.build/en/guides/integrations-guide/tailwind/',
+  },
+  tailwindcss: {
+    desc: 'Framework CSS utility-first.',
+    license: 'MIT',
+    url: 'https://tailwindcss.com/',
+  },
+  ioredis: {
+    desc: 'Client Redis/Valkey performant pour Node.js (cache du snapshot Vigilance).',
+    license: 'MIT',
+    url: 'https://github.com/redis/ioredis',
+  },
+  '@astrojs/check': {
+    desc: 'Type checker officiel Astro (utilisé en CI / dev).',
+    license: 'MIT',
+    url: 'https://docs.astro.build/en/reference/cli-reference/#astro-check',
+  },
+  '@types/node': {
+    desc: 'Types TypeScript pour les API Node.js.',
+    license: 'MIT',
+    url: 'https://www.npmjs.com/package/@types/node',
+  },
+  typescript: {
+    desc: 'Compilateur TypeScript (vérification de types).',
+    license: 'Apache-2.0',
+    url: 'https://www.typescriptlang.org/',
+  },
+};
+
+const DATA_SOURCES = [
+  {
+    name: 'France GeoJSON',
+    desc: "Polygones des départements français (utilisés pour la carte SVG).",
+    license: 'Licence Ouverte 2.0',
+    url: 'https://github.com/gregoiredavid/france-geojson',
+  },
+  {
+    name: 'Météo France — Vigilance',
+    desc: 'Bulletin Vigilance en temps réel via Opendatasoft.',
+    license: 'Licence Ouverte 2.0',
+    url: 'https://public.opendatasoft.com/explore/dataset/weatherref-france-vigilance-meteo-departement/',
+  },
+  {
+    name: 'Météo France — Climatologie',
+    desc: 'Données climatologiques de base quotidiennes (températures, précipitations).',
+    license: 'Licence Ouverte 2.0',
+    url: 'https://www.data.gouv.fr/datasets/donnees-climatologiques-de-base-quotidiennes',
+  },
+];
+
+const INFRA = [
+  { name: 'Node.js 22', desc: "Runtime serveur.", license: 'MIT', url: 'https://nodejs.org/' },
+  { name: 'Docker', desc: 'Containerisation.', license: 'Apache-2.0', url: 'https://www.docker.com/' },
+  { name: 'Caddy', desc: 'Reverse proxy + TLS automatique.', license: 'Apache-2.0', url: 'https://caddyserver.com/' },
+  { name: 'Valkey', desc: 'Fork ouvert de Redis (cache).', license: 'BSD-3-Clause', url: 'https://valkey.io/' },
+  { name: 'Umami', desc: 'Analytics RGPD-friendly (auto-hébergé).', license: 'MIT', url: 'https://umami.is/' },
+  { name: 'Forgejo', desc: 'Forge git auto-hébergée + CI/CD.', license: 'MIT', url: 'https://forgejo.org/' },
+];
+---
+
+<Base
+  title="Dépendances — Info Canicule"
+  description="Liste complète des bibliothèques logicielles, sources de données et services utilisés par Info Canicule."
+>
+  <section class="bg-gradient-to-b from-canicule-50 to-white">
+    <div class="container-tight py-10">
+      <h1 class="text-3xl font-bold sm:text-4xl">Dépendances</h1>
+      <p class="mt-2 max-w-2xl text-slate-600">
+        Transparence sur ce qui fait tourner Info Canicule : code, données, infrastructure.
+        Tout est open source ou en données ouvertes.
+      </p>
+    </div>
+  </section>
+
+  <section class="container-tight py-8 space-y-10">
+    <div>
+      <h2 class="text-xl font-semibold">Sources de données</h2>
+      <table class="mt-3 w-full text-sm">
+        <thead class="bg-slate-100 text-left text-slate-700">
+          <tr>
+            <th class="px-3 py-2">Source</th>
+            <th class="px-3 py-2">Description</th>
+            <th class="px-3 py-2">Licence</th>
+          </tr>
+        </thead>
+        <tbody>
+          {DATA_SOURCES.map((s) => (
+            <tr class="border-t border-slate-200">
+              <td class="px-3 py-2 font-medium">
+                <a href={s.url} rel="noopener">{s.name}</a>
+              </td>
+              <td class="px-3 py-2 text-slate-700">{s.desc}</td>
+              <td class="px-3 py-2 text-slate-600">{s.license}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">Bibliothèques applicatives</h2>
+      <table class="mt-3 w-full text-sm">
+        <thead class="bg-slate-100 text-left text-slate-700">
+          <tr>
+            <th class="px-3 py-2">Package</th>
+            <th class="px-3 py-2">Version</th>
+            <th class="px-3 py-2">Description</th>
+            <th class="px-3 py-2">Licence</th>
+          </tr>
+        </thead>
+        <tbody>
+          {deps.map(([name, version]) => {
+            const m = META[name];
+            return (
+              <tr class="border-t border-slate-200">
+                <td class="px-3 py-2 font-mono">
+                  {m ? <a href={m.url} rel="noopener">{name}</a> : name}
+                </td>
+                <td class="px-3 py-2 text-slate-600">{version}</td>
+                <td class="px-3 py-2 text-slate-700">{m?.desc ?? '—'}</td>
+                <td class="px-3 py-2 text-slate-600">{m?.license ?? '—'}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">Outillage de développement</h2>
+      <table class="mt-3 w-full text-sm">
+        <thead class="bg-slate-100 text-left text-slate-700">
+          <tr>
+            <th class="px-3 py-2">Package</th>
+            <th class="px-3 py-2">Version</th>
+            <th class="px-3 py-2">Licence</th>
+          </tr>
+        </thead>
+        <tbody>
+          {devDeps.map(([name, version]) => {
+            const m = META[name];
+            return (
+              <tr class="border-t border-slate-200">
+                <td class="px-3 py-2 font-mono">
+                  {m ? <a href={m.url} rel="noopener">{name}</a> : name}
+                </td>
+                <td class="px-3 py-2 text-slate-600">{version}</td>
+                <td class="px-3 py-2 text-slate-600">{m?.license ?? '—'}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">Infrastructure</h2>
+      <table class="mt-3 w-full text-sm">
+        <thead class="bg-slate-100 text-left text-slate-700">
+          <tr>
+            <th class="px-3 py-2">Composant</th>
+            <th class="px-3 py-2">Description</th>
+            <th class="px-3 py-2">Licence</th>
+          </tr>
+        </thead>
+        <tbody>
+          {INFRA.map((i) => (
+            <tr class="border-t border-slate-200">
+              <td class="px-3 py-2 font-medium">
+                <a href={i.url} rel="noopener">{i.name}</a>
+              </td>
+              <td class="px-3 py-2 text-slate-700">{i.desc}</td>
+              <td class="px-3 py-2 text-slate-600">{i.license}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+
+    <p class="text-sm text-slate-500">
+      Code source du site :
+      <a href="https://git.nocleus.com/florian/info-canicule" rel="noopener">
+        git.nocleus.com/florian/info-canicule
+      </a>
+    </p>
+  </section>
+</Base>

src/pages/mentions-legales.astro

@@ -0,0 +1,113 @@
+---
+import Base from '../layouts/Base.astro';
+
+export const prerender = false;
+---
+
+<Base
+  title="Mentions légales — Info Canicule"
+  description="Mentions légales, éditeur, hébergeur, traitement des données personnelles d'Info Canicule."
+>
+  <section class="bg-gradient-to-b from-canicule-50 to-white">
+    <div class="container-tight py-10">
+      <h1 class="text-3xl font-bold sm:text-4xl">Mentions légales</h1>
+      <p class="mt-2 text-slate-600">Conformes à la LCEN (loi pour la confiance dans l'économie numérique).</p>
+    </div>
+  </section>
+
+  <section class="container-tight py-8 prose prose-slate max-w-none">
+    <h2>Éditeur du site</h2>
+    <p>
+      Site édité à titre personnel, <strong>sans but lucratif</strong>, par :
+    </p>
+    <ul>
+      <li>Florian Bouchet — développeur indépendant</li>
+      <li>Contact : <a href="mailto:florian@nocleus.com">florian@nocleus.com</a></li>
+      <li>Statut : personne physique (pas d'entreprise immatriculée, pas d'association)</li>
+    </ul>
+    <p>
+      Le site n'a aucune vocation commerciale. Aucun chiffre d'affaires, aucune publicité, aucune
+      collecte de données à des fins de monétisation.
+    </p>
+
+    <h2>Hébergement</h2>
+    <p>
+      <strong>OVH SAS</strong> — 2 rue Kellermann, 59100 Roubaix, France.
+      <br />
+      Téléphone : 1007 (numéro non surtaxé) — <a href="https://www.ovh.com/" rel="noopener">ovh.com</a>
+    </p>
+    <p>
+      Serveur VPS mutualisé hébergeant plusieurs projets personnels du même éditeur.
+    </p>
+
+    <h2>Données personnelles</h2>
+    <p>
+      Info Canicule <strong>ne collecte aucune donnée personnelle</strong> de ses visiteurs.
+    </p>
+    <ul>
+      <li>Pas de compte utilisateur, pas de formulaire de contact direct (mail uniquement).</li>
+      <li>Pas de cookies de session ni de tracking.</li>
+      <li>
+        <strong>Statistiques de fréquentation</strong> : assurées par
+        <a href="https://umami.is/" rel="noopener">Umami</a>, solution d'analytics auto-hébergée,
+        RGPD-compatible et sans cookies. Les données collectées (pays, navigateur, page visitée) sont
+        agrégées et anonymes. Aucun identifiant individuel n'est stocké.
+      </li>
+      <li>
+        <strong>Logs serveur</strong> : adresses IP conservées 14 jours dans les logs Caddy pour des
+        raisons techniques (debug, détection d'abus via CrowdSec). Pas d'exploitation au-delà.
+      </li>
+    </ul>
+    <p>
+      Vos droits RGPD (accès, rectification, suppression, opposition) peuvent être exercés en écrivant à
+      <a href="mailto:florian@nocleus.com">florian@nocleus.com</a>.
+    </p>
+
+    <h2>Sources des données</h2>
+    <p>
+      Les alertes Vigilance et données climatologiques affichées proviennent de :
+    </p>
+    <ul>
+      <li>
+        <strong>Météo France</strong> via le portail
+        <a href="https://meteo.data.gouv.fr/" rel="noopener">meteo.data.gouv.fr</a>
+        et la rediffusion
+        <a href="https://public.opendatasoft.com/" rel="noopener">Opendatasoft</a>.
+      </li>
+      <li>
+        Diffusées sous
+        <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence/" rel="noopener">Licence Ouverte 2.0</a>
+        (Etalab).
+      </li>
+    </ul>
+    <p>
+      Les conseils officiels sont repris des publications de Météo France, santé.gouv.fr et
+      gouvernement.fr (informations publiques).
+    </p>
+
+    <h2>Limitation de responsabilité</h2>
+    <p>
+      Info Canicule est un service d'information à titre indicatif. Il ne remplace en aucun cas les
+      sources officielles. En cas d'événement météorologique dangereux, suivre les consignes de la
+      <strong>Préfecture</strong> et appeler les services d'urgence si nécessaire (
+      <a href="tel:15">15</a>, <a href="tel:18">18</a>, <a href="tel:112">112</a>).
+    </p>
+    <p>
+      L'éditeur ne saurait être tenu responsable d'un retard ou d'une indisponibilité de
+      l'information, ni de toute conséquence directe ou indirecte de l'usage des informations affichées
+      sur ce site.
+    </p>
+
+    <h2>Propriété intellectuelle</h2>
+    <p>
+      Le code source du site est sous licence libre (
+      <a href="https://git.nocleus.com/florian/info-canicule" rel="noopener">repo Forgejo</a>
+      ). Les données affichées sont sous Licence Ouverte 2.0 et réutilisables librement, y compris
+      commercialement, à condition de citer Météo France et la licence.
+    </p>
+    <p>
+      L'endpoint <code>/api/vigilance</code> diffuse le snapshot courant en JSON (CORS *), pour
+      réutilisation par tout site ou application qui le souhaite.
+    </p>
+  </section>
+</Base>

src/pages/sitemap-departements.xml.ts

@@ -0,0 +1,23 @@
+import type { APIRoute } from 'astro';
+import { DEPARTEMENTS } from '../lib/departements';
+
+export const prerender = false;
+
+const SITE = 'https://info-canicule.nocleus.com';
+
+export const GET: APIRoute = () => {
+  const today = new Date().toISOString().split('T')[0];
+  const urls = DEPARTEMENTS.map(
+    (d) =>
+      `  <url><loc>${SITE}/departement/${d.code}</loc><lastmod>${today}</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>`,
+  ).join('\n');
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls}
+</urlset>
+`;
+  return new Response(xml, {
+    status: 200,
+    headers: { 'Content-Type': 'application/xml; charset=utf-8', 'Cache-Control': 'public, max-age=3600' },
+  });
+};

src/pages/soutenir.astro

@@ -0,0 +1,74 @@
+---
+import Base from '../layouts/Base.astro';
+
+export const prerender = false;
+---
+
+<Base
+  title="Soutenir le projet — Info Canicule"
+  description="Info Canicule est un service gratuit, sans publicité, à but non lucratif. Si le site vous est utile, vous pouvez soutenir son hébergement via Ko-fi."
+>
+  <section class="bg-gradient-to-b from-canicule-50 to-white">
+    <div class="container-tight py-10">
+      <h1 class="text-3xl font-bold sm:text-4xl">Soutenir Info Canicule</h1>
+      <p class="mt-2 max-w-2xl text-slate-600">
+        Le site est gratuit, sans publicité et sans traceurs commerciaux. Si vous le trouvez utile,
+        vous pouvez aider à couvrir l'hébergement (~7 €/mois mutualisés sur plusieurs projets perso).
+      </p>
+    </div>
+  </section>
+
+  <section class="container-tight py-8 prose prose-slate max-w-none">
+    <h2>Don libre via Ko-fi</h2>
+    <p>
+      Le moyen le plus simple : un don libre, sans inscription, par carte bancaire ou PayPal, via
+      <a href="https://ko-fi.com/daelwizhit" rel="noopener" class="font-semibold">ko-fi.com/daelwizhit</a>.
+      Les dons sont anonymes par défaut et entièrement optionnels.
+    </p>
+
+    <div class="not-prose my-6">
+      <a
+        href="https://ko-fi.com/daelwizhit"
+        rel="noopener"
+        class="inline-flex items-center gap-2 rounded-lg bg-canicule-600 px-6 py-3 text-base font-semibold text-white no-underline hover:bg-canicule-700"
+      >
+        ☕ Soutenir sur Ko-fi
+      </a>
+    </div>
+
+    <h2>Ce que les dons financent</h2>
+    <ul>
+      <li>Location du VPS OVH qui héberge le site (~7 €/mois, mutualisés avec d'autres projets perso).</li>
+      <li>Nom de domaine annuel.</li>
+      <li>Café pour les soirées de maintenance 🥲.</li>
+    </ul>
+    <p>
+      <strong>Ce site n'a aucune vocation commerciale.</strong> Aucun chiffre d'affaires, aucun salaire
+      versé. Les dons couvrent les frais techniques ou, en cas d'excédent, financent d'autres petits
+      projets d'utilité publique du même développeur.
+    </p>
+
+    <h2>Autres manières d'aider</h2>
+    <ul>
+      <li>
+        <strong>Signaler un bug ou une typo</strong> : par mail à
+        <a href="mailto:florian@nocleus.com">florian@nocleus.com</a> ou via une issue sur le
+        <a href="https://git.nocleus.com/florian/info-canicule" rel="noopener">repo Forgejo</a>.
+      </li>
+      <li>
+        <strong>Partager le site</strong> autour de vous, en particulier auprès de personnes fragiles
+        (proches âgés, personnes isolées) pour qui les conseils canicule peuvent faire une vraie
+        différence.
+      </li>
+      <li>
+        <strong>Réutiliser les données</strong> : l'endpoint <code>/api/vigilance</code> diffuse le
+        snapshot en JSON (CORS *), réutilisable librement sous Licence Ouverte 2.0.
+      </li>
+    </ul>
+
+    <p class="text-sm text-slate-500">
+      Pour les questions juridiques (mention de l'éditeur, statut), voir les
+      <a href="/mentions-legales">mentions légales</a>.
+    </p>
+  </section>
+</Base>