hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

automatic tables of contents

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-14 17:26:35 +01:00
parent 07fe70751f
commit 7807264e99
30 changed files with 797 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
content/patterns/writing/tables-of-contents.md Normal file
View File

@ -0,0 +1,42 @@
+++
title = "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 {{% pattern "Library setup" %}} page looks something like this:
```html
<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
+++
```

26
docs/css/styles.css
View File

@ -135,11 +135,16 @@ h3 {
font-size: 1.25rem; font-size: 1.25rem;
} }
h4 { h4, h5 {
font-size: 1rem; font-size: 1rem;
font-family: PT Sans, sans-serif; font-family: PT Sans, sans-serif;
} }
h5 {
font-size: 0.85rem;
text-transform: uppercase;
}
kbd { kbd {
line-height: 1; line-height: 1;
font-size: 0.66rem; font-size: 0.66rem;
@ -188,7 +193,7 @@ code {
/* Lists */ /* Lists */
main ul { main ul, main ol {
margin-left: 2.25rem; margin-left: 2.25rem;
} }
@ -387,6 +392,23 @@ caption {
box-shadow: inset 0 0 0 0.25rem #ccc; 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 */ /* Pattern lists */
.patterns-list { .patterns-list {

7
docs/index.html
View File

@ -175,6 +175,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>

10
docs/index.xml
View File

@ -157,6 +157,16 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what&amp;rsquo;s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild.</description> npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what&amp;rsquo;s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild.</description>
</item> </item>
<item>
<title>Tables of contents</title>
<link>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</guid>
<description>Pattern pages in Infusion that have two or more subheadings — &amp;lt;h2&amp;gt;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 &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
&amp;lt;nav class=&amp;quot;toc&amp;quot; aria-labelledby=&amp;quot;toc-heading&amp;quot;&amp;gt; &amp;lt;h2 id=&amp;quot;toc-heading&amp;quot;&amp;gt;Table of contents&amp;lt;/h2&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#cleaning-the-content-folder&amp;quot;&amp;gt; “Cleaning” the content folder &amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-setup-command&amp;quot;&amp;gt; The setup command &amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-config-file&amp;quot;&amp;gt; The config file &amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#including-a-logo&amp;quot;&amp;gt; Including a logo &amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;/nav&amp;gt; Tables of contents are a neat way to break down the content of the page and give users a navigable overview.</description>
</item>
<item> <item>
<title>Tested using...</title> <title>Tested using...</title>
<link>https://heydon.github.io/infusion/patterns/coding/tested/</link> <link>https://heydon.github.io/infusion/patterns/coding/tested/</link>

12
docs/patterns/coding/code-blocks/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,11 @@
<p>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. <strong>Infusion</strong> will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.</p> <p>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. <strong>Infusion</strong> will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.</p>
<p>So, this&hellip;</p> <p>So, this&hellip;</p>

12
docs/patterns/coding/codepen-embedding/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -253,6 +260,11 @@
<main id="main"> <main id="main">
<h1>CodePen embedding</h1> <h1>CodePen embedding</h1>
<p>Sometimes just pictures of the pattern you&rsquo;re documenting aren&rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.</p> <p>Sometimes just pictures of the pattern you&rsquo;re documenting aren&rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.</p>
<p><strong>Infusion</strong> offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The <code>codePen</code> shortcode takes just one argument: the codePen&rsquo;s <code>ID</code>.</p> <p><strong>Infusion</strong> offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The <code>codePen</code> shortcode takes just one argument: the codePen&rsquo;s <code>ID</code>.</p>

12
docs/patterns/coding/color-palettes/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -253,6 +260,11 @@
<main id="main"> <main id="main">
<h1>Color palettes</h1> <h1>Color palettes</h1>
<p>There&rsquo;s no reason why your <strong>Infusion</strong>-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The <code>colors</code> shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.</p> <p>There&rsquo;s no reason why your <strong>Infusion</strong>-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The <code>colors</code> shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.</p>
<pre class=" "><code data-codeblock-shortcode> <pre class=" "><code data-codeblock-shortcode>

7
docs/patterns/coding/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>

12
docs/patterns/coding/tested/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -253,6 +260,11 @@
<main id="main"> <main id="main">
<h1>Tested using...</h1> <h1>Tested using...</h1>
<p>When you&rsquo;re an inclusive designer, it&rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.</p> <p>When you&rsquo;re an inclusive designer, it&rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.</p>
<p><strong>Infusion</strong> provided a <code>tested</code> shortcode that let&rsquo;s you show which browsers and assistive technologies you&rsquo;ve tried your design out in. Here&rsquo;s an example. Note the commas and &ldquo;+&rdquo; signs.</p> <p><strong>Infusion</strong> provided a <code>tested</code> shortcode that let&rsquo;s you show which browsers and assistive technologies you&rsquo;ve tried your design out in. Here&rsquo;s an example. Note the commas and &ldquo;+&rdquo; signs.</p>

12
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,11 @@
<p>There are some issues with <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p> <p>There are some issues with <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
<p><strong>Infusion</strong> offers another option: a special <code>demo</code> shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</p> <p><strong>Infusion</strong> offers another option: a special <code>demo</code> shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</p>

7
docs/patterns/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>

37
docs/patterns/installation/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,36 @@
<nav class="toc" aria-labelledby="toc-heading">
<h2 id="toc-heading">Table of contents</h2>
<ol>
<li>
<a href="#1.-install-hugo">
1. Install Hugo
</a>
</li>
<li>
<a href="#2.-install-node--npm">
2. Install Node &amp; NPM
</a>
</li>
<li>
<a href="#3.-getting-the-files">
3. Getting the files
</a>
</li>
</ol>
</nav>
<p><strong>Infusion</strong> is built using the static site engine, <a href="https://gohugo.io/">Hugo</a>, and NPM. The codebase is available to download on Github. Let&rsquo;s get set up step-by-step.</p> <p><strong>Infusion</strong> is built using the static site engine, <a href="https://gohugo.io/">Hugo</a>, and NPM. The codebase is available to download on Github. Let&rsquo;s get set up step-by-step.</p>
<h2 id="1-install-hugo">1. Install Hugo</h2> <h2 id="1-install-hugo">1. Install Hugo</h2>

43
docs/patterns/library-setup/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,42 @@
<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>
<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p> <p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
<h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2> <h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>

12
docs/patterns/media/including-images/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,11 @@
<p>From time to time, you&rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the <code>/content</code> folder you&rsquo;ll be mostly working in.</p> <p>From time to time, you&rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the <code>/content</code> folder you&rsquo;ll be mostly working in.</p>
<pre><code>├── content <pre><code>├── content

12
docs/patterns/media/including-videos/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -253,6 +260,11 @@
<main id="main"> <main id="main">
<h1>Including videos</h1> <h1>Including videos</h1>
<p><strong>Infusion</strong> has a lot of its own shortcodes, but you can still use Hugo&rsquo;s <a href="https://gohugo.io/extras/shortcodes#built-in-shortcodes">built in shortcodes</a>. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&rsquo;s <code>id</code>.</p> <p><strong>Infusion</strong> has a lot of its own shortcodes, but you can still use Hugo&rsquo;s <a href="https://gohugo.io/extras/shortcodes#built-in-shortcodes">built in shortcodes</a>. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&rsquo;s <code>id</code>.</p>
<pre class=" "><code data-codeblock-shortcode> <pre class=" "><code data-codeblock-shortcode>

7
docs/patterns/media/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>

31
docs/patterns/serving/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,30 @@
<nav class="toc" aria-labelledby="toc-heading">
<h2 id="toc-heading">Table of contents</h2>
<ol>
<li>
<a href="#serving-locally">
Serving locally
</a>
</li>
<li>
<a href="#publishing-on-github-pages">
Publishing on Github Pages
</a>
</li>
</ol>
</nav>
<h2 id="serving-locally">Serving locally</h2> <h2 id="serving-locally">Serving locally</h2>
<p>While you&rsquo;re creating content for your library, you&rsquo;ll probably want to see what the finished product looks like. Fortunately, <strong>Infusion</strong> is easy to serve locally using the <code>serve</code> command:</p> <p>While you&rsquo;re creating content for your library, you&rsquo;ll probably want to see what the finished product looks like. Fortunately, <strong>Infusion</strong> is easy to serve locally using the <code>serve</code> command:</p>

12
docs/patterns/writing/expandable-sections/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -253,6 +260,11 @@
<main id="main"> <main id="main">
<h1>Expandable sections</h1> <h1>Expandable sections</h1>
<p>In some cases, where there is a lot of content, it&rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&rsquo;s in the content and can choose where to focus in. <strong>Infusion</strong> provides a shortcode method for creating expandable sections which generates accessible markup using <code>aria-expanded</code>.</p> <p>In some cases, where there is a lot of content, it&rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&rsquo;s in the content and can choose where to focus in. <strong>Infusion</strong> provides a shortcode method for creating expandable sections which generates accessible markup using <code>aria-expanded</code>.</p>
<p>The <code>expandable</code> shortcode takes three parameters:</p> <p>The <code>expandable</code> shortcode takes three parameters:</p>

17
docs/patterns/writing/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -306,6 +313,16 @@
</li> </li>
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
Tables of contents
</a>
</h2>
</li>
</ul> </ul>
</main> </main>

10
docs/patterns/writing/index.xml
View File

@ -61,5 +61,15 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} 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.</description> I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} 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.</description>
</item> </item>
<item>
<title>Tables of contents</title>
<link>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</guid>
<description>Pattern pages in Infusion that have two or more subheadings — &amp;lt;h2&amp;gt;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 &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
&amp;lt;nav class=&amp;quot;toc&amp;quot; aria-labelledby=&amp;quot;toc-heading&amp;quot;&amp;gt; &amp;lt;h2 id=&amp;quot;toc-heading&amp;quot;&amp;gt;Table of contents&amp;lt;/h2&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#cleaning-the-content-folder&amp;quot;&amp;gt; “Cleaning” the content folder &amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-setup-command&amp;quot;&amp;gt; The setup command &amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-config-file&amp;quot;&amp;gt; The config file &amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#including-a-logo&amp;quot;&amp;gt; Including a logo &amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;/nav&amp;gt; Tables of contents are a neat way to break down the content of the page and give users a navigable overview.</description>
</item>
</channel> </channel>
</rss> </rss>

12
docs/patterns/writing/library-structure/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,11 @@
<p>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:</p> <p>Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:</p>
<pre><code>└── content <pre><code>└── content

12
docs/patterns/writing/markdown-and-metadata/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,11 @@
<p>In <strong>Infusion</strong>, design patterns are documented using markdown. To create a new pattern file, just add a file with the <code>.md</code> extension to the <code>/patterns</code> folder. It&rsquo;s recommended you use &ldquo;kebab case&rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &ldquo;Menu button&rdquo; should probably have the filename <code>menu-button</code>. Then you get a nice clean URL: <code>your-company.com/patterns/menu-button</code>.</p> <p>In <strong>Infusion</strong>, design patterns are documented using markdown. To create a new pattern file, just add a file with the <code>.md</code> extension to the <code>/patterns</code> folder. It&rsquo;s recommended you use &ldquo;kebab case&rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &ldquo;Menu button&rdquo; should probably have the filename <code>menu-button</code>. Then you get a nice clean URL: <code>your-company.com/patterns/menu-button</code>.</p>
<p>If you&rsquo;re not familiar with writing markdown, there are a number of tutorials available. One of the best is <a href="https://guides.github.com/features/mastering-markdown/">Mastering Markdown</a> offered by Github. There&rsquo;s also a <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">nice cheatsheet here</a>.</p> <p>If you&rsquo;re not familiar with writing markdown, there are a number of tutorials available. One of the best is <a href="https://guides.github.com/features/mastering-markdown/">Mastering Markdown</a> offered by Github. There&rsquo;s also a <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">nice cheatsheet here</a>.</p>

31
docs/patterns/writing/notes-and-warnings/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,30 @@
<nav class="toc" aria-labelledby="toc-heading">
<h2 id="toc-heading">Table of contents</h2>
<ol>
<li>
<a href="#notes">
Notes
</a>
</li>
<li>
<a href="#warnings">
Warnings
</a>
</li>
</ol>
</nav>
<p><strong>Infusion</strong> acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &ldquo;shortcodes&rdquo;. Shortcodes offer a simple syntax for including rich content. For example, <strong>Infusion</strong> provides shortcodes for including notes and warnings.</p> <p><strong>Infusion</strong> acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &ldquo;shortcodes&rdquo;. Shortcodes offer a simple syntax for including rich content. For example, <strong>Infusion</strong> provides shortcodes for including notes and warnings.</p>
<h2 id="notes">Notes</h2> <h2 id="notes">Notes</h2>

37
docs/patterns/writing/references/index.html
View File

@ -176,6 +176,13 @@
</a> </a>
</li> </li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul> </ul>
</li> </li>
@ -255,6 +262,36 @@
<nav class="toc" aria-labelledby="toc-heading">
<h2 id="toc-heading">Table of contents</h2>
<ol>
<li>
<a href="#cross-references">
Cross-references
</a>
</li>
<li>
<a href="#wcag-references">
WCAG References
</a>
</li>
<li>
<a href="#inclusive-design-principle-references">
Inclusive Design Principle references
</a>
</li>
</ol>
</nav>
<h2 id="cross-references">Cross-references</h2> <h2 id="cross-references">Cross-references</h2>
<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p> <p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>

320
docs/patterns/writing/tables-of-contents/index.html Normal file
View File

@ -0,0 +1,320 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/">
<link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://heydon.github.io/infusion/images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://heydon.github.io/infusion/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://heydon.github.io/infusion/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png">
<link rel="manifest" href="https://heydon.github.io/infusion/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Tables of contents | Infusion
</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
</g>
</symbol>
<symbol id="w3c">
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
</symbol>
<symbol id="tag">
<g transform="translate(0 -875.2)">
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
</g>
</symbol>
<symbol id="balloon">
<g transform="translate(0 -875.2)">
<g>
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
</g>
</g>
</symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
<symbol id="menu">
<rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="0" x="0"/>
<rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="20" x="0"/>
<rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="40" x="0"/>
</symbol>
</svg>
<div class="wrapper">
<header class="intro-and-nav" role="banner">
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
</a>
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
</div>
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50">
<use xlink:href="#menu"></use>
</svg>
Menu
</button>
<ul id="patterns-list">
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Installation</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/library-setup/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Library setup</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/serving/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Serving</span>
</a>
</li>
<li>
<h3>Writing</h3>
<ul>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Library structure</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Markdown &amp; metadata</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Notes &amp; warnings</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/references/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">References</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tables of contents</span>
</a>
</li>
</ul>
</li>
<li>
<h3>Media</h3>
<ul>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Including images</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Including videos</span>
</a>
</li>
</ul>
</li>
<li>
<h3>Coding</h3>
<ul>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">CodePen embedding</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Writing inline demos</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Color palettes</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span class="text">Tested using...</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div class="main-and-footer">
<div>
<main id="main">
<h1>Tables of contents</h1>
<p>Pattern pages in <strong>Infusion</strong> that have two or more subheadings — <code>&lt;h2&gt;</code>s — automatically get a <strong>table of contents</strong>: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> page looks something like this:</p>
<pre><code class="language-html">&lt;nav class=&quot;toc&quot; aria-labelledby=&quot;toc-heading&quot;&gt;
&lt;h2 id=&quot;toc-heading&quot;&gt;Table of contents&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;a href=&quot;#cleaning-the-content-folder&quot;&gt;
“Cleaning” the content folder
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#the-setup-command&quot;&gt;
The setup command
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#the-config-file&quot;&gt;
The config file
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#including-a-logo&quot;&gt;
Including a logo
&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;
</code></pre>
<p>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 <code>toc = false</code> to the TOML metadata for your pattern:</p>
<pre><code>+++
title = &quot;My page with a few headings&quot;
toc = false
+++
</code></pre>
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
For general enquiries, contact us on info@paciellogroup.com.
</footer>
</div>
</div>
</div>
<script src="https://heydon.github.io/infusion/js/prism.js"></script>
<script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
</body>
</html>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

4
docs/sitemap.xml
View File

@ -85,6 +85,10 @@
<loc>https://heydon.github.io/infusion/patterns/serving/</loc> <loc>https://heydon.github.io/infusion/patterns/serving/</loc>
</url> </url>
<url>
<loc>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</loc>
</url>
<url> <url>
<loc>https://heydon.github.io/infusion/tags/</loc> <loc>https://heydon.github.io/infusion/tags/</loc>
<priority>0</priority> <priority>0</priority>

15
themes/infusion/layouts/partials/toc.html Normal file
View File

@ -0,0 +1,15 @@
{{ $headings := findRE "<h2.*?>(.|\n])+?</h2>" .Content }}
{{ if ge (len $headings) 2 }}
<nav class="toc" aria-labelledby="toc-heading">
<h2 id="toc-heading">Table of contents</h2>
<ol>
{{ range $headings }}
<li>
<a href="#{{ . | htmlUnescape | plainify | urlize }}">
{{ . | htmlUnescape | plainify }}
</a>
</li>
{{ end }}
</ol>
</nav>
{{ end }}

3
themes/infusion/layouts/patterns/single.html
View File

@ -20,6 +20,9 @@
</ul> </ul>
</div> </div>
{{ end }} {{ end }}
{{ if ne .Params.TOC false }}
{{ partial "toc" . }}
{{ end }}
{{ .Content }} {{ .Content }}
</main> </main>
{{ end }} {{ end }}

26
themes/infusion/static/css/styles.css
View File

@ -135,11 +135,16 @@ h3 {
font-size: 1.25rem; font-size: 1.25rem;
} }
h4 { h4, h5 {
font-size: 1rem; font-size: 1rem;
font-family: PT Sans, sans-serif; font-family: PT Sans, sans-serif;
} }
h5 {
font-size: 0.85rem;
text-transform: uppercase;
}
kbd { kbd {
line-height: 1; line-height: 1;
font-size: 0.66rem; font-size: 0.66rem;
@ -188,7 +193,7 @@ code {
/* Lists */ /* Lists */
main ul { main ul, main ol {
margin-left: 2.25rem; margin-left: 2.25rem;
} }
@ -387,6 +392,23 @@ caption {
box-shadow: inset 0 0 0 0.25rem #ccc; 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 */ /* Pattern lists */
.patterns-list { .patterns-list {