39 lines
701 B
Svelte
39 lines
701 B
Svelte
<script lang="ts" context="module">
|
|
export interface TocItem {
|
|
id: string;
|
|
url: string;
|
|
title: string;
|
|
headingLevel: number;
|
|
index: number;
|
|
items?: TocItem[];
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export let items: TocItem[] = [];
|
|
export let activeId: string | undefined;
|
|
</script>
|
|
|
|
<ol class="pl-4">
|
|
{#each items as item (item.url)}
|
|
<li>
|
|
<a href={item.url} class:active={item.id === activeId}>{item.title}</a>
|
|
{#if item.items}
|
|
<svelte:self items={item.items} {activeId} />
|
|
{/if}
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
|
|
<style lang="postcss">
|
|
.active {
|
|
@apply font-bold;
|
|
}
|
|
li {
|
|
@apply pt-3;
|
|
}
|
|
a:hover {
|
|
@apply underline;
|
|
}
|
|
</style>
|