.eleventy.js

@@ -22,15 +22,14 @@ module.exports = (eleventyConfig) => {
       mkdirSync('dist/css', { recursive: true })
     }
   })
-
-  eleventyConfig.addPassthroughCopy('./src/fonts/')
-
   eleventyConfig.addPlugin(svgContents)
   eleventyConfig.addPlugin(faviconPlugin, {
     destination: './dist'
   })
-
   eleventyConfig.addPlugin(syntaxHighlight)
+  eleventyConfig.addPlugin(require('./plugins/manifest-icons'))
+
+  eleventyConfig.addPassthroughCopy('./src/fonts/')
 
   eleventyConfig.addCollection('notes', function (collectionApi) {
     return collectionApi.getFilteredByGlob('src/notes/**/*.md')

plugins/manifest-icons/index.js

@@ -0,0 +1,36 @@
+const sharp = require('sharp')
+const fs = require('fs').promises
+const getDirName = require('path').dirname
+
+async function writeFile (path, contents, cb) {
+  await fs.mkdir(getDirName(path), { recursive: true })
+  fs.writeFile(path, contents, cb)
+}
+
+function generatePngFavicon ({ density, width, height }, sourcePath, dimension) {
+  return sharp(sourcePath, {
+    density: (dimension / Math.max(width, height)) * density
+  })
+    .resize(dimension, dimension)
+    .png()
+    .toBuffer()
+}
+
+module.exports = (eleventyConfig) => {
+  eleventyConfig.addAsyncShortcode('manifest_icons', async function (faviconFile, ...dimensions) {
+    const metadata = await sharp(faviconFile).metadata()
+
+    const res = await Promise.all(dimensions.map(async dimension => {
+      const favicon = await generatePngFavicon(metadata, faviconFile, dimension)
+      writeFile(`dist/icons/${dimension}/favicon.png`, favicon)
+
+      return {
+        src: `/icons/${dimension}/favicon.png`,
+        sizes: `${dimension}x${dimension}`,
+        type: 'image/png'
+      }
+    }))
+
+    return JSON.stringify(res)
+  })
+}

src/layouts/base.njk

@@ -6,6 +6,7 @@
         <title>{{ title or metadata.title }}</title>
         <meta name="description" content="{{ description or metadata.description }}">
         <meta name="generator" content="{{ eleventy.generator }}">
+        <link rel="manifest" href="/manifest.json">
         <link rel="stylesheet" href="/css/index.css">
         {% favicon 'src/images/favicon.svg' %}
     </head>

src/pages/manifset.11tydata.js

@@ -0,0 +1,3 @@
+module.exports = {
+  permalink: '/manifest.json'
+}

src/pages/manifset.njk

@@ -0,0 +1,9 @@
+{
+  "name": "{{ metadata.title }}",
+  "lang": "ru",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "Вики с различными полезными статьями",
+  "icons": {% manifest_icons 'src/images/favicon.svg', 48, 72, 96, 144, 148 %}
+}