From cbcc1c5db43191e5891decc97f8c849bbc8d8a80 Mon Sep 17 00:00:00 2001
From: Heydon Pickering <heydon@heydonworks.com>
Date: Thu, 13 Jul 2017 11:58:39 +0100
Subject: [PATCH] md5 for unique strings and remove FF Shadow DOM warning

---
 .../patterns/coding/writing-inline-demos.md   |  4 ----
 .../coding/writing-inline-demos/index.html    | 21 +++++--------------
 docs/patterns/installation/index.html         |  4 ++--
 .../media/including-images/index.html         |  4 ++--
 .../writing/expandable-sections/index.html    | 12 +++++------
 docs/service-worker.js                        |  2 +-
 themes/infusion/layouts/shortcodes/demo.html  |  2 +-
 .../layouts/shortcodes/expandable.html        |  4 ++--
 .../infusion/layouts/shortcodes/figure.html   |  4 ++--
 9 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/content/patterns/coding/writing-inline-demos.md b/content/patterns/coding/writing-inline-demos.md
index 67345de..be5bb8b 100644
--- a/content/patterns/coding/writing-inline-demos.md
+++ b/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:
diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
index ba17a88..e6f6cac 100644
--- a/docs/patterns/coding/writing-inline-demos/index.html
+++ b/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>
 
diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html
index 30ed76b..5013fd9 100644
--- a/docs/patterns/installation/index.html
+++ b/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>
diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html
index 96b6a42..d9974af 100644
--- a/docs/patterns/media/including-images/index.html
+++ b/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>
diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html
index f58ee7f..d8d2588 100644
--- a/docs/patterns/writing/expandable-sections/index.html
+++ b/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>
diff --git a/docs/service-worker.js b/docs/service-worker.js
index bdaec5c..9c105b0 100644
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@@ -37,7 +37,7 @@
 /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */
 'use strict';
 
-var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","36494dc390f7119da0cadcad11138bb4"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","3cc882447dea5380dcbe5175ee78574f"],["index.xml","e990e9cc581f3c68bdc878b5ce1a7ff0"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","6abe539eda7d2c398dc6c447ef819d13"],["patterns/coding/codepen-embedding/index.html","d79bcf58c2c16388ff83ab5a6592f69f"],["patterns/coding/color-palettes/index.html","5a3fac471e7f5d5a517338d88b711b34"],["patterns/coding/index.html","2cdbebb04b57502aafe30345565d47ee"],["patterns/coding/index.xml","e05792f5d471e69af658fcfe0d949e05"],["patterns/coding/tested/index.html","1d93fab885b8713296c270b64279a278"],["patterns/coding/writing-inline-demos/index.html","9314c2e816b7ab1677b276f3b80951ba"],["patterns/index.html","078ae6ae992ad822d26ee8172747a162"],["patterns/index.xml","b2fe2e8940440bfcc3f152e9c43f4a28"],["patterns/installation/index.html","e1b05f48848cbb4b849eed7874574295"],["patterns/library-setup/index.html","de95b33e2daabbd8ab41b8e8b3d456a6"],["patterns/media/including-images/index.html","092644db86837280c848d954bee4fa09"],["patterns/media/including-videos/index.html","b4b51ded9ee25cec606e954b345d0c0e"],["patterns/media/index.html","bd66db33e883f687840a0cda1220a10d"],["patterns/media/index.xml","4a9c518cde77c958c19472b4f6980fd6"],["patterns/serving/index.html","741b0e3beb362d7bea9c12a24f7e6ab2"],["patterns/writing/expandable-sections/index.html","b2f458f8902d972199c567b752f93559"],["patterns/writing/index.html","bfaefd10faf2a87a9343b075c1a9aee5"],["patterns/writing/index.xml","c3e4613e56fb851bb7e4d4cc23c949a4"],["patterns/writing/library-structure/index.html","70db5c6f3d043c46828aacbb3f0e8fb7"],["patterns/writing/markdown-and-metadata/index.html","608e0584be09c0b6221ba57dc4d1f04e"],["patterns/writing/notes-and-warnings/index.html","96874d30b8cb60267fbc3c1932e0e632"],["patterns/writing/references/index.html","d94079b0925c8de0e887cfe74e344c22"],["sitemap.xml","60ea02f860041650f4aaf87640e9614f"],["tags/index.xml","c49e6e2b318d5ee86534194441e4dc1e"]];
+var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","36494dc390f7119da0cadcad11138bb4"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","3cc882447dea5380dcbe5175ee78574f"],["index.xml","e990e9cc581f3c68bdc878b5ce1a7ff0"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","6abe539eda7d2c398dc6c447ef819d13"],["patterns/coding/codepen-embedding/index.html","d79bcf58c2c16388ff83ab5a6592f69f"],["patterns/coding/color-palettes/index.html","5a3fac471e7f5d5a517338d88b711b34"],["patterns/coding/index.html","2cdbebb04b57502aafe30345565d47ee"],["patterns/coding/index.xml","e05792f5d471e69af658fcfe0d949e05"],["patterns/coding/tested/index.html","1d93fab885b8713296c270b64279a278"],["patterns/coding/writing-inline-demos/index.html","92842d2bede716ec7a9104df2815fc89"],["patterns/index.html","078ae6ae992ad822d26ee8172747a162"],["patterns/index.xml","b2fe2e8940440bfcc3f152e9c43f4a28"],["patterns/installation/index.html","e003cce0eb0c6bf6d6a7026fbc368cea"],["patterns/library-setup/index.html","de95b33e2daabbd8ab41b8e8b3d456a6"],["patterns/media/including-images/index.html","ae05de42d94592a72a3506211c0612d7"],["patterns/media/including-videos/index.html","b4b51ded9ee25cec606e954b345d0c0e"],["patterns/media/index.html","bd66db33e883f687840a0cda1220a10d"],["patterns/media/index.xml","4a9c518cde77c958c19472b4f6980fd6"],["patterns/serving/index.html","741b0e3beb362d7bea9c12a24f7e6ab2"],["patterns/writing/expandable-sections/index.html","eded76d7c5a8b29695fc44843cdf4e67"],["patterns/writing/index.html","bfaefd10faf2a87a9343b075c1a9aee5"],["patterns/writing/index.xml","c3e4613e56fb851bb7e4d4cc23c949a4"],["patterns/writing/library-structure/index.html","70db5c6f3d043c46828aacbb3f0e8fb7"],["patterns/writing/markdown-and-metadata/index.html","608e0584be09c0b6221ba57dc4d1f04e"],["patterns/writing/notes-and-warnings/index.html","96874d30b8cb60267fbc3c1932e0e632"],["patterns/writing/references/index.html","d94079b0925c8de0e887cfe74e344c22"],["sitemap.xml","60ea02f860041650f4aaf87640e9614f"],["tags/index.xml","c49e6e2b318d5ee86534194441e4dc1e"]];
 var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : '');
 
 
diff --git a/themes/infusion/layouts/shortcodes/demo.html b/themes/infusion/layouts/shortcodes/demo.html
index 8cbb8ec..12b6b36 100644
--- a/themes/infusion/layouts/shortcodes/demo.html
+++ b/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">
diff --git a/themes/infusion/layouts/shortcodes/expandable.html b/themes/infusion/layouts/shortcodes/expandable.html
index 25f0a4a..59c742c 100644
--- a/themes/infusion/layouts/shortcodes/expandable.html
+++ b/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>
diff --git a/themes/infusion/layouts/shortcodes/figure.html b/themes/infusion/layouts/shortcodes/figure.html
index 2173e3b..dd4f417 100644
--- a/themes/infusion/layouts/shortcodes/figure.html
+++ b/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>