fixed white space pattern issue

content/patterns/serving.md

@@ -21,7 +21,7 @@ Then, whenever you push to master, you will also be updating the site found at y
 This URL will be in the following format:
 
 ```
-[your user name].github.io/[your library repo name]`
+[your user name].github.io/[your library repo name]
 ```
 
 You'll also need to add it to your `config.toml` file. See {{% pattern "Library setup" %}} for more information.

content/patterns/writing/expandable-sections.md

@@ -8,8 +8,8 @@ In some cases, where there is a lot of content, it's helpful to collapse certain
 The `expandable` shortcode takes three parameters:
 
 * **label** — This is the label for the the section heading.
-* **level** — This is the heading level (e.g. `2` or `<h2>`) that will contain the label. If you omit a level parameter, no heading is used; it's just a button
-* **open** — Include this and give it a value of "true" or "yes" to make the section expanded on page load
+* **level** — This is the heading level (e.g. `level="2"` for a `<h2>`) that will contain the label. If you omit a level parameter, no heading is used; it's just a button.
+* **open** — Include this and give it a value of "true" or "yes" to make the section expanded on page load.
 
 Here's what the code might look like for a simple expandable section containing markdown:
 
@@ -19,7 +19,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
 &#x7b;{% /expandable %}}
 {{</codeBlock>}}
 
-Let's look at what that outputs as:
+Let's look at what that outputs:
 
 {{% expandable label="A section of dummy text" level="2" %}}
 Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.

docs/images/icon-info.svg

@@ -1,4 +1,4 @@
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.667" width="41.667" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 41.667306 41.66729">
+<svg height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
  <g transform="translate(-37.035 -1004.6)">
   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
   <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">

docs/images/icon-warning.svg

@@ -1,4 +1,4 @@
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.646" width="48.43" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 48.430474 41.646302">
+<svg height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
  <g transform="translate(-1.1273 -1010.2)">
   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>

docs/index.html

@@ -69,6 +69,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -217,51 +235,10 @@
 </div>
 
 
-<p>To get started, take a look at 
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-.</p>
+<p>To get started, take a look at <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>.</p>
 
+    
+    git&#43;https://github.com/Heydon/infusion.git
   </main>
 
           <footer role="contentinfo">

docs/index.xml

@@ -60,7 +60,7 @@ If you’re not familiar with writing markdown, there are a number of tu
       <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.
+      <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>
     
@@ -92,7 +92,7 @@ The expandable shortcode takes three parameters:
       
       <guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
       <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
-├── content └── static └── images ├── logo.png └── menu-button.gif   When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
+├── content └── static └── images ├── logo.png └── menu-button.gif     When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
     </item>
     
     <item>

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

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">

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

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -224,57 +242,16 @@
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
+    <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
+      <use xlink:href="#warning"></use>
+    </svg>
     <p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the  <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p>
 
   </div>
 </aside>
 
 
-<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See 
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-.</p>
+<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>.</p>
 
   </main>
 

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

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -234,7 +252,9 @@
 
 <aside aria-label="note" class="note">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
+    <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
+      <use xlink:href="#info"></use>
+    </svg>
     <p>If you&rsquo;re wondering whether you need to put a space after the commas in the shortcode, don&rsquo;t worry: <code>&quot;#254f7b, #579a6d, #666666&quot;</code> and <code>&quot;#254f7b,#579a6d,#666666&quot;</code> are both accepted. Any CSS color value is acceptable, not just hex colors.</p>
 
   </div>

docs/patterns/coding/index.html

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">

docs/patterns/coding/index.xml

@@ -39,7 +39,7 @@ Infusion offers a couple of ways to do this. The first is by embedding CodePen d
       <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.
+      <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>
     

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

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -202,50 +220,7 @@
   <main id="main">
     <h1>Writing inline demos</h1>
     
-    <p>There are some issues with 
-
-  
-
-  
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
+    <p>There are some issues with <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
 
 <p><strong>Infusion</strong> offers another option: a special <code>demo</code> shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</p>
 
@@ -344,7 +319,9 @@ toggle.addEventListener('click', (e) => {
 
 <p><aside aria-label="note" class="note">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
+    <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
+      <use xlink:href="#info"></use>
+    </svg>
     <p>Firefox does not currently support Shadow DOM and <strong>Infusion</strong> does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.</p>
 
   </div>

docs/patterns/index.html

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">

docs/patterns/installation/index.html

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -251,7 +269,9 @@
 
 <aside aria-label="note" class="note">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
+    <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
+      <use xlink:href="#info"></use>
+    </svg>
     <p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p>
 
   </div>
@@ -263,50 +283,7 @@
 <pre class="cmd"><code>npm install</code></pre>
 
 
-<p>Now it&rsquo;s time to consult the 
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a>
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
- pattern.</p>
+<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> pattern.</p>
 
   </main>
 

docs/patterns/library-setup/index.html

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -204,50 +222,7 @@
     
     
 
-<p>By now, you should have followed the 
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
- instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
+<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
 
 <h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
 
@@ -255,7 +230,9 @@
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
+    <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
+      <use xlink:href="#warning"></use>
+    </svg>
     <p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
 
   </div>
@@ -265,50 +242,7 @@
 <pre class="cmd"><code>npm run clean</code></pre>
 
 
-<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in 
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-.</p>
+<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>.</p>
 
 <h2 id="the-setup-command">The <code>setup</code> command</h2>
 
@@ -345,93 +279,7 @@ theme = "infusion"
 
 <p>In the <code>static</code> folder, you&rsquo;ll find a <code>logo.png</code> file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.</p>
 
-<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about 
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
- to help you get writing, or find out how to serve the library locally and on Github Pages in 
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>
-  
-
-  
-
-.</p>
+<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>
 
   </main>
 

docs/patterns/serving/index.html

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -223,53 +241,10 @@
 
 <p>This URL will be in the following format:</p>
 
-<pre><code>[your user name].github.io/[your library repo name]`
+<pre><code>[your user name].github.io/[your library repo name]
 </code></pre>
 
-<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file. See 
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-    <a class="pattern-link" 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>
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
- for more information.</p>
+<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file. See <a class="pattern-link" 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> for more information.</p>
 
   </main>
 

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

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -208,8 +226,8 @@
 
 <ul>
 <li><strong>label</strong> — This is the label for the the section heading.</li>
-<li><strong>level</strong> — This is the heading level (e.g. <code>2</code> or <code>&lt;h2&gt;</code>) that will contain the label. If you omit a level parameter, no heading is used; it&rsquo;s just a button</li>
-<li><strong>open</strong> — Include this and give it a value of &ldquo;true&rdquo; or &ldquo;yes&rdquo; to make the section expanded on page load</li>
+<li><strong>level</strong> — This is the heading level (e.g. <code>level=&quot;2&quot;</code> for a <code>&lt;h2&gt;</code>) that will contain the label. If you omit a level parameter, no heading is used; it&rsquo;s just a button.</li>
+<li><strong>open</strong> — Include this and give it a value of &ldquo;true&rdquo; or &ldquo;yes&rdquo; to make the section expanded on page load.</li>
 </ul>
 
 <p>Here&rsquo;s what the code might look like for a simple expandable section containing markdown:</p>
@@ -221,7 +239,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
 </code></pre>
 
 
-<p>Let&rsquo;s look at what that outputs as:</p>
+<p>Let&rsquo;s look at what that outputs:</p>
 
 <div class="expandable-section">
   

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

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -215,7 +233,9 @@
 
 <aside aria-label="note" class="note">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
+    <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
+      <use xlink:href="#info"></use>
+    </svg>
     <p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion&rsquo;s</strong> own logo will be included. You should replace this with your own company or project logo.</p>
 
   </div>

docs/patterns/writing/index.html

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">

docs/patterns/writing/index.xml

@@ -48,7 +48,7 @@ The expandable shortcode takes three parameters:
       
       <guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
       <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
-├── content └── static └── images ├── logo.png └── menu-button.gif   When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
+├── content └── static └── images ├── logo.png └── menu-button.gif     When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
     </item>
     
     <item>

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

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -236,7 +254,9 @@
 
 <aside aria-label="note" class="note">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
+    <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
+      <use xlink:href="#info"></use>
+    </svg>
     <p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn&rsquo;t need any content except the TOML metadata defining the title (name) of that subsection:</p>
 
 <pre><code>+++
@@ -252,50 +272,7 @@ title = &quot;Popups&quot;
 </aside>
 
 
-<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to 
-
-  
-
-  
-
-  
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-.</p>
+<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>.</p>
 
   </main>
 

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

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -242,7 +260,9 @@ weight = 1
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
+    <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
+      <use xlink:href="#warning"></use>
+    </svg>
     <p>The <code>weight</code> parameter should be an integer, not a string, so don&rsquo;t use scare quotes around the value!</p>
 
   </div>

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

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -221,7 +239,9 @@ This is a note! It's something the reader may like to know about but is suppleme
 
 <aside aria-label="note" class="note">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
+    <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
+      <use xlink:href="#info"></use>
+    </svg>
     <p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p>
 
   </div>
@@ -243,7 +263,9 @@ This is a warning! It's about something the reader should be careful to do or to
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt="">
+    <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
+      <use xlink:href="#warning"></use>
+    </svg>
     <p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p>
 
   </div>

docs/patterns/writing/references/index.html

@@ -68,6 +68,24 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>
 
     <div class="wrapper">
@@ -206,50 +224,7 @@
 
 <h2 id="cross-references">Cross-references</h2>
 
-<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the 
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-    <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a>
-  
-
-  
-
-  
-
-  
-
-  
-
- pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
+<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
 
 <pre class=" "><code  data-codeblock-shortcode>
 I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@@ -260,7 +235,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
 
 <aside aria-label="note" class="note">
   <div>
-    <img src="https://heydon.github.io/infusion/images/icon-info.svg" alt="">
+    <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
+      <use xlink:href="#info"></use>
+    </svg>
     <p>The title argument you supply to the shortcode must be exactly the same as the referenced pattern&rsquo;s <code>title</code> metadata value and is case sensitive.</p>
 
   </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "infusion",
   "version": "0.0.1",
-  "description": "An inclusive pattern library builder for documenting inclusive interface design",
+  "description": "A pattern library builder for inclusive designers",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -14,14 +14,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Heydon/inclusive-pattern-library.git"
+    "url": "git+https://github.com/Heydon/infusion.git"
   },
   "author": "Heydon Pickering <heydon@heydonworks.com> (http://www.heydonworks.com)",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/Heydon/inclusive-pattern-library/issues"
+    "url": "https://github.com/Heydon/infusion/issues"
   },
-  "homepage": "https://github.com/Heydon/inclusive-pattern-library#readme",
+  "homepage": "https://github.com/Heydon/infusion#readme",
   "devDependencies": {
     "pre-commit": "^1.2.2"
   }

themes/infusion/layouts/_default/baseof.html

@@ -24,8 +24,8 @@
     <meta name="theme-color" content="#ffffff">
     <link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
-    <link rel="stylesheet" href="/css/prism.css" />
-    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/prism.css" />
+    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/styles.css">
     <title>
       {{ block "title" . }}
         {{ .Title }} | {{ .Site.Title }}
@@ -89,8 +89,8 @@
       </div>
     </div>
     {{ if eq .Type "patterns" }}
-      <script src="/js/prism.js"></script>
+      <script src="{{ .Site.BaseURL }}js/prism.js"></script>
     {{ end }}
-    <script src="/js/dom-scripts.js"></script>
+    <script src="{{ .Site.BaseURL }}js/dom-scripts.js"></script>
   </body>
 </html>

themes/infusion/layouts/index.html

@@ -6,5 +6,7 @@
   <main id="main">
     <h1>{{ .Title }}</h1>
     {{ .Content }}
+    {{ $packageInfo := getJSON "./package.json" }}
+    {{ print $packageInfo.repository.url }}
   </main>
 {{ end }}

themes/infusion/layouts/partials/svg.html

@@ -32,4 +32,22 @@
     </g>
    </g>
   </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
 </svg>

themes/infusion/layouts/shortcodes/note.html

@@ -1,6 +1,8 @@
 <aside aria-label="note" class="note">
   <div>
-    <img src="{{ "images/icon-info.svg" | relURL }}" alt="">
+    <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
+      <use xlink:href="#info"></use>
+    </svg>
     {{ .Inner }}
   </div>
 </aside>

themes/infusion/layouts/shortcodes/pattern.html

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

themes/infusion/layouts/shortcodes/warning.html

@@ -1,6 +1,8 @@
 <aside aria-label="warning" class="note warning">
   <div>
-    <img src="{{ "images/icon-warning.svg" | relURL }}" alt="">
+    <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
+      <use xlink:href="#warning"></use>
+    </svg>
     {{ .Inner }}
   </div>
 </aside>

themes/infusion/static/images/icon-info.svg

@@ -1,4 +1,4 @@
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.667" width="41.667" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 41.667306 41.66729">
+<svg height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
  <g transform="translate(-37.035 -1004.6)">
   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
   <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">

themes/infusion/static/images/icon-warning.svg

@@ -1,4 +1,4 @@
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.646" width="48.43" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 48.430474 41.646302">
+<svg height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
  <g transform="translate(-1.1273 -1010.2)">
   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>