529 lines
12 KiB
Plaintext
529 lines
12 KiB
Plaintext
---
|
|
import {
|
|
getGlossaryEntryAsideData,
|
|
getGlossaryPortalLinks,
|
|
hrefOfGlossaryEntry,
|
|
slugOfGlossaryEntry,
|
|
} from "../lib/glossary";
|
|
|
|
const {
|
|
currentEntry,
|
|
allEntries = [],
|
|
} = Astro.props;
|
|
|
|
const currentSlug = slugOfGlossaryEntry(currentEntry);
|
|
|
|
const {
|
|
displayFamily,
|
|
displayDomain,
|
|
displayLevel,
|
|
showNoyau,
|
|
showSameFamily,
|
|
fondamentaux,
|
|
sameFamilyTitle,
|
|
sameFamilyEntries,
|
|
relationSections,
|
|
contextualTheory,
|
|
} = getGlossaryEntryAsideData(currentEntry, allEntries);
|
|
|
|
const portalLinks = getGlossaryPortalLinks();
|
|
---
|
|
|
|
<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>
|
|
|
|
{displayDomain && (
|
|
<span class="glossary-aside__pill">{displayDomain}</span>
|
|
)}
|
|
|
|
{displayLevel && (
|
|
<span class="glossary-aside__pill">{displayLevel}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<details class="glossary-aside__block glossary-aside__disclosure">
|
|
<summary class="glossary-aside__summary">
|
|
<span class="glossary-aside__heading">Portails</span>
|
|
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
|
|
</summary>
|
|
|
|
<div class="glossary-aside__panel">
|
|
<ul class="glossary-aside__list">
|
|
{portalLinks.map((item) => (
|
|
<li><a href={item.href}>{item.label}</a></li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
|
|
{showNoyau && (
|
|
<details class="glossary-aside__block glossary-aside__disclosure">
|
|
<summary class="glossary-aside__summary">
|
|
<span class="glossary-aside__heading">Noyau archicratique</span>
|
|
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
|
|
</summary>
|
|
|
|
<div class="glossary-aside__panel">
|
|
<ul class="glossary-aside__list">
|
|
{fondamentaux.map((entry) => {
|
|
const active = slugOfGlossaryEntry(entry) === currentSlug;
|
|
return (
|
|
<li>
|
|
<a
|
|
href={hrefOfGlossaryEntry(entry)}
|
|
aria-current={active ? "page" : undefined}
|
|
class={active ? "is-active" : undefined}
|
|
>
|
|
{entry.data.term}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
)}
|
|
|
|
{showSameFamily && (
|
|
<details class="glossary-aside__block glossary-aside__disclosure">
|
|
<summary class="glossary-aside__summary">
|
|
<span class="glossary-aside__heading">{sameFamilyTitle}</span>
|
|
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
|
|
</summary>
|
|
|
|
<div class="glossary-aside__panel">
|
|
<ul class="glossary-aside__list">
|
|
{sameFamilyEntries.map((entry) => {
|
|
const active = slugOfGlossaryEntry(entry) === currentSlug;
|
|
return (
|
|
<li>
|
|
<a
|
|
href={hrefOfGlossaryEntry(entry)}
|
|
aria-current={active ? "page" : undefined}
|
|
class={active ? "is-active" : undefined}
|
|
>
|
|
{entry.data.term}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
)}
|
|
|
|
{relationSections.length > 0 && (
|
|
<details class="glossary-aside__block glossary-aside__disclosure">
|
|
<summary class="glossary-aside__summary">
|
|
<span class="glossary-aside__heading">Autour de cette fiche</span>
|
|
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
|
|
</summary>
|
|
|
|
<div class="glossary-aside__panel">
|
|
{relationSections.map((section) => (
|
|
<>
|
|
<h3 class="glossary-aside__subheading">{section.title}</h3>
|
|
<ul class="glossary-aside__list">
|
|
{section.items.map((entry) => (
|
|
<li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
))}
|
|
</div>
|
|
</details>
|
|
)}
|
|
|
|
{contextualTheory.length > 0 && (
|
|
<details class="glossary-aside__block glossary-aside__disclosure">
|
|
<summary class="glossary-aside__summary">
|
|
<span class="glossary-aside__heading">Paysage théorique</span>
|
|
<span class="glossary-aside__chevron" aria-hidden="true">▾</span>
|
|
</summary>
|
|
|
|
<div class="glossary-aside__panel">
|
|
<ul class="glossary-aside__list">
|
|
{contextualTheory.map((entry) => (
|
|
<li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
)}
|
|
</nav>
|
|
|
|
<style>
|
|
.glossary-aside{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.glossary-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-aside__block--intro{
|
|
padding-top: 13px;
|
|
padding-bottom: 13px;
|
|
}
|
|
|
|
.glossary-aside__back{
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 1.35;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.glossary-aside__title{
|
|
font-size: 18px;
|
|
font-weight: 850;
|
|
letter-spacing: .1px;
|
|
line-height: 1.22;
|
|
}
|
|
|
|
.glossary-aside__pills{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.glossary-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-aside__pill--family{
|
|
border-color: rgba(127,127,127,0.38);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.glossary-aside__disclosure{
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.glossary-aside__summary{
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.glossary-aside__summary::-webkit-details-marker{
|
|
display: none;
|
|
}
|
|
|
|
.glossary-aside__summary:hover{
|
|
background: rgba(127,127,127,0.035);
|
|
}
|
|
|
|
.glossary-aside__heading{
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 850;
|
|
line-height: 1.28;
|
|
opacity: .97;
|
|
}
|
|
|
|
.glossary-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-aside__disclosure[open] .glossary-aside__chevron{
|
|
transform: rotate(180deg);
|
|
opacity: .96;
|
|
}
|
|
|
|
.glossary-aside__panel{
|
|
padding: 0 14px 14px;
|
|
}
|
|
|
|
.glossary-aside__subheading{
|
|
margin: 13px 0 8px;
|
|
font-size: 12.5px;
|
|
font-weight: 800;
|
|
line-height: 1.35;
|
|
opacity: .82;
|
|
text-transform: uppercase;
|
|
letter-spacing: .04em;
|
|
}
|
|
|
|
.glossary-aside__list{
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.glossary-aside__list li{
|
|
margin: 7px 0;
|
|
}
|
|
|
|
.glossary-aside__list a{
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.glossary-aside__list a.is-active{
|
|
font-weight: 800;
|
|
}
|
|
|
|
@media (max-width: 860px){
|
|
.glossary-aside{
|
|
gap: 10px;
|
|
}
|
|
|
|
.glossary-aside__block{
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.glossary-aside__block--intro{
|
|
padding: 12px;
|
|
}
|
|
|
|
.glossary-aside__back{
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
line-height: 1.28;
|
|
}
|
|
|
|
.glossary-aside__title{
|
|
font-size: 19px;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.glossary-aside__pills{
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.glossary-aside__pill{
|
|
padding: 4px 9px;
|
|
font-size: 12px;
|
|
line-height: 1.26;
|
|
}
|
|
|
|
.glossary-aside__summary{
|
|
padding: 12px;
|
|
}
|
|
|
|
.glossary-aside__heading{
|
|
font-size: 17px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.glossary-aside__panel{
|
|
padding: 0 12px 12px;
|
|
}
|
|
|
|
.glossary-aside__subheading{
|
|
margin: 10px 0 6px;
|
|
font-size: 11.5px;
|
|
line-height: 1.26;
|
|
}
|
|
|
|
.glossary-aside__list li{
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.glossary-aside__list a{
|
|
font-size: 14px;
|
|
line-height: 1.34;
|
|
}
|
|
|
|
.glossary-aside__disclosure:not([open]) .glossary-aside__panel{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px){
|
|
.glossary-aside__disclosure{
|
|
background: rgba(127,127,127,0.045);
|
|
}
|
|
|
|
.glossary-aside__disclosure[open] .glossary-aside__summary{
|
|
border-bottom: 1px solid rgba(127,127,127,0.12);
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
|
.glossary-aside{
|
|
gap: 8px;
|
|
}
|
|
|
|
.glossary-aside__block{
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.glossary-aside__block--intro{
|
|
padding: 10px 11px;
|
|
}
|
|
|
|
.glossary-aside__back{
|
|
margin-bottom: 6px;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.glossary-aside__title{
|
|
font-size: 16px;
|
|
line-height: 1.14;
|
|
}
|
|
|
|
.glossary-aside__pills{
|
|
gap: 5px;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.glossary-aside__pill{
|
|
padding: 3px 8px;
|
|
font-size: 11px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.glossary-aside__summary{
|
|
padding: 10px 11px;
|
|
}
|
|
|
|
.glossary-aside__heading{
|
|
font-size: 15px;
|
|
line-height: 1.16;
|
|
}
|
|
|
|
.glossary-aside__panel{
|
|
padding: 0 11px 10px;
|
|
}
|
|
|
|
.glossary-aside__subheading{
|
|
margin: 8px 0 5px;
|
|
font-size: 11px;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.glossary-aside__list li{
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.glossary-aside__list a{
|
|
font-size: 13px;
|
|
line-height: 1.28;
|
|
}
|
|
}
|
|
|
|
@media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse){
|
|
.glossary-aside{
|
|
gap: 10px;
|
|
}
|
|
|
|
.glossary-aside__disclosure{
|
|
background: rgba(127,127,127,0.045);
|
|
}
|
|
|
|
.glossary-aside__disclosure:not([open]) .glossary-aside__panel{
|
|
display: none;
|
|
}
|
|
|
|
.glossary-aside__summary{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.glossary-aside__chevron{
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 861px) and (hover: hover) and (pointer: fine){
|
|
.glossary-aside__summary{
|
|
cursor: default;
|
|
}
|
|
|
|
.glossary-aside__chevron{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark){
|
|
.glossary-aside__block,
|
|
.glossary-aside__pill{
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.glossary-aside__summary:hover{
|
|
background: rgba(255,255,255,0.03);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script is:inline>
|
|
(() => {
|
|
const syncMobileDisclosure = () => {
|
|
const mobile = window.matchMedia(
|
|
"(max-width: 860px), ((orientation: portrait) and (max-width: 1024px) and (pointer: coarse))"
|
|
).matches;
|
|
const smallLandscape = window.matchMedia(
|
|
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
|
).matches;
|
|
|
|
const compact = mobile || smallLandscape;
|
|
|
|
document
|
|
.querySelectorAll(".glossary-aside__disclosure")
|
|
.forEach((el, index) => {
|
|
if (!(el instanceof HTMLDetailsElement)) return;
|
|
|
|
if (compact) {
|
|
if (!el.dataset.mobileInit) {
|
|
el.open = false;
|
|
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> |