60 lines
2.3 KiB
Plaintext
60 lines
2.3 KiB
Plaintext
{# Table of Contents Widget (for articles with headings) #}
|
|
<is-land on:visible>
|
|
<div class="widget">
|
|
<h3 class="widget-title">Contents</h3>
|
|
<nav class="toc" aria-label="Table of contents">
|
|
{% if toc and toc.length %}
|
|
<ul class="space-y-1 text-sm">
|
|
{% for item in toc %}
|
|
<li class="{% if item.level == 3 %}ml-3{% elif item.level == 4 %}ml-6{% elif item.level == 5 %}ml-9{% elif item.level == 6 %}ml-12{% endif %}">
|
|
<a href="#{{ item.slug }}" class="text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400 hover:underline transition-colors">
|
|
{{ item.text }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<ul class="space-y-1 text-sm" data-toc-fallback-list></ul>
|
|
<script>
|
|
(() => {
|
|
const script = document.currentScript;
|
|
if (!script) return;
|
|
|
|
const widget = script.closest(".widget");
|
|
const fallbackList = widget ? widget.querySelector("[data-toc-fallback-list]") : null;
|
|
if (!widget || !fallbackList) return;
|
|
|
|
const shell = widget.closest(".widget-collapsible");
|
|
const contentRoot = document.querySelector("article .e-content");
|
|
if (!contentRoot) {
|
|
if (shell) shell.style.display = "none";
|
|
return;
|
|
}
|
|
|
|
const headings = Array.from(contentRoot.querySelectorAll("h2[id], h3[id], h4[id], h5[id], h6[id]"));
|
|
if (!headings.length) {
|
|
if (shell) shell.style.display = "none";
|
|
return;
|
|
}
|
|
|
|
for (const heading of headings) {
|
|
const level = Number.parseInt(heading.tagName.slice(1), 10);
|
|
const item = document.createElement("li");
|
|
if (Number.isFinite(level) && level > 2) {
|
|
item.style.marginLeft = `${(level - 2) * 0.75}rem`;
|
|
}
|
|
|
|
const link = document.createElement("a");
|
|
link.href = `#${heading.id}`;
|
|
link.className = "text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400 hover:underline transition-colors";
|
|
link.textContent = heading.textContent ? heading.textContent.trim() : heading.id;
|
|
item.appendChild(link);
|
|
fallbackList.appendChild(item);
|
|
}
|
|
})();
|
|
</script>
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</is-land>
|