package.json and scripts

content/patterns/landmarks/example2.md

@@ -30,18 +30,6 @@ title = "Footer"
     padding-top: 1.5rem;
     border-top: 2px solid;
   }
-
-  .expandable + .expandable {
-    margin-top: 1.5rem;
-    padding-top: 1.5rem;
-    border-top: 2px solid;
-  }
-
-  .expandable + .expandable {
-    margin-top: 1.5rem;
-    padding-top: 1.5rem;
-    border-top: 2px solid;
-  }
 {{</codeBlock>}}
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>

content/patterns/widgets/example2.md

@@ -5,6 +5,32 @@ tags = ["animated", "interactive"]
 
 <p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna {{% patternLink "Menu button and menu" %}}, id molestie magna risus ut nunc. Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.</p>
 
+{{<demo>}}
+<button aria-pressed="false">Press</button>
+<style>
+button {
+    background: blue;
+    color: white;
+    border: 0;
+    padding: 0.5rem 1rem;
+    text-transform: uppercase;
+}
+
+[aria-pressed="true"] {
+    box-shadow: inset 0 0 0.5rem #000;
+}
+</style>
+<script>
+var toggle = demo.querySelector('[aria-pressed]');
+console.log(toggle);
+
+toggle.addEventListener('click', (e) => {  
+  let pressed = e.target.getAttribute('aria-pressed') === 'true';
+  e.target.setAttribute('aria-pressed', !pressed);
+});
+</script>
+{{</demo>}}
+
 {{<codeBlock lang="css" numbered="true">}}
   .expandable + .expandable {
     margin-top: 1.5rem;
@@ -19,9 +45,15 @@ tags = ["animated", "interactive"]
   }
 {{</codeBlock>}}
 
+```html
+{{ .Inner }}
+```
+
+
+
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p>
 
-{{<demo>}}
+{{<demo caption="Example caption">}}
 <p>You must be having a laugh.</p>
 <style>
 p {

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "inclusive-pattern-library",
+  "version": "0.0.1",
+  "description": "An inclusive pattern library builder for documenting inclusive interface design",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "hugo server",
+    "build": "hugo",
+    "setup": "hugo && git add public && git commit -m 'Make git acknowledge public folder' && rm -rf content && mkdir content",
+    "publish": "hugo && git push origin `git subtree split --prefix public master`:gh-pages --force"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Heydon/inclusive-pattern-library.git"
+  },
+  "author": "Heydon Pickering <heydon@heydonworks.com> (http://www.heydonworks.com)",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Heydon/inclusive-pattern-library/issues"
+  },
+  "homepage": "https://github.com/Heydon/inclusive-pattern-library#readme"
+}

themes/inclusive-pattern-docs/layouts/_default/baseof.html

@@ -71,7 +71,6 @@
     </div>
     {{ if eq .Type "patterns" }}
       <script src="/js/prism.js"></script>
-      <script src="/js/shadyDOM.min.js"></script>
     {{ end }}
     <script src="/js/dom-scripts.js"></script>
   </body>

themes/inclusive-pattern-docs/layouts/shortcodes/demo.html

@@ -1,13 +1,22 @@
 {{ $uniq := .Inner | htmlEscape | base64Encode | truncate 15 "" }}
 <div class="demo-container">
-  <div id="demo-{{ $uniq }}">
-  </div>
+  {{ if .Get "caption" }}
+  <figure role="group" aria-labelledby="caption-{{ $uniq }}">
+  {{ end }}
+      <div class="demo" id="demo-{{ $uniq }}"></div>
+      {{ if .Get "caption" }}
+          <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" }}</figcaption>
+      {{ end }}
+  {{ if .Get "caption" }}
+  </figure>
+  {{ end }}
   <template id="template-{{ $uniq }}">
       {{ .Inner }}
   </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');
@@ -15,6 +24,9 @@
           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>
 </div>