Synchronise les contenus glossaire et ajoute les scripts de conversion DOCX/MDX
This commit is contained in:
@@ -22,43 +22,58 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
|
||||
const bt = String(b.data.title ?? b.data.term ?? slugOf(b));
|
||||
return collator.compare(at, bt);
|
||||
});
|
||||
|
||||
const tocId = `toc-global-${collection}-${String(basePath).replace(/[^\w-]+/g, "-")}`;
|
||||
---
|
||||
|
||||
<nav class="toc-global" aria-label={label}>
|
||||
<div class="toc-global__head">
|
||||
<div class="toc-global__title">{label}</div>
|
||||
</div>
|
||||
<nav
|
||||
class="toc-global"
|
||||
aria-label={label}
|
||||
data-toc-global
|
||||
data-toc-key={`global:${collection}:${basePath}`}
|
||||
>
|
||||
<button
|
||||
class="toc-global__head toc-global__toggle"
|
||||
type="button"
|
||||
aria-expanded="true"
|
||||
aria-controls={tocId}
|
||||
>
|
||||
<span class="toc-global__title">{label}</span>
|
||||
<span class="toc-global__chevron" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
|
||||
<ol class="toc-global__list">
|
||||
{entries.map((e) => {
|
||||
const slug = slugOf(e);
|
||||
const active = slug === currentSlug;
|
||||
<div class="toc-global__body-clip" id={tocId}>
|
||||
<div class="toc-global__body">
|
||||
<ol class="toc-global__list">
|
||||
{entries.map((e) => {
|
||||
const slug = slugOf(e);
|
||||
const active = slug === currentSlug;
|
||||
|
||||
return (
|
||||
<li class={`toc-item ${active ? "is-active" : ""}`}>
|
||||
<a class="toc-link" href={hrefOf(e)} aria-current={active ? "page" : undefined}>
|
||||
<span class="toc-link__row">
|
||||
{active ? (
|
||||
<span class="toc-active-indicator" aria-hidden="true">👉</span>
|
||||
) : (
|
||||
<span class="toc-active-spacer" aria-hidden="true"></span>
|
||||
)}
|
||||
return (
|
||||
<li class={`toc-item ${active ? "is-active" : ""}`}>
|
||||
<a class="toc-link" href={hrefOf(e)} aria-current={active ? "page" : undefined}>
|
||||
<span class="toc-link__row">
|
||||
<span class={`toc-active-mark ${active ? "is-on" : ""}`} aria-hidden="true">
|
||||
<span class="toc-active-mark__dot"></span>
|
||||
</span>
|
||||
|
||||
<span class="toc-link__title">{e.data.title}</span>
|
||||
<span class="toc-link__title">{e.data.title}</span>
|
||||
|
||||
{active && (
|
||||
<span class="toc-badge" aria-label="Chapitre en cours">
|
||||
En cours
|
||||
{active && (
|
||||
<span class="toc-badge" aria-label="Chapitre en cours">
|
||||
En cours
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
{active && <span class="toc-underline" aria-hidden="true"></span>}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
{active && <span class="toc-underline" aria-hidden="true"></span>}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
@@ -69,7 +84,22 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
|
||||
background: rgba(127,127,127,0.06);
|
||||
}
|
||||
|
||||
.toc-global__toggle{
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toc-global__head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px dashed rgba(127,127,127,0.25);
|
||||
@@ -82,11 +112,36 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
|
||||
opacity: .88;
|
||||
}
|
||||
|
||||
.toc-global__chevron{
|
||||
font-size: 12px;
|
||||
opacity: .7;
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
.toc-global__body-clip{
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
transition:
|
||||
grid-template-rows 220ms ease,
|
||||
opacity 160ms ease,
|
||||
margin-top 220ms ease;
|
||||
}
|
||||
|
||||
.toc-global__body{
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toc-global__list{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 44vh;
|
||||
overflow: auto;
|
||||
padding-right: 8px;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.toc-global__list li::marker{ content: ""; }
|
||||
|
||||
.toc-item{ margin: 6px 0; }
|
||||
@@ -112,13 +167,33 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toc-active-indicator{
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
.toc-active-mark{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
.toc-active-spacer{
|
||||
width: 14px;
|
||||
.toc-active-mark__dot{
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
.toc-active-mark.is-on{
|
||||
border-color: rgba(127,127,127,0.34);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toc-active-mark.is-on .toc-active-mark__dot{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toc-link__title{
|
||||
@@ -156,11 +231,66 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.toc-global__list{
|
||||
max-height: 44vh;
|
||||
overflow: auto;
|
||||
padding-right: 8px;
|
||||
scrollbar-gutter: stable;
|
||||
@media (max-width: 980px){
|
||||
.toc-global{
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.toc-global__head{
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.toc-global__title{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.toc-global__body-clip{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.toc-global.is-collapsed .toc-global__body-clip{
|
||||
grid-template-rows: 0fr;
|
||||
opacity: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.toc-global__body{
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity 180ms ease;
|
||||
}
|
||||
|
||||
.toc-global.is-collapsed .toc-global__body{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toc-global.is-collapsed .toc-global__chevron{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.toc-link{
|
||||
padding: 7px 9px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.toc-link__title{
|
||||
font-size: 12.5px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.toc-badge{
|
||||
font-size: 10px;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
|
||||
.toc-global__list{
|
||||
max-height: min(42vh, 360px);
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
@@ -168,12 +298,88 @@ const entries = [...await getCollection(collection)].sort((a, b) => {
|
||||
.toc-link:hover{ background: rgba(255,255,255,0.06); }
|
||||
.toc-item.is-active .toc-link{ background: rgba(255,255,255,0.06); }
|
||||
.toc-badge{ background: rgba(255,255,255,0.06); }
|
||||
.toc-active-mark.is-on{ border-color: rgba(255,255,255,0.22); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const active = document.querySelector(".toc-global .toc-item.is-active");
|
||||
if (active) active.scrollIntoView({ block: "nearest" });
|
||||
function init() {
|
||||
document.querySelectorAll("[data-toc-global]").forEach((nav) => {
|
||||
if (nav.dataset.tocReady === "1") return;
|
||||
nav.dataset.tocReady = "1";
|
||||
|
||||
const toggle = nav.querySelector(".toc-global__toggle");
|
||||
const bodyClip = nav.querySelector(".toc-global__body-clip");
|
||||
const active = nav.querySelector(".toc-item.is-active");
|
||||
const mq = window.matchMedia("(max-width: 980px)");
|
||||
const key = `archicratie:${nav.dataset.tocKey || "toc-global"}`;
|
||||
|
||||
if (!toggle || !bodyClip) return;
|
||||
|
||||
const read = () => {
|
||||
try {
|
||||
const v = localStorage.getItem(key);
|
||||
if (v === "open") return true;
|
||||
if (v === "closed") return false;
|
||||
} catch {}
|
||||
return null;
|
||||
};
|
||||
|
||||
const write = (open) => {
|
||||
try { localStorage.setItem(key, open ? "open" : "closed"); } catch {}
|
||||
};
|
||||
|
||||
const setOpen = (open, { persist = true } = {}) => {
|
||||
const isMobile = mq.matches;
|
||||
nav.classList.toggle("is-collapsed", isMobile && !open);
|
||||
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
if (persist && isMobile) write(open);
|
||||
};
|
||||
|
||||
const initState = () => {
|
||||
if (!mq.matches) {
|
||||
setOpen(true, { persist: false });
|
||||
if (active) active.scrollIntoView({ block: "nearest" });
|
||||
return;
|
||||
}
|
||||
|
||||
const stored = read();
|
||||
const open = stored == null ? false : stored;
|
||||
setOpen(open, { persist: false });
|
||||
|
||||
if (open && active) active.scrollIntoView({ block: "nearest" });
|
||||
};
|
||||
|
||||
toggle.addEventListener("click", () => {
|
||||
const open = toggle.getAttribute("aria-expanded") !== "true";
|
||||
setOpen(open);
|
||||
if (open && active) active.scrollIntoView({ block: "nearest" });
|
||||
|
||||
if (open) {
|
||||
window.dispatchEvent(new CustomEvent("archicratie:tocGlobalOpen"));
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("archicratie:tocLocalOpen", () => {
|
||||
if (!mq.matches) return;
|
||||
setOpen(false);
|
||||
});
|
||||
|
||||
if (mq.addEventListener) {
|
||||
mq.addEventListener("change", initState);
|
||||
} else if (mq.addListener) {
|
||||
mq.addListener(initState);
|
||||
}
|
||||
|
||||
initState();
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
window.addEventListener("DOMContentLoaded", init, { once: true });
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user