feat(glossaire): integrate paradigms portal into glossary navigation

src/components/GlossaryAside.astro

@@ -85,9 +85,11 @@ function contextualParadigmsFor(entry) {
       "cybernetique",
       "biopolitique",
       "bureaucratie",
-      "contractualisme-hobbesien",
+      "decisionnisme",
+      "rationalite-bureaucratique",
+      "democratie-deliberative",
+      "gouvernance-des-communs",
       "liberalisme-proprietaire",
-      "volonte-generale",
     ];
 
     return uniqueBySlug(
@@ -95,10 +97,10 @@ function contextualParadigmsFor(entry) {
         .filter((slug) => slug !== currentSlug)
         .map((slug) => bySlug.get(slug))
         .filter(Boolean)
-    ).slice(0, 5);
+    ).slice(0, 6);
   }
 
-  return paradigmes.slice(0, 4);
+  return paradigmes.slice(0, 5);
 }
 
 const contextualParadigms = contextualParadigmsFor(currentEntry);
@@ -138,6 +140,14 @@ const metaLabel = [
     <div class="glossary-aside__meta">{metaLabel}</div>
   </div>
 
+  <section class="glossary-aside__block">
+    <h2 class="glossary-aside__heading">Portails</h2>
+    <ul class="glossary-aside__list">
+      <li><a href="/glossaire/">Index général</a></li>
+      <li><a href="/glossaire/paradigmes/">Page paradigmes</a></li>
+    </ul>
+  </section>
+
   {fondamentaux.length > 0 && (
     <section class="glossary-aside__block">
       <h2 class="glossary-aside__heading">Noyau archicratique</h2>

src/pages/glossaire/index.astro

@@ -43,6 +43,10 @@ const diagnostics = byPredicate((e) => e.data.kind === "diagnostic");
 const topologies = byPredicate((e) => e.data.kind === "topologie");
 const verbes = byPredicate((e) => e.data.kind === "verbe");
 const paradigmes = byPredicate((e) => e.data.kind === "paradigme");
+const doctrines = byPredicate((e) => e.data.kind === "doctrine");
+
+const paradigmesPreview = paradigmes.slice(0, 6);
+const doctrinesPreview = doctrines.slice(0, 4);
 ---
 
 <SiteLayout title="Glossaire archicratique">
@@ -51,10 +55,10 @@ const paradigmes = byPredicate((e) => e.data.kind === "paradigme");
       <p class="glossary-kicker">Référentiel terminologique</p>
       <h1>Glossaire archicratique</h1>
       <p class="glossary-intro">
-        Ce glossaire rassemble les concepts, diagnostics, topologies et verbes
+        Ce glossaire rassemble les concepts, diagnostics, topologies, doctrines
-        utiles à la lecture du paradigme archicratique. Son organisation repose
+        et paradigmes utiles à la lecture du paradigme archicratique. Son
-        sur les métadonnées de chaque entrée afin de maintenir une structure
+        organisation repose sur les métadonnées de chaque entrée afin de
-        cohérente, extensible et lisible.
+        maintenir une structure cohérente, extensible et lisible.
       </p>
     </header>
 
@@ -62,6 +66,7 @@ const paradigmes = byPredicate((e) => e.data.kind === "paradigme");
       <a href="#reperes">Repères</a>
       <a href="#paradigmes">Paradigmes mobilisés</a>
       <a href="#alphabetique">Index alphabétique</a>
+      <a href="/glossaire/paradigmes/">Page paradigmes</a>
     </nav>
 
     <section id="reperes" class="glossary-section">
@@ -153,26 +158,53 @@ const paradigmes = byPredicate((e) => e.data.kind === "paradigme");
     </section>
 
     <section id="paradigmes" class="glossary-section">
-      <h2>Paradigmes mobilisés</h2>
+      <div class="glossary-section__head">
-      <p class="glossary-intro">
+        <div>
-        Cette section rassemble les grands cadres théoriques, régimes d’intelligibilité
+          <h2>Paradigmes mobilisés</h2>
-        et paradigmes de régulation avec lesquels l’archicratie dialogue, se distingue
+          <p class="glossary-intro">
-        ou entre en tension.
+            Cette section rassemble les grands cadres théoriques, régimes
-      </p>
+            d’intelligibilité et paradigmes de régulation avec lesquels
+            l’archicratie dialogue, se distingue ou entre en tension.
+          </p>
+        </div>
+
+        <a class="glossary-cta" href="/glossaire/paradigmes/">
+          Explorer la page dédiée
+        </a>
+      </div>
 
       {paradigmes.length > 0 ? (
-        <div class="glossary-cards">
+        <>
-          {paradigmes.map((e) => (
+          <section class="glossary-block">
-            <a class="glossary-card" href={hrefOf(e)}>
+            <h3>Paradigmes théoriques</h3>
-              <strong>{e.data.term}</strong>
+            <div class="glossary-cards">
-              <span>{e.data.definitionShort}</span>
+              {paradigmesPreview.map((e) => (
-            </a>
+                <a class="glossary-card" href={hrefOf(e)}>
-          ))}
+                  <strong>{e.data.term}</strong>
-        </div>
+                  <span>{e.data.definitionShort}</span>
+                </a>
+              ))}
+            </div>
+          </section>
+
+          {doctrines.length > 0 && (
+            <section class="glossary-block">
+              <h3>Doctrines structurantes</h3>
+              <div class="glossary-cards">
+                {doctrinesPreview.map((e) => (
+                  <a class="glossary-card" href={hrefOf(e)}>
+                    <strong>{e.data.term}</strong>
+                    <span>{e.data.definitionShort}</span>
+                  </a>
+                ))}
+              </div>
+            </section>
+          )}
+        </>
       ) : (
         <p class="glossary-empty">
-          Les paradigmes externes seront ajoutés progressivement pour cartographier
+          Les paradigmes externes seront ajoutés progressivement pour
-          le paysage théorique mobilisé par l’essai-thèse.
+          cartographier le paysage théorique mobilisé par l’essai-thèse.
         </p>
       )}
     </section>
@@ -206,7 +238,6 @@ const paradigmes = byPredicate((e) => e.data.kind === "paradigme");
 </SiteLayout>
 
 <style>
-
   .glossary-empty{
     opacity: .82;
     font-style: italic;
@@ -252,6 +283,26 @@ const paradigmes = byPredicate((e) => e.data.kind === "paradigme");
     scroll-margin-top: calc(var(--sticky-offset) + 75px);
   }
 
+  .glossary-section__head{
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
+  .glossary-cta{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 38px;
+    border: 1px solid rgba(127,127,127,0.28);
+    border-radius: 999px;
+    padding: 6px 14px;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
   .glossary-block{
     margin-top: 18px;
   }
@@ -326,6 +377,17 @@ const paradigmes = byPredicate((e) => e.data.kind === "paradigme");
     margin-bottom: 8px;
   }
 
+  @media (max-width: 720px){
+    .glossary-section__head{
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .glossary-cta{
+      width: fit-content;
+    }
+  }
+
   @media (prefers-color-scheme: dark){
     .glossary-card{
       background: rgba(255,255,255,0.04);

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>