Client-side JavaScript to mark current ToC entry It's useful, actually. While some people call it eye-candy or something, I personally find it an essential for text-heavy documents.

Changes

3 changed files (+76/-5)

• docs/en/Roadmap.md
  • @@ -1,6 +1,6 @@
    --- createdAt: 2024-04-15T23:00:00+09:00 - updatedAt: 2024-05-15T14:21:00+09:00 + updatedAt: 2024-05-15T20:41:00+09:00 --- ## v1.0
  • @@ -31,7 +31,7 @@ ## v0.2
    - [x] Use HTML elements for JSONCanvas file/text nodes - [x] Client script to retain open/close state of document tree - - [ ] Client script to sync active table of contents entry to current scroll position + - [x] Client script to sync active table of contents entry to current scroll position - [x] Client script to close site menu on navigation event - [x] Client script for JSONCanvas gestures and UI
• page_builder/default_theme/pages/markdown.tsx
  • @@ -10,6 +10,7 @@
    import type { BuildContext } from "../context.ts"; import { buildClasses, css, join } from "../css.ts"; import type { TocItem } from "../hast/hast_util_toc_mut.ts"; + import { javascript } from "../script.ts"; import { layout, layoutScript, layoutStyles } from "../widgets/layout.tsx"; import { toc, tocStyles } from "../widgets/toc.tsx";
  • @@ -74,6 +75,61 @@ titleStyles,
    ownStyles, ); + const ownScript = javascript` + function enchanceToc() { + const toc = document.getElementById("__macana_md_toc"); + const body = document.getElementById("__macana_md_body"); + if (!toc || !body) { + return; + } + + // <h1> is for page title, and it's not in ToC + const headings = Array.from(body.querySelectorAll("h2[id],h3[id],h4[id],h5[id],h6[id]")) + .map(heading => { + const styles = window.getComputedStyle(heading); + const marginTop = parseInt(styles.getPropertyValue("margin-top")); + + return { + id: heading.id, + top: heading.offsetTop - marginTop, + }; + }) + .sort((a, b) => a.top - b.top); + + const entries = toc.querySelectorAll("a[href^=\\"#\\"]"); + + let isSyncScheduled = false; + + window.addEventListener("scroll", ev => { + if (isSyncScheduled) { + return; + } + + isSyncScheduled = true; + requestIdleCallback(() => { + isSyncScheduled = false; + + const scrollY = document.documentElement.scrollTop; + + const pastHeadings = headings.filter(({ top }) => { + return top <= scrollY; + }); + + const active = pastHeadings[pastHeadings.length - 1]; + + entries.forEach(entry => { + const isActive = active && (entry.getAttribute("href") === ("#" + active.id)); + entry.setAttribute("aria-current", isActive ? "true" : "false"); + }); + }, { + timeout: 1000, + }) + }, { passive: true }); + } + + enchanceToc(); + `; + export interface MarkdownPageProps { context: Readonly<BuildContext>;
  • @@ -89,19 +145,24 @@ return h(null, [
    { type: "doctype" }, template({ context, - scripts: [pageMetadataScript, layoutScript, documentTreeScript], + scripts: [ + pageMetadataScript, + layoutScript, + documentTreeScript, + ownScript, + ], body: layout({ nav: documentTree({ context }), footer: footer({ copyright: context.copyright }), main: ( - <div class={c.main}> + <div id="__macana_md_body" class={c.main}> <div> {title({ children: context.document.metadata.title })} {pageMetadata({ context })} </div> {tocItems.length > 0 ? ( - <div class={c.toc}> + <div id="__macana_md_toc" class={c.toc}> {toc({ className: c.tocInner, toc: tocItems })} </div> )
• page_builder/default_theme/widgets/toc.tsx
  • @@ -34,6 +34,16 @@ text-decoration: none;
    color: var(--color-fg-sub); } + .${c.link}[aria-current] { + color: var(--color-fg); + text-decoration: underline; + } + .${c.link}[aria-current="false"] { + color: var(--color-fg-sub); + text-decoration: none; + + opacity: 0.7; + } .${c.link}:hover { text-decoration: underline; }