automatic tables of contents
This commit is contained in:
Heydon Pickering
parent
07fe70751f
commit
7807264e99
42
content/patterns/writing/tables-of-contents.md
Normal file
42
content/patterns/writing/tables-of-contents.md
Normal 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
|
||||
+++
|
||||
```
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -175,6 +175,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
|
|||
|
|
@ -157,6 +157,16 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} patt
|
|||
npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what&rsquo;s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library&rsquo;s files, the site will automatically rebuild.</description>
|
||||
</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 — &lt;h2&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 &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
|
||||
&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; Tables of contents are a neat way to break down the content of the page and give users a navigable overview.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Tested using...</title>
|
||||
<link>https://heydon.github.io/infusion/patterns/coding/tested/</link>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</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>So, this…</p>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
@ -253,6 +260,11 @@
|
|||
<main id="main">
|
||||
<h1>CodePen embedding</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>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.</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’s <code>ID</code>.</p>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
@ -253,6 +260,11 @@
|
|||
<main id="main">
|
||||
<h1>Color palettes</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>There’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>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
@ -253,6 +260,11 @@
|
|||
<main id="main">
|
||||
<h1>Tested using...</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p><strong>Infusion</strong> provided a <code>tested</code> 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.</p>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</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’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’t have to worry about broken styles and global JS.</p>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</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 & 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’s get set up step-by-step.</p>
|
||||
|
||||
<h2 id="1-install-hugo">1. Install Hugo</h2>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<h2 id="cleaning-the-content-folder">“Cleaning” the content folder</h2>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
@ -255,6 +262,11 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>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 <code>/content</code> folder you’ll be mostly working in.</p>
|
||||
|
||||
<pre><code>├── content
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
@ -253,6 +260,11 @@
|
|||
<main id="main">
|
||||
<h1>Including videos</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p><strong>Infusion</strong> has a lot of its own shortcodes, but you can still use Hugo’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’s <code>id</code>.</p>
|
||||
|
||||
<pre class=" "><code data-codeblock-shortcode>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<p>While you’re creating content for your library, you’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>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
@ -253,6 +260,11 @@
|
|||
<main id="main">
|
||||
<h1>Expandable sections</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>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. <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>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
|
|
@ -306,6 +313,16 @@
|
|||
</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>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,5 +61,15 @@ Notes You may wish to pick out some content in your pattern&rsquo;s document
|
|||
I can reference the &#x7b;{% 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.</description>
|
||||
</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 — &lt;h2&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 &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
|
||||
&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; Tables of contents are a neat way to break down the content of the page and give users a navigable overview.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<pre><code>└── content
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</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’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 <code>menu-button</code>. Then you get a nice clean URL: <code>your-company.com/patterns/menu-button</code>.</p>
|
||||
|
||||
<p>If you’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’s also a <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">nice cheatsheet here</a>.</p>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</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 “shortcodes”. 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>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,13 @@
|
|||
</a>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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 & warnings</a> pattern. Here’s what the markdown looks like, including the shortcode:</p>
|
||||
|
|
|
|||
320
docs/patterns/writing/tables-of-contents/index.html
Normal file
320
docs/patterns/writing/tables-of-contents/index.html
Normal 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 & 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 & 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><h2></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 “Table of contents” 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"><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>
|
||||
</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 = "My page with a few headings"
|
||||
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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -85,6 +85,10 @@
|
|||
<loc>https://heydon.github.io/infusion/patterns/serving/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://heydon.github.io/infusion/tags/</loc>
|
||||
<priority>0</priority>
|
||||
|
|
|
|||
15
themes/infusion/layouts/partials/toc.html
Normal file
15
themes/infusion/layouts/partials/toc.html
Normal 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 }}
|
||||
|
|
@ -20,6 +20,9 @@
|
|||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if ne .Params.TOC false }}
|
||||
{{ partial "toc" . }}
|
||||
{{ end }}
|
||||
{{ .Content }}
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user