archicratie-edition/src/components/GlossaryHomeAside.astro

---
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/index-complet/", label: "Index complet" },
  { href: "/glossaire/paradigme-archicratique/", label: "Paradigme archicratique" },
  { 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/verbes-de-la-scene/", label: "Verbes de la scène" },
];
---

<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: 14px;
    background: rgba(127,127,127,0.05);
  }

  .glossary-home-aside__block--intro{
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .glossary-home-aside__title{
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.3;
  }

  .glossary-home-aside__meta{
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    opacity: .8;
  }

  .glossary-home-aside__pills{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
  }

  .glossary-home-aside__pill{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(127,127,127,0.24);
    border-radius: 999px;
    background: rgba(127,127,127,0.04);
    font-size: 13px;
    line-height: 1.35;
    opacity: .92;
  }

  .glossary-home-aside__heading{
    margin: 0 0 11px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    opacity: .94;
  }

  .glossary-home-aside__list{
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .glossary-home-aside__list li{
    margin: 7px 0;
  }

  .glossary-home-aside__list a{
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
  }

  @media (prefers-color-scheme: dark){
    .glossary-home-aside__block,
    .glossary-home-aside__pill{
      background: rgba(255,255,255,0.04);
    }
  }
</style>