fixed nameless shortcode error

content/patterns/writing/expandable-sections.md

@@ -35,10 +35,4 @@ Mauris eget elit ut neque venenatis placerat id nec libero. Nunc accumsan cursus
 Ut vulputate enim ut lorem iaculis, vel faucibus metus iaculis. Aliquam erat volutpat. Aliquam luctus orci vel consectetur dignissim. Nullam et efficitur lorem, et ornare est. Sed tristique porttitor justo, quis malesuada velit. Nullam et elit finibus, sollicitudin velit placerat, ultricies dui.
 {{% /expandable %}}
 
-Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the `{{% %}}` notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.
-
-{{<codeBlock>}}
-&#x7b;{&lt;expandable label="Another dummy section" level="2">}}
-&lt;p>Here is a nested pattern reference shortcode: &#x7b;{% pattern "Writing inline demos" %}}.&lt;/p>
-&#x7b;{&lt;/expandable>}}
-{{</codeBlock>}}
+Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the "`%`" notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.

public/css/styles.css

@@ -310,7 +310,7 @@ th:empty {
   margin: 0;
 }
 
-.tag {
+.tag-icon {
   height: 1em;
   width: auto;
   vertical-align: middle;
@@ -423,7 +423,6 @@ pre[class*=language-] code * {
 }
 
 *:not(pre) > code {
-  padding: 0.125rem 0.25rem;
   white-space: nowrap;
 }
 
@@ -462,11 +461,11 @@ pre[class*=language-] code * {
 }
 
 .token.function {
-	color: #ccc;
+	color: #888;
 }
 
 .line-numbers code {
-  padding-left: 2.25rem;
+  padding-left: 3rem;
   margin-top: -1rem;
   overflow-x: auto;
   overflow-y: hidden;
@@ -478,8 +477,10 @@ pre[class*=language-] code * {
 
 .line-numbers .line-numbers-rows {
   margin-left: 2.25rem;
+  left: -3.5em;
   top: 1.25rem;
   color: #111;
+  border-color: #111;
 }
 
 .line-numbers-rows > span:before {
@@ -614,7 +615,6 @@ a .balloon {
 
   .intro-and-nav > div {
     padding: 1.5rem;
-    padding-bottom: 0;
   }
 
   .logo img {
@@ -626,29 +626,11 @@ a .balloon {
   }
 
   .patterns h3 {
-    margin-top: 0.75rem;
+    font-size: 1.125rem;
   }
 
-  .patterns li {
-    margin: 0;
-  }
-
-  .patterns a {
-    padding: 0.75rem 0;
+  .pattern {
     font-size: 1rem;
   }
 
-  .patterns a[aria-current] {
-    background: #111;
-    color: #fff;
-    padding: 0.75rem;
-  }
-
-  .patterns a[aria-current] span {
-    text-decoration: none;
-  }
-
-  .patterns li + li {
-    border-top: 1px solid;
-  }
 }

public/index.html

@@ -76,7 +76,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -110,6 +110,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" >
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -134,6 +141,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>
@@ -170,6 +205,16 @@
   
 
   
+
+  
+
+  
+
+  
+
+  
+
+  
 
   
     <a class="pattern-link" href="/patterns/installation/">

public/index.xml

@@ -31,6 +31,40 @@
 If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
     </item>
     
+    <item>
+      <title>Expandable sections</title>
+      <link>/patterns/writing/expandable-sections/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>/patterns/writing/expandable-sections/</guid>
+      <description>In some cases, where there is a lot of content, it&amp;rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&amp;rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded.
+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>/patterns/code/code-blocks/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>/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>/patterns/code/codepen-embedding/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>/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>Including images</title>
       <link>/patterns/writing/including-images/</link>
@@ -55,10 +89,10 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
     
     <item>
       <title>Library setup</title>
-      <link>/patterns/project-setup/</link>
+      <link>/patterns/library-setup/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>/patterns/project-setup/</guid>
+      <guid>/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>
@@ -79,8 +113,8 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>/patterns/writing/references/</guid>
-      <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by name, using the pattern shortcode. For example, I can reference the pattern here. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
-I can reference the &amp;#x7b;{% pattern &#34;Notes and warnings&#34; %}} pattern here.  This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
+      <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the   Notes &amp;amp; warnings  pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
+I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here.  This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
     </item>
     
     <item>
@@ -94,5 +128,15 @@ npm run serve This will serve your working library on localhost:1313. Whenever y
 Publishing on Github Pages The easiest way to host your pattern library so you have a link to share is to run the host command.</description>
     </item>
     
+    <item>
+      <title>Writing inline demos</title>
+      <link>/patterns/code/writing-inline-demos/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>/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>

public/patterns/index.html

@@ -75,7 +75,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -109,6 +109,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" >
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -133,6 +140,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>
@@ -161,7 +196,7 @@
       
           <li>
   <h2>
-    <a href="/patterns/project-setup/">
+    <a href="/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>

public/patterns/index.xml

@@ -24,10 +24,10 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
     
     <item>
       <title>Library setup</title>
-      <link>/patterns/project-setup/</link>
+      <link>/patterns/library-setup/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>/patterns/project-setup/</guid>
+      <guid>/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>

public/patterns/installation/index.html

@@ -75,7 +75,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -109,6 +109,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" >
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -133,6 +140,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>
@@ -220,7 +255,17 @@
   
 
   
-    <a class="pattern-link" href="/patterns/project-setup/">
+
+  
+
+  
+
+  
+
+  
+
+  
+    <a class="pattern-link" href="/patterns/library-setup/">
       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
         <use xlink:href="#bookmark"></use>
       </svg>

public/patterns/serving/index.html

@@ -75,7 +75,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -109,6 +109,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" >
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -133,6 +140,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>

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

@@ -75,7 +75,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -109,6 +109,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" aria-current="page">
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -133,6 +140,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>

public/patterns/writing/index.html

@@ -75,7 +75,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -109,6 +109,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" >
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -133,6 +140,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>
@@ -169,6 +204,16 @@
 </li>
 
       
+          <li>
+  <h2>
+    <a href="/patterns/writing/expandable-sections/">
+      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      Expandable sections
+    </a>
+  </h2>
+</li>
+
+      
           <li>
   <h2>
     <a href="/patterns/writing/including-images/">

public/patterns/writing/index.xml

@@ -30,6 +30,17 @@
 If you&amp;rsquo;re not familiar with writing markdown, there are a number of tutorials available.</description>
     </item>
     
+    <item>
+      <title>Expandable sections</title>
+      <link>/patterns/writing/expandable-sections/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>/patterns/writing/expandable-sections/</guid>
+      <description>In some cases, where there is a lot of content, it&amp;rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&amp;rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded.
+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>Including images</title>
       <link>/patterns/writing/including-images/</link>
@@ -56,8 +67,8 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>/patterns/writing/references/</guid>
-      <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by name, using the pattern shortcode. For example, I can reference the pattern here. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
-I can reference the &amp;#x7b;{% pattern &#34;Notes and warnings&#34; %}} pattern here.  This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
+      <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the   Notes &amp;amp; warnings  pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
+I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here.  This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
     </item>
     
   </channel>

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

@@ -75,7 +75,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -109,6 +109,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" >
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -133,6 +140,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>
@@ -199,6 +234,8 @@ title = &quot;Popups&quot;
   
 
   
+
+  
     <a class="pattern-link" href="/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>
@@ -217,6 +254,14 @@ title = &quot;Popups&quot;
 
   
 
+  
+
+  
+
+  
+
+  
+
   
 
   

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

@@ -75,7 +75,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -109,6 +109,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" >
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -133,6 +140,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>

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

@@ -75,7 +75,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -109,6 +109,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" >
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -133,6 +140,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>

public/patterns/writing/references/index.html

@@ -75,7 +75,7 @@
                   </li>
                 
                   <li class="pattern">
-                    <a href="/patterns/project-setup/" >
+                    <a href="/patterns/library-setup/" >
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
                       <span>Library setup</span>
                     </a>
@@ -109,6 +109,13 @@
                           </a>
                         </li>
                       
+                        <li class="pattern">
+                          <a href="/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Expandable sections</span>
+                          </a>
+                        </li>
+                      
                         <li class="pattern">
                           <a href="/patterns/writing/including-images/" >
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -133,6 +140,34 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Exhibiting code</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="/patterns/code/code-blocks/" >
+                            <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span>Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="/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>
+                            <span>Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
               </ul>
             
           </nav>
@@ -148,7 +183,17 @@
 
 <h2 id="cross-references">Cross-references</h2>
 
-<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by name, using the <code>pattern</code> shortcode. For example, I can reference the 
+<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 
+
+  
+
+  
+
+  
+
+  
+
+  
 
   
 
@@ -164,6 +209,13 @@
 
   
 
+  
+    <a class="pattern-link" href="/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>
   
 
   
@@ -176,15 +228,24 @@
 
   
 
- pattern here. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
+ 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 and warnings" %}} pattern here.
+I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
 </code></pre>
 
 
 <p>This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</p>
 
+<aside aria-label="note" class="note">
+  <div>
+    <img src="/images/icon-info.svg" alt="">
+    <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>
+</aside>
+
+
 <h2 id="wcag-references">WCAG References</h2>
 
 <p><a href="https://www.w3.org/TR/WCAG/">WCAG 2.0</a> is the <em>de facto</em> standard for accessible interfaces. When writing about inclusive design patterns, sometimes you&rsquo;ll want to refer to WCAG to highlight which success criteria the pattern meets.</p>

public/sitemap.xml

@@ -6,10 +6,18 @@
     <loc>/patterns/writing/library-structure/</loc>
   </url>
   
+  <url>
+    <loc>/patterns/writing/</loc>
+  </url>
+  
   <url>
     <loc>/patterns/writing/markdown-and-metadata/</loc>
   </url>
   
+  <url>
+    <loc>/patterns/writing/expandable-sections/</loc>
+  </url>
+  
   <url>
     <loc>/</loc>
     <lastmod>2017-06-26T18:27:58+01:00</lastmod>
@@ -20,6 +28,18 @@
     <priority>0</priority>
   </url>
   
+  <url>
+    <loc>/patterns/code/code-blocks/</loc>
+  </url>
+  
+  <url>
+    <loc>/patterns/code/codepen-embedding/</loc>
+  </url>
+  
+  <url>
+    <loc>/patterns/code/</loc>
+  </url>
+  
   <url>
     <loc>/patterns/writing/including-images/</loc>
   </url>
@@ -29,7 +49,7 @@
   </url>
   
   <url>
-    <loc>/patterns/project-setup/</loc>
+    <loc>/patterns/library-setup/</loc>
   </url>
   
   <url>
@@ -55,7 +75,7 @@
   </url>
   
   <url>
-    <loc>/patterns/writing/</loc>
+    <loc>/patterns/code/writing-inline-demos/</loc>
   </url>
   
 </urlset>