md5 for unique strings and remove FF Shadow DOM warning

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

@@ -73,10 +73,6 @@ toggle.addEventListener('click', (e) => {
 </script>
 {{</demo>}}
 
-{{% note %}}
-Firefox does not currently support Shadow DOM and **Infusion** does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.
-{{% /note %}}
-
 ## Captioned demos
 
 It's possible to give your demo a caption using an accessible `<figure>` and `<figcaption>` structure. All _you_ need to do is supply a `caption` attribute. For example:

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

@@ -291,10 +291,10 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <demo-elemcizsddtidxr0b24gyxjp class="demo" id="demo-cizsddtidxr0b24gyxjp"></demo-elemcizsddtidxr0b24gyxjp>
+      <demo-elem34e756fc953627a51e20255208dbdb57 class="demo" id="demo-34e756fc953627a51e20255208dbdb57"></demo-elem34e756fc953627a51e20255208dbdb57>
       
   
-  <template id="templatecizsddtidxr0b24gyxjp">
+  <template id="template34e756fc953627a51e20255208dbdb57">
       
 <button aria-pressed="false">Toggle Me</button>
 <style>
@@ -324,31 +324,20 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
-  <script>ShadyCSS.prepareTemplate(templatecizsddtidxr0b24gyxjp, 'demo-elemcizsddtidxr0b24gyxjp'); var script = templatecizsddtidxr0b24gyxjp.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elemcizsddtidxr0b24gyxjp').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(templatecizsddtidxr0b24gyxjp.content.cloneNode(true)); } } customElements.define('demo-elemcizsddtidxr0b24gyxjp', DemoElem);</script>
+  <script>ShadyCSS.prepareTemplate(template34e756fc953627a51e20255208dbdb57, 'demo-elem34e756fc953627a51e20255208dbdb57'); var script = template34e756fc953627a51e20255208dbdb57.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem34e756fc953627a51e20255208dbdb57').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template34e756fc953627a51e20255208dbdb57.content.cloneNode(true)); } } customElements.define('demo-elem34e756fc953627a51e20255208dbdb57', DemoElem);</script>
 </div>
 
 
-<aside aria-label="note" class="note">
-  <div>
-    <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>
-</aside>
-
-
 <h2 id="captioned-demos">Captioned demos</h2>
 
 <p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>
 
-<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
+<p><pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
 &#x7b;{&lt;demo caption="A basic button element">}}
 &lt;!-- demo code here -->
 &#x7b;{&lt;/demo>}}
 </code></pre>
-
+</p>
 
 <p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
 

docs/patterns/installation/index.html

@@ -280,10 +280,10 @@
 <p>If the command line is not your thing, fork  <a href="https://github.com/heydon/inclusive-pattern-library">github.com/heydon/inclusive-pattern-library</a> and choose <strong>Open in Desktop</strong> from <strong>Clone or download</strong> (see figure 1, below).</p>
 
 
-<figure role="group" aria-describedby="caption-VGhlIEdpdGh1YiB3ZWIg">
+<figure role="group" aria-describedby="caption-4f6ff97ad7397f1735a833534d0e2e4d">
   <p><img src="https://heydon.github.io/infusion/images/open_in_desktop.png" alt="The open in desktop option, revealed when clicking clone or download" /></p>
 
-  <figcaption id="caption-VGhlIEdpdGh1YiB3ZWIg">
+  <figcaption id="caption-4f6ff97ad7397f1735a833534d0e2e4d">
     The Github web interface
   </figcaption>
 </figure>

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

@@ -283,10 +283,10 @@
 <p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p>
 
 
-<figure role="group" aria-describedby="caption-W1N0ZXZlIEZhdWxrbmVy">
+<figure role="group" aria-describedby="caption-8e57b013acffbeb34ebb09e52c193120">
   <p><img src="https://heydon.github.io/infusion/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p>
 
-  <figcaption id="caption-W1N0ZXZlIEZhdWxrbmVy">
+  <figcaption id="caption-8e57b013acffbeb34ebb09e52c193120">
     <a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
   </figcaption>
 </figure>

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

@@ -267,7 +267,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   
     <h2>
   
-    <button aria-expanded="false" data-expands="expandable-PHA&#43;SGVyZSBpcyBzb21l">
+    <button aria-expanded="false" data-expands="expandable-4ab31bdd2c2d9d4cac64804c775e2683">
       <span class="expandable-label">A section of dummy text</span>
       <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
         <g transform="translate(0 -981.5)">
@@ -279,7 +279,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   
     </h2>
   
-  <div id="expandable-PHA&#43;SGVyZSBpcyBzb21l" hidden>
+  <div id="expandable-4ab31bdd2c2d9d4cac64804c775e2683" hidden>
     <p>Here is some markdown including <a href="https://twitter.com/heydonworks">a link</a>. 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.</p>
 
   </div>
@@ -292,7 +292,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   
     <h2>
   
-    <button aria-expanded="false" data-expands="expandable-PHA&#43;TWF1cmlzIGVnZXQg">
+    <button aria-expanded="false" data-expands="expandable-ade9cd5456422b2a456101177ddc6f3f">
       <span class="expandable-label">A section of dummy text</span>
       <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
         <g transform="translate(0 -981.5)">
@@ -304,7 +304,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   
     </h2>
   
-  <div id="expandable-PHA&#43;TWF1cmlzIGVnZXQg" hidden>
+  <div id="expandable-ade9cd5456422b2a456101177ddc6f3f" hidden>
     <p>Mauris eget elit ut neque venenatis placerat id nec libero. Nunc accumsan cursus elit nec iaculis. Proin id rutrum magna, a aliquet sem. Sed et tortor id sem eleifend porta vitae eget elit. Cras sodales porta malesuada. Suspendisse at odio ac tortor.</p>
 
   </div>
@@ -315,7 +315,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   
     <h2>
   
-    <button aria-expanded="true" data-expands="expandable-PHA&#43;VXQgdnVscHV0YXRl">
+    <button aria-expanded="true" data-expands="expandable-4d6feae4dfbb8614dd5fa6730b3dfa5e">
       <span class="expandable-label">Another dummy section</span>
       <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
         <g transform="translate(0 -981.5)">
@@ -327,7 +327,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   
     </h2>
   
-  <div id="expandable-PHA&#43;VXQgdnVscHV0YXRl" >
+  <div id="expandable-4d6feae4dfbb8614dd5fa6730b3dfa5e" >
     <p>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.</p>
 
   </div>

themes/infusion/layouts/shortcodes/demo.html

@@ -1,4 +1,4 @@
-{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" | lower }}
+{{ $uniq := .Inner | htmlEscape | md5 | lower }}
 {{ $template := printf "template-%s" $uniq }}
 {{ $string := replace "<script>ShadyCSS.prepareTemplate(template%s, 'demo-elem%s'); var script = template%s.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem%s').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template%s.content.cloneNode(true)); } } customElements.define('demo-elem%s', DemoElem);</script>" "%s" $uniq }}
 <div class="demo-container">

themes/infusion/layouts/shortcodes/expandable.html

@@ -2,7 +2,7 @@
   {{ if .Get "level" }}
     <h{{ .Get "level" }}>
   {{ end }}
-    <button aria-expanded="{{ with .Get "open" }}true{{ else }}false{{ end }}" data-expands="expandable-{{ .Inner | base64Encode | truncate 20 "" }}">
+    <button aria-expanded="{{ with .Get "open" }}true{{ else }}false{{ end }}" data-expands="expandable-{{ .Inner | md5 }}">
       <span class="expandable-label">{{ .Get "label" | default "More info" }}</span>
       <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
         <g transform="translate(0 -981.5)">
@@ -14,7 +14,7 @@
   {{ if .Get "level" }}
     </h{{ .Get "level"}}>
   {{ end }}
-  <div id="expandable-{{ .Inner | base64Encode | truncate 20 "" }}" {{ with .Get "open" | not }}hidden{{ end }}>
+  <div id="expandable-{{ .Inner | md5 }}" {{ with .Get "open" | not }}hidden{{ end }}>
     {{ .Inner }}
   </div>
 </div>

themes/infusion/layouts/shortcodes/figure.html

@@ -1,7 +1,7 @@
 {{ $caption := .Get "caption" }}
-<figure role="group" aria-describedby="caption-{{ $caption | base64Encode | truncate 20 "" }}">
+<figure role="group" aria-describedby="caption-{{ $caption | md5 }}">
   {{ .Inner }}
-  <figcaption id="caption-{{ $caption | base64Encode | truncate 20 "" }}">
+  <figcaption id="caption-{{ $caption | md5 }}">
     {{ .Get "caption" | markdownify }}
   </figcaption>
 </figure>