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

focusable='false'

This commit is contained in:
Heydon Pickering 2017-08-03 12:16:24 +01:00
parent 2b07b23c54
commit 09a7454479
44 changed files with 1887 additions and 697 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
docs/index.html
View File

@ -139,7 +139,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -150,28 +150,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -183,42 +191,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -232,14 +252,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -253,49 +277,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -330,7 +368,7 @@
</div>
<p>To get started, take a look at <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>.</p>
<p>To get started, take a look at <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a>.</p>
</main>

8
docs/index.xml
View File

@ -62,7 +62,7 @@ CodePen Infusion offers a couple of ways to do this. The first is by embedding C
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/library-setup/</guid>
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
&amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description>
</item>
@ -103,7 +103,7 @@ Infusion offers another option: a special demo shortcode that allows you to writ
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/printing/</guid>
<description>Infusion&amp;rsquo;s output site includes a one-page Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
<description>Infusion&amp;rsquo;s output site includes a one-page Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
https://yourName.github.io/your-library/print-version Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!
</description>
</item>
@ -198,7 +198,7 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/references/</guid>
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
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>
@ -208,7 +208,7 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
<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:
<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>

2
docs/js/dom-scripts.js
View File

@ -69,7 +69,7 @@
var link = document.createElement('a')
link.setAttribute('href', '#' + id)
link.setAttribute('aria-label', 'link for this section')
link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50"><use xlink:href="#link"></use></svg>'
link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>'
container.appendChild(link)

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Code blocks
</h1>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Color palettes
</h1>
@ -352,7 +392,7 @@
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>If you&rsquo;re wondering whether you need to put a space after the commas in the shortcode, don&rsquo;t worry: <code>&quot;#254f7b, #579a6d, #666666&quot;</code> and <code>&quot;#254f7b,#579a6d,#666666&quot;</code> are both accepted. Any CSS color value is acceptable, not just hex colors.</p>

84
docs/patterns/coding/command-line/index.html
View File

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Command line
</h1>
@ -338,7 +378,7 @@ npm run start
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>The <code>cmd</code> shortcode currently only supports single commands. If you want to show multiple, successive commands use separate <code>cmd</code> blocks.</p>

86
docs/patterns/coding/demo-embedding/index.html
View File

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Demo embedding
</h1>
@ -371,7 +411,7 @@
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p>
@ -415,7 +455,7 @@
<h2 id="inline-demos">Inline demos</h2>
<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>.</p>
<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Writing inline demos</a>.</p>
</main>

84
docs/patterns/coding/file-trees/index.html
View File

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
File trees
</h1>
@ -388,7 +428,7 @@
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>The only reliable way to nest unordered lists in markdown is to indent the nested item by exactly four spaces. Using tabs or less than four spaces are unreliable methods.</p>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -318,7 +356,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Code blocks
</a>
</h2>
@ -328,7 +368,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Demo embedding
</a>
</h2>
@ -338,7 +380,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Writing inline demos
</a>
</h2>
@ -348,7 +392,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Color palettes
</a>
</h2>
@ -358,7 +404,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/coding/command-line/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Command line
</a>
</h2>
@ -368,7 +416,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
File trees
</a>
</h2>
@ -378,7 +428,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/coding/tested/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Tested using...
</a>
</h2>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/tested/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Tested using...
</h1>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo embedding</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Writing inline demos
</h1>
@ -418,7 +458,7 @@ toggle.addEventListener('click', (e) => {
</code></pre>
</p>
<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
</main>

94
docs/patterns/index.html
View File

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -318,7 +356,9 @@
<li>
<h2>
<a 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>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Installation
</a>
</h2>
@ -328,7 +368,9 @@
<li>
<h2>
<a 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>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library setup
</a>
</h2>
@ -338,7 +380,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/serving/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Serving
</a>
</h2>
@ -348,7 +392,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/printing/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Printing
</a>
</h2>

4
docs/patterns/index.xml
View File

@ -28,7 +28,7 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/library-setup/</guid>
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
<description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
&amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description>
</item>
@ -49,7 +49,7 @@ Publishing on Github Pages Infusion creates a /docs folder containing the latest
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/printing/</guid>
<description>Infusion&amp;rsquo;s output site includes a one-page Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
<description>Infusion&amp;rsquo;s output site includes a one-page Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
https://yourName.github.io/your-library/print-version Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!
</description>
</item>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/installation/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Installation
</h1>
@ -394,7 +434,7 @@
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p>
@ -408,7 +448,7 @@
<pre class="cmd"><code>npm install</code></pre>
<p>Now it&rsquo;s time to consult 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> pattern.</p>
<p>Now it&rsquo;s time to consult 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" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> pattern.</p>
</main>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library setup
</h1>
@ -353,7 +393,7 @@
<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" focusable="false"> <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>
@ -361,7 +401,7 @@
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
@ -373,7 +413,7 @@
<pre class="cmd"><code> npm run clean</code></pre>
<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>.</p>
<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a>.</p>
<h2 id="the-config-file">The config file</h2>
@ -412,7 +452,7 @@ theme = "infusion"
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>The</p>
@ -430,7 +470,7 @@ theme = "infusion"
&lt;/a&gt;
</code></pre>
<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>
<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Serving</a>.</p>
</main>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/media/including-images/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Including images
</h1>
@ -344,7 +384,7 @@
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion&rsquo;s</strong> own logo will be included. You should replace this with your own company or project logo.</p>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Including videos
</h1>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -318,7 +356,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/media/including-images/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Including images
</a>
</h2>
@ -328,7 +368,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/media/including-videos/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Including videos
</a>
</h2>

86
docs/patterns/printing/index.html
View File

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Printing
</h1>
@ -320,14 +360,14 @@
<p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
<p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
<pre><code>https://yourName.github.io/your-library/print-version
</code></pre>
<p><aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!</p>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Serving
</h1>
@ -363,7 +403,7 @@
<pre><code>[your user name].github.io/[your library repo name]
</code></pre>
<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <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> for more information.</p>
<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> for more information.</p>
</main>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Expandable sections
</h1>
@ -423,7 +463,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>When you go to print a pattern from your library, some print styles take care of collapsible sections, making them appear expanded and like any other section.</p>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -318,7 +356,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library structure
</a>
</h2>
@ -328,7 +368,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Markdown &amp; metadata
</a>
</h2>
@ -338,7 +380,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Expandable sections
</a>
</h2>
@ -348,7 +392,9 @@
<li>
<h2>
<a 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>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Notes &amp; warnings
</a>
</h2>
@ -358,7 +404,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/writing/references/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
References
</a>
</h2>
@ -368,7 +416,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Tables of contents
</a>
</h2>

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

@ -57,7 +57,7 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/writing/references/</guid>
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
<description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
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>
@ -67,7 +67,7 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
<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:
<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>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library structure
</h1>
@ -381,7 +421,7 @@
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn&rsquo;t need any content except the TOML metadata defining the title (name) of that subsection:</p>
@ -399,7 +439,7 @@ title = &quot;Popups&quot;
</aside>
<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>.</p>
<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Markdown &amp; metadata</a>.</p>
</main>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Markdown &amp; metadata
</h1>
@ -322,7 +362,7 @@
<li>
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
<use xlink:href="#tag"></use>
</svg>
<a href="https://heydon.github.io/infusion/tags/metadata">metadata</a>
@ -333,7 +373,7 @@
<li>
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
<use xlink:href="#tag"></use>
</svg>
<a href="https://heydon.github.io/infusion/tags/markdown">markdown</a>
@ -389,7 +429,7 @@ weight = 1
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>The <code>weight</code> parameter should be an integer, not a string, so don&rsquo;t use scare quotes around the value!</p>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Notes &amp; warnings
</h1>
@ -358,7 +398,7 @@ This is a note! It's something the reader may like to know about but is suppleme
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p>
@ -382,7 +422,7 @@ This is a warning! It's about something the reader should be careful to do or to
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p>

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

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" aria-current="page">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
References
</h1>
@ -349,7 +389,7 @@
<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" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
<pre class=" "><code data-codeblock-shortcode>
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@ -360,7 +400,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>The title argument you supply to the shortcode must be exactly the same as the referenced pattern&rsquo;s <code>title</code> metadata value and is case sensitive.</p>
@ -435,7 +475,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
<use xlink:href="#w3c"></use>
</svg>
2.1.1 Keyboard</a> (level A)
</strong>
@ -519,7 +561,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
<use xlink:href="#w3c"></use>
</svg>
4.1.2 Name, Role, Value</a> (level A)
</strong>
@ -531,7 +575,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>You don&rsquo;t have to leave spaces after the comma separators. They are optional.</p>
@ -604,7 +648,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
<use xlink:href="#w3c"></use>
</svg>
2.1.1 Keyboard</a> (level A):
</strong>
@ -691,7 +737,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
<use xlink:href="#w3c"></use>
</svg>
4.1.2 Name, Role, Value</a> (level A):
</strong>
@ -729,7 +777,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong>
<a href="https://inclusivedesignprinciples.org#be-consistent">
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
<use xlink:href="#balloon"></use>
</svg>
Be consistent
</a>:
</strong>
@ -750,7 +800,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong>
<a href="https://inclusivedesignprinciples.org#add-value">
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
<use xlink:href="#balloon"></use>
</svg>
Add value
</a>:
</strong>

84
docs/patterns/writing/tables-of-contents/index.html
View File

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,9 @@
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Tables of contents
</h1>
@ -320,7 +360,7 @@
<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>
<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" focusable="false"> <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;

230
docs/print-version/index.html
View File

@ -143,28 +143,36 @@
<li class="pattern">
<a href="#installation" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Installation</span>
</a>
</li>
<li class="pattern">
<a href="#library-setup" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library setup</span>
</a>
</li>
<li class="pattern">
<a href="#serving" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="#printing" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -176,42 +184,54 @@
<li class="pattern">
<a href="#library-structure" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Library structure</span>
</a>
</li>
<li class="pattern">
<a href="#markdown--metadata" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Markdown &amp; metadata</span>
</a>
</li>
<li class="pattern">
<a href="#expandable-sections" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Expandable sections</span>
</a>
</li>
<li class="pattern">
<a href="#notes--warnings" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Notes &amp; warnings</span>
</a>
</li>
<li class="pattern">
<a href="#references" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">References</span>
</a>
</li>
<li class="pattern">
<a href="#tables-of-contents" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -225,14 +245,18 @@
<li class="pattern">
<a href="#including-images" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including images</span>
</a>
</li>
<li class="pattern">
<a href="#including-videos" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -246,49 +270,63 @@
<li class="pattern">
<a href="#code-blocks" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Code blocks</span>
</a>
</li>
<li class="pattern">
<a href="#demo-embedding" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo embedding</span>
</a>
</li>
<li class="pattern">
<a href="#writing-inline-demos" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Writing inline demos</span>
</a>
</li>
<li class="pattern">
<a href="#color-palettes" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Color palettes</span>
</a>
</li>
<li class="pattern">
<a href="#command-line" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="#file-trees" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</span>
</a>
</li>
<li class="pattern">
<a href="#tested-using..." >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -304,7 +342,9 @@
<div class="pattern-section">
<h1 id="installation" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Installation
</h1>
@ -356,7 +396,7 @@
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p>
@ -370,18 +410,20 @@
<pre class="cmd"><code>npm install</code></pre>
<p>Now it&rsquo;s time to consult 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> pattern.</p>
<p>Now it&rsquo;s time to consult 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" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> pattern.</p>
</div>
<div class="pattern-section">
<h1 id="library-setup" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library setup
</h1>
<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" focusable="false"> <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>
@ -389,7 +431,7 @@
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
@ -401,7 +443,7 @@
<pre class="cmd"><code> npm run clean</code></pre>
<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>.</p>
<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a>.</p>
<h2 id="the-config-file">The config file</h2>
@ -440,7 +482,7 @@ theme = "infusion"
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>The</p>
@ -458,13 +500,15 @@ theme = "infusion"
&lt;/a&gt;
</code></pre>
<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>
<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Serving</a>.</p>
</div>
<div class="pattern-section">
<h1 id="serving" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Serving
</h1>
@ -491,23 +535,25 @@ theme = "infusion"
<pre><code>[your user name].github.io/[your library repo name]
</code></pre>
<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <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> for more information.</p>
<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> for more information.</p>
</div>
<div class="pattern-section">
<h1 id="printing" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Printing
</h1>
<p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
<p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
<pre><code>https://yourName.github.io/your-library/print-version
</code></pre>
<p><aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!</p>
@ -522,7 +568,9 @@ theme = "infusion"
<div class="pattern-section">
<h1 id="library-structure" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Library structure
</h1>
@ -586,7 +634,7 @@ theme = "infusion"
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn&rsquo;t need any content except the TOML metadata defining the title (name) of that subsection:</p>
@ -604,13 +652,15 @@ title = &quot;Popups&quot;
</aside>
<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>.</p>
<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Markdown &amp; metadata</a>.</p>
</div>
<div class="pattern-section">
<h1 id="markdown--metadata" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Markdown &amp; metadata
</h1>
@ -653,7 +703,7 @@ weight = 1
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>The <code>weight</code> parameter should be an integer, not a string, so don&rsquo;t use scare quotes around the value!</p>
@ -666,7 +716,9 @@ weight = 1
<div class="pattern-section">
<h1 id="expandable-sections" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
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>
@ -772,7 +824,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>When you go to print a pattern from your library, some print styles take care of collapsible sections, making them appear expanded and like any other section.</p>
@ -785,7 +837,9 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<div class="pattern-section">
<h1 id="notes--warnings" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Notes &amp; warnings
</h1>
@ -807,7 +861,7 @@ This is a note! It's something the reader may like to know about but is suppleme
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p>
@ -831,7 +885,7 @@ This is a warning! It's about something the reader should be careful to do or to
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p>
@ -844,14 +898,16 @@ This is a warning! It's about something the reader should be careful to do or to
<div class="pattern-section">
<h1 id="references" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
References
</h1>
<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" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
<pre class=" "><code data-codeblock-shortcode>
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@ -862,7 +918,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>The title argument you supply to the shortcode must be exactly the same as the referenced pattern&rsquo;s <code>title</code> metadata value and is case sensitive.</p>
@ -937,7 +993,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
<use xlink:href="#w3c"></use>
</svg>
2.1.1 Keyboard</a> (level A)
</strong>
@ -1021,7 +1079,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
<use xlink:href="#w3c"></use>
</svg>
4.1.2 Name, Role, Value</a> (level A)
</strong>
@ -1033,7 +1093,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>You don&rsquo;t have to leave spaces after the comma separators. They are optional.</p>
@ -1106,7 +1166,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
<use xlink:href="#w3c"></use>
</svg>
2.1.1 Keyboard</a> (level A):
</strong>
@ -1193,7 +1255,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
<use xlink:href="#w3c"></use>
</svg>
4.1.2 Name, Role, Value</a> (level A):
</strong>
@ -1231,7 +1295,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong>
<a href="https://inclusivedesignprinciples.org#be-consistent">
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
<use xlink:href="#balloon"></use>
</svg>
Be consistent
</a>:
</strong>
@ -1252,7 +1318,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<li>
<strong>
<a href="https://inclusivedesignprinciples.org#add-value">
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
<use xlink:href="#balloon"></use>
</svg>
Add value
</a>:
</strong>
@ -1270,10 +1338,12 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<div class="pattern-section">
<h1 id="tables-of-contents" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
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>
<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" focusable="false"> <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;
@ -1308,7 +1378,9 @@ toc = false
<div class="pattern-section">
<h1 id="including-images" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Including images
</h1>
@ -1335,7 +1407,7 @@ toc = false
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion&rsquo;s</strong> own logo will be included. You should replace this with your own company or project logo.</p>
@ -1386,7 +1458,9 @@ toc = false
<div class="pattern-section">
<h1 id="including-videos" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
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>
@ -1402,7 +1476,9 @@ toc = false
<div class="pattern-section">
<h1 id="code-blocks" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Code blocks
</h1>
@ -1457,7 +1533,9 @@ toggle.addEventListener('click', (e) => {
<div class="pattern-section">
<h1 id="demo-embedding" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Demo embedding
</h1>
@ -1486,7 +1564,7 @@ toggle.addEventListener('click', (e) => {
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p>
@ -1530,13 +1608,15 @@ toggle.addEventListener('click', (e) => {
<h2 id="inline-demos">Inline demos</h2>
<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>.</p>
<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Writing inline demos</a>.</p>
</div>
<div class="pattern-section">
<h1 id="writing-inline-demos" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Writing inline demos
</h1>
@ -1637,13 +1717,15 @@ toggle.addEventListener('click', (e) => {
</code></pre>
</p>
<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
</div>
<div class="pattern-section">
<h1 id="color-palettes" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
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>
@ -1678,7 +1760,7 @@ toggle.addEventListener('click', (e) => {
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>If you&rsquo;re wondering whether you need to put a space after the commas in the shortcode, don&rsquo;t worry: <code>&quot;#254f7b, #579a6d, #666666&quot;</code> and <code>&quot;#254f7b,#579a6d,#666666&quot;</code> are both accepted. Any CSS color value is acceptable, not just hex colors.</p>
@ -1691,7 +1773,9 @@ toggle.addEventListener('click', (e) => {
<div class="pattern-section">
<h1 id="command-line" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Command line
</h1>
<p>Your pattern documentation may need to include commands for installing packages or using <abbr title="command line interface">CLI</abbr>s. <strong>Infusion</strong> offers the <code>cmd</code> shortcode for making code blocks look like terminal commands.</p>
@ -1712,7 +1796,7 @@ npm run start
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>The <code>cmd</code> shortcode currently only supports single commands. If you want to show multiple, successive commands use separate <code>cmd</code> blocks.</p>
@ -1725,7 +1809,9 @@ npm run start
<div class="pattern-section">
<h1 id="file-trees" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
File trees
</h1>
<p>Representing folder/file structures is simple and accessible in <strong>Infusion</strong>. Which is just as well, because some components may need to conform to a certain folder structure.</p>
@ -1796,7 +1882,7 @@ npm run start
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
<p>The only reliable way to nest unordered lists in markdown is to indent the nested item by exactly four spaces. Using tabs or less than four spaces are unreliable methods.</p>
@ -1809,7 +1895,9 @@ npm run start
<div class="pattern-section">
<h1 id="tested-using..." tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
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>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

84
docs/tags/markdown/index.html
View File

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,7 @@
<main id="main">
<h1>
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
<use xlink:href="#tag"></use>
</svg>
Tagged &#x201c;Markdown&#x201d;
@ -321,7 +359,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Markdown &amp; metadata
</a>
</h2>

84
docs/tags/metadata/index.html
View File

@ -136,7 +136,7 @@
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -147,28 +147,36 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" 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>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Serving</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/printing/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Printing</span>
</a>
</li>
@ -180,42 +188,54 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tables of contents</span>
</a>
</li>
@ -229,14 +249,18 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Including videos</span>
</a>
</li>
@ -250,49 +274,63 @@
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/demo-embedding/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Demo 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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<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/command-line/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Command line</span>
</a>
</li>
<li class="pattern">
<a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">File trees</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>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Tested using...</span>
</a>
</li>
@ -311,7 +349,7 @@
<main id="main">
<h1>
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
<use xlink:href="#tag"></use>
</svg>
Tagged &#x201c;Metadata&#x201d;
@ -321,7 +359,9 @@
<li>
<h2>
<a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
Markdown &amp; metadata
</a>
</h2>

10
themes/infusion/layouts/_default/baseof.html
View File

@ -65,7 +65,7 @@
{{ block "nav" . }}
<nav id="patterns-nav" class="patterns" role="navigation">
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" width="50" height="50">
<svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
@ -76,7 +76,9 @@
{{ range .Pages.ByWeight }}
<li class="pattern">
<a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">{{ .Title }}</span>
</a>
</li>
@ -88,7 +90,9 @@
{{ range .Pages.ByWeight }}
<li class="pattern">
<a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">{{ .Title }}</span>
</a>
</li>

4
themes/infusion/layouts/_default/li.html
View File

@ -1,7 +1,9 @@
<li>
<h2>
<a href="{{ .Permalink }}">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
{{ .Title }}
</a>
</h2>

4
themes/infusion/layouts/patterns/li.html
View File

@ -1,7 +1,9 @@
<li>
<h2>
<a href="{{ .Permalink }}">
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
{{ .Title }}
</a>
</h2>

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

@ -1,7 +1,9 @@
{{ define "main" }}
<main id="main">
<h1>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
{{ .Title }}
</h1>
{{ if isset .Params "tags" }}
@ -12,7 +14,7 @@
{{ if ne . "example tag"}}
{{ if ne . "another tag"}}
<li>
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
<use xlink:href="#tag"></use>
</svg>
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>

16
themes/infusion/layouts/print-version/single.html
View File

@ -16,7 +16,9 @@
{{ range .Pages.ByWeight }}
<li class="pattern">
<a href="#{{ .Title | urlize }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">{{ .Title }}</span>
</a>
</li>
@ -28,7 +30,9 @@
{{ range .Pages.ByWeight }}
<li class="pattern">
<a href="#{{ .Title | urlize }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">{{ .Title }}</span>
</a>
</li>
@ -44,7 +48,9 @@
{{ range .Pages.ByWeight }}
<div class="pattern-section">
<h1 id="{{ .Title | urlize }}" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
{{ .Title }}
</h1>
{{ .Content }}
@ -54,7 +60,9 @@
{{ range .Pages.ByWeight }}
<div class="pattern-section">
<h1 id="{{ .Title | urlize }}" tabindex="-1">
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
<use xlink:href="#bookmark"></use>
</svg>
{{ .Title }}
</h1>
{{ .Content }}

2
themes/infusion/layouts/shortcodes/note.html
View File

@ -1,6 +1,6 @@
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
{{ .Inner }}

2
themes/infusion/layouts/shortcodes/pattern.html
View File

@ -1 +1 @@
{{ $title := .Get 0 }}{{ range .Site.Pages }}{{ if eq .Title $title }}<a class="pattern-link" href="{{ .Permalink }}"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>{{ .Title }}</a>{{ end }}{{ end -}}
{{ $title := .Get 0 }}{{ range .Site.Pages }}{{ if eq .Title $title }}<a class="pattern-link" href="{{ .Permalink }}"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>{{ .Title }}</a>{{ end }}{{ end -}}

4
themes/infusion/layouts/shortcodes/principles.html
View File

@ -8,7 +8,9 @@
<li>
<strong>
<a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
<svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
<use xlink:href="#balloon"></use>
</svg>
{{ .title }}
</a>:
</strong>

2
themes/infusion/layouts/shortcodes/warning.html
View File

@ -1,6 +1,6 @@
<aside aria-label="warning" class="note warning">
<div>
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
<svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
<use xlink:href="#warning"></use>
</svg>
{{ .Inner }}

4
themes/infusion/layouts/shortcodes/wcag.html
View File

@ -7,7 +7,9 @@
{{ if in $included .ref_id }}
<li>
<strong><a href="{{ .url }}">
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
<svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
<use xlink:href="#w3c"></use>
</svg>
{{ .ref_id }} {{ .title }}</a> (level {{ .level }}){{ if $descriptions }}:{{ end }}
</strong>
{{ if $descriptions }}

2
themes/infusion/layouts/taxonomy/tag.html
View File

@ -4,7 +4,7 @@
{{ define "main" }}
<main id="main">
<h1>
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
<svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
<use xlink:href="#tag"></use>
</svg>
Tagged &#x201c;{{ .Title }}&#x201d;

2
themes/infusion/static/js/dom-scripts.js
View File

@ -69,7 +69,7 @@
var link = document.createElement('a')
link.setAttribute('href', '#' + id)
link.setAttribute('aria-label', 'link for this section')
link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50"><use xlink:href="#link"></use></svg>'
link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>'
container.appendChild(link)