better starter pattern

content/patterns/code/_index.md

@@ -1,3 +0,0 @@
-+++
-title = "Exhibiting code"
-+++

content/patterns/coding/_index.md

@@ -0,0 +1,3 @@
++++
+title = "Coding"
++++

content/patterns/code/code-blocks.md → content/patterns/coding/code-blocks.md

@@ -1,5 +1,6 @@
 +++
 title = "Code blocks"
+weight = 1
 +++
 
 Markdown already supports code samples both inline (using single backticks like \`some code here\`) and in blocks. **Infusion** will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.

content/patterns/code/codepen-embedding.md → content/patterns/coding/codepen-embedding.md

@@ -1,5 +1,6 @@
 +++
 title = "CodePen embedding"
+weight = 2
 +++
 
 Sometimes just pictures of the pattern you're documenting aren't enough. Interactive patterns benefit from live demos, so that readers can test their functionality.

content/patterns/code/writing-inline-demos.md → content/patterns/coding/writing-inline-demos.md

@@ -1,5 +1,6 @@
 +++
 title = "Writing inline demos"
+weight = 3
 +++
 
 There are some issues with {{% pattern "CodePen embedding" %}}, like them not working offline. They also come with CodePen branding, which will clash with the pattern you're trying to illustrate.

content/patterns/library-setup.md

@@ -1,5 +1,6 @@
 +++
 title = "Library setup"
+tags = ["example tag", "quickstart"]
 +++
 
 By now, you should have followed the {{% pattern "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.

docs/index.html

@@ -141,34 +141,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
@@ -217,6 +217,10 @@
   
 
   
+
+  
+
+  
 
   
 

docs/index.xml

@@ -11,6 +11,18 @@
 	<atom:link href="https://heydon.github.io/infusion/index.xml" rel="self" type="application/rss+xml" />
     
     
+    <item>
+      <title>Code blocks</title>
+      <link>https://heydon.github.io/infusion/patterns/coding/code-blocks/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>https://heydon.github.io/infusion/patterns/coding/code-blocks/</guid>
+      <description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
+So, this&amp;hellip;
+```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ```  &amp;hellip; will result in this:
+&amp;lt;button aria-pressed=&amp;quot;false&amp;quot;&amp;gt;toggle me&amp;lt;/button&amp;gt;  Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</description>
+    </item>
+    
     <item>
       <title>Library structure</title>
       <link>https://heydon.github.io/infusion/patterns/writing/library-structure/</link>
@@ -21,6 +33,17 @@
 └── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md   /content - This is where all of your content lives. You won&amp;rsquo;t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept.</description>
     </item>
     
+    <item>
+      <title>CodePen embedding</title>
+      <link>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</guid>
+      <description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
+Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
+&amp;#x7b;{% codePen VpVNKW %}}  This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
+    </item>
+    
     <item>
       <title>Markdown &amp; metadata</title>
       <link>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</link>
@@ -31,6 +54,16 @@
 If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
     </item>
     
+    <item>
+      <title>Writing inline demos</title>
+      <link>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid>
+      <description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
+Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
+    </item>
+    
     <item>
       <title>Expandable sections</title>
       <link>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</link>
@@ -42,35 +75,12 @@ The expandable shortcode takes three parameters:
  label — This is the label for the the section heading. level — This is the heading level (e.</description>
     </item>
     
-    <item>
-      <title>Code blocks</title>
-      <link>https://heydon.github.io/infusion/patterns/code/code-blocks/</link>
-      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
-      
-      <guid>https://heydon.github.io/infusion/patterns/code/code-blocks/</guid>
-      <description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
-So, this&amp;hellip;
-```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ```  &amp;hellip; will result in this:
-&amp;lt;button aria-pressed=&amp;quot;false&amp;quot;&amp;gt;toggle me&amp;lt;/button&amp;gt;  Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</description>
-    </item>
-    
-    <item>
-      <title>CodePen embedding</title>
-      <link>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</link>
-      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
-      
-      <guid>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</guid>
-      <description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
-Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
-&amp;#x7b;{% codePen VpVNKW %}}  This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
-    </item>
-    
     <item>
       <title>Color palettes</title>
-      <link>https://heydon.github.io/infusion/patterns/code/color-palettes/</link>
+      <link>https://heydon.github.io/infusion/patterns/coding/color-palettes/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://heydon.github.io/infusion/patterns/code/color-palettes/</guid>
+      <guid>https://heydon.github.io/infusion/patterns/coding/color-palettes/</guid>
       <description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
 &amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}}  The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
     </item>
@@ -137,15 +147,5 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
 npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what&amp;rsquo;s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild.</description>
     </item>
     
-    <item>
-      <title>Writing inline demos</title>
-      <link>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</link>
-      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
-      
-      <guid>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</guid>
-      <description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
-Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
-    </item>
-    
   </channel>
 </rss>

docs/patterns/code/code-blocks/index.html → docs/patterns/coding/code-blocks/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/code-blocks/">
+    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/code-blocks/">
     <link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" aria-current="page">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" aria-current="page">
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       

docs/patterns/code/codepen-embedding/index.html → docs/patterns/coding/codepen-embedding/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/">
+    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/">
     <link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" aria-current="page">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" aria-current="page">
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
@@ -227,6 +227,11 @@
   
 
   
+    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/">
+      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>
+  
+
+  
 
   
 
@@ -253,8 +258,7 @@
   
 
   
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>
+
   
 
 .</p>

docs/patterns/code/color-palettes/index.html → docs/patterns/coding/color-palettes/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/color-palettes/">
+    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/color-palettes/">
     <link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" aria-current="page">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" aria-current="page">
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       

docs/patterns/code/index.html → docs/patterns/coding/index.html

@@ -4,14 +4,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/">
+    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/">
     <link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
     <title>
       
-        Exhibiting code | Infusion
+        Coding | Infusion
       
     </title>
   </head>
@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
@@ -186,13 +186,13 @@
     <h1>
       
       
-      Exhibiting code
+      Coding
     </h1>
     <ul class="patterns-list">
       
           <li>
   <h2>
-    <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/">
+    <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/">
       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
       Code blocks
     </a>
@@ -202,7 +202,7 @@
       
           <li>
   <h2>
-    <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/">
+    <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/">
       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
       CodePen embedding
     </a>
@@ -212,9 +212,9 @@
       
           <li>
   <h2>
-    <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/">
+    <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/">
       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-      Color palettes
+      Writing inline demos
     </a>
   </h2>
 </li>
@@ -222,9 +222,9 @@
       
           <li>
   <h2>
-    <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/">
+    <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/">
       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-      Writing inline demos
+      Color palettes
     </a>
   </h2>
 </li>

docs/patterns/code/index.xml → docs/patterns/coding/index.xml

@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
-    <title>Exhibiting code on Infusion</title>
-    <link>https://heydon.github.io/infusion/patterns/code/</link>
-    <description>Recent content in Exhibiting code on Infusion</description>
+    <title>Coding on Infusion</title>
+    <link>https://heydon.github.io/infusion/patterns/coding/</link>
+    <description>Recent content in Coding on Infusion</description>
     <generator>Hugo -- gohugo.io</generator>
     <language>en-us</language>
     
-	<atom:link href="https://heydon.github.io/infusion/patterns/code/index.xml" rel="self" type="application/rss+xml" />
+	<atom:link href="https://heydon.github.io/infusion/patterns/coding/index.xml" rel="self" type="application/rss+xml" />
     
     
     <item>
       <title>Code blocks</title>
-      <link>https://heydon.github.io/infusion/patterns/code/code-blocks/</link>
+      <link>https://heydon.github.io/infusion/patterns/coding/code-blocks/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://heydon.github.io/infusion/patterns/code/code-blocks/</guid>
+      <guid>https://heydon.github.io/infusion/patterns/coding/code-blocks/</guid>
       <description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
 So, this&amp;hellip;
 ```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ```  &amp;hellip; will result in this:
@@ -24,33 +24,33 @@ So, this&amp;hellip;
     
     <item>
       <title>CodePen embedding</title>
-      <link>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</link>
+      <link>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</guid>
+      <guid>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</guid>
       <description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
 Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
 &amp;#x7b;{% codePen VpVNKW %}}  This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
     </item>
     
     <item>
-      <title>Color palettes</title>
-      <link>https://heydon.github.io/infusion/patterns/code/color-palettes/</link>
+      <title>Writing inline demos</title>
+      <link>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://heydon.github.io/infusion/patterns/code/color-palettes/</guid>
-      <description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
-&amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}}  The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
+      <guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid>
+      <description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
+Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
     </item>
     
     <item>
-      <title>Writing inline demos</title>
-      <link>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</link>
+      <title>Color palettes</title>
+      <link>https://heydon.github.io/infusion/patterns/coding/color-palettes/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</guid>
-      <description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
-Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
+      <guid>https://heydon.github.io/infusion/patterns/coding/color-palettes/</guid>
+      <description>There&amp;rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
+&amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}}  The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
     </item>
     
   </channel>

docs/patterns/code/writing-inline-demos/index.html → docs/patterns/coding/writing-inline-demos/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/">
+    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/">
     <link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" aria-current="page">
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" aria-current="page">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
@@ -194,6 +194,11 @@
   
 
   
+    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/">
+      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>
+  
+
+  
 
   
 
@@ -202,8 +207,7 @@
   
 
   
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>
+
   
 
   

docs/patterns/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       

docs/patterns/installation/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
@@ -263,6 +263,10 @@
   
 
   
+
+  
+
+  
 
   
 

docs/patterns/library-setup/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
@@ -185,6 +185,26 @@
   <main id="main">
     <h1>Library setup</h1>
     
+      <div class="tags">
+        <strong aria-hidden="true">Tags: </strong>
+        <ul aria-label="tags">
+          
+            
+          
+            
+              
+                <li>
+                  <svg class="tag-icon" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
+                    <use xlink:href="#tag"></use>
+                  </svg>
+                  <a href="https://heydon.github.io/infusion/tags/quickstart">quickstart</a>
+                </li>
+              
+            
+          
+        </ul>
+      </div>
+    
     
 
 <p>By now, you should have followed the 
@@ -204,6 +224,10 @@
   
 
   
+
+  
+
+  
 
   
 
@@ -251,6 +275,8 @@
 <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" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
   
@@ -272,6 +298,8 @@
   
 
   
+
+  
 
   
 
@@ -331,6 +359,8 @@ theme = "infusion"
 <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" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
   
@@ -350,6 +380,8 @@ theme = "infusion"
   
 
   
+
+  
 
   
 
@@ -406,10 +438,14 @@ theme = "infusion"
   
 
   
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>
+
+  
+
   
 
+  
+    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/">
+      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>
   
 
   

docs/patterns/serving/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
@@ -226,6 +226,10 @@
   
 
   
+
+  
+
+  
 
   
 

docs/patterns/writing/expandable-sections/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       

docs/patterns/writing/including-images/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       

docs/patterns/writing/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       

docs/patterns/writing/library-structure/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
@@ -242,6 +242,10 @@ title = &quot;Popups&quot;
   
 
   
+
+  
+
+  
     <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>
   

docs/patterns/writing/markdown-and-metadata/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       

docs/patterns/writing/notes-and-warnings/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       

docs/patterns/writing/references/index.html

@@ -140,34 +140,34 @@
                   </li>
                 
                   <li>
-                    <h3>Exhibiting code</h3>
+                    <h3>Coding</h3>
                     <ul>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/code-blocks/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">Code blocks</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                             <span class="text">CodePen embedding</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/color-palettes/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Color palettes</span>
+                            <span class="text">Writing inline demos</span>
                           </a>
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/code/writing-inline-demos/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Writing inline demos</span>
+                            <span class="text">Color palettes</span>
                           </a>
                         </li>
                       
@@ -201,6 +201,10 @@
 
   
 
+  
+
+  
+
   
 
   

docs/sitemap.xml

@@ -2,6 +2,10 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
   
+  <url>
+    <loc>https://heydon.github.io/infusion/patterns/coding/code-blocks/</loc>
+  </url>
+  
   <url>
     <loc>https://heydon.github.io/infusion/patterns/writing/library-structure/</loc>
   </url>
@@ -10,10 +14,18 @@
     <loc>https://heydon.github.io/infusion/patterns/writing/</loc>
   </url>
   
+  <url>
+    <loc>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</loc>
+  </url>
+  
   <url>
     <loc>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</loc>
   </url>
   
+  <url>
+    <loc>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</loc>
+  </url>
+  
   <url>
     <loc>https://heydon.github.io/infusion/patterns/writing/expandable-sections/</loc>
   </url>
@@ -29,19 +41,16 @@
   </url>
   
   <url>
-    <loc>https://heydon.github.io/infusion/patterns/code/code-blocks/</loc>
-  </url>
-  
-  <url>
-    <loc>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</loc>
+    <loc>https://heydon.github.io/infusion/patterns/coding/</loc>
   </url>
   
   <url>
-    <loc>https://heydon.github.io/infusion/patterns/code/color-palettes/</loc>
+    <loc>https://heydon.github.io/infusion/patterns/coding/color-palettes/</loc>
   </url>
   
   <url>
-    <loc>https://heydon.github.io/infusion/patterns/code/</loc>
+    <loc>https://heydon.github.io/infusion/tags/example-tag/</loc>
+    <priority>0</priority>
   </url>
   
   <url>
@@ -65,6 +74,11 @@
     <priority>0</priority>
   </url>
   
+  <url>
+    <loc>https://heydon.github.io/infusion/tags/quickstart/</loc>
+    <priority>0</priority>
+  </url>
+  
   <url>
     <loc>https://heydon.github.io/infusion/patterns/writing/references/</loc>
   </url>
@@ -78,8 +92,4 @@
     <priority>0</priority>
   </url>
   
-  <url>
-    <loc>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</loc>
-  </url>
-  
 </urlset>

docs/tags/example-tag/index.html

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

docs/tags/example-tag/index.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Example Tag on Infusion</title>
+    <link>https://heydon.github.io/infusion/tags/example-tag/</link>
+    <description>Recent content in Example Tag on Infusion</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    
+	<atom:link href="https://heydon.github.io/infusion/tags/example-tag/index.xml" rel="self" type="application/rss+xml" />
+    
+    
+    <item>
+      <title>Library setup</title>
+      <link>https://heydon.github.io/infusion/patterns/library-setup/</link>
+      <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.
+&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>
+    
+  </channel>
+</rss>

docs/tags/index.xml

@@ -10,5 +10,23 @@
 	<atom:link href="https://heydon.github.io/infusion/tags/index.xml" rel="self" type="application/rss+xml" />
     
     
+    <item>
+      <title>Example Tag</title>
+      <link>https://heydon.github.io/infusion/tags/example-tag/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>https://heydon.github.io/infusion/tags/example-tag/</guid>
+      <description></description>
+    </item>
+    
+    <item>
+      <title>Quickstart</title>
+      <link>https://heydon.github.io/infusion/tags/quickstart/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>https://heydon.github.io/infusion/tags/quickstart/</guid>
+      <description></description>
+    </item>
+    
   </channel>
 </rss>

docs/tags/quickstart/index.html

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

docs/tags/quickstart/index.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Quickstart on Infusion</title>
+    <link>https://heydon.github.io/infusion/tags/quickstart/</link>
+    <description>Recent content in Quickstart on Infusion</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    
+	<atom:link href="https://heydon.github.io/infusion/tags/quickstart/index.xml" rel="self" type="application/rss+xml" />
+    
+    
+    <item>
+      <title>Library setup</title>
+      <link>https://heydon.github.io/infusion/patterns/library-setup/</link>
+      <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.
+&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>
+    
+  </channel>
+</rss>

themes/infusion/archetypes/patterns.md

@@ -1,4 +1,10 @@
 +++
-title = "My First Documentation File"
-tags = ["example tag", "another example tag"]
+title = "My First Pattern File"
+tags = ["example tag", "another tag"]
 +++
+
+You can just write **markdown** here. But don't forget there are lots of shortcodes to help you with writing and showing off code too. See [the documentation for **Infusion**](https://heydon.github.io/infusion/) for full details.
+
+{{% note %}}
+Here's an example of a note shortcode, for adding little "oh and also" bits to your patterns' documentation.
+{{% /note %}}

themes/infusion/layouts/patterns/single.html

@@ -6,12 +6,16 @@
         <strong aria-hidden="true">Tags: </strong>
         <ul aria-label="tags">
           {{ range .Params.tags }}
-            <li>
-              <svg class="tag-icon" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
-                <use xlink:href="#tag"></use>
-              </svg>
-              <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
-            </li>
+            {{ if ne . "example tag"}}
+              {{ if ne . "another tag"}}
+                <li>
+                  <svg class="tag-icon" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
+                    <use xlink:href="#tag"></use>
+                  </svg>
+                  <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+                </li>
+              {{ end }}
+            {{ end }}
           {{ end }}
         </ul>
       </div>

themes/infusion/theme.toml

@@ -1,4 +1,3 @@
-
 name = "Infusion"
 description = ""
 homepage = "https://www.paciellogroup.com/"