511 lines
15 KiB
Plaintext
511 lines
15 KiB
Plaintext
---
|
||
import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
|
||
import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
|
||
import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
|
||
import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
|
||
import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
|
||
import { getCollection } from "astro:content";
|
||
import {
|
||
buildGlossaryBySlug,
|
||
hrefOfGlossaryEntry,
|
||
} from "../../lib/glossary";
|
||
|
||
const entries = await getCollection("glossaire");
|
||
|
||
const collator = new Intl.Collator("fr", {
|
||
sensitivity: "base",
|
||
numeric: true,
|
||
});
|
||
|
||
const bySlug = buildGlossaryBySlug(entries);
|
||
const hrefOf = hrefOfGlossaryEntry;
|
||
|
||
const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
|
||
|
||
function sortByTerm(list = []) {
|
||
return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
|
||
}
|
||
|
||
function resolveEntries(slugs = []) {
|
||
return slugs
|
||
.map((slug) => bySlug.get(slug))
|
||
.filter(Boolean);
|
||
}
|
||
|
||
function uniqueBySlug(list = []) {
|
||
const seen = new Set();
|
||
const out = [];
|
||
|
||
for (const entry of list) {
|
||
const slug = slugOf(entry);
|
||
if (seen.has(slug)) continue;
|
||
seen.add(slug);
|
||
out.push(entry);
|
||
}
|
||
|
||
return out;
|
||
}
|
||
|
||
const sceneDepreuve = bySlug.get("scene-depreuve");
|
||
const tension = bySlug.get("tension");
|
||
const archicration = bySlug.get("archicration");
|
||
const archicratie = bySlug.get("archicratie");
|
||
|
||
const structuralEntries = sortByTerm(
|
||
[tension, archicration, archicratie].filter(Boolean)
|
||
);
|
||
|
||
const relatedEntries = sceneDepreuve
|
||
? sortByTerm(
|
||
uniqueBySlug([
|
||
...resolveEntries(sceneDepreuve.data.related ?? []),
|
||
...resolveEntries(sceneDepreuve.data.seeAlso ?? []),
|
||
...resolveEntries(sceneDepreuve.data.opposedTo ?? []),
|
||
]).filter((entry) => slugOf(entry) !== "scene-depreuve")
|
||
)
|
||
: [];
|
||
|
||
const paradigmEntries = sortByTerm(
|
||
relatedEntries.filter((entry) => entry.data.kind === "paradigme")
|
||
);
|
||
|
||
const otherEntries = sortByTerm(
|
||
relatedEntries.filter((entry) => entry.data.kind !== "paradigme")
|
||
);
|
||
|
||
const mobilizedAuthors = sceneDepreuve?.data?.mobilizedAuthors ?? [];
|
||
const comparisonTraditions = sceneDepreuve?.data?.comparisonTraditions ?? [];
|
||
|
||
const structuralCount = structuralEntries.length;
|
||
const constellationCount = relatedEntries.length;
|
||
const otherCount = otherEntries.length;
|
||
const paradigmCount = paradigmEntries.length;
|
||
|
||
const pageItems = [
|
||
{ href: "#coeur-de-notion", label: "Cœur de notion" },
|
||
...(structuralEntries.length > 0
|
||
? [{ href: "#articulations-essentielles", label: "Articulations essentielles" }]
|
||
: []),
|
||
...(relatedEntries.length > 0
|
||
? [{ href: "#constellation-theorique", label: "Constellation théorique" }]
|
||
: []),
|
||
{ href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
|
||
];
|
||
|
||
const usefulLinks = [
|
||
{ href: "/glossaire/tension/", label: "Tension" },
|
||
{ href: "/glossaire/archicration/", label: "Archicration" },
|
||
{ href: "/glossaire/archicratie/", label: "Archicratie" },
|
||
{ href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
|
||
{ href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
|
||
];
|
||
|
||
const prolongerLinks = [
|
||
{
|
||
href: "/glossaire/",
|
||
title: "Accueil du glossaire",
|
||
text: "Revenir à la cartographie générale du système archicratique.",
|
||
},
|
||
{
|
||
href: "/glossaire/concepts-fondamentaux/",
|
||
title: "Concepts fondamentaux",
|
||
text:
|
||
"Repartir du noyau conceptuel minimal : arcalité, cratialité, tension, archicration, co-viabilité, archicratie.",
|
||
},
|
||
{
|
||
href: "/glossaire/paradigmes/",
|
||
title: "Paradigmes et doctrines",
|
||
text:
|
||
"Situer la scène archicratique dans son paysage de comparaison théorique.",
|
||
},
|
||
{
|
||
href: "/glossaire/index-complet/",
|
||
title: "Index complet",
|
||
text:
|
||
"Retrouver toutes les entrées du glossaire dans l’ordre alphabétique.",
|
||
},
|
||
];
|
||
---
|
||
|
||
<GlossaryLayout
|
||
title="Scènes archicratiques"
|
||
version="1.0"
|
||
stickyMode="glossary-portal"
|
||
>
|
||
<Fragment slot="aside">
|
||
<GlossaryPortalAside
|
||
ariaLabel="Navigation des scènes archicratiques"
|
||
title="Scènes archicratiques"
|
||
meta={sceneDepreuve ? "1 notion-pivot" : "Portail en cours de constitution"}
|
||
pageItems={pageItems}
|
||
usefulLinks={usefulLinks}
|
||
/>
|
||
</Fragment>
|
||
|
||
<section class="scene-page">
|
||
<GlossaryPortalHero
|
||
prefix="scene"
|
||
kicker="Parcours du glossaire"
|
||
title="Scènes archicratiques"
|
||
intro="Les scènes archicratiques désignent les espaces de comparution, d’exposition, de contestation et de révision par lesquels une architecture régulatrice cesse d’être purement opaque pour devenir visible, discutable et transformable."
|
||
moreParagraphs={[
|
||
"Dans l’économie générale du paradigme, elles sont ce qui empêche la régulation de se refermer sur elle-même. Elles ouvrent un espace où les tensions peuvent apparaître, être qualifiées, disputées et réorganisées.",
|
||
]}
|
||
introMaxWidth="76ch"
|
||
followIntroMaxWidth="72ch"
|
||
moreMaxHeight="18rem"
|
||
/>
|
||
|
||
<GlossaryPortalSection
|
||
id="coeur-de-notion"
|
||
title="Cœur de notion"
|
||
intro="Cette page prend pour pivot la scène d’épreuve, notion centrale pour penser l’exposition publique, la mise en discussion et la révisabilité des architectures de régulation."
|
||
>
|
||
{sceneDepreuve ? (
|
||
<article class="scene-focus-card">
|
||
<div class="scene-focus-card__eyebrow">Entrée principale</div>
|
||
<h3>
|
||
<a href={hrefOf(sceneDepreuve)}>{sceneDepreuve.data.term}</a>
|
||
</h3>
|
||
<p class="scene-focus-card__def">{sceneDepreuve.data.definitionShort}</p>
|
||
|
||
{(mobilizedAuthors.length > 0 || comparisonTraditions.length > 0) && (
|
||
<div class="scene-focus-card__meta">
|
||
{mobilizedAuthors.length > 0 && (
|
||
<p>
|
||
<strong>Auteurs mobilisés :</strong> {mobilizedAuthors.join(" / ")}
|
||
</p>
|
||
)}
|
||
|
||
{comparisonTraditions.length > 0 && (
|
||
<p>
|
||
<strong>Traditions de comparaison :</strong> {comparisonTraditions.join(" / ")}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</article>
|
||
) : (
|
||
<p class="scene-empty">
|
||
La fiche principale n’est pas encore disponible dans la collection.
|
||
</p>
|
||
)}
|
||
</GlossaryPortalSection>
|
||
|
||
{structuralEntries.length > 0 && (
|
||
<GlossaryPortalSection
|
||
id="articulations-essentielles"
|
||
title="Articulations essentielles"
|
||
count={`${structuralCount} notion${structuralCount > 1 ? "s" : ""}`}
|
||
intro="La scène n’est pas une notion isolée. Elle s’articule au phénomène de tension, à l’opérateur d’archicration et au méta-régime d’archicratie."
|
||
>
|
||
<div class="scene-cards">
|
||
{structuralEntries.map((entry) => (
|
||
<a class="scene-card" href={hrefOf(entry)}>
|
||
<strong>{entry.data.term}</strong>
|
||
<span>{entry.data.definitionShort}</span>
|
||
|
||
{(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
|
||
<small>
|
||
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
|
||
</small>
|
||
)}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</GlossaryPortalSection>
|
||
)}
|
||
|
||
{relatedEntries.length > 0 && (
|
||
<GlossaryPortalSection
|
||
id="constellation-theorique"
|
||
title="Constellation théorique"
|
||
count={`${constellationCount} entrée${constellationCount > 1 ? "s" : ""}`}
|
||
intro="Cette notion dialogue avec plusieurs diagnostics et paradigmes qui permettent d’en préciser la portée politique, symbolique et régulatrice."
|
||
>
|
||
{otherEntries.length > 0 && (
|
||
<div class="scene-block scene-block--panel">
|
||
<div class="scene-block__head">
|
||
<h3 id="notions-et-diagnostics-lies">Notions et diagnostics liés</h3>
|
||
<span class="scene-block__count">
|
||
{otherCount} entrée{otherCount > 1 ? "s" : ""}
|
||
</span>
|
||
</div>
|
||
|
||
<p class="scene-block__intro">
|
||
Ces entrées prolongent la scène d’épreuve vers des questions
|
||
d’instituabilité, de fermeture, d’empêchement ou de visibilité
|
||
de la régulation.
|
||
</p>
|
||
|
||
<div class="scene-cards">
|
||
{otherEntries.map((entry) => (
|
||
<a class="scene-card" href={hrefOf(entry)}>
|
||
<strong>{entry.data.term}</strong>
|
||
<span>{entry.data.definitionShort}</span>
|
||
|
||
{(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
|
||
<small>
|
||
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
|
||
</small>
|
||
)}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{paradigmEntries.length > 0 && (
|
||
<div class="scene-block scene-block--panel">
|
||
<div class="scene-block__head">
|
||
<h3 id="paradigmes-mobilises">Paradigmes mobilisés</h3>
|
||
<span class="scene-block__count">
|
||
{paradigmCount} paradigme{paradigmCount > 1 ? "s" : ""}
|
||
</span>
|
||
</div>
|
||
|
||
<p class="scene-block__intro">
|
||
Ces paradigmes servent de points d’appui comparatifs pour mieux
|
||
comprendre ce qui, dans la scène archicratique, relève de la
|
||
conflictualité, de l’apparition publique ou de la mise en litige
|
||
de la régulation.
|
||
</p>
|
||
|
||
<div class="scene-cards">
|
||
{paradigmEntries.map((entry) => (
|
||
<a class="scene-card" href={hrefOf(entry)}>
|
||
<strong>{entry.data.term}</strong>
|
||
<span>{entry.data.definitionShort}</span>
|
||
|
||
{(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
|
||
<small>
|
||
Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
|
||
</small>
|
||
)}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</GlossaryPortalSection>
|
||
)}
|
||
|
||
<GlossaryPortalSection
|
||
id="prolonger-la-lecture"
|
||
title="Prolonger la lecture"
|
||
intro="Cette page a vocation à devenir un portail intermédiaire entre l’accueil du glossaire et les fiches détaillées. Elle prolonge la lecture vers les autres parcours déjà stabilisés du système archicratique."
|
||
>
|
||
<div class="scene-cards">
|
||
{prolongerLinks.map((item) => (
|
||
<a class="scene-card" href={item.href}>
|
||
<strong>{item.title}</strong>
|
||
<span>{item.text}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</GlossaryPortalSection>
|
||
|
||
<GlossaryPortalSection
|
||
id="portee-densemble"
|
||
title="Portée d’ensemble"
|
||
final={true}
|
||
>
|
||
<p>
|
||
Les scènes archicratiques rappellent que la régulation ne vaut jamais
|
||
seulement par son efficacité interne. Elle doit aussi pouvoir paraître,
|
||
être soumise à l’épreuve, être discutée et éventuellement être révisée.
|
||
La <a href="/glossaire/scene-depreuve/">scène d’épreuve</a> marque ainsi
|
||
le point où l’<a href="/glossaire/archicration/">archicration</a> cesse
|
||
d’être pure opération pour devenir enjeu politique, symbolique et
|
||
collectif.
|
||
</p>
|
||
</GlossaryPortalSection>
|
||
</section>
|
||
|
||
<GlossaryPortalStickySync
|
||
heroMoreId="scene-hero-more"
|
||
heroToggleId="scene-hero-toggle"
|
||
/>
|
||
</GlossaryLayout>
|
||
|
||
<style>
|
||
.scene-page{
|
||
padding: 8px 0 24px;
|
||
}
|
||
|
||
.scene-focus-card{
|
||
margin-top: 14px;
|
||
padding: 18px 20px;
|
||
border: 1px solid rgba(127,127,127,0.22);
|
||
border-radius: 18px;
|
||
background: rgba(127,127,127,0.05);
|
||
}
|
||
|
||
.scene-focus-card__eyebrow{
|
||
margin-bottom: 10px;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
opacity: .72;
|
||
}
|
||
|
||
.scene-focus-card h3{
|
||
margin: 0 0 10px;
|
||
font-size: clamp(1.35rem, 2vw, 1.7rem);
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.scene-focus-card h3 a{
|
||
text-decoration: none;
|
||
}
|
||
|
||
.scene-focus-card__def{
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
line-height: 1.55;
|
||
opacity: .95;
|
||
}
|
||
|
||
.scene-focus-card__meta{
|
||
margin-top: 14px;
|
||
padding-top: 14px;
|
||
border-top: 1px solid rgba(127,127,127,0.18);
|
||
}
|
||
|
||
.scene-focus-card__meta p{
|
||
margin: 0;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
opacity: .9;
|
||
}
|
||
|
||
.scene-focus-card__meta p + p{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.scene-block{
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.scene-block--panel{
|
||
padding: 18px 18px 16px;
|
||
border: 1px solid rgba(127,127,127,0.18);
|
||
border-radius: 18px;
|
||
background:
|
||
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
|
||
rgba(127,127,127,0.035);
|
||
}
|
||
|
||
.scene-block + .scene-block{
|
||
margin-top: 22px;
|
||
}
|
||
|
||
.scene-block__head{
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.scene-block h3{
|
||
margin: 0;
|
||
font-size: 15px;
|
||
line-height: 1.3;
|
||
scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 36px);
|
||
}
|
||
|
||
.scene-block__count{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 24px;
|
||
padding: 0 10px;
|
||
border: 1px solid rgba(127,127,127,0.22);
|
||
border-radius: 999px;
|
||
font-size: 12px;
|
||
line-height: 1.2;
|
||
opacity: .78;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.scene-block__intro{
|
||
max-width: 78ch;
|
||
margin: 0 0 12px;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
opacity: .9;
|
||
}
|
||
|
||
.scene-cards{
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 12px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.scene-card{
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 14px 16px;
|
||
border: 1px solid rgba(127,127,127,0.22);
|
||
border-radius: 16px;
|
||
background: rgba(127,127,127,0.05);
|
||
text-decoration: none;
|
||
transition:
|
||
transform 120ms ease,
|
||
background 120ms ease,
|
||
border-color 120ms ease;
|
||
}
|
||
|
||
.scene-card:hover{
|
||
transform: translateY(-1px);
|
||
background: rgba(127,127,127,0.08);
|
||
border-color: rgba(0,217,255,0.16);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.scene-card strong{
|
||
font-size: 15px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.scene-card span{
|
||
font-size: 14px;
|
||
line-height: 1.45;
|
||
opacity: .92;
|
||
}
|
||
|
||
.scene-card small{
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
opacity: .72;
|
||
}
|
||
|
||
.scene-empty{
|
||
margin: 0;
|
||
font-style: italic;
|
||
opacity: .82;
|
||
}
|
||
|
||
@media (max-width: 720px){
|
||
.scene-block--panel{
|
||
padding: 16px;
|
||
border-radius: 16px;
|
||
}
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark){
|
||
.scene-focus-card,
|
||
.scene-block--panel,
|
||
.scene-card{
|
||
background: rgba(255,255,255,0.04);
|
||
}
|
||
|
||
.scene-card:hover{
|
||
background: rgba(255,255,255,0.07);
|
||
}
|
||
}
|
||
</style> |