149 lines
3.6 KiB
Svelte
149 lines
3.6 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { makeSlug } from '$lib/utils.js';
|
|
|
|
export let items;
|
|
|
|
items.forEach(i => i.slug = makeSlug(i.text));
|
|
|
|
let headings = [];
|
|
let currentHeadingSlug = null;
|
|
let currentSubheadingSlug = null;
|
|
|
|
function setCurrentHeading() {
|
|
for (const h of headings) {
|
|
const yPos = h.getBoundingClientRect().y;
|
|
if (yPos > (window.innerHeight / 3)) {
|
|
break;
|
|
}
|
|
if (h.tagName === 'H2') {
|
|
currentHeadingSlug = h.id;
|
|
currentSubheadingSlug = null;
|
|
}
|
|
if (h.tagName === 'H3') {
|
|
currentSubheadingSlug = h.id
|
|
}
|
|
}
|
|
}
|
|
|
|
onMount (() => {
|
|
// These shouldn't change over the life of the page, so we can cache them
|
|
headings = Array.from(document.querySelectorAll('h2[id], h3[id]'));
|
|
setCurrentHeading();
|
|
});
|
|
</script>
|
|
|
|
<svelte:window on:scroll={setCurrentHeading} />
|
|
|
|
<style>
|
|
#toc {
|
|
display: none;
|
|
position: sticky;
|
|
top: 1.5rem;
|
|
margin-left: 1rem;
|
|
margin-right: 2rem;
|
|
|
|
max-width: 14rem;
|
|
color: var(--content-color-faded);
|
|
opacity: 0;
|
|
animation: fade-in 600ms ease-out;
|
|
animation-delay: 500ms;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@media(min-width: 1300px) {
|
|
#toc { display: block }
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {opacity: 0}
|
|
to {opacity: 1}
|
|
}
|
|
|
|
/* margin-left is to match the padding on the top-level list items,
|
|
but here it needs to be margin so that the border is also shifted */
|
|
h5 {
|
|
font-variant: petite-caps;
|
|
font-weight: 500;
|
|
max-width: fit-content;
|
|
|
|
margin-top: 0;
|
|
margin-bottom: 0.25em;
|
|
|
|
padding-bottom: 0.25em;
|
|
border-bottom: 1px solid currentcolor;
|
|
/* make the border stretch beyond the text just a bit, because I like the effect */
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
position: relative;
|
|
font-size: 0.9rem;
|
|
}
|
|
li.depth-2 {
|
|
align-items: stretch;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
li.depth-3 {
|
|
align-items: center;
|
|
margin-bottom: 0.05rem;
|
|
}
|
|
|
|
.marker {
|
|
position: absolute;
|
|
left: -0.6rem;
|
|
}
|
|
.bar {
|
|
width: 0.1rem;
|
|
height: 100%;
|
|
}
|
|
.dot {
|
|
width: 0.15rem;
|
|
height: 0.15rem;
|
|
border-radius: 50%;
|
|
/* vertically center within its containing block */
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
}
|
|
|
|
li.current, li:hover {
|
|
color: var(--content-color);
|
|
}
|
|
.current .marker, li:hover .marker {
|
|
background-color: var(--accent-color);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div id="toc">
|
|
<h5>
|
|
<span class="heading">Contents</span>
|
|
</h5>
|
|
<ul>
|
|
{#each items as item}
|
|
{#if item.depth === 2}
|
|
<li class="depth-2" class:current={item.slug === currentHeadingSlug} style:align-items="stretch">
|
|
<span class="marker bar"></span>
|
|
<a href="#{item.slug}">{item.text}</a>
|
|
</li>
|
|
{:else if item.depth === 3}
|
|
<li class="depth-3" class:current={item.slug === currentSubheadingSlug} style:align-items="center" style:margin-left="0.75em">
|
|
<span class="marker dot"></span>
|
|
<a href="#{item.slug}">{item.text}</a>
|
|
</li>
|
|
{/if}
|
|
{/each}
|
|
</ul>
|
|
</div> |