382 lines
8.4 KiB
Plaintext
382 lines
8.4 KiB
Plaintext
---
|
|
import {
|
|
getFondamentaux,
|
|
getGlossaryHomeStats,
|
|
getGlossaryPortalLinks,
|
|
hrefOfGlossaryEntry,
|
|
} from "../lib/glossary";
|
|
|
|
const {
|
|
allEntries = [],
|
|
} = Astro.props;
|
|
|
|
const fondamentaux = getFondamentaux(allEntries);
|
|
const portalLinks = getGlossaryPortalLinks();
|
|
|
|
const {
|
|
totalEntries,
|
|
paradigmesCount,
|
|
doctrinesCount,
|
|
metaRegimesCount,
|
|
} = getGlossaryHomeStats(allEntries);
|
|
---
|
|
|
|
<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>
|
|
|
|
<details class="glossary-home-aside__block glossary-home-aside__disclosure" open>
|
|
<summary class="glossary-home-aside__summary">
|
|
<span class="glossary-home-aside__heading">Parcours du glossaire</span>
|
|
<span class="glossary-home-aside__chevron" aria-hidden="true">▾</span>
|
|
</summary>
|
|
|
|
<div class="glossary-home-aside__panel">
|
|
<ul class="glossary-home-aside__list">
|
|
{portalLinks.map((item) => (
|
|
<li><a href={item.href}>{item.label}</a></li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
|
|
{fondamentaux.length > 0 && (
|
|
<details class="glossary-home-aside__block glossary-home-aside__disclosure" open>
|
|
<summary class="glossary-home-aside__summary">
|
|
<span class="glossary-home-aside__heading">Noyau archicratique</span>
|
|
<span class="glossary-home-aside__chevron" aria-hidden="true">▾</span>
|
|
</summary>
|
|
|
|
<div class="glossary-home-aside__panel">
|
|
<ul class="glossary-home-aside__list">
|
|
{fondamentaux.map((entry) => (
|
|
<li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
)}
|
|
</nav>
|
|
|
|
<style>
|
|
.glossary-home-aside{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.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);
|
|
min-width: 0;
|
|
}
|
|
|
|
.glossary-home-aside__block--intro{
|
|
padding-top: 13px;
|
|
padding-bottom: 13px;
|
|
}
|
|
|
|
.glossary-home-aside__title{
|
|
font-size: 18px;
|
|
font-weight: 850;
|
|
letter-spacing: .1px;
|
|
line-height: 1.22;
|
|
}
|
|
|
|
.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;
|
|
min-width: 0;
|
|
}
|
|
|
|
.glossary-home-aside__disclosure{
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.glossary-home-aside__summary{
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.glossary-home-aside__summary::-webkit-details-marker{
|
|
display: none;
|
|
}
|
|
|
|
.glossary-home-aside__summary:hover{
|
|
background: rgba(127,127,127,0.035);
|
|
}
|
|
|
|
.glossary-home-aside__heading{
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 850;
|
|
line-height: 1.28;
|
|
opacity: .97;
|
|
}
|
|
|
|
.glossary-home-aside__chevron{
|
|
flex: 0 0 auto;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
opacity: .72;
|
|
transform: rotate(0deg);
|
|
transition: transform 160ms ease, opacity 160ms ease;
|
|
}
|
|
|
|
.glossary-home-aside__disclosure[open] .glossary-home-aside__chevron{
|
|
transform: rotate(180deg);
|
|
opacity: .96;
|
|
}
|
|
|
|
.glossary-home-aside__panel{
|
|
padding: 0 14px 14px;
|
|
}
|
|
|
|
.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.42;
|
|
word-break: break-word;
|
|
}
|
|
|
|
@media (max-width: 860px){
|
|
.glossary-home-aside{
|
|
gap: 10px;
|
|
}
|
|
|
|
.glossary-home-aside__block{
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.glossary-home-aside__block--intro{
|
|
padding: 12px;
|
|
}
|
|
|
|
.glossary-home-aside__title{
|
|
font-size: 19px;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.glossary-home-aside__meta{
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
line-height: 1.32;
|
|
}
|
|
|
|
.glossary-home-aside__pills{
|
|
gap: 6px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.glossary-home-aside__pill{
|
|
padding: 4px 9px;
|
|
font-size: 12px;
|
|
line-height: 1.28;
|
|
}
|
|
|
|
.glossary-home-aside__summary{
|
|
padding: 12px;
|
|
}
|
|
|
|
.glossary-home-aside__heading{
|
|
font-size: 17px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.glossary-home-aside__panel{
|
|
padding: 0 12px 12px;
|
|
}
|
|
|
|
.glossary-home-aside__list li{
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.glossary-home-aside__list a{
|
|
font-size: 14px;
|
|
line-height: 1.34;
|
|
}
|
|
|
|
.glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px){
|
|
.glossary-home-aside__disclosure{
|
|
background: rgba(127,127,127,0.045);
|
|
}
|
|
|
|
.glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
|
|
border-bottom: 1px solid rgba(127,127,127,0.12);
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
|
.glossary-home-aside{
|
|
gap: 8px;
|
|
}
|
|
|
|
.glossary-home-aside__block{
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.glossary-home-aside__block--intro{
|
|
padding: 10px 11px;
|
|
}
|
|
|
|
.glossary-home-aside__title{
|
|
font-size: 16px;
|
|
line-height: 1.14;
|
|
}
|
|
|
|
.glossary-home-aside__meta{
|
|
font-size: 11px;
|
|
line-height: 1.26;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.glossary-home-aside__pills{
|
|
gap: 5px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.glossary-home-aside__pill{
|
|
padding: 3px 8px;
|
|
font-size: 11px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.glossary-home-aside__summary{
|
|
padding: 10px 11px;
|
|
}
|
|
|
|
.glossary-home-aside__heading{
|
|
font-size: 15px;
|
|
line-height: 1.16;
|
|
}
|
|
|
|
.glossary-home-aside__panel{
|
|
padding: 0 11px 10px;
|
|
}
|
|
|
|
.glossary-home-aside__list li{
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.glossary-home-aside__list a{
|
|
font-size: 13px;
|
|
line-height: 1.28;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 861px){
|
|
.glossary-home-aside__summary{
|
|
cursor: default;
|
|
}
|
|
|
|
.glossary-home-aside__chevron{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark){
|
|
.glossary-home-aside__block,
|
|
.glossary-home-aside__pill{
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.glossary-home-aside__summary:hover{
|
|
background: rgba(255,255,255,0.03);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script is:inline>
|
|
(() => {
|
|
const syncMobileDisclosure = () => {
|
|
const mobile = window.matchMedia("(max-width: 860px)").matches;
|
|
const smallLandscape = window.matchMedia(
|
|
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
|
).matches;
|
|
|
|
const compact = mobile || smallLandscape;
|
|
|
|
document
|
|
.querySelectorAll(".glossary-home-aside__disclosure")
|
|
.forEach((el, index) => {
|
|
if (!(el instanceof HTMLDetailsElement)) return;
|
|
|
|
if (compact) {
|
|
if (!el.dataset.mobileInit) {
|
|
el.open = index === 0;
|
|
el.dataset.mobileInit = "true";
|
|
}
|
|
} else {
|
|
el.open = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", syncMobileDisclosure, { once: true });
|
|
} else {
|
|
syncMobileDisclosure();
|
|
}
|
|
|
|
window.addEventListener("resize", syncMobileDisclosure);
|
|
window.addEventListener("pageshow", syncMobileDisclosure);
|
|
})();
|
|
</script> |