Files
archicratie-edition/src/components/GlossaryAside.astro
Archicratia d6b4eb82f4
All checks were successful
SMOKE / smoke (push) Successful in 9s
CI / build-and-anchors (push) Successful in 55s
CI / build-and-anchors (pull_request) Successful in 45s
feat(glossaire): enrich entries and refine glossary navigation
2026-03-19 21:53:33 +01:00

444 lines
11 KiB
Plaintext

---
const {
currentEntry,
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]));
const currentSlug = slugOf(currentEntry);
const fondamentauxWanted = [
"archicratie",
"tension",
"arcalite",
"cratialite",
"archicration",
"co-viabilite",
];
const fondamentaux = fondamentauxWanted
.map((slug) => bySlug.get(slug))
.filter(Boolean);
function resolveList(slugs = []) {
return slugs
.map((slug) => bySlug.get(String(slug || "").trim()))
.filter(Boolean);
}
function uniqueBySlug(entries) {
const seen = new Set();
const out = [];
for (const entry of entries) {
const slug = slugOf(entry);
if (seen.has(slug)) continue;
seen.add(slug);
out.push(entry);
}
return out;
}
function sortByTerm(entries = []) {
return [...entries].sort((a, b) => collator.compare(a.data.term, b.data.term));
}
function familyOf(entry) {
return entry?.data?.family ?? "";
}
function kindOf(entry) {
return entry?.data?.kind ?? "";
}
const relatedEntries = sortByTerm(
uniqueBySlug(resolveList(currentEntry.data.related ?? []))
);
const opposedEntries = sortByTerm(
uniqueBySlug(resolveList(currentEntry.data.opposedTo ?? []))
);
const seeAlsoEntries = sortByTerm(
uniqueBySlug(resolveList(currentEntry.data.seeAlso ?? []))
);
const familyLabels = {
"concept-fondamental": "Concept fondamental",
scene: "Scène",
dynamique: "Dynamique",
pathologie: "Pathologie",
topologie: "Topologie",
"meta-regime": "Méta-régime",
paradigme: "Paradigme",
doctrine: "Doctrine",
verbe: "Verbe",
"dispositif-ia": "Dispositif IA",
"tension-irreductible": "Tension irréductible",
};
const kindLabels = {
concept: "Concept",
diagnostic: "Diagnostic",
topologie: "Topologie",
verbe: "Verbe",
paradigme: "Paradigme",
doctrine: "Doctrine",
};
const domainLabels = {
transversal: "Transversal",
theorie: "Théorie",
"cas-ia": "Cas IA",
};
const levelLabels = {
fondamental: "Fondamental",
intermediaire: "Intermédiaire",
avance: "Avancé",
};
const currentFamily = familyOf(currentEntry);
const displayFamily =
familyLabels[currentFamily] ??
kindLabels[currentEntry.data.kind] ??
"Fiche";
const displayDomain =
domainLabels[currentEntry.data.domain] ??
currentEntry.data.domain;
const displayLevel =
levelLabels[currentEntry.data.level] ??
currentEntry.data.level;
function entriesOfSameFamily(entry) {
const family = familyOf(entry);
if (!family) return [];
if (family === "concept-fondamental") {
return fondamentaux;
}
return sortByTerm(
allEntries.filter((item) => familyOf(item) === family)
);
}
const sameFamilyEntries = entriesOfSameFamily(currentEntry);
const familySectionTitles = {
"concept-fondamental": "Noyau archicratique",
scene: "Scènes archicratiques",
dynamique: "Dynamiques archicratiques",
pathologie: "Pathologies archicratiques",
topologie: "Topologies voisines",
"meta-regime": "Méta-régimes archicratiques",
paradigme: "Paradigmes voisins",
doctrine: "Doctrines fondatrices",
verbe: "Verbes de la scène",
"dispositif-ia": "Dispositifs IA",
"tension-irreductible": "Tensions irréductibles",
};
const sameFamilyTitle =
familySectionTitles[currentFamily] ?? "Même famille";
function isTheoryEntry(entry) {
const family = familyOf(entry);
const kind = kindOf(entry);
return (
family === "paradigme" ||
family === "doctrine" ||
kind === "paradigme" ||
kind === "doctrine"
);
}
function contextualTheoryFor(entry) {
const fromRelations = uniqueBySlug([
...resolveList(entry.data.related ?? []),
...resolveList(entry.data.seeAlso ?? []),
...resolveList(entry.data.opposedTo ?? []),
])
.filter((item) => slugOf(item) !== currentSlug)
.filter((item) => isTheoryEntry(item));
if (fromRelations.length > 0) {
return sortByTerm(fromRelations).slice(0, 6);
}
if (familyOf(entry) === "paradigme") {
const preferred = [
"gouvernementalite",
"gouvernementalite-algorithmique",
"cybernetique",
"biopolitique",
"domination-legale-rationnelle",
"democratie-deliberative",
"gouvernance-des-communs",
"agencement-machinique",
"pharmacologie-technique",
"preemption-algorithmique",
"dissensus-politique",
"lieu-vide-du-pouvoir",
"habitus-et-violence-symbolique",
"theorie-de-la-resonance",
"conatus-et-multitude",
"configuration-et-interdependance",
"technodiversite-et-cosmotechnie",
"grammatisation-et-proletarisation-cognitive",
];
return uniqueBySlug(
preferred
.filter((slug) => slug !== currentSlug)
.map((slug) => bySlug.get(slug))
.filter(Boolean)
).slice(0, 8);
}
if (familyOf(entry) === "doctrine") {
const preferred = [
"contractualisme-hobbesien",
"droit-naturel-et-propriete",
"volonte-generale",
"decisionnisme-souverain",
];
return uniqueBySlug(
preferred
.filter((slug) => slug !== currentSlug)
.map((slug) => bySlug.get(slug))
.filter(Boolean)
).slice(0, 6);
}
return [];
}
const contextualTheory = contextualTheoryFor(currentEntry);
const showNoyau = currentFamily !== "concept-fondamental" && fondamentaux.length > 0;
const showSameFamily =
sameFamilyEntries.length > 0 && currentFamily !== "concept-fondamental";
const relationSections = [
{
title: "Concepts liés",
items: relatedEntries,
},
{
title: "En tension avec",
items: opposedEntries,
},
{
title: "Voir aussi",
items: seeAlsoEntries,
},
].filter((section) => section.items.length > 0);
---
<nav class="glossary-aside" aria-label="Navigation du glossaire">
<div class="glossary-aside__block glossary-aside__block--intro">
<a class="glossary-aside__back" href="/glossaire/">← Retour au glossaire</a>
<div class="glossary-aside__title">Glossaire archicratique</div>
<div class="glossary-aside__pills" aria-label="Repères de lecture">
<span class="glossary-aside__pill glossary-aside__pill--family">
{displayFamily}
</span>
<span class="glossary-aside__pill">{displayDomain}</span>
<span class="glossary-aside__pill">{displayLevel}</span>
</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/archicrations/">Archicrations</a></li>
<li><a href="/glossaire/paradigmes/">Paradigmes et doctrines</a></li>
</ul>
</section>
{showNoyau && (
<section class="glossary-aside__block">
<h2 class="glossary-aside__heading">Noyau archicratique</h2>
<ul class="glossary-aside__list">
{fondamentaux.map((entry) => {
const active = slugOf(entry) === currentSlug;
return (
<li>
<a
href={hrefOf(entry)}
aria-current={active ? "page" : undefined}
class={active ? "is-active" : undefined}
>
{entry.data.term}
</a>
</li>
);
})}
</ul>
</section>
)}
{showSameFamily && (
<section class="glossary-aside__block">
<h2 class="glossary-aside__heading">{sameFamilyTitle}</h2>
<ul class="glossary-aside__list">
{sameFamilyEntries.map((entry) => {
const active = slugOf(entry) === currentSlug;
return (
<li>
<a
href={hrefOf(entry)}
aria-current={active ? "page" : undefined}
class={active ? "is-active" : undefined}
>
{entry.data.term}
</a>
</li>
);
})}
</ul>
</section>
)}
{relationSections.length > 0 && (
<section class="glossary-aside__block">
<h2 class="glossary-aside__heading">Autour de cette fiche</h2>
{relationSections.map((section) => (
<>
<h3 class="glossary-aside__subheading">{section.title}</h3>
<ul class="glossary-aside__list">
{section.items.map((entry) => (
<li><a href={hrefOf(entry)}>{entry.data.term}</a></li>
))}
</ul>
</>
))}
</section>
)}
{contextualTheory.length > 0 && (
<section class="glossary-aside__block">
<h2 class="glossary-aside__heading">Paysage théorique</h2>
<ul class="glossary-aside__list">
{contextualTheory.map((entry) => (
<li><a href={hrefOf(entry)}>{entry.data.term}</a></li>
))}
</ul>
</section>
)}
</nav>
<style>
.glossary-aside{
display: flex;
flex-direction: column;
gap: 14px;
}
.glossary-aside__block{
border: 1px solid rgba(127,127,127,0.22);
border-radius: 16px;
padding: 12px;
background: rgba(127,127,127,0.05);
}
.glossary-aside__block--intro{
padding-top: 11px;
padding-bottom: 11px;
}
.glossary-aside__back{
display: inline-block;
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.glossary-aside__title{
font-size: 14px;
font-weight: 800;
letter-spacing: .2px;
line-height: 1.25;
}
.glossary-aside__pills{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.glossary-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-aside__pill--family{
border-color: rgba(127,127,127,0.38);
font-weight: 800;
}
.glossary-aside__heading{
margin: 0 0 10px;
font-size: 13px;
font-weight: 800;
opacity: .9;
}
.glossary-aside__subheading{
margin: 12px 0 8px;
font-size: 12px;
font-weight: 800;
opacity: .8;
text-transform: uppercase;
letter-spacing: .04em;
}
.glossary-aside__list{
list-style: none;
margin: 0;
padding: 0;
}
.glossary-aside__list li{
margin: 6px 0;
}
.glossary-aside__list a{
text-decoration: none;
font-size: 13px;
line-height: 1.3;
}
.glossary-aside__list a.is-active{
font-weight: 800;
}
@media (prefers-color-scheme: dark){
.glossary-aside__block,
.glossary-aside__pill{
background: rgba(255,255,255,0.04);
}
}
</style>