Skip to main content

Module headings

Module headings 

Source
Expand description

Heading anchors and the page outline, as a pass over rendered HTML.

Every <h1><h6> in a body leaves here with an id and a link to itself, and the pass hands back the list of what it found — which is what the toc shell slot, the headings template key and the built-in “On this page” block are all made of. One pass, on the output, on the precedent [crate::syntax] set: twig’s serializer offers no heading-id option, and a pass over the HTML covers Markdown, Djot and hand-written HTML bodies with one implementation.

§The id

prov::link::slug of the heading’s text — the same function crate::page::title_to_anchor uses, so a single-file render and a site render agree on what ## Status is called. A second heading with the same slug on one page gets -2, then -3. A heading that already carries an id — an HTML body, a Djot {#custom} attribute — keeps it, and still counts towards the numbering so a later ## Status cannot collide with it.

§The anchor

<h2 id="status">Status <a class="heading-anchor" href="#status" aria-label="Link to this section">#</a></h2>

Inside the heading rather than beside it, so the heading’s text is what a screen reader reads first and the link is one tab stop after it. The stylesheet hides the mark until the heading is hovered or the link focused.

Constants§

ANCHOR_CLASS
The class on the anchor link this pass appends to every heading.

Functions§

anchor_headings
Give every heading in html an id and an anchor, and list them.
render_toc
The outline an <nav class="toc"> holds: a nested list of the page’s h2h3 headings, each linking to its anchor.