service worker with sw-precache

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

@@ -76,3 +76,15 @@ toggle.addEventListener('click', (e) => {
 {{% 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:
+
+{{<codeBlock lang="html" numbered="true">}}
+&#x7b;{&lt;demo caption="A basic button element">}}
+&lt;!-- demo code here -->
+&#x7b;{&lt;/demo>}}
+{{</codeBlock>}}
+
+Along with the standard `figure` shortcodes (described in {{% pattern "Including images" %}}), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.

docs/css/styles.css

@@ -471,7 +471,7 @@ main {
 
 figcaption::before {
   counter-increment: fig;
-  content: 'Figure ' counter(fig) ':';
+  content: 'Figure ' counter(fig) ':\0020';
   font-weight: bold;
 }
 
@@ -708,10 +708,7 @@ h1 svg {
 
 [id^="demo-"] {
   all: initial;
-}
+  display: block;
-
-[id^="demo-"] * {
-  all: initial;
 }
 
 @media (max-width: 45em) {

docs/index.html

@@ -247,13 +247,16 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
     </div>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
+      <script src="https://heydon.github.io/infusion/js/service-worker-registration.js"></script>
+    
   </body>
 </html>

docs/js/service-worker-registration.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright 2015 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-env browser */
+'use strict';
+
+if ('serviceWorker' in navigator) {
+  // Delay registration until after the page has loaded, to ensure that our
+  // precaching requests don't degrade the first visit experience.
+  // See https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/registration
+  window.addEventListener('load', function() {
+    // Your service-worker.js *must* be located at the top-level directory relative to your site.
+    // It won't be able to control pages unless it's located at the same level or higher than them.
+    // *Don't* register service worker file in, e.g., a scripts/ sub-directory!
+    // See https://github.com/slightlyoff/ServiceWorker/issues/468
+    navigator.serviceWorker.register('service-worker.js').then(function(reg) {
+      // updatefound is fired if service-worker.js changes.
+      reg.onupdatefound = function() {
+        // The updatefound event implies that reg.installing is set; see
+        // https://w3c.github.io/ServiceWorker/#service-worker-registration-updatefound-event
+        var installingWorker = reg.installing;
+
+        installingWorker.onstatechange = function() {
+          switch (installingWorker.state) {
+            case 'installed':
+              if (navigator.serviceWorker.controller) {
+                // At this point, the old content will have been purged and the fresh content will
+                // have been added to the cache.
+                // It's the perfect time to display a "New content is available; please refresh."
+                // message in the page's interface.
+                console.log('New or updated content is available.');
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a "Content is cached for offline use." message.
+                console.log('Content is now available offline!');
+              }
+              break;
+
+            case 'redundant':
+              console.error('The installing service worker became redundant.');
+              break;
+          }
+        };
+      };
+    }).catch(function(e) {
+      console.error('Error during service worker registration:', e);
+    });
+  });
+}

docs/patterns/coding/code-blocks/index.html

@@ -278,8 +278,8 @@ toggle.addEventListener('click', (e) => {
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -288,5 +288,6 @@ toggle.addEventListener('click', (e) => {
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/coding/codepen-embedding/index.html

@@ -263,8 +263,8 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -273,5 +273,6 @@
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/coding/color-palettes/index.html

@@ -271,8 +271,8 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -281,5 +281,6 @@
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/coding/index.html

@@ -284,8 +284,8 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -294,5 +294,6 @@
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/coding/tested/index.html

@@ -306,8 +306,8 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -316,5 +316,6 @@
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

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

@@ -227,7 +227,9 @@
   <main id="main">
     <h1>Writing inline demos</h1>
     
-    <p>There are some issues with <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
+    
+
+<p>There are some issues with <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
 
 <p><strong>Infusion</strong> offers another option: a special <code>demo</code> shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</p>
 
@@ -269,7 +271,7 @@ toggle.addEventListener('click', (e) => {
 
 <p>Here&rsquo;s a live demo of&hellip; the demo:</p>
 
-<p>
+
 <div class="demo-container">
   
       <div class="demo" id="demo-CiZsdDtidXR0b24gYXJp"></div>
@@ -322,7 +324,7 @@ toggle.addEventListener('click', (e) => {
     })();
   </script>
 </div>
-</p>
+
 
 <p><aside aria-label="note" class="note">
   <div>
@@ -335,11 +337,24 @@ toggle.addEventListener('click', (e) => {
 </aside>
 </p>
 
+<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>
+&#x7b;{&lt;demo caption="A basic button element">}}
+&lt;!-- demo code here -->
+&#x7b;{&lt;/demo>}}
+</code></pre>
+
+
+<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/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>
+
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -348,5 +363,6 @@ toggle.addEventListener('click', (e) => {
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/index.html

@@ -264,8 +264,8 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -274,5 +274,6 @@
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/installation/index.html

@@ -295,8 +295,8 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -305,5 +305,6 @@
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/library-setup/index.html

@@ -291,8 +291,8 @@ theme = "infusion"
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -301,5 +301,6 @@ theme = "infusion"
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/serving/index.html

@@ -256,8 +256,8 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -266,5 +266,6 @@
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

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

@@ -331,8 +331,8 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -341,5 +341,6 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

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

@@ -292,8 +292,8 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -302,5 +302,6 @@
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/writing/index.html

@@ -294,8 +294,8 @@
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -304,5 +304,6 @@
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/writing/library-structure/index.html

@@ -284,8 +284,8 @@ title = "Popups"
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -294,5 +294,6 @@ title = &quot;Popups&quot;
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/writing/markdown-and-metadata/index.html

@@ -279,8 +279,8 @@ weight = 1
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -289,5 +289,6 @@ weight = 1
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/writing/notes-and-warnings/index.html

@@ -282,8 +282,8 @@ This is a warning! It's about something the reader should be careful to do or to
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -292,5 +292,6 @@ This is a warning! It's about something the reader should be careful to do or to
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

docs/patterns/writing/references/index.html

@@ -649,8 +649,8 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
   </main>
 
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -659,5 +659,6 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
     
     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
   </body>
 </html>

package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "serve": "hugo server",
     "clean": "rm -rf content && mkdir content && mkdir content/patterns && hugo new patterns/pattern.md && hugo new _index.md",
-    "build": "rm -rfv docs/* && hugo && git add -A"
+    "build": "rm -rfv docs/* && hugo && sw-precache --root=docs && git add -A"
   },
   "pre-commit": [
     "build"
@@ -23,6 +23,7 @@
   },
   "homepage": "https://github.com/Heydon/infusion#readme",
   "devDependencies": {
-    "pre-commit": "^1.2.2"
+    "pre-commit": "^1.2.2",
+    "sw-precache": "^5.2.0"
   }
 }

themes/infusion/layouts/_default/baseof.html

@@ -82,8 +82,8 @@
           {{ block "main" . }}
           {{ end }}
           <footer role="contentinfo">
-            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
-            For general enquiries, contact us on info@paciellogroup.com
+            For general enquiries, contact us on info@paciellogroup.com.
           </footer>
         </div>
       </div>
@@ -92,5 +92,8 @@
       <script src="{{ .Site.BaseURL }}js/prism.js"></script>
     {{ end }}
     <script src="{{ .Site.BaseURL }}js/dom-scripts.js"></script>
+    {{ if .Page.IsHome }}
+      <script src="{{ .Site.BaseURL }}js/service-worker-registration.js"></script>
+    {{ end }}
   </body>
 </html>

themes/infusion/static/css/styles.css

@@ -471,7 +471,7 @@ main {
 
 figcaption::before {
   counter-increment: fig;
-  content: 'Figure ' counter(fig) ':';
+  content: 'Figure ' counter(fig) ':\0020';
   font-weight: bold;
 }
 
@@ -708,10 +708,7 @@ h1 svg {
 
 [id^="demo-"] {
   all: initial;
-}
+  display: block;
-
-[id^="demo-"] * {
-  all: initial;
 }
 
 @media (max-width: 45em) {

themes/infusion/static/js/service-worker-registration.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright 2015 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-env browser */
+'use strict';
+
+if ('serviceWorker' in navigator) {
+  // Delay registration until after the page has loaded, to ensure that our
+  // precaching requests don't degrade the first visit experience.
+  // See https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/registration
+  window.addEventListener('load', function() {
+    // Your service-worker.js *must* be located at the top-level directory relative to your site.
+    // It won't be able to control pages unless it's located at the same level or higher than them.
+    // *Don't* register service worker file in, e.g., a scripts/ sub-directory!
+    // See https://github.com/slightlyoff/ServiceWorker/issues/468
+    navigator.serviceWorker.register('service-worker.js').then(function(reg) {
+      // updatefound is fired if service-worker.js changes.
+      reg.onupdatefound = function() {
+        // The updatefound event implies that reg.installing is set; see
+        // https://w3c.github.io/ServiceWorker/#service-worker-registration-updatefound-event
+        var installingWorker = reg.installing;
+
+        installingWorker.onstatechange = function() {
+          switch (installingWorker.state) {
+            case 'installed':
+              if (navigator.serviceWorker.controller) {
+                // At this point, the old content will have been purged and the fresh content will
+                // have been added to the cache.
+                // It's the perfect time to display a "New content is available; please refresh."
+                // message in the page's interface.
+                console.log('New or updated content is available.');
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a "Content is cached for offline use." message.
+                console.log('Content is now available offline!');
+              }
+              break;
+
+            case 'redundant':
+              console.error('The installing service worker became redundant.');
+              break;
+          }
+        };
+      };
+    }).catch(function(e) {
+      console.error('Error during service worker registration:', e);
+    });
+  });
+}