@svelte-put/toc

Svelte use:toc action for building table of contents

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Quick Start

<!-- input.svelte -->
<script>
	import { Toc } from '@svelte-put/toc';

	const toc = new Toc({ observe: true });
</script>

<main use:toc.actions.root>
	<h1>Page Heading</h1>

	<section>
		<h2>Table of Contents</h2>
		{#if toc.items.size}
		<ul>
			{#each toc.items.values() as tocItem (tocItem.id)}
			<li>
				<!-- svelte-ignore a11y_missing_attribute -->
				<a use:toc.actions.link="{tocItem}">
					<!-- textContent injected by toc -->
				</a>
			</li>
			{/each}
		</ul>
		{/if}
	</section>

	<section>
		<h2>Section Heading Level 2</h2>
		<p>...</p>
	</section>

	<section>
		<h3>Section Heading Level 3</h3>
		<p>...</p>
	</section>
</main>

will render...

<!-- output.html -->
<main
	data-toc-observe-for="page-heading"
	data-toc-root="ee4f13a3-dfec-401d-b52c-a52550e20ddf"
	data-toc-observe-active-id="section-heading-level-3"
>
	<h1 id="page-heading" data-toc="">
		<a aria-hidden="true" tabindex="-1" href="#page-heading" data-toc-anchor="">#</a>Page Heading
	</h1>
	<section data-toc-observe-for="table-of-contents">
		<h2 id="table-of-contents" data-toc="">
			<a aria-hidden="true" tabindex="-1" href="#table-of-contents" data-toc-anchor="">#</a>Table of
			Contents
		</h2>
		<ul>
			<li>
				<a href="#page-heading" data-toc-link-for="page-heading" data-toc-link-current="false"
					>Page Heading</a
				>
			</li>
			<li>
				<a
					href="#table-of-contents"
					data-toc-link-for="table-of-contents"
					data-toc-link-current="false"
					>Table of Contents</a
				>
			</li>
			<li>
				<a
					href="#section-heading-level-2"
					data-toc-link-for="section-heading-level-2"
					data-toc-link-current="false"
					>Section Heading Level 2</a
				>
			</li>
			<li>
				<a
					href="#section-heading-level-3"
					data-toc-link-for="section-heading-level-3"
					data-toc-link-current="true"
					>Section Heading Level 3</a
				>
			</li>
		</ul>
	</section>
	<section data-toc-observe-for="section-heading-level-2">
		<h2 id="section-heading-level-2" data-toc="">
			<a aria-hidden="true" tabindex="-1" href="#section-heading-level-2" data-toc-anchor="">#</a
			>Section Heading Level 2
		</h2>
		<p>...</p>
	</section>
	<section data-toc-observe-for="section-heading-level-3">
		<h3 id="section-heading-level-3" data-toc="">
			<a aria-hidden="true" tabindex="-1" href="#section-heading-level-3" data-toc-anchor="">#</a
			>Section Heading Level 3
		</h3>
		<p>...</p>
	</section>
</main>

Acknowledgement

This package relies on svelte action strategy and attempts to stay minimal. If you are looking for a declarative, component-oriented solution, check out Janosh's svelte-toc.

Changelog