compressed TOC code example

This commit is contained in:
Heydon Pickering 2017-07-14 18:33:53 +01:00
parent 33a5434c62
commit 215f6b015f
5 changed files with 11 additions and 27 deletions

View File

@ -9,24 +9,16 @@ Pattern pages in **Infusion** that have two or more subheadings — `<h2>`s —
<h2 id="toc-heading">Table of contents</h2> <h2 id="toc-heading">Table of contents</h2>
<ol> <ol>
<li> <li>
<a href="#cleaning-the-content-folder"> <a href="#cleaning-the-content-folder">“Cleaning” the content folder</a>
“Cleaning” the content folder
</a>
</li> </li>
<li> <li>
<a href="#the-setup-command"> <a href="#the-setup-command">The setup command</a>
The setup command
</a>
</li> </li>
<li> <li>
<a href="#the-config-file"> <a href="#the-config-file">The config file</a>
The config file
</a>
</li> </li>
<li> <li>
<a href="#including-a-logo"> <a href="#including-a-logo">Including a logo</a>
Including a logo
</a>
</li> </li>
</ol> </ol>
</nav> </nav>

View File

@ -164,7 +164,7 @@ npm run serve This will serve your working library from localhost:1313 (the exac
<guid>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</guid> <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: <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> &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> <item>

View File

@ -68,7 +68,7 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
<guid>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</guid> <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: <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> &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>
</channel> </channel>

View File

@ -271,24 +271,16 @@
&lt;h2 id=&quot;toc-heading&quot;&gt;Table of contents&lt;/h2&gt; &lt;h2 id=&quot;toc-heading&quot;&gt;Table of contents&lt;/h2&gt;
&lt;ol&gt; &lt;ol&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#cleaning-the-content-folder&quot;&gt; &lt;a href=&quot;#cleaning-the-content-folder&quot;&gt;“Cleaning” the content folder&lt;/a&gt;
“Cleaning” the content folder
&lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#the-setup-command&quot;&gt; &lt;a href=&quot;#the-setup-command&quot;&gt;The setup command&lt;/a&gt;
The setup command
&lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#the-config-file&quot;&gt; &lt;a href=&quot;#the-config-file&quot;&gt;The config file&lt;/a&gt;
The config file
&lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#including-a-logo&quot;&gt; &lt;a href=&quot;#including-a-logo&quot;&gt;Including a logo&lt;/a&gt;
Including a logo
&lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;/ol&gt; &lt;/ol&gt;
&lt;/nav&gt; &lt;/nav&gt;

File diff suppressed because one or more lines are too long