@massimo-cassandro/create-favicons 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/create-favicons",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Favicon files builder",
   "bin": {
     "create-favicons": "./index.mjs"

package/readme.md

@@ -6,6 +6,12 @@ I file da elaborare devono essere in formato SVG, mentre quelli generati sono in
 
 Le immagini sono generate con [Sharp](https://sharp.pixelplumbing.com/), [SVGO](https://github.com/svg/svgo) e [sharp-ico](https://github.com/ssnangua/sharp-ico).
 
+## Installazione
+
+```bash
+npm i -D @massimo-cassandro/create-favicons
+```
+
 
 ## Creazione template file di config (vedi più avanti)
 

package/src/create-favicons.mjs

@@ -14,16 +14,21 @@ import { printResult } from './print-result.mjs';
 
 export async function createFavicons(params) {
 
+  if(params.snippet_language === 'ejs') {
+    params.manifest_file_name = 'manifest.webmanifest.ejs';
+    params.webmanifest_add_hash_to_files = false;
+  }
+
   try {
 
     log('green', 'Creating favicons...');
 
     await Promise.all([
-      createSvg(params),
-      createPng(params),
-      createIco(params),
-      createWebmanifest(params),
-      createSnippet(params),
+      await createSvg(params),
+      await createPng(params),
+      await createIco(params),
+      await createWebmanifest(params), // after create png
+      await createSnippet(params),
     ])
       .then(result => {
         printResult(params);

package/src/create-snippet.mjs

@@ -5,19 +5,32 @@ export async function createSnippet(params) {
 
   if(params.create_snippet) {
 
+    let snippet_content;
 
-    const cache_buster = params.add_cache_buster? `?_=${Date.now()}` : '',
-      create_href = nome_file => params.href_template.replace('%_file_name_%', nome_file)
-        .replace('%_cache_buster_%', cache_buster);
+    if (params.snippet_language === 'ejs') {
 
+      snippet_content = '<link rel="icon" href="<%= require(\'./favicon.ico\') %>" sizes="32x32"/>\n' +
+        '<link rel="icon" href="<%= require(\'./favicon.svg\') %>" type="image/svg+xml"/>\n' +
+        '<link rel="apple-touch-icon" href="<%= require(\'./apple-touch-icon.png\') %>"/>\n' +
+        '<link rel="manifest" href="./manifest.webmanifest"/>\n' +
+        '<!-- <link rel="manifest" href="<%= require(\'./manifest.webmanifest.ejs\')() %>"/> -->';
 
-    let snippet_content = `<link rel="icon" href="${create_href('favicon.ico')}" sizes="32x32"/>\n` +
-      `<link rel="icon" href="${create_href('favicon.svg')}" type="image/svg+xml"/>\n` +
-      `<link rel="apple-touch-icon" href="${create_href('apple-touch-icon.png')}"/>\n` +
-      `<link rel="manifest" href="${create_href('manifest.webmanifest')}"/>`;
+    } else {
+
+      const cache_buster = params.add_cache_buster? `?_=${Date.now()}` : '',
+        create_href = nome_file => params.href_template.replace('%_file_name_%', nome_file)
+          .replace('%_cache_buster_%', cache_buster);
+
+
+      snippet_content = `<link rel="icon" href="${create_href('favicon.ico')}" sizes="32x32"/>\n` +
+        `<link rel="icon" href="${create_href('favicon.svg')}" type="image/svg+xml"/>\n` +
+        `<link rel="apple-touch-icon" href="${create_href('apple-touch-icon.png')}"/>\n` +
+        `<link rel="manifest" href="${create_href('manifest.webmanifest')}"/>`;
+
+      if (params.snippet_language === 'pug') {
+        snippet_content = snippet_content.replace(/<link (.*?)\/?>/g, 'link($1)');
+      }
 
-    if (params.snippet_language === 'pug') {
-      snippet_content = snippet_content.replace(/<link (.*?)\/?>/g, 'link($1)');
     }
 
     snippet_content = params.snippet_template.replace('%_link_tags_%', snippet_content);
@@ -41,7 +54,7 @@ export async function createSnippet(params) {
     } else {
 
       fs.promises.writeFile(
-        `${params.snippet_path}/${params.snippet_name}`,
+        `${params.snippet_path}/${params.snippet_language === 'ejs'? 'favicons.incl.ejs' : params.snippet_name}`,
         snippet_content
       );
 

package/src/create-webmanifest.mjs

@@ -1,14 +1,64 @@
-import * as fs from 'fs/promises';
+// web manifest
+
+// import * as fs from 'fs/promises';
+import * as fs from 'fs';
+import { createHash } from 'node:crypto'
+
+
+async function getHash(path) {
+
+  const fileHash = await new Promise((resolve, reject) => {
+    const hash = createHash('sha256');
+    const rs = fs.createReadStream(path);
+    rs.on('error', reject);
+    rs.on('data', chunk => hash.update(chunk));
+    rs.on('end', () => resolve(hash.digest('hex')));
+  })
+
+  return fileHash;
+}
 
 export async function createWebmanifest(params) {
-  // web manifest
+
+  const sizes = [192, 512];
+
+  let files = {};
+  for await (const size of sizes) {
+
+    if(params.snippet_language === 'ejs') {
+      files[size] = `<%= require('./icon-${size}.png') %>`;
+
+    } else if(params.webmanifest_add_hash_to_files) {
+      const hashValue = await getHash(`${params.output_dir}/icon-${size}.png`);
+      files[size] = `./icon-${size}.png?_=${hashValue}`;
+
+    } else {
+      files[size] = `./icon-${size}.png`;
+    }
+
+  }
+
   const manifest = {
-    icons: [192, 512].map( size => {
-      return { src: `./icon-${size}.png`, type: 'image/png', sizes: `${size}x${size}` };
+    icons: sizes.map( size => {
+
+      return {
+        src: files[size],
+        type: 'image/png',
+        sizes: `${size}x${size}`
+      };
     }),
     ...(params.webmanifest_extra?? {})
   };
 
-  await fs.writeFile(`${params.output_dir}/manifest.webmanifest`, JSON.stringify(manifest, null, ' '));
+  // await fs.writeFile(`${params.output_dir}/manifest.webmanifest`, JSON.stringify(manifest, null, ' '));
+
+  await fs.writeFile(
+    `${params.output_dir}/${params.manifest_file_name}`,
+    JSON.stringify(manifest, null, ' '),
+    (err) => {
+      if (err) {throw err}
+      // console.log('The file has been saved!');
+    }
+  );
 
 }

package/src/default-params.mjs

@@ -13,7 +13,7 @@ export const default_params = {
 
   // directory output (percorso relativo alla dir di lavoro)
   // se la dir non esiste, viene creata
-  output_dir: 'favicons-output',
+  output_dir: './output',
 
 
   // WEBMANIFEST
@@ -30,12 +30,17 @@ export const default_params = {
   // }
   webmanifest_extra: null,
 
+  // if true, all files linked in manifest will end with
+  // '?_=[hash]'
+  webmanifest_add_hash_to_files: true,
+
 
   // SNIPPET
   //****************************************************************************
 
   // nome del file snippet, compresa l'estensione
   // se questo parametro è null e anche `snippet_target_file` lo è, lo snippet non viene generato
+  // se il linguaggio è ejs il nome è sempre 'favicons.incl.ejs' e snippet_name viene ignorato
   snippet_name: 'favicon.html',
 
   // path (relativo a questo file) in cui salvare lo snippet
@@ -54,8 +59,8 @@ export const default_params = {
   snippet_target_file: null,
 
   // linguaggio da utilizzare per la sintassi dello snippet html
-  // html o pug
-  snippet_language: 'html',
+  // html, pug, ejs
+  snippet_language: 'ejs',
 
   // template per la costruzione dello snippet.
   // si tratta di una stringa (anche su più righe) in cui deve essere presente

package/src/print-result.mjs

@@ -24,7 +24,7 @@ export function printResult(params) {
     'favicon.svg',
     'icon-192.png',
     'icon-512.png',
-    'manifest.webmanifest'
+    params.manifest_file_name
   ].forEach(item => {
     const stats = fs.statSync(`${params.output_dir}/${item}`);
     extra_strings.push({string: `${item}: ${printSize(stats.size)}`, color: 'greenBright'});