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 <details> 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

@@ -2,6 +2,9 @@
 
 Revision 1.01
 
+* TOC
+{:toc}
+
 <a id="Background"></a>
 ## Background
 

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;
+}

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);
+}

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.

jsoncguide.md

@@ -2,6 +2,9 @@
 
 Revision 0.9
 
+* TOC
+{:toc}
+
 <a id="Introduction"></a>
 ## Introduction
 

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

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