eleventy-plugin-toc-util v0.1.3

eleventy-plugin-toc-util

Usage

eleventy.config.js:

import * as toc from "eleventy-plugin-toc-util";

export default async function (config) {
  // Use https://www.11ty.dev/docs/plugins/id-attribute/ to add ids to
  // all headings in the site

  // Or create filter to add ids and anchors to individual contents
  config.addFilter("attachId", (html) => toc.attachId(html));

  // Only add anchors to h2 and h3
  config.addFilter("attachAnchor", (html) => toc.attachIdAnchor(html, "h2,h3"));

  config.addFilter("toc", (html) => toc.createToc(html));
}

Template file:

{% extends "base.njk" %}
{% block content %}
  <article>
    <!--Add ids and anchor to content-->
    {% set content = content | attachId | attachAnchor %}

    <aside>
      <!--Render table of content-->
      {{ content | toc | safe }}
    </aside>

    {{ content | safe }}
  </article>
{% endblock %}

See function JSDocs in toc-util.js for more information.

Similar solutions

• eleventy-plugin-toc
• eleventy-plugin-nesting-toc
• Adding a Table of Contents to dynamic content in 11ty

Tasks

• TOC title is based on headings id, so special characters are excluded. Think of a way to create TOC without using heading ids