-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update pwa configuration to rely on network first, and use cache whil…
…st elements and content is loading
- Loading branch information
Showing
2 changed files
with
163 additions
and
133 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,143 +1,160 @@ | ||
| const { DateTime } = require("luxon"); | ||
| const {DateTime} = require("luxon"); | ||
| const markdownItAnchor = require("markdown-it-anchor"); | ||
|
|
||
| const pluginRss = require("@11ty/eleventy-plugin-rss"); | ||
| const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); | ||
| const pluginBundle = require("@11ty/eleventy-plugin-bundle"); | ||
| const pluginNavigation = require("@11ty/eleventy-navigation"); | ||
| const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); | ||
| const {EleventyHtmlBasePlugin} = require("@11ty/eleventy"); | ||
|
|
||
| const pluginDrafts = require("./eleventy.config.drafts.js"); | ||
| const pluginImages = require("./eleventy.config.images.js"); | ||
|
|
||
| const pluginPWA = require("eleventy-plugin-pwa-v2"); | ||
|
|
||
| module.exports = function(eleventyConfig) { | ||
| // Copy the contents of the `public` folder to the output folder | ||
| // For example, `./public/css/` ends up in `_site/css/` | ||
| eleventyConfig.addPassthroughCopy({ | ||
| "./public/": "/", | ||
| "./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css" | ||
| }); | ||
|
|
||
| // Run Eleventy when these files change: | ||
| // https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets | ||
|
|
||
| // Watch content images for the image pipeline. | ||
| eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}"); | ||
|
|
||
| // App plugins | ||
| eleventyConfig.addPlugin(pluginDrafts); | ||
| eleventyConfig.addPlugin(pluginImages); | ||
|
|
||
| // Official plugins | ||
| eleventyConfig.addPlugin(pluginRss); | ||
| eleventyConfig.addPlugin(pluginSyntaxHighlight, { | ||
| preAttributes: { tabindex: 0 } | ||
| }); | ||
| eleventyConfig.addPlugin(pluginNavigation); | ||
| eleventyConfig.addPlugin(EleventyHtmlBasePlugin); | ||
| eleventyConfig.addPlugin(pluginBundle); | ||
|
|
||
| // Filters | ||
| eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => { | ||
| // Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens | ||
| return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(format || "dd LLLL yyyy"); | ||
| }); | ||
|
|
||
| eleventyConfig.addFilter('htmlDateString', (dateObj) => { | ||
| // dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string | ||
| return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd'); | ||
| }); | ||
|
|
||
| // Get the first `n` elements of a collection. | ||
| eleventyConfig.addFilter("head", (array, n) => { | ||
| if(!Array.isArray(array) || array.length === 0) { | ||
| return []; | ||
| } | ||
| if( n < 0 ) { | ||
| return array.slice(n); | ||
| } | ||
|
|
||
| return array.slice(0, n); | ||
| }); | ||
|
|
||
| // Return the smallest number argument | ||
| eleventyConfig.addFilter("min", (...numbers) => { | ||
| return Math.min.apply(null, numbers); | ||
| }); | ||
|
|
||
| // Return all the tags used in a collection | ||
| eleventyConfig.addFilter("getAllTags", collection => { | ||
| let tagSet = new Set(); | ||
| for(let item of collection) { | ||
| (item.data.tags || []).forEach(tag => tagSet.add(tag)); | ||
| } | ||
| return Array.from(tagSet); | ||
| }); | ||
|
|
||
| eleventyConfig.addFilter("filterTagList", function filterTagList(tags) { | ||
| return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1); | ||
| }); | ||
|
|
||
| // Customize Markdown library settings: | ||
| eleventyConfig.amendLibrary("md", mdLib => { | ||
| mdLib.use(markdownItAnchor, { | ||
| permalink: markdownItAnchor.permalink.ariaHidden({ | ||
| placement: "after", | ||
| class: "header-anchor", | ||
| symbol: "#", | ||
| ariaHidden: false, | ||
| }), | ||
| level: [1,2,3,4], | ||
| slugify: eleventyConfig.getFilter("slugify") | ||
| }); | ||
| }); | ||
|
|
||
| eleventyConfig.addPlugin(pluginPWA); | ||
|
|
||
| // Features to make your build faster (when you need them) | ||
|
|
||
| // If your passthrough copy gets heavy and cumbersome, add this line | ||
| // to emulate the file copy on the dev server. Learn more: | ||
| // https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve | ||
|
|
||
| // eleventyConfig.setServerPassthroughCopyBehavior("passthrough"); | ||
|
|
||
| return { | ||
| // Control which files Eleventy will process | ||
| // e.g.: *.md, *.njk, *.html, *.liquid | ||
| templateFormats: [ | ||
| "md", | ||
| "njk", | ||
| "html", | ||
| "liquid", | ||
| ], | ||
|
|
||
| // Pre-process *.md files with: (default: `liquid`) | ||
| markdownTemplateEngine: "njk", | ||
|
|
||
| // Pre-process *.html files with: (default: `liquid`) | ||
| htmlTemplateEngine: "njk", | ||
|
|
||
| // These are all optional: | ||
| dir: { | ||
| input: "content", // default: "." | ||
| includes: "../_includes", // default: "_includes" | ||
| data: "../_data", // default: "_data" | ||
| output: "_site" | ||
| }, | ||
|
|
||
| // ----------------------------------------------------------------- | ||
| // Optional items: | ||
| // ----------------------------------------------------------------- | ||
|
|
||
| // If your site deploys to a subdirectory, change `pathPrefix`. | ||
| // Read more: https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix | ||
|
|
||
| // When paired with the HTML <base> plugin https://www.11ty.dev/docs/plugins/html-base/ | ||
| // it will transform any absolute URLs in your HTML to include this | ||
| // folder name and does **not** affect where things go in the output folder. | ||
| pathPrefix: "/", | ||
| }; | ||
| module.exports = eleventyConfig => { | ||
| // Copy the contents of the `public` folder to the output folder | ||
| // For example, `./public/css/` ends up in `_site/css/` | ||
| eleventyConfig.addPassthroughCopy({ | ||
| "./public/": "/", | ||
| "./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css" | ||
| }); | ||
|
|
||
| // Run Eleventy when these files change: | ||
| // https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets | ||
|
|
||
| // Watch content images for the image pipeline. | ||
| eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}"); | ||
|
|
||
| // App plugins | ||
| eleventyConfig.addPlugin(pluginDrafts); | ||
| eleventyConfig.addPlugin(pluginImages); | ||
|
|
||
| // Official plugins | ||
| eleventyConfig.addPlugin(pluginRss); | ||
| eleventyConfig.addPlugin(pluginSyntaxHighlight, { | ||
| preAttributes: {tabindex: 0} | ||
| }); | ||
| eleventyConfig.addPlugin(pluginNavigation); | ||
| eleventyConfig.addPlugin(EleventyHtmlBasePlugin); | ||
| eleventyConfig.addPlugin(pluginBundle); | ||
|
|
||
| // Filters | ||
| eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => { | ||
| // Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens | ||
| return DateTime.fromJSDate(dateObj, {zone: zone || "utc"}).toFormat(format || "dd LLLL yyyy"); | ||
| }); | ||
|
|
||
| eleventyConfig.addFilter('htmlDateString', (dateObj) => { | ||
| // dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string | ||
| return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd'); | ||
| }); | ||
|
|
||
| // Get the first `n` elements of a collection. | ||
| eleventyConfig.addFilter("head", (array, n) => { | ||
| if (!Array.isArray(array) || array.length === 0) { | ||
| return []; | ||
| } | ||
| if (n < 0) { | ||
| return array.slice(n); | ||
| } | ||
|
|
||
| return array.slice(0, n); | ||
| }); | ||
|
|
||
| // Return the smallest number argument | ||
| eleventyConfig.addFilter("min", (...numbers) => { | ||
| return Math.min.apply(null, numbers); | ||
| }); | ||
|
|
||
| // Return all the tags used in a collection | ||
| eleventyConfig.addFilter("getAllTags", collection => { | ||
| let tagSet = new Set(); | ||
| for (let item of collection) { | ||
| (item.data.tags || []).forEach(tag => tagSet.add(tag)); | ||
| } | ||
| return Array.from(tagSet); | ||
| }); | ||
|
|
||
| eleventyConfig.addFilter("filterTagList", tags => (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1)); | ||
|
|
||
| // Customize Markdown library settings: | ||
| eleventyConfig.amendLibrary("md", mdLib => { | ||
| mdLib.use(markdownItAnchor, { | ||
| permalink: markdownItAnchor.permalink.ariaHidden({ | ||
| placement: "after", | ||
| class: "header-anchor", | ||
| symbol: "#", | ||
| ariaHidden: false, | ||
| }), | ||
| level: [1, 2, 3, 4], | ||
| slugify: eleventyConfig.getFilter("slugify") | ||
| }); | ||
| }); | ||
|
|
||
| eleventyConfig.addPlugin(pluginPWA, { | ||
| swDest: "./build/service-worker.js", | ||
| globDirectory: "./build", | ||
| cacheId: "jeujeus-blog", | ||
| runtimeCaching: [ | ||
| { | ||
| urlPattern: /\/$/, | ||
| handler: "NetworkFirst", | ||
| }, | ||
| { | ||
| urlPattern: /\.html$/, | ||
| handler: "NetworkFirst", | ||
| }, | ||
| { | ||
| urlPattern: | ||
| /^.*\.(jpg|png|mp4|gif|webp|ico|svg|woff2|woff|eot|ttf|otf|ttc|json)$/, | ||
| handler: "StaleWhileRevalidate", | ||
| }, | ||
| ] | ||
| }); | ||
|
|
||
| // Features to make your build faster (when you need them) | ||
|
|
||
| // If your passthrough copy gets heavy and cumbersome, add this line | ||
| // to emulate the file copy on the dev server. Learn more: | ||
| // https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve | ||
|
|
||
| // eleventyConfig.setServerPassthroughCopyBehavior("passthrough"); | ||
|
|
||
| return { | ||
| // Control which files Eleventy will process | ||
| // e.g.: *.md, *.njk, *.html, *.liquid | ||
| templateFormats: [ | ||
| "md", | ||
| "njk", | ||
| "html", | ||
| "liquid", | ||
| ], | ||
|
|
||
| // Pre-process *.md files with: (default: `liquid`) | ||
| markdownTemplateEngine: "njk", | ||
|
|
||
| // Pre-process *.html files with: (default: `liquid`) | ||
| htmlTemplateEngine: "njk", | ||
|
|
||
| // These are all optional: | ||
| dir: { | ||
| input: "content", // default: "." | ||
| includes: "../_includes", // default: "_includes" | ||
| data: "../_data", // default: "_data" | ||
| output: "_site" | ||
| }, | ||
|
|
||
| // ----------------------------------------------------------------- | ||
| // Optional items: | ||
| // ----------------------------------------------------------------- | ||
|
|
||
| // If your site deploys to a subdirectory, change `pathPrefix`. | ||
| // Read more: https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix | ||
|
|
||
| // When paired with the HTML <base> plugin https://www.11ty.dev/docs/plugins/html-base/ | ||
| // it will transform any absolute URLs in your HTML to include this | ||
| // folder name and does **not** affect where things go in the output folder. | ||
| pathPrefix: "/", | ||
| }; | ||
| }; |