The EmDash alternative to Table of Contents Plus

Long posts shouldn't make readers work to find what they need.

320 words·2min read

Parses headings from your Portable Text content and writes a nested navigation structure on every publish. Ships TableOfContents.astro with a sticky sidebar variant that follows readers as they scroll. Works out of the box. Skips short posts automatically.

npm install @plugdash/tocgen

beta GitHub

This is the default. No configuration.

Setup

Install and register

npm install @plugdash/tocgen

import tocgen from "@plugdash/tocgen"
// in emdash plugins array:
tocgen({ minHeadings: 3 })

Add to your layout

import TableOfContents from "@plugdash/tocgen/TableOfContents.astro"

<TableOfContents post={post} sticky />

After this, every post with three or more headings gets a table of contents. Short posts are skipped - you don't need to configure the threshold.

It looks right. But it's yours to change.

Props

prop	type	default	description
`post`	`EmDash content item`		Required
`sticky`	`boolean`	`false`	Stick to viewport while scrolling
`maxDepth`	`2 \| 3 \| 4`	`3`	Deepest heading level to include

CSS custom properties

token	description
`--plugdash-toc-size`	Font size
`--plugdash-toc-indent`	Nested indent
`--plugdash-toc-hover`	Hover colour

Components are intentionally simple. Copy src/TableOfContents.astro into your theme and modify freely - no upstream coupling.

Pairs well with

readers who can see the structure and the time commitment are more likely to start.

readtime

beta

Readers decide in three seconds. Give them a reason to stay.

npm install @plugdash/readtime

callout

beta

The block every technical writer reaches for that almost no theme ships.

npm install @plugdash/callout