Skip to content
Coastal Healthcare Advocates

Module: style-guide

Marks the contents link for the section being read, on the style guide and the CSS reference.

Both pages put a numbered contents list beside one long reading column. As the reader scrolls, the link for the section crossing the reading line (a quarter of the way down the window) gets aria-current="true", which the stylesheet draws as full-strength ink and the nav's Sky underline.

Authored markup

<nav data-toc aria-label="Contents">
  <ol><li><a href="#palette">Palette</a></li>…</ol>
</nav>
<section id="palette">…</section>

The list works as plain in-page links without this script; nothing is hidden or moved. The hook is a data attribute, not a class, because Tailwind scans src/js/ for both stylesheets and a class named here would pull the guide's rules into the stylesheet every visitor loads.

Loading

A module (<script type="module">) at the end of the two pages. The site's Content-Security-Policy allows same-origin scripts only, so this can't be an inline script.

Source:

Members

(inner, constant) byId :Map.<string, HTMLAnchorElement>

Contents links by the id of the section they point at, in page order.

Type:
  • Map.<string, HTMLAnchorElement>
Source:

The contents links that point at a section of this page.

Type:
  • Array.<HTMLAnchorElement>
Source:

(inner, constant) onLine :Set.<string>

Ids of the sections crossing the reading line right now.

Type:
  • Set.<string>
Source:

Methods

(inner) mark(entries) → {void}

Moves aria-current to the first section on the reading line. When the line sits in the gap between two sections, the last mark stays.

Parameters:
Name Type Description
entries Array.<IntersectionObserverEntry>

Sections that crossed the line.
Source:
Returns:
Type
void