feat(glossaire): integrate paradigms portal into glossary navigation

src/pages/glossaire/paradigmes.astro

@@ -0,0 +1,175 @@
+---
+import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import { getCollection } from "astro:content";
+
+const entries = await getCollection("glossaire");
+
+const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
+const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
+
+const paradigmes = entries
+  .filter((e) => e.data.kind === "paradigme")
+  .sort((a, b) => collator.compare(a.data.term, b.data.term));
+
+const doctrines = entries
+  .filter((e) => e.data.kind === "doctrine")
+  .sort((a, b) => collator.compare(a.data.term, b.data.term));
+---
+
+<GlossaryLayout
+  title="Paradigmes théoriques"
+  version="1.0"
+>
+  <Fragment slot="aside">
+    <nav class="glossary-portal-aside" aria-label="Navigation des paradigmes">
+      <div class="glossary-portal-aside__block">
+        <a class="glossary-portal-aside__back" href="/glossaire/">← Retour au glossaire</a>
+        <div class="glossary-portal-aside__title">Paysage paradigmatique</div>
+        <div class="glossary-portal-aside__meta">
+          Paradigmes théoriques · doctrines structurantes
+        </div>
+      </div>
+
+      <div class="glossary-portal-aside__block">
+        <h2 class="glossary-portal-aside__heading">Dans cette page</h2>
+        <ul class="glossary-portal-aside__list">
+          <li><a href="#paradigmes">Paradigmes théoriques</a></li>
+          <li><a href="#doctrines">Doctrines structurantes</a></li>
+        </ul>
+      </div>
+    </nav>
+  </Fragment>
+
+  <h1>Paysage paradigmatique</h1>
+
+  <p>
+    Le paradigme archicratique s’inscrit dans un paysage théorique plus large
+    mobilisant différents cadres d’analyse du pouvoir, de la régulation et des
+    systèmes sociaux.
+  </p>
+
+  <p>
+    Cette page rassemble les grands paradigmes externes mobilisés dans
+    l’essai-thèse, ainsi que les doctrines structurantes qui permettent d’en
+    préciser certaines formulations. Elle constitue une porte d’entrée vers la
+    cartographie intellectuelle au sein de laquelle l’archicratie se situe, se
+    distingue ou entre en tension.
+  </p>
+
+  <section id="paradigmes" class="glossary-portal-section">
+    <h2>Paradigmes théoriques</h2>
+    <ul class="glossary-portal-list">
+      {paradigmes.map((entry) => {
+        const slug = slugOf(entry);
+        return (
+          <li>
+            <a href={`/glossaire/${slug}/`}>
+              {entry.data.term}
+            </a>
+            <span> — {entry.data.definitionShort}</span>
+          </li>
+        );
+      })}
+    </ul>
+  </section>
+
+  {doctrines.length > 0 && (
+    <section id="doctrines" class="glossary-portal-section">
+      <h2>Doctrines structurantes</h2>
+      <ul class="glossary-portal-list">
+        {doctrines.map((entry) => {
+          const slug = slugOf(entry);
+          return (
+            <li>
+              <a href={`/glossaire/${slug}/`}>
+                {entry.data.term}
+              </a>
+              <span> — {entry.data.definitionShort}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  )}
+
+  <style>
+    .glossary-portal-section{
+      margin-top: 30px;
+      scroll-margin-top: calc(var(--sticky-offset) + 75px);
+    }
+
+    .glossary-portal-list{
+      margin: 14px 0 0;
+      padding-left: 18px;
+    }
+
+    .glossary-portal-list li{
+      margin-bottom: 10px;
+      line-height: 1.5;
+    }
+
+    .glossary-portal-aside{
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+
+    .glossary-portal-aside__block{
+      border: 1px solid rgba(127,127,127,0.22);
+      border-radius: 16px;
+      padding: 12px;
+      background: rgba(127,127,127,0.05);
+    }
+
+    .glossary-portal-aside__back{
+      display: inline-block;
+      margin-bottom: 8px;
+      font-size: 13px;
+      font-weight: 700;
+      text-decoration: none;
+    }
+
+    .glossary-portal-aside__title{
+      font-size: 14px;
+      font-weight: 800;
+      letter-spacing: .2px;
+      line-height: 1.25;
+    }
+
+    .glossary-portal-aside__meta{
+      margin-top: 8px;
+      font-size: 12px;
+      line-height: 1.35;
+      opacity: .78;
+    }
+
+    .glossary-portal-aside__heading{
+      margin: 0 0 10px;
+      font-size: 13px;
+      font-weight: 800;
+      opacity: .9;
+    }
+
+    .glossary-portal-aside__list{
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .glossary-portal-aside__list li{
+      margin: 6px 0;
+    }
+
+    .glossary-portal-aside__list a{
+      text-decoration: none;
+      font-size: 13px;
+      line-height: 1.3;
+    }
+
+    @media (prefers-color-scheme: dark){
+      .glossary-portal-aside__block{
+        background: rgba(255,255,255,0.04);
+      }
+    }
+  </style>
+</GlossaryLayout>