Something went wrong. Try again.
inkfinite (an infinite canvas/whiteboard) monorepo ink.stormlightlabs.org
svelte rust tauri svg canvas perfect-freehand
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798<script lang="ts"> import type { DocHeading } from './content/types'; import { startScrollSpy } from './scroll-spy';
let { headings }: { headings: DocHeading[] } = $props(); let activeHeading = $state<string | null>(null);
$effect(() => { const elements = headings .map((heading) => document.getElementById(heading.slug)) .filter((heading): heading is HTMLElement => heading instanceof HTMLElement);
return startScrollSpy(elements, (heading) => { activeHeading = heading; }); });</script>
{#if headings.length > 0} <nav class="toc" aria-label="On this page" data-pagefind-ignore> <p class="toc-title">On this page</p> <ul> {#each headings as heading (heading.slug)} <li class:toc-subitem={heading.level === 3} class:active={heading.slug === activeHeading}> <a href={`#${heading.slug}`} aria-current={heading.slug === activeHeading ? 'location' : undefined}> {heading.title} </a> </li> {/each} </ul> </nav>{/if}
<style> .toc { position: sticky; top: 6.75rem; padding-left: 1rem; border-left: 1px solid var(--docs-border); }
.toc-title { margin: 0 0 0.85rem; color: var(--docs-accent-text); font-family: var(--docs-font-mono); font-size: var(--docs-type-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.toc ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.toc li { position: relative; line-height: 1.35; }
.toc li.active::before { position: absolute; top: 0.15em; bottom: 0.15em; left: -1.05rem; width: 2px; background: var(--docs-accent); content: ''; }
.toc li.toc-subitem { padding-left: 0.75rem; }
.toc a { color: var(--docs-text-muted); font-size: 0.78rem; text-decoration: none; }
.toc a:hover, .toc a[aria-current='location'] { color: var(--docs-accent-text); }
.toc a[aria-current='location'] { font-weight: 650; }</style>