TableOfContents

TableOfContents reads the h1 to h6 headings of an HTML string and renders a nested list of links to them. Pass it the rendered content of a CMS item to give long articles and documentation pages an outline.

Usage

@using Osirion.Blazor.Cms.Web.Components

<TableOfContents Content="@Item?.Content" />

A sidebar outline limited to the second and third heading levels:

@using Osirion.Blazor.Cms.Domain.Entities
@using Osirion.Blazor.Cms.Web.Components

<aside>
    <h2>On this page</h2>
    <TableOfContents Content="@Item?.Content"
                     MinLevel="2"
                     MaxLevel="3"
                     EmptyText="This page has no sections." />
</aside>

@code {
    [Parameter]
    public ContentItem? Item { get; set; }
}

The built-in ArticlePage and DocumentPage render it the same way, under their own TableOfContentsTitle heading.

Parameters

Other attributes on the tag are captured but not rendered.

Behavior

• Each link points to {current path}#{heading id}. The CMS Markdown renderer gives every heading an id and the HTML sanitizer keeps it, so the links work for CMS content. For a heading without an id, the component makes one from the text (lower case, letters and digits, spaces turned into hyphens), and the link only works if your page has an element with that id.
• The heading's id is read only when it is the first attribute of the tag, as in the renderer's output.
• Headings are nested by level: an h3 goes under the h2 before it. The list shows two levels, the top-level headings and the headings directly under them. Deeper headings are not shown.
• Tags inside a heading are stripped and the remaining text is written as text, so it is HTML-encoded. Character references are not decoded first, so a heading such as Q&A, which the Markdown renderer writes as Q&A, shows as Q&A in the outline.
• The component always renders a nav with the accessible name "Table of Contents" (fixed English text), and the EmptyText paragraph when there is nothing to list. Headings are read on every parameter change, with no script, so the outline is part of the static SSR response.

Styling

Links use --osirion-text-secondary and --osirion-action-primary, with --osirion-focus-ring-color for keyboard focus. The stylesheet also has print rules.

Related

• OsirionStickySidebar, to keep the outline in view while reading
• Content View
• CMS navigation components