From 8722ccc683946ffcdceac27bc8a3131e913dbcdc Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Thu, 13 Jul 2017 11:36:42 +0100 Subject: [PATCH] polyfill shadow DOM version --- docs/index.html | 1 + docs/patterns/coding/code-blocks/index.html | 3 ++ .../coding/codepen-embedding/index.html | 3 ++ .../patterns/coding/color-palettes/index.html | 3 ++ docs/patterns/coding/index.html | 3 ++ docs/patterns/coding/tested/index.html | 3 ++ .../coding/writing-inline-demos/index.html | 30 +++++++------------ docs/patterns/index.html | 3 ++ docs/patterns/installation/index.html | 3 ++ docs/patterns/library-setup/index.html | 3 ++ .../media/including-images/index.html | 3 ++ .../media/including-videos/index.html | 3 ++ docs/patterns/media/index.html | 3 ++ docs/patterns/serving/index.html | 3 ++ .../writing/expandable-sections/index.html | 3 ++ docs/patterns/writing/index.html | 3 ++ .../writing/library-structure/index.html | 3 ++ .../writing/markdown-and-metadata/index.html | 3 ++ .../writing/notes-and-warnings/index.html | 3 ++ docs/patterns/writing/references/index.html | 3 ++ docs/service-worker.js | 2 +- themes/infusion/layouts/_default/baseof.html | 3 ++ themes/infusion/layouts/shortcodes/demo.html | 27 +++++------------ 23 files changed, 76 insertions(+), 41 deletions(-) diff --git a/docs/index.html b/docs/index.html index 7c092f7..1773ab6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -25,6 +25,7 @@ + Infusion diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html index ecac542..26837ea 100644 --- a/docs/patterns/coding/code-blocks/index.html +++ b/docs/patterns/coding/code-blocks/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Code blocks | Infusion diff --git a/docs/patterns/coding/codepen-embedding/index.html b/docs/patterns/coding/codepen-embedding/index.html index 92b699a..83b0bb9 100644 --- a/docs/patterns/coding/codepen-embedding/index.html +++ b/docs/patterns/coding/codepen-embedding/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> CodePen embedding | Infusion diff --git a/docs/patterns/coding/color-palettes/index.html b/docs/patterns/coding/color-palettes/index.html index 68289ce..aa0ec5c 100644 --- a/docs/patterns/coding/color-palettes/index.html +++ b/docs/patterns/coding/color-palettes/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Color palettes | Infusion diff --git a/docs/patterns/coding/index.html b/docs/patterns/coding/index.html index e9c0134..370cab1 100644 --- a/docs/patterns/coding/index.html +++ b/docs/patterns/coding/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Coding | Infusion diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html index 58d9329..eef5d62 100644 --- a/docs/patterns/coding/tested/index.html +++ b/docs/patterns/coding/tested/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Tested using... | Infusion diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html index 4010581..ba17a88 100644 --- a/docs/patterns/coding/writing-inline-demos/index.html +++ b/docs/patterns/coding/writing-inline-demos/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Writing inline demos | Infusion @@ -284,12 +287,14 @@ toggle.addEventListener('click', (e) => { <p>Here’s a live demo of… the demo:</p> + + <div class="demo-container"> - <div class="demo" id="demo-CiZsdDtidXR0b24gYXJp"></div> + <demo-elemcizsddtidxr0b24gyxjp class="demo" id="demo-cizsddtidxr0b24gyxjp"></demo-elemcizsddtidxr0b24gyxjp> - <template id="template-CiZsdDtidXR0b24gYXJp"> + <template id="templatecizsddtidxr0b24gyxjp"> <button aria-pressed="false">Toggle Me</button> <style> @@ -319,26 +324,11 @@ toggle.addEventListener('click', (e) => { </script> </template> - <script> - (function() { - var root = document.getElementById('demo-CiZsdDtidXR0b24gYXJp'); - if (document.head.attachShadow) { - root.attachShadow({mode: 'open'}); - var template = document.getElementById('template-CiZsdDtidXR0b24gYXJp'); - var script = template.content.querySelector('script'); - if (script) { - script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24gYXJp\').shadowRoot; ${script.textContent} })()` - } - root.shadowRoot.appendChild(document.importNode(template.content, true)); - } else { - root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>'; - } - })(); - </script> + <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> </div> -<p><aside aria-label="note" class="note"> +<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> @@ -347,7 +337,7 @@ toggle.addEventListener('click', (e) => { </div> </aside> -</p> + <h2 id="captioned-demos">Captioned demos</h2> diff --git a/docs/patterns/index.html b/docs/patterns/index.html index c13c13b..c08e2d4 100644 --- a/docs/patterns/index.html +++ b/docs/patterns/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Patterns | Infusion diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html index 4d18d91..30ed76b 100644 --- a/docs/patterns/installation/index.html +++ b/docs/patterns/installation/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Installation | Infusion diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html index cee8771..05e67d3 100644 --- a/docs/patterns/library-setup/index.html +++ b/docs/patterns/library-setup/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Library setup | Infusion diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html index dddeaf7..96b6a42 100644 --- a/docs/patterns/media/including-images/index.html +++ b/docs/patterns/media/including-images/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Including images | Infusion diff --git a/docs/patterns/media/including-videos/index.html b/docs/patterns/media/including-videos/index.html index 25a0b8a..7a9dac3 100644 --- a/docs/patterns/media/including-videos/index.html +++ b/docs/patterns/media/including-videos/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Including videos | Infusion diff --git a/docs/patterns/media/index.html b/docs/patterns/media/index.html index 194156c..8abff41 100644 --- a/docs/patterns/media/index.html +++ b/docs/patterns/media/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Media | Infusion diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html index 585c551..3b21cc7 100644 --- a/docs/patterns/serving/index.html +++ b/docs/patterns/serving/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Serving | Infusion diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html index eb6c4fc..f58ee7f 100644 --- a/docs/patterns/writing/expandable-sections/index.html +++ b/docs/patterns/writing/expandable-sections/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Expandable sections | Infusion diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html index 56cfd2c..8687ed3 100644 --- a/docs/patterns/writing/index.html +++ b/docs/patterns/writing/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Writing | Infusion diff --git a/docs/patterns/writing/library-structure/index.html b/docs/patterns/writing/library-structure/index.html index e6e5a0c..74dd4ee 100644 --- a/docs/patterns/writing/library-structure/index.html +++ b/docs/patterns/writing/library-structure/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Library structure | Infusion diff --git a/docs/patterns/writing/markdown-and-metadata/index.html b/docs/patterns/writing/markdown-and-metadata/index.html index fee9c3a..bc124a5 100644 --- a/docs/patterns/writing/markdown-and-metadata/index.html +++ b/docs/patterns/writing/markdown-and-metadata/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Markdown & metadata | Infusion diff --git a/docs/patterns/writing/notes-and-warnings/index.html b/docs/patterns/writing/notes-and-warnings/index.html index 3b9018f..b715a8e 100644 --- a/docs/patterns/writing/notes-and-warnings/index.html +++ b/docs/patterns/writing/notes-and-warnings/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> Notes & warnings | Infusion diff --git a/docs/patterns/writing/references/index.html b/docs/patterns/writing/references/index.html index c07bd47..bdd44fc 100644 --- a/docs/patterns/writing/references/index.html +++ b/docs/patterns/writing/references/index.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css"> + + <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script> + <title> References | Infusion diff --git a/docs/service-worker.js b/docs/service-worker.js index 8180cee..bdaec5c 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","3cfef7dae92dac6b5b8d506dcf53cf77"],["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","51ce834e0e837de71dc10e681af72356"],["patterns/coding/codepen-embedding/index.html","752220c925f3410448e6c257570d146b"],["patterns/coding/color-palettes/index.html","f9f012948693da24289028cc594f8485"],["patterns/coding/index.html","11f94b14bb3d572636ab7cb8043f68a0"],["patterns/coding/index.xml","e05792f5d471e69af658fcfe0d949e05"],["patterns/coding/tested/index.html","c921e2dccaf080d160c8bcc9fc14c6f5"],["patterns/coding/writing-inline-demos/index.html","ff0a5c9d2ce6517091541b37f8d5517f"],["patterns/index.html","24a688e40ef85a33e4941ac6b784ca43"],["patterns/index.xml","b2fe2e8940440bfcc3f152e9c43f4a28"],["patterns/installation/index.html","0c11aad5effd4b091c4a7559b3487182"],["patterns/library-setup/index.html","89659b1d4da7511dfa709b31ea2226b0"],["patterns/media/including-images/index.html","f67a915d1784fb6e497b6f1255f3c7e2"],["patterns/media/including-videos/index.html","62b4d7920a6a5f577775254fcc2a4205"],["patterns/media/index.html","d530e9377afea71651c5864a6ee0c057"],["patterns/media/index.xml","4a9c518cde77c958c19472b4f6980fd6"],["patterns/serving/index.html","309bc3b476291bb86886c3c5271facb8"],["patterns/writing/expandable-sections/index.html","7487327b298a1d48472ad7c211aed793"],["patterns/writing/index.html","5d916eb9e898ce1bd0cfcd12b65dfe35"],["patterns/writing/index.xml","c3e4613e56fb851bb7e4d4cc23c949a4"],["patterns/writing/library-structure/index.html","8e885dc4fbbf65415548479bcad89454"],["patterns/writing/markdown-and-metadata/index.html","26e5076792abaf67c0204ed373c7b528"],["patterns/writing/notes-and-warnings/index.html","472fb071ee0ecf7aa4963c4680579b0f"],["patterns/writing/references/index.html","4c999f988613ae0b994752ae3bb24175"],["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","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 cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : ''); diff --git a/themes/infusion/layouts/_default/baseof.html b/themes/infusion/layouts/_default/baseof.html index 635e7e9..92bd41b 100644 --- a/themes/infusion/layouts/_default/baseof.html +++ b/themes/infusion/layouts/_default/baseof.html @@ -24,6 +24,9 @@ <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}" /> <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}"> + {{ if eq .Type "patterns" }} + <script src="{{ "js/webcomponents.js" | absURL }}"></script> + {{ end }} <title> {{ block "title" . }} {{ .Title }} | {{ .Site.Title }} diff --git a/themes/infusion/layouts/shortcodes/demo.html b/themes/infusion/layouts/shortcodes/demo.html index 4a1c812..8cbb8ec 100644 --- a/themes/infusion/layouts/shortcodes/demo.html +++ b/themes/infusion/layouts/shortcodes/demo.html @@ -1,32 +1,19 @@ -{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" }} +{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" | 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"> {{ if .Get "caption" }} <figure role="group" aria-labelledby="caption-{{ $uniq }}"> {{ end }} - <div class="demo" id="demo-{{ $uniq }}"></div> + <demo-elem{{ $uniq }} class="demo" id="demo-{{ $uniq }}"></demo-elem{{ $uniq }}> {{ if .Get "caption" }} <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption> {{ end }} {{ if .Get "caption" }} </figure> {{ end }} - <template id="template-{{ $uniq }}"> - {{ .Inner }} + <template id="template{{ $uniq }}"> + {{ .Inner | safeHTML }} </template> - <script> - (function() { - var root = document.getElementById('demo-{{ $uniq }}'); - if (document.head.attachShadow) { - root.attachShadow({mode: 'open'}); - var template = document.getElementById('template-{{ $uniq }}'); - var script = template.content.querySelector('script'); - if (script) { - script.textContent = `(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot; ${script.textContent} })()` - } - root.shadowRoot.appendChild(document.importNode(template.content, true)); - } else { - root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>'; - } - })(); - </script> + {{ $string | safeHTML }} </div>