feat(glossaire): refine portal pages and contextual asides

src/components/GlossaryHomeAside.astro

@@ -0,0 +1,205 @@
+---
+const {
+  allEntries = [],
+} = Astro.props;
+
+const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
+const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+
+const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
+const bySlug = new Map(allEntries.map((entry) => [slugOf(entry), entry]));
+
+function sortByTerm(list = []) {
+  return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
+}
+
+function familyOf(entry) {
+  const explicit = entry?.data?.family;
+  if (explicit) return explicit;
+
+  const slug = slugOf(entry);
+  const kind = entry?.data?.kind;
+
+  if (kind === "paradigme") return "paradigme";
+  if (kind === "doctrine") return "doctrine";
+  if (kind === "verbe") return "verbe";
+
+  if (slug === "scene-depreuve") return "scene";
+  if (slug === "autarchicratie") return "pathologie";
+  if (slug === "obliteration-archicratique") return "dynamique";
+
+  if (
+    [
+      "archicratie",
+      "arcalite",
+      "cratialite",
+      "archicration",
+      "co-viabilite",
+      "tension",
+    ].includes(slug)
+  ) {
+    return "concept-fondamental";
+  }
+
+  if (slug === "archicrations-differentielles-et-formes-hybrides") {
+    return "topologie";
+  }
+
+  if (kind === "topologie" && slug.startsWith("archicrations-")) {
+    return "meta-regime";
+  }
+
+  return "";
+}
+
+const fondamentauxWanted = [
+  "archicratie",
+  "arcalite",
+  "cratialite",
+  "archicration",
+  "co-viabilite",
+  "tension",
+];
+
+const fondamentaux = sortByTerm(
+  fondamentauxWanted
+    .map((slug) => bySlug.get(slug))
+    .filter(Boolean)
+);
+
+const totalEntries = allEntries.length;
+const paradigmesCount = allEntries.filter((entry) => entry.data.kind === "paradigme").length;
+const doctrinesCount = allEntries.filter((entry) => entry.data.kind === "doctrine").length;
+const metaRegimesCount = allEntries.filter((entry) => familyOf(entry) === "meta-regime").length;
+
+const portalLinks = [
+  { href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
+  { href: "/glossaire/scenes-archicratiques/", label: "Scènes archicratiques" },
+  { href: "/glossaire/dynamiques-archicratiques/", label: "Dynamiques archicratiques" },
+  { href: "/glossaire/tensions-irreductibles/", label: "Tensions irréductibles" },
+  { href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
+  { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
+  { href: "/glossaire/index-complet/", label: "Index complet" },
+];
+---
+
+<nav class="glossary-home-aside" aria-label="Navigation du portail du glossaire">
+  <div class="glossary-home-aside__block glossary-home-aside__block--intro">
+    <div class="glossary-home-aside__title">Glossaire archicratique</div>
+    <div class="glossary-home-aside__meta">
+      portail de lecture · cartographie conceptuelle
+    </div>
+
+    <div class="glossary-home-aside__pills" aria-label="Repères de navigation">
+      <span class="glossary-home-aside__pill">{totalEntries} entrées</span>
+      <span class="glossary-home-aside__pill">{metaRegimesCount} méta-régimes</span>
+      <span class="glossary-home-aside__pill">
+        {doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""} · {paradigmesCount} paradigme{paradigmesCount > 1 ? "s" : ""}
+      </span>
+    </div>
+  </div>
+
+
+  <section class="glossary-home-aside__block">
+    <h2 class="glossary-home-aside__heading">Parcours du glossaire</h2>
+    <ul class="glossary-home-aside__list">
+      {portalLinks.map((item) => (
+        <li><a href={item.href}>{item.label}</a></li>
+      ))}
+    </ul>
+  </section>
+
+  {fondamentaux.length > 0 && (
+    <section class="glossary-home-aside__block">
+      <h2 class="glossary-home-aside__heading">Noyau archicratique</h2>
+      <ul class="glossary-home-aside__list">
+        {fondamentaux.map((entry) => (
+          <li><a href={hrefOf(entry)}>{entry.data.term}</a></li>
+        ))}
+      </ul>
+    </section>
+  )}
+</nav>
+
+<style>
+  .glossary-home-aside{
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .glossary-home-aside__block{
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 16px;
+    padding: 12px;
+    background: rgba(127,127,127,0.05);
+  }
+
+  .glossary-home-aside__block--intro{
+    padding-top: 11px;
+    padding-bottom: 11px;
+  }
+
+  .glossary-home-aside__title{
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: .2px;
+    line-height: 1.25;
+  }
+
+  .glossary-home-aside__meta{
+    margin-top: 8px;
+    font-size: 12px;
+    line-height: 1.35;
+    opacity: .78;
+  }
+
+  .glossary-home-aside__pills{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 10px;
+  }
+
+  .glossary-home-aside__pill{
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 9px;
+    border: 1px solid rgba(127,127,127,0.24);
+    border-radius: 999px;
+    background: rgba(127,127,127,0.04);
+    font-size: 12px;
+    line-height: 1.3;
+    opacity: .9;
+  }
+
+  .glossary-home-aside__heading{
+    margin: 0 0 10px;
+    font-size: 13px;
+    font-weight: 800;
+    opacity: .9;
+  }
+
+  .glossary-home-aside__list{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .glossary-home-aside__list li{
+    margin: 6px 0;
+  }
+
+  .glossary-home-aside__list a{
+    text-decoration: none;
+    font-size: 13px;
+    line-height: 1.3;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-home-aside__block,
+    .glossary-home-aside__pill{
+      background: rgba(255,255,255,0.04);
+    }
+  }
+</style>