From 7807264e9984e6e9337b5c632dfe860dbc6ee773 Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Fri, 14 Jul 2017 17:26:35 +0100 Subject: [PATCH] automatic tables of contents --- .../patterns/writing/tables-of-contents.md | 42 +++ docs/css/styles.css | 26 +- docs/index.html | 7 + docs/index.xml | 10 + docs/patterns/coding/code-blocks/index.html | 12 + .../coding/codepen-embedding/index.html | 12 + .../patterns/coding/color-palettes/index.html | 12 + docs/patterns/coding/index.html | 7 + docs/patterns/coding/tested/index.html | 12 + .../coding/writing-inline-demos/index.html | 12 + docs/patterns/index.html | 7 + docs/patterns/installation/index.html | 37 ++ docs/patterns/library-setup/index.html | 43 +++ .../media/including-images/index.html | 12 + .../media/including-videos/index.html | 12 + docs/patterns/media/index.html | 7 + docs/patterns/serving/index.html | 31 ++ .../writing/expandable-sections/index.html | 12 + docs/patterns/writing/index.html | 17 + docs/patterns/writing/index.xml | 10 + .../writing/library-structure/index.html | 12 + .../writing/markdown-and-metadata/index.html | 12 + .../writing/notes-and-warnings/index.html | 31 ++ docs/patterns/writing/references/index.html | 37 ++ .../writing/tables-of-contents/index.html | 320 ++++++++++++++++++ docs/service-worker.js | 2 +- docs/sitemap.xml | 4 + themes/infusion/layouts/partials/toc.html | 15 + themes/infusion/layouts/patterns/single.html | 3 + themes/infusion/static/css/styles.css | 26 +- 30 files changed, 797 insertions(+), 5 deletions(-) create mode 100644 content/patterns/writing/tables-of-contents.md create mode 100644 docs/patterns/writing/tables-of-contents/index.html create mode 100644 themes/infusion/layouts/partials/toc.html diff --git a/content/patterns/writing/tables-of-contents.md b/content/patterns/writing/tables-of-contents.md new file mode 100644 index 0000000..305c124 --- /dev/null +++ b/content/patterns/writing/tables-of-contents.md @@ -0,0 +1,42 @@ ++++ +title = "Tables of contents" ++++ + +Pattern pages in **Infusion** that have two or more subheadings — `

`s — automatically get a **table of contents**: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the "Table of contents" label and uses an ordered list. The table of contents markup for the {{% pattern "Library setup" %}} page looks something like this: + +```html + +``` + +Tables of contents are a neat way to break down the content of the page and give users a navigable overview. However, they may not be to your taste. Never fear, you can turn tables of contents off by adding `toc = false` to the TOML metadata for your pattern: + +``` ++++ +title = "My page with a few headings" +toc = false ++++ +``` diff --git a/docs/css/styles.css b/docs/css/styles.css index d64920e..5bba1f6 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -135,11 +135,16 @@ h3 { font-size: 1.25rem; } -h4 { +h4, h5 { font-size: 1rem; font-family: PT Sans, sans-serif; } +h5 { + font-size: 0.85rem; + text-transform: uppercase; +} + kbd { line-height: 1; font-size: 0.66rem; @@ -188,7 +193,7 @@ code { /* Lists */ -main ul { +main ul, main ol { margin-left: 2.25rem; } @@ -387,6 +392,23 @@ caption { box-shadow: inset 0 0 0 0.25rem #ccc; } +/* Tables of contents */ + +.toc { + font-size: 0.85rem; + border: 1px solid; + padding: 1.5rem; +} + +.toc h2 { + font-size: 1rem; +} + +.toc ol { + margin-left: 0.75rem; + margin-top: 0.5rem; +} + /* Pattern lists */ .patterns-list { diff --git a/docs/index.html b/docs/index.html index 1da1199..24e08ee 100644 --- a/docs/index.html +++ b/docs/index.html @@ -175,6 +175,13 @@ +
  • + + + Tables of contents + +
    • + diff --git a/docs/index.xml b/docs/index.xml index d33583e..e4f37f1 100644 --- a/docs/index.xml +++ b/docs/index.xml @@ -157,6 +157,16 @@ I can reference the {{% pattern "Notes & warnings" %}} patt npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what’s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library’s files, the site will automatically rebuild. + + Tables of contents + https://heydon.github.io/infusion/patterns/writing/tables-of-contents/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://heydon.github.io/infusion/patterns/writing/tables-of-contents/ + Pattern pages in Infusion that have two or more subheadings — <h2>s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the “Table of contents” label and uses an ordered list. The table of contents markup for the Library setup page looks something like this: +<nav class="toc" aria-labelledby="toc-heading"> <h2 id="toc-heading">Table of contents</h2> <ol> <li> <a href="#cleaning-the-content-folder"> “Cleaning” the content folder </a> </li> <li> <a href="#the-setup-command"> The setup command </a> </li> <li> <a href="#the-config-file"> The config file </a> </li> <li> <a href="#including-a-logo"> Including a logo </a> </li> </ol> </nav> Tables of contents are a neat way to break down the content of the page and give users a navigable overview. + + Tested using... https://heydon.github.io/infusion/patterns/coding/tested/ diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html index 0f6f34e..a4aeaf5 100644 --- a/docs/patterns/coding/code-blocks/index.html +++ b/docs/patterns/coding/code-blocks/index.html @@ -176,6 +176,13 @@ +
  • + + + Tables of contents + +
    • + @@ -254,6 +261,11 @@

    Code blocks

    + + + + +

    Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.

    diff --git a/docs/patterns/coding/codepen-embedding/index.html b/docs/patterns/coding/codepen-embedding/index.html index e0ef875..7208444 100644 --- a/docs/patterns/coding/codepen-embedding/index.html +++ b/docs/patterns/coding/codepen-embedding/index.html @@ -176,6 +176,13 @@ +
  • + + + Tables of contents + +
    • + @@ -253,6 +260,11 @@

    CodePen embedding

    + + + + +

    Sometimes just pictures of the pattern you’re documenting aren’t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.

    Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen’s ID.

    diff --git a/docs/patterns/coding/color-palettes/index.html b/docs/patterns/coding/color-palettes/index.html index 3342999..ca703cf 100644 --- a/docs/patterns/coding/color-palettes/index.html +++ b/docs/patterns/coding/color-palettes/index.html @@ -176,6 +176,13 @@ +
  • + + + Tables of contents + +
    • + @@ -253,6 +260,11 @@

    Color palettes

    + + + + +

    There’s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.

    
diff --git a/docs/patterns/coding/index.html b/docs/patterns/coding/index.html
index a7fce82..776276c 100644
--- a/docs/patterns/coding/index.html
+++ b/docs/patterns/coding/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html
index 1043be3..902ae4c 100644
--- a/docs/patterns/coding/tested/index.html
+++ b/docs/patterns/coding/tested/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -253,6 +260,11 @@
   
    
     
    Tested using...
    
     
+    
+      
+
+
+    
     
    When you’re an inclusive designer, it’s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.
    
 
 
    Infusion provided a tested shortcode that let’s you show which browsers and assistive technologies you’ve tried your design out in. Here’s an example. Note the commas and “+” signs.
    
diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
index 3935bb8..eea0bc9 100644
--- a/docs/patterns/coding/writing-inline-demos/index.html
+++ b/docs/patterns/coding/writing-inline-demos/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -254,6 +261,11 @@
     
    Writing inline demos
    
     
     
+      
+
+
+    
+    
 
 
    There are some issues with CodePen embedding, like them not working offline. They also come with CodePen branding, which will clash with the pattern you’re trying to illustrate.
    
 
diff --git a/docs/patterns/index.html b/docs/patterns/index.html
index 3cdcc63..d2349e5 100644
--- a/docs/patterns/index.html
+++ b/docs/patterns/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html
index 2067387..5b9ad11 100644
--- a/docs/patterns/installation/index.html
+++ b/docs/patterns/installation/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -254,6 +261,36 @@
     
    Installation
    
     
     
+      
+
+  
+
+
+    
+    
 
 
    Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let’s get set up step-by-step.
    
 
diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html
index 2d86580..58f1e3c 100644
--- a/docs/patterns/library-setup/index.html
+++ b/docs/patterns/library-setup/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -254,6 +261,42 @@
     
    Library setup
    
     
     
+      
+
+  
+
+
+    
+    
 
 
    By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
    
 
diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html
index dcc1cf3..edf1ca9 100644
--- a/docs/patterns/media/including-images/index.html
+++ b/docs/patterns/media/including-images/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -254,6 +261,11 @@
     
    Including images
    
     
     
+      
+
+
+    
+    
 
 
    From time to time, you’ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you’ll be mostly working in.
    
 
diff --git a/docs/patterns/media/including-videos/index.html b/docs/patterns/media/including-videos/index.html
index 9fe936b..d743d7a 100644
--- a/docs/patterns/media/including-videos/index.html
+++ b/docs/patterns/media/including-videos/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -253,6 +260,11 @@
   
    
     
    Including videos
    
     
+    
+      
+
+
+    
     
    Infusion has a lot of its own shortcodes, but you can still use Hugo’s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video’s id.
    
 
 
    
diff --git a/docs/patterns/media/index.html b/docs/patterns/media/index.html
index 38f5aac..816117a 100644
--- a/docs/patterns/media/index.html
+++ b/docs/patterns/media/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html
index ef5e0e5..54b1864 100644
--- a/docs/patterns/serving/index.html
+++ b/docs/patterns/serving/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -254,6 +261,30 @@
     
    Serving
    
     
     
+      
+
+  
+
+
+    
+    
 
 
    Serving locally
    
 
diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html
index 9c94d65..c383da3 100644
--- a/docs/patterns/writing/expandable-sections/index.html
+++ b/docs/patterns/writing/expandable-sections/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -253,6 +260,11 @@
   
    
     
    Expandable sections
    
     
+    
+      
+
+
+    
     
    In some cases, where there is a lot of content, it’s helpful to collapse certain sections. That way, readers get an overview of what’s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded.
    
 
 
    The expandable shortcode takes three parameters:
    
diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html
index 2b53b79..e317f54 100644
--- a/docs/patterns/writing/index.html
+++ b/docs/patterns/writing/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -306,6 +313,16 @@
 
 
       
+          
  • 
+  
    
+    
+      
+      Tables of contents
+    
+  
    
+
    • 
+
+      
     
   
    
 
diff --git a/docs/patterns/writing/index.xml b/docs/patterns/writing/index.xml
index da71deb..9e2e61b 100644
--- a/docs/patterns/writing/index.xml
+++ b/docs/patterns/writing/index.xml
@@ -61,5 +61,15 @@ Notes You may wish to pick out some content in your pattern’s document
 I can reference the {{% pattern "Notes & warnings" %}} pattern here.  This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.
     
     
+    
+      Tables of contents
+      https://heydon.github.io/infusion/patterns/writing/tables-of-contents/
+      Mon, 01 Jan 0001 00:00:00 +0000
+      
+      https://heydon.github.io/infusion/patterns/writing/tables-of-contents/
+      Pattern pages in Infusion that have two or more subheadings — <h2>s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the “Table of contents” label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
+<nav class="toc" aria-labelledby="toc-heading"> <h2 id="toc-heading">Table of contents</h2> <ol> <li> <a href="#cleaning-the-content-folder"> “Cleaning” the content folder </a> </li> <li> <a href="#the-setup-command"> The setup command </a> </li> <li> <a href="#the-config-file"> The config file </a> </li> <li> <a href="#including-a-logo"> Including a logo </a> </li> </ol> </nav>  Tables of contents are a neat way to break down the content of the page and give users a navigable overview.
+    
+    
   
 
\ No newline at end of file
diff --git a/docs/patterns/writing/library-structure/index.html b/docs/patterns/writing/library-structure/index.html
index d74bb5c..5b2bebf 100644
--- a/docs/patterns/writing/library-structure/index.html
+++ b/docs/patterns/writing/library-structure/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -254,6 +261,11 @@
     
    Library structure
    
     
     
+      
+
+
+    
+    
 
 
    Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:
    
 
diff --git a/docs/patterns/writing/markdown-and-metadata/index.html b/docs/patterns/writing/markdown-and-metadata/index.html
index 93027ff..113c0a2 100644
--- a/docs/patterns/writing/markdown-and-metadata/index.html
+++ b/docs/patterns/writing/markdown-and-metadata/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -254,6 +261,11 @@
     
    Markdown & metadata
    
     
     
+      
+
+
+    
+    
 
 
    In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It’s recommended you use “kebab case” to name the file ( words separated by hyphens). For example, a pattern with the title “Menu button” should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button.
    
 
diff --git a/docs/patterns/writing/notes-and-warnings/index.html b/docs/patterns/writing/notes-and-warnings/index.html
index 3de121d..616d5f0 100644
--- a/docs/patterns/writing/notes-and-warnings/index.html
+++ b/docs/patterns/writing/notes-and-warnings/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -254,6 +261,30 @@
     
    Notes & warnings
    
     
     
+      
+
+  
+
+
+    
+    
 
 
    Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of “shortcodes”. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings.
    
 
diff --git a/docs/patterns/writing/references/index.html b/docs/patterns/writing/references/index.html
index 1e0e4ae..cd0828b 100644
--- a/docs/patterns/writing/references/index.html
+++ b/docs/patterns/writing/references/index.html
@@ -176,6 +176,13 @@
                           
                         
                       
+                        
  • 
+                          
+                            
+                            Tables of contents
+                          
+                        
    • 
+                      
                     
                   
                 
@@ -254,6 +261,36 @@
     
    References
    
     
     
+      
+
+  
+
+
+    
+    
 
 
    Cross-references
    
 
diff --git a/docs/patterns/writing/tables-of-contents/index.html b/docs/patterns/writing/tables-of-contents/index.html
new file mode 100644
index 0000000..14bb4cb
--- /dev/null
+++ b/docs/patterns/writing/tables-of-contents/index.html
@@ -0,0 +1,320 @@
+
+
+  
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+      
+    
+    
+      
+        Tables of contents | Infusion
+      
+    
+  
+  
+    skip to content
+    
+  
+   
+    
+   
+  
+
+  
+   W3C
+   SVG
+   
+   
+   
+   
+  
+
+  
+    
+     
+    
+  
+
+  
+   
+    
+     
+     
+     
+     
+     
+     
+    
+   
+  
+
+  
+   
+    
+    
+     
+     
+    
+   
+  
+
+  
+    
+     
+     
+     
+    
+  
+
+  
+   
+   
+   
+ 
+
+
+    
    
+      
+      
    
+        
    
+          
+  
    
+    
    Tables of contents
    
+    
+    
+      
+
+
+    
+    
    Pattern pages in Infusion that have two or more subheadings — <h2>s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the “Table of contents” label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
    
+
+
    <nav class="toc" aria-labelledby="toc-heading">
+  <h2 id="toc-heading">Table of contents</h2>
+  <ol>
+    <li>
+      <a href="#cleaning-the-content-folder">
+        “Cleaning” the content folder
+      </a>
+    </li>
+    <li>
+      <a href="#the-setup-command">
+        The setup command
+      </a>
+    </li>
+    <li>
+      <a href="#the-config-file">
+        The config file
+      </a>
+    </li>
+    <li>
+      <a href="#including-a-logo">
+        Including a logo
+      </a>
+    </li>
+  </ol>
+</nav>
+
    
+
+
    Tables of contents are a neat way to break down the content of the page and give users a navigable overview. However, they may not be to your taste. Never fear, you can turn tables of contents off by adding toc = false to the TOML metadata for your pattern:
    
+
+
    +++
+title = "My page with a few headings"
+toc = false
++++
+
    
+
+  
    
+
+          
    
+            Powered by Infusion, a The Paciello Group project.
    
+            For general enquiries, contact us on info@paciellogroup.com.
+          
    
+        
    
+      
    
+    
    
+    
+      
+    
+    
+    
+  
+
diff --git a/docs/service-worker.js b/docs/service-worker.js
index e6a6170..fecac72 100644
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@@ -37,7 +37,7 @@
 /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */
 'use strict';
 
-var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","7bfaec8b4d65ac289609404890d0f3a6"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","e48b343fd0a25d79dc918649608c73ba"],["index.xml","e990e9cc581f3c68bdc878b5ce1a7ff0"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","98597621c2c17c7206e59ba6c8d46876"],["patterns/coding/codepen-embedding/index.html","cd3369a8fbdd7916ebf1cfcee20a0670"],["patterns/coding/color-palettes/index.html","809a29fa437da4ee9630638d3e6f9cf3"],["patterns/coding/index.html","9b19814d62d2ee476087b96d277bd8be"],["patterns/coding/index.xml","e05792f5d471e69af658fcfe0d949e05"],["patterns/coding/tested/index.html","b03d833fe64b578077e24a9f0996279e"],["patterns/coding/writing-inline-demos/index.html","d9fddaabf1d43d8dc4de3d17b70adf29"],["patterns/index.html","fdf408a6f3450f77b38cda701d24c019"],["patterns/index.xml","b2fe2e8940440bfcc3f152e9c43f4a28"],["patterns/installation/index.html","6a4dfbc854ef497fe1d9d8068cc92f09"],["patterns/library-setup/index.html","9ffef0eb27ab223704640a25c78da237"],["patterns/media/including-images/index.html","64d32690c5cb8a7d9173dd0ad0197203"],["patterns/media/including-videos/index.html","6b6e82ad02589440bddf2d25fd20feee"],["patterns/media/index.html","6e5b7e9c9a4786d6cfd223a99538d7ca"],["patterns/media/index.xml","4a9c518cde77c958c19472b4f6980fd6"],["patterns/serving/index.html","6f68c291a7a9744bfa5c78ccc67d7358"],["patterns/writing/expandable-sections/index.html","3b60342a05d07861f3444e3e31de6330"],["patterns/writing/index.html","8a9ea8f2dca093d2d731fc6176524b7e"],["patterns/writing/index.xml","c3e4613e56fb851bb7e4d4cc23c949a4"],["patterns/writing/library-structure/index.html","387ef894d8724e74fb8eca6bf2af6f46"],["patterns/writing/markdown-and-metadata/index.html","3833d043a64b076d071c5b458e0a34df"],["patterns/writing/notes-and-warnings/index.html","b48d79a5917b2abf59b1d3f1e45a455a"],["patterns/writing/references/index.html","fc940c4185a90eb7c45bfaf81d79e3ec"],["sitemap.xml","60ea02f860041650f4aaf87640e9614f"],["tags/index.xml","c49e6e2b318d5ee86534194441e4dc1e"]];
+var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","e57f2b72a91e67ab2a5581fbcf72a7d0"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","5a0267c4095b6a6851a2a8825053cc7a"],["index.xml","0f2a2e8fb43ec7e2d6f4de996f0ad442"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","ba8574de1814df1633ce093c0f448fe7"],["patterns/coding/codepen-embedding/index.html","7f9e6c1b6227b9ab3eae9ec33424a2b0"],["patterns/coding/color-palettes/index.html","7ae21a206ad5d8deeee9d77a57bae4c9"],["patterns/coding/index.html","0f7888ba74ad3012f450baa7b75e5486"],["patterns/coding/index.xml","e05792f5d471e69af658fcfe0d949e05"],["patterns/coding/tested/index.html","fc75ec2965ba554d1cd5ff7ecc924bbf"],["patterns/coding/writing-inline-demos/index.html","b3cc17bfcdf243e058dc8c5ce4f2f9e1"],["patterns/index.html","d8a7d1531fdc33125ddb73dba0607548"],["patterns/index.xml","b2fe2e8940440bfcc3f152e9c43f4a28"],["patterns/installation/index.html","ff5739b31124314a7e4da1af6d059a9a"],["patterns/library-setup/index.html","a66baa28ece291d5542687f837f73b02"],["patterns/media/including-images/index.html","a2c819e409c2a0c770ce240210c0990c"],["patterns/media/including-videos/index.html","eeb0ba3943cbb019217acb04e3c92181"],["patterns/media/index.html","7dbd872072b3221e50ed1baa8ac347b1"],["patterns/media/index.xml","4a9c518cde77c958c19472b4f6980fd6"],["patterns/serving/index.html","448f1a59990139bf8e5e61c8138aa8ea"],["patterns/writing/expandable-sections/index.html","7215479bfdab51fe44117d9538f40d6b"],["patterns/writing/index.html","e8acf1d72503cbebfee47cf2ec9ab10d"],["patterns/writing/index.xml","4df8e70bce37e4e695563a67f5ff2cfd"],["patterns/writing/library-structure/index.html","ce6adc5ce47902af42e32b6be5239edb"],["patterns/writing/markdown-and-metadata/index.html","53a85095e412b62cf19f028d8be445ae"],["patterns/writing/notes-and-warnings/index.html","1d14e46563376bd1c86ba3ae4ad26ea1"],["patterns/writing/references/index.html","1e8a9fc79f83c17944f7eb543b9eeb46"],["patterns/writing/tables-of-contents/index.html","21afc4584103d1c234c9a942da54104e"],["sitemap.xml","85e08796b1c8c18551a4c2ac407eff66"],["tags/index.xml","c49e6e2b318d5ee86534194441e4dc1e"]];
 var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : '');
 
 
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index a3fb79e..1a59428 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -85,6 +85,10 @@
     https://heydon.github.io/infusion/patterns/serving/
   
   
+  
+    https://heydon.github.io/infusion/patterns/writing/tables-of-contents/
+  
+  
   
     https://heydon.github.io/infusion/tags/
     0
diff --git a/themes/infusion/layouts/partials/toc.html b/themes/infusion/layouts/partials/toc.html
new file mode 100644
index 0000000..39c3cb2
--- /dev/null
+++ b/themes/infusion/layouts/partials/toc.html
@@ -0,0 +1,15 @@
+{{ $headings := findRE "(.|\n])+?

    " .Content }} +{{ if ge (len $headings) 2 }} + +{{ end }} diff --git a/themes/infusion/layouts/patterns/single.html b/themes/infusion/layouts/patterns/single.html index 54df06b..8f9f44c 100644 --- a/themes/infusion/layouts/patterns/single.html +++ b/themes/infusion/layouts/patterns/single.html @@ -20,6 +20,9 @@ {{ end }} + {{ if ne .Params.TOC false }} + {{ partial "toc" . }} + {{ end }} {{ .Content }} {{ end }} diff --git a/themes/infusion/static/css/styles.css b/themes/infusion/static/css/styles.css index d64920e..5bba1f6 100644 --- a/themes/infusion/static/css/styles.css +++ b/themes/infusion/static/css/styles.css @@ -135,11 +135,16 @@ h3 { font-size: 1.25rem; } -h4 { +h4, h5 { font-size: 1rem; font-family: PT Sans, sans-serif; } +h5 { + font-size: 0.85rem; + text-transform: uppercase; +} + kbd { line-height: 1; font-size: 0.66rem; @@ -188,7 +193,7 @@ code { /* Lists */ -main ul { +main ul, main ol { margin-left: 2.25rem; } @@ -387,6 +392,23 @@ caption { box-shadow: inset 0 0 0 0.25rem #ccc; } +/* Tables of contents */ + +.toc { + font-size: 0.85rem; + border: 1px solid; + padding: 1.5rem; +} + +.toc h2 { + font-size: 1rem; +} + +.toc ol { + margin-left: 0.75rem; + margin-top: 0.5rem; +} + /* Pattern lists */ .patterns-list {