From 4042cd668180bfcdead987acfc41a56022fe9874 Mon Sep 17 00:00:00 2001 From: Mike Frysinger Date: Sun, 11 Oct 2026 04:06:52 -0400 Subject: [PATCH] add support for automatic TOC This is a port of the existing styleguide.js auto TOC logic from the HTML guides to the newer markdown guides. Rather than generate the entire TOC in JS, rely on GH's generator to create, and then process it slightly with minimal CSS+JS. While GH's builtin markdown renderer automatically creates sidepanel TOCs, the GH pages export does not. Use the `* TOC {:toc}` form so the export automatically generates for us. The downside is that it also shows up in GH's builtin markdown renderer, but it's only one line at the top, so it shouldn't be onerous. The CSS logic tweaks which levels are displayed in the generated TOC: we hide the single top-level, and omit levels deeper than 2. The JS logic puts the TOC into a
HTML element (internally called a zippy) so that it's collapsed by default. While the old auto TOC codebase supported "horizontal" and "vertical" formats, the new one only supports "vertical". Most of our guides do not care and take the default since that's what internal & external markdown renderers use, but notably some are using horizontal still: * C++, HTML/CSS, Java, JS, TS: external, but not internal * shell: internal & external (via manual TOC) We'll leave the shell guide alone, but the rest will be switched over in the future as we regenerate things, and discuss with respective maintainers. --- haskellguide.md | 3 +++ include/mdguide.css | 21 +++++++++++++++++++++ include/mdguide.js | 18 ++++++++++++++++++ include/mdguide_main.js | 3 ++- jsoncguide.md | 3 +++ objcguide.md | 3 +++ xmlguide.md | 3 +++ 7 files changed, 53 insertions(+), 1 deletion(-) diff --git a/haskellguide.md b/haskellguide.md index 202b309..51a0071 100644 --- a/haskellguide.md +++ b/haskellguide.md @@ -2,6 +2,9 @@ Revision 1.01 +* TOC +{:toc} + ## Background diff --git a/include/mdguide.css b/include/mdguide.css index f0cde67..43e9e73 100644 --- a/include/mdguide.css +++ b/include/mdguide.css @@ -123,3 +123,24 @@ div.markdown-body div.numbered ~ h4::before { border-left-color: var(--callout-warning-border-color) !important; color: var(--callout-warning-fg-color) !important; } + +/* Hide the TOC title entry. */ +#markdown-toc { + padding-left: 0; +} +#markdown-toc > li::marker { + content: ''; +} +#markdown-toc > li > a { + display: none; +} + +/* The TOC can be quite long, so shrink it a little. */ +#markdown-toc { + font-size: smaller; +} + +/* Only show TOC entries 2 levels deep. */ +#markdown-toc > li > ul > li > ul > li > ul { + display: none; +} diff --git a/include/mdguide.js b/include/mdguide.js index d35b28e..7ad1375 100644 --- a/include/mdguide.js +++ b/include/mdguide.js @@ -56,3 +56,21 @@ export function styleAlerts(document) { container.classList.add(`callout-${callout}`); } } + +/** + * If a TOC exists, clean it up a bit to not take so much space. + * @param {!Document} document + */ +export function tidyToc(document) { + const toc = document.getElementById('markdown-toc'); + if (!toc) { + return; + } + + const zippy = document.createElement('details'); + const summary = document.createElement('summary'); + summary.textContent = 'Table of Contents'; + zippy.appendChild(summary); + toc.replaceWith(zippy); + zippy.appendChild(toc); +} diff --git a/include/mdguide_main.js b/include/mdguide_main.js index 94d482d..d418942 100644 --- a/include/mdguide_main.js +++ b/include/mdguide_main.js @@ -8,7 +8,7 @@ * @fileoverview Main entry point for HTML files to support CSP. */ -import {styleAlerts} from './mdguide.js'; +import {styleAlerts, tidyToc} from './mdguide.js'; /** * Initialize the page. @@ -16,6 +16,7 @@ import {styleAlerts} from './mdguide.js'; function main() { const document = window.document; styleAlerts(document); + tidyToc(document); } // We're loaded as a module which defers execution until after the DOM is ready. diff --git a/jsoncguide.md b/jsoncguide.md index 0bbc0e3..760250e 100644 --- a/jsoncguide.md +++ b/jsoncguide.md @@ -2,6 +2,9 @@ Revision 0.9 +* TOC +{:toc} + ## Introduction diff --git a/objcguide.md b/objcguide.md index 9b1563e..23b4a44 100644 --- a/objcguide.md +++ b/objcguide.md @@ -19,6 +19,9 @@ > refresher, please read [Programming with > Objective-C](https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html). +* TOC +{:toc} + ## Principles ### Optimize for the reader, not the writer diff --git a/xmlguide.md b/xmlguide.md index e9e1478..470351c 100644 --- a/xmlguide.md +++ b/xmlguide.md @@ -3,6 +3,9 @@ Version 1.0 \ Copyright Google 2008 +* TOC +{:toc} + ## Introduction This document provides a set of guidelines for general use when designing new