hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

service worker with sw-precache

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-11 16:24:52 +01:00
parent 2de6c8ca54
commit 7a36f12cb8
26 changed files with 490 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
content/patterns/coding/writing-inline-demos.md
View File

@ -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.

7
docs/css/styles.css
View File

@ -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;
}
[id^="demo-"] * {
all: initial;
display: block;
}
@media (max-width: 45em) {

7
docs/index.html
View File

@ -247,13 +247,16 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

62
docs/js/service-worker-registration.js Normal file
View File

@ -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);
});
});
}

5
docs/patterns/coding/code-blocks/index.html
View File

@ -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>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/coding/codepen-embedding/index.html
View File

@ -263,8 +263,8 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/coding/color-palettes/index.html
View File

@ -271,8 +271,8 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/coding/index.html
View File

@ -284,8 +284,8 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/coding/tested/index.html
View File

@ -306,8 +306,8 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

26
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -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>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/index.html
View File

@ -264,8 +264,8 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/installation/index.html
View File

@ -295,8 +295,8 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/library-setup/index.html
View File

@ -291,8 +291,8 @@ theme = "infusion"
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/serving/index.html
View File

@ -256,8 +256,8 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/writing/expandable-sections/index.html
View File

@ -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>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/writing/including-images/index.html
View File

@ -292,8 +292,8 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/writing/index.html
View File

@ -294,8 +294,8 @@
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/writing/library-structure/index.html
View File

@ -284,8 +284,8 @@ title = &quot;Popups&quot;
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/writing/markdown-and-metadata/index.html
View File

@ -279,8 +279,8 @@ weight = 1
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/writing/notes-and-warnings/index.html
View File

@ -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>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

5
docs/patterns/writing/references/index.html
View File

@ -649,8 +649,8 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</main>
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

268
docs/service-worker.js Normal file
View File

File diff suppressed because one or more lines are too long

5
package.json
View File

@ -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"
}
}

7
themes/infusion/layouts/_default/baseof.html
View File

@ -82,8 +82,8 @@
{{ block "main" . }}
{{ end }}
<footer role="contentinfo">
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
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>

7
themes/infusion/static/css/styles.css
View File

@ -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;
}
[id^="demo-"] * {
all: initial;
display: block;
}
@media (max-width: 45em) {

62
themes/infusion/static/js/service-worker-registration.js Normal file
View File

@ -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);
});
});
}