info-canicule/src/pages/dependances.astro

---
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 disponible sur demande à
      <a href="mailto:florian@nocleus.com">florian@nocleus.com</a>.
    </p>
  </section>
</Base>