error free standalone docs

docs/css/styles.css

@@ -162,7 +162,6 @@ main ul ul {
 button {
     font-size: 1.25rem;
     font-family: inherit;
-    font-weight: inherit;
     background: #111;
     color: #fff;
     padding: 0.75rem;
@@ -170,10 +169,8 @@ button {
 }
 [data-launch] {
   font-size: 0.75rem;
-  display: block;
-  margin-top: 0;
+  margin-top: 0.75rem;
   padding: 0.5rem;
-  width: 100%;
 }
 /* Tables */
 
@@ -690,6 +687,13 @@ h1 svg {
 }
 /* inline demos */
 
+.demo-container {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  padding: 1.5rem 0 0;
+  text-align: right;
+}
+
 [id^="js-demo-"] {
     all: initial;
     display: block;

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

@@ -406,7 +406,7 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo" id="demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+      <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
       
   
   <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@@ -440,16 +440,16 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
-  <button data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
+  <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
   <script>
     (function() {
-      var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a');
+      var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
       var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
         script.textContent = wrappedScript;
       }
 
@@ -457,17 +457,16 @@ toggle.addEventListener('click', (e) => {
         root.attachShadow({mode: 'open'});
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {
-        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
+        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
-      var launchButton = document.querySelector('[data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
+      var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
-        
         var demoContent = template.content;
         var standalone = window.open();
-        
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
+        standalone.document.title = 'demo' + "414e06a48e755bf9e43e5e2596f9ea7a"
       });
     })();
   </script>

docs/print-version/index.html

@@ -1665,7 +1665,7 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo" id="demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+      <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
       
   
   <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@@ -1699,16 +1699,16 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
-  <button data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
+  <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
   <script>
     (function() {
-      var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a');
+      var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
       var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
         script.textContent = wrappedScript;
       }
 
@@ -1716,17 +1716,16 @@ toggle.addEventListener('click', (e) => {
         root.attachShadow({mode: 'open'});
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {
-        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
+        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
-      var launchButton = document.querySelector('[data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
+      var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
-        
         var demoContent = template.content;
         var standalone = window.open();
-        
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
+        standalone.document.title = 'demo' + "414e06a48e755bf9e43e5e2596f9ea7a"
       });
     })();
   </script>

themes/infusion/layouts/shortcodes/demo.html

@@ -3,7 +3,7 @@
   {{ if .Get "caption" }}
   <figure role="group" aria-labelledby="caption-{{ $uniq }}">
   {{ end }}
-      <div class="demo" id="demo-{{ $uniq }}"></div>
+      <div class="demo" id="js-demo-{{ $uniq }}"></div>
       {{ if .Get "caption" }}
           <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
       {{ end }}
@@ -13,16 +13,16 @@
   <template id="template-{{ $uniq }}">
       {{ .Inner }}
   </template>
-  <button data-launch="demo-{{ $uniq }}">Launch in separate window</button>
+  <button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
   <script>
     (function() {
-      var root = document.getElementById('demo-{{ $uniq }}');
+      var root = document.getElementById('js-demo-{{ $uniq }}');
       var template = document.getElementById('template-{{ $uniq }}');
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
         script.textContent = wrappedScript;
       }
 
@@ -30,17 +30,16 @@
         root.attachShadow({mode: 'open'});
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {
-        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
+        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
-      var launchButton = document.querySelector('[data-launch="demo-{{ $uniq }}"]');
+      var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
       launchButton.addEventListener('click', function () {
-        //var wrap = '<!DOCTYPE html><html lang="en"><head><title>demo</title></head><body></body></html>';
         var demoContent = template.content;
         var standalone = window.open();
-        //standalone.document.write(wrap);
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
+        standalone.document.title = 'demo' + {{ $uniq }}
       });
     })();
   </script>

themes/infusion/static/css/styles.css

@@ -162,7 +162,6 @@ main ul ul {
 button {
     font-size: 1.25rem;
     font-family: inherit;
-    font-weight: inherit;
     background: #111;
     color: #fff;
     padding: 0.75rem;
@@ -170,10 +169,8 @@ button {
 }
 [data-launch] {
   font-size: 0.75rem;
-  display: block;
-  margin-top: 0;
+  margin-top: 0.75rem;
   padding: 0.5rem;
-  width: 100%;
 }
 /* Tables */
 
@@ -690,6 +687,13 @@ h1 svg {
 }
 /* inline demos */
 
+.demo-container {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  padding: 1.5rem 0 0;
+  text-align: right;
+}
+
 [id^="js-demo-"] {
     all: initial;
     display: block;