@massimo-cassandro/create-favicons 1.1.0 → 1.3.0

package/index.mjs

@@ -9,12 +9,13 @@ import * as path from 'path';
 
 import chalk from 'chalk';
 
+import { parseParams } from './src/parse-params.mjs';
+import { default_params } from './src/default-params.mjs';
 import { createFavicons } from './src/create-favicons.mjs';
-import { defaults } from './src/defaults.mjs';
 import { init } from './src/init.mjs';
 
 // nome del file di configurazione, se utilizzato
-const cfg_filename = 'create-favicons-cfg.mjs';
+const config_filename = 'create-favicons-cfg.mjs';
 
 try {
 
@@ -25,39 +26,39 @@ try {
 
   } else {
 
-    let params = {};
+    let work_dir;
     const dir_param_idx = process.argv.findIndex(el => /^--dir/.test(el) );
 
     if(dir_param_idx !== -1) {
-      [, params.work_dir] = process.argv[dir_param_idx].split('=');
+      [, work_dir] = process.argv[dir_param_idx].split('=');
 
     } else {
-      params.work_dir = './';
+      work_dir = './';
     }
 
-    if(fs.existsSync(path.resolve(params.work_dir, cfg_filename))) {
+    work_dir = path.resolve(process.cwd(), work_dir) ;
 
-      import(path.resolve(params.work_dir, cfg_filename))
-        .then((custom_params) => {
 
-          if(Array.isArray(custom_params.default)) {
+    if(fs.existsSync(path.resolve(work_dir, config_filename))) {
 
-            custom_params.default.forEach(item => {
-              createFavicons({ ...defaults, ...params, ...item });
-            });
+      import(path.resolve(work_dir, config_filename))
+        .then((config_params) => {
+
+          const imported_params = [...(Array.isArray(config_params.default)? config_params.default : [config_params.default])];
+
+          imported_params.forEach(params_item => {
+            createFavicons(parseParams(params_item, work_dir));
+          });
 
-          } else {
-            createFavicons({ ...defaults, ...params, ...custom_params.default });
-          }
         });
 
-    } else if(fs.existsSync(path.resolve(params.work_dir, defaults.src_img))) {
+    } else if(default_params.src_img && fs.existsSync(path.resolve(work_dir, default_params.src_img))) {
 
-      createFavicons({...defaults, ...params});
+      createFavicons(parseParams(null, work_dir));
 
     } else {
 
-      throw `'${cfg_filename}' e '${defaults.src_img}' non presenti`;
+      throw new Error( `'${config_filename}' e '${defaults.src_img}' non presenti`);
     }
 
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/create-favicons",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Favicon files builder",
   "bin": {
     "create-favicons": "./index.mjs"
@@ -14,7 +14,6 @@
   "publishConfig": {
     "access": "public"
   },
-
   "author": "Massimo Cassandro",
   "license": "MIT",
   "repository": {
@@ -43,14 +42,8 @@
   },
   "dependencies": {
     "chalk": "^5.3.0",
-    "imagemin": "^8.0.1",
-    "imagemin-jpegtran": "^7.0.0",
-    "imagemin-pngquant": "^9.0.2",
-    "sharp": "^0.32.6",
-    "svgo": "^3.0.4",
-    "to-ico": "^1.1.5"
-  },
-  "devDependencies": {
-    "@massimo-cassandro/linters-config": "^1.6.1"
+    "sharp": "^0.33.2",
+    "sharp-ico": "^0.1.5",
+    "svgo": "^3.2.0"
   }
 }

package/readme.md

@@ -2,7 +2,11 @@
 
 Crea i file favicons come descritto in [How to Favicon in 2024](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs).
 
-Utilizzo:
+I file da elaborare devono essere in formato SVG, mentre quelli generati sono in formato SVG (favicon), PNG (apple-touch-icon e altri file per android), e ICO (altro favicon per compatibilità con i browser meno recenti). Vengono inoltre genrati i file `manifest.webmanifest` e uno snippet html, opzionale, con i tag `link` per l'inserimento degli elementi generati.
+
+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).
+
+## Utilizzo
 
 ```bash
 npx create-favicons [--dir=./path/to/dir]
@@ -32,7 +36,7 @@ const params = [{ /* ... */ }];
 export default params;
 ```
 
-`params` può essere un ogetto o un array. In quest'ultimo caso, ogni elemento dell'array corrisponde ad un diverso set di favicons.
+`params` può essere un oggetto o un array. In quest'ultimo caso, ogni elemento dell'array corrisponde ad un diverso set di favicons.
 
 Per creare un file di cfg di esempio **nella directory corrente** (con tutti i valori di default e la loro descrizione), 
 utilizzare il comando:

package/src/create-favicons.mjs

@@ -1,200 +1,36 @@
 /* eslint-disable no-console */
 
-import * as fs from 'fs';
-import * as path from 'path';
+// import * as fs from 'fs';
+// import * as path from 'path';
 import chalk from 'chalk';
 
-import sharp from 'sharp';
-import toIco from 'to-ico';
-import { optimize } from 'svgo';
-import imagemin from 'imagemin';
-import imageminJpegtran from 'imagemin-jpegtran';
-import imageminPngquant from 'imagemin-pngquant';
-
-import { printFrame } from './print-frame.mjs';
-import { remove_homedir_string } from './remove-homedir-string.mjs';
+import { createIco } from './create-ico.mjs';
+import { createPng } from './create-png.mjs';
+import { createSvg } from './create-svg.mjs';
+import { createWebmanifest } from './create-webmanifest.mjs';
+import { createSnippet } from './create-snippet.mjs';
+import { printResult } from './print-result.mjs';
 
 
 export function createFavicons(params) {
 
   try {
 
-    const output_dir = path.resolve(params.work_dir, params.output_dir);
-
-    if (!fs.existsSync(output_dir)){
-      fs.mkdirSync(output_dir);
-    }
-
+    console.error(chalk.green('Creating favicons...'));
 
-    // https://sharp.pixelplumbing.com/api-constructor
     Promise.all([
-      ['apple-touch-icon.png', 180],
-      ['icon-192.png', 192],
-      ['icon-512.png', 512]
-    ].map(size => {
-      sharp(path.resolve(params.work_dir, params.src_img))
-        .resize({ width: size[1], fit: 'inside' })
-        .png()
-        // .then(info => console.log(info))
-        // .toFile(`${output_dir}/${size[0]}`)
-        .toBuffer()
-        .then(bufferData => {
-
-          // ottimizzazione PNG / JPG
-          // https://github.com/imagemin/imagemin
-          // https://github.com/imagemin/imagemin-pngquant
-          // https://github.com/imagemin/imagemin-jpegtran
-          // https://web.dev/use-imagemin-to-compress-images/
-
-          imagemin.buffer(bufferData, {
-            plugins: [
-              imageminJpegtran(),
-              imageminPngquant({
-                quality: params.imagemin_png_quality,
-                dithering: false,
-                strip: true,
-                verbose: true
-              })
-            ]
-          }).then( result => {
-            fs.writeFileSync(`${output_dir}/${size[0]}`, result);
-          });
-
-        })
-        .catch(err => { throw err; });
-
-    }));
-
-    // favicon.ico
-    // https://github.com/kevva/to-ico
-    // alternativa: https://github.com/steambap/png-to-ico
-
-    // const ico_source = fs.readFileSync(`${output_dir}/apple-touch-icon.png`);
-
-    sharp(path.resolve(params.work_dir, params.small_src_img?? params.src_img))
-      .png()
-      // .then(info => console.log(info))
-      .toBuffer()
-      .then(bufferData => {
-
-        toIco([bufferData], {
-          sizes: [16, 32],
-          resize: true
-        }).then( result => {
-          fs.writeFileSync(`${output_dir}/favicon.ico`, result);
-        });
+      createSvg(params),
+      createPng(params),
+      createIco(params),
+      createWebmanifest(params),
+      createSnippet(params),
+    ])
+      .then(result => {
+        printResult(params);
 
       })
-      .catch(err => { throw err; });
-
-
-    // favicon.svg (SVGO)
-    // TODO add extra config ???
-    const svgString = fs.readFileSync(path.resolve(params.work_dir, params.small_src_img?? params.src_img), 'utf8');
-    const svg_result = optimize(svgString, {
-      multipass: true,
-    });
-    fs.writeFileSync(`${output_dir}/favicon.svg`, svg_result.data, {force: true});
-
-    // web manifest
-    const manifest = {
-      icons: [192, 512].map( size => {
-        return { src: `./icon-${size}.png`, type: 'image/png', sizes: `${size}x${size}` };
-      }),
-      ...(params.webmanifest_extra?? {})
-    };
-
-    fs.writeFileSync(`${output_dir}/manifest.webmanifest`, JSON.stringify(manifest, null, ' '));
-
-
-    const snippet_path = params.snippet_path? path.resolve(params.work_dir, params.snippet_path) : output_dir;
-
-    // snippet
-    if(params.snippet_name || params.snippet_target_file) {
-
-      if (!params.snippet_target_file && !fs.existsSync(snippet_path)){
-        fs.mkdirSync(snippet_path);
-      }
-
-      params.snippet_language = params.snippet_language.toLowerCase();
-
-      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);
-
-
-      let snippet_content = `<link rel="icon" href="${create_href('favicon.ico')}" sizes="any">\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)');
-      }
-
-      snippet_content = params.snippet_template.replace('%_link_tags_%', snippet_content);
-
-      if (params.snippet_target_file) {
-
-        params.snippet_target_file = path.resolve(params.work_dir, params.snippet_target_file);
-
-        if (fs.existsSync(params.snippet_target_file)) {
-          const targetFileContent = fs.readFileSync(path.resolve(params.snippet_target_file), 'utf8'),
-            regexp = /<!-- ?favicon-snippet-start ?-->(.*?)<!-- ?favicon-snippet-end ?-->/mis;
-
-          fs.writeFileSync(params.snippet_target_file,
-            targetFileContent.replace(regexp,
-              `<!-- favicon-snippet-start -->\n${snippet_content}\n<!-- favicon-snippet-end -->`
-            )
-          );
-
-        } else {
-          throw `Il file '${params.snippet_target_file}' non esiste`;
-        }
-
-      } else {
-
-        fs.writeFileSync(
-          `${snippet_path}/${params.snippet_name}`,
-          snippet_content
-        );
-
-      }
-    }
-
-    // print result
-    let extra_strings = [];
-
-    if(snippet_path !== output_dir && params.snippet_name !== null) {
-      extra_strings = [
-        {string: ''},
-        {string: `Il file snippet '${params.snippet_name}' è stato salvato nella directory:`, color: 'green'},
-        {string: remove_homedir_string(snippet_path), color: 'yellow'},
-      ];
-
-    } else if(params.snippet_name === null) {
-      extra_strings = [
-        {string: ''},
-        {string: 'Il file snippet non è stato generato', color: 'magentaBright'},
-      ];
-    }
-
-
-    printFrame({
-      strings: [
-        {string: '** Creazione favicons completata **', color: 'bgGreen'},
-        {string: ''},
-        {string: 'I file generati sono nella directory:', color: 'green'},
-        {string: remove_homedir_string(output_dir), color: 'yellow'},
-        ...extra_strings
-      ],
-      frameColor: 'green',
-      frameType: 'single'
-    });
-
 
   } catch(err) {
-
     console.error(chalk.bgRed(` ${err} `));
   }
 

package/src/create-ico.OLD.mjs

@@ -0,0 +1,32 @@
+import * as fs from 'fs';
+import sharp from 'sharp';
+import toIco from 'to-ico';
+
+
+// https://github.com/kevva/to-ico
+// alternativa: https://github.com/steambap/png-to-ico
+
+// const ico_source = fs.readFileSync(`${output_dir}/apple-touch-icon.png`);
+
+export async function createIco(params) {
+
+  await sharp(params.small_src_img?? params.src_img)
+    // .png()
+    // .then(info => console.log(info))
+    .toBuffer()
+    .then(bufferData => {
+
+      toIco([bufferData], {
+        sizes: [16, 32],
+        resize: true
+      }).then( async result => {
+        await fs.promises.writeFile(`${params.output_dir}/favicon.ico`, result, {
+            encoding: "utf8",
+            flag: "w",
+            mode: 0o666
+        });
+      });
+
+    })
+    .catch(err => { throw new Error( err + ' (createIco)'); });
+}

package/src/create-ico.mjs

@@ -0,0 +1,18 @@
+import sharp from 'sharp';
+import ico from 'sharp-ico';
+
+// https://github.com/ssnangua/sharp-ico
+
+export async function createIco(params) {
+
+  ico.sharpsToIco(
+    [sharp(params.small_src_img?? params.src_img)],
+    `${params.output_dir}/favicon.ico`,
+    {
+      sizes: [16, 32],
+      // sizes: "default", // equal to [256, 128, 64, 48, 32, 24, 16]
+      resizeOptions: {}, // sharp resize optinos
+    }
+  );
+
+}

package/src/create-png.mjs

@@ -0,0 +1,21 @@
+import sharp from 'sharp';
+
+export async function createPng(params) {
+
+  // https://sharp.pixelplumbing.com/api-constructor
+  // https://sharp.pixelplumbing.com/api-output#png
+  Promise.all([
+    ['apple-touch-icon.png', 180],
+    ['icon-192.png', 192],
+    ['icon-512.png', 512]
+  ].map(file => {
+    sharp(params.src_img)
+      .resize({ width: file[1], fit: 'inside' })
+      .png(params.png_parameters)
+      .toFile(`${params.output_dir}/${file[0]}`)
+
+  }))
+    .catch(err => { throw new Error( err ); });
+
+
+}

package/src/create-snippet.mjs

@@ -0,0 +1,50 @@
+import * as fs from 'fs';
+
+export async function createSnippet(params) {
+
+
+  if(params.create_snippet) {
+
+
+    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);
+
+
+    let snippet_content = `<link rel="icon" href="${create_href('favicon.ico')}" sizes="any">\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)');
+    }
+
+    snippet_content = params.snippet_template.replace('%_link_tags_%', snippet_content);
+
+    if (params.snippet_target_file) {
+
+      if (fs.existsSync(params.snippet_target_file)) {
+        const targetFileContent = fs.readFileSync(params.snippet_target_file, 'utf8'),
+          regexp = /<!-- ?favicon-snippet-start ?-->(.*?)<!-- ?favicon-snippet-end ?-->/mis;
+
+        fs.promises.writeFile(params.snippet_target_file,
+          targetFileContent.replace(regexp,
+            `<!-- favicon-snippet-start -->\n${snippet_content}\n<!-- favicon-snippet-end -->`
+          )
+        );
+
+      } else {
+        throw new Error( `Il file '${params.snippet_target_file}' non esiste` );
+      }
+
+    } else {
+
+      fs.promises.writeFile(
+        `${params.snippet_path}/${params.snippet_name}`,
+        snippet_content
+      );
+
+    }
+  }
+}

package/src/create-svg.mjs

@@ -0,0 +1,15 @@
+import { optimize } from 'svgo';
+import * as fs from 'fs/promises';
+
+export async function createSvg(params) {
+
+  // TODO add extra config ???
+  fs.readFile(params.small_src_img?? params.src_img, { encoding: 'utf8' })
+    .then(svgString => {
+
+      const svg_result = optimize(svgString, { multipass: true});
+
+      fs.writeFile(`${params.output_dir}/favicon.svg`, svg_result.data);
+
+    });
+}

package/src/create-webmanifest.mjs

@@ -0,0 +1,14 @@
+import * as fs from 'fs/promises';
+
+export async function createWebmanifest(params) {
+  // web manifest
+  const manifest = {
+    icons: [192, 512].map( size => {
+      return { src: `./icon-${size}.png`, type: 'image/png', sizes: `${size}x${size}` };
+    }),
+    ...(params.webmanifest_extra?? {})
+  };
+
+  fs.writeFile(`${params.output_dir}/manifest.webmanifest`, JSON.stringify(manifest, null, ' '));
+
+}

package/src/{defaults.mjs → default-params.mjs}

@@ -1,4 +1,4 @@
-export const defaults = {
+export const default_params = {
 
   // delimitazione porzione da copiare nel file init
   /*** INIT START ***/
@@ -73,16 +73,12 @@ export const defaults = {
   // problemi di caching del browser
   add_cache_buster: false,
 
-
-  // IMAGEMIN PARAMETERS
   //****************************************************************************
+
+  // SHARP PNG PARAMETERS
   // parametri per i file PNG
-  // vedi https://www.npmjs.com/package/imagemin-pngquant
-  // Instructs pngquant to use the least amount of colors required to meet or
-  // exceed the max quality. If conversion results in quality below the min quality
-  // the image won't be saved.
-  // Min and max are numbers in range 0 (worst) to 1 (perfect), similar to JPEG.
-  imagemin_png_quality: [0.3, 0.6]
+  // vedi https://sharp.pixelplumbing.com/api-output#png
+  png_parameters: {compressionLevel: 5, quality: 60, palette: true}
 
 
   /*** INIT END ***/

package/src/init.mjs

@@ -22,7 +22,7 @@ export function init() {
 
   const start_string = '/*** INIT START ***/',
     end_string = '/*** INIT END ***/',
-    init_start_text = fs.readFileSync(src_dir +'./init-start.txt', 'utf8');
+    init_start_text = fs.readFileSync(src_dir +'./init-start-text.txt', 'utf8');
 
 
 

package/src/parse-params.mjs

@@ -0,0 +1,48 @@
+import { default_params } from './default-params.mjs';
+import * as path from 'path';
+import * as fs from 'fs';
+
+export function parseParams(config_params = null, work_dir = process.cwd()) {
+
+  try {
+
+    const params = {...default_params, ...(config_params??{})}
+    params.work_dir = work_dir;
+
+    [
+      'src_img',
+      'small_src_img',
+      'snippet_path',
+      'snippet_target_file',
+      'output_dir'
+    ].forEach(item =>
+      params[item] = params[item]? path.resolve(params.work_dir, params[item]) : null
+    );
+
+    // creazione dir output se non esiste
+    if (!fs.existsSync(params.output_dir)){
+      fs.mkdirSync(params.output_dir);
+    }
+
+    // definizione snippet_path e creazione dir se necessario
+    params.create_snippet = params.snippet_name || params.snippet_target_file;
+
+    if(params.create_snippet) {
+
+      params.snippet_path = params.snippet_path?? params.output_dir;
+
+      if (!params.snippet_target_file && !fs.existsSync(params.snippet_path )){
+        fs.mkdirSync(params.snippet_path );
+      }
+
+      params.snippet_language = params.snippet_language.toLowerCase();
+    }
+
+
+    return params;
+
+  } catch(e) {
+    console.error( e ); // eslint-disable-line
+  }
+
+}

package/src/print-frame.mjs

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import chalk from 'chalk';
 
+// https://github.com/chalk/chalk
 export function printFrame(options) {
 
   /*
@@ -27,7 +28,6 @@ export function printFrame(options) {
 
   options.strings = options.strings.map(item => {return {...string_defaults, ...item }; });
 
-  // TODO bold underline ecc...
   // aggiunta spazi sulle righe `bg`
   options.strings.forEach(item => {
     if(/^bg/.test(item.color)) {

package/src/print-result.mjs

@@ -0,0 +1,61 @@
+import { printFrame } from './print-frame.mjs';
+import { remove_homedir_string } from './remove-homedir-string.mjs';
+import * as fs from 'fs';
+
+
+// https://github.com/chalk/chalk
+export function printResult(params) {
+
+  function printSize(size) {
+    if(size > 1024) {
+      return `${(size / 1024).toFixed(2)} KB`;
+    } else {
+      return `${size} B`;
+
+    }
+  }
+
+  // print result
+  let extra_strings = [];
+
+  // immagini generate e dimensioni
+  [
+    'apple-touch-icon.png',
+    'favicon.ico',
+    'favicon.svg',
+    'icon-192.png',
+    'icon-512.png',
+    'manifest.webmanifest'
+  ].forEach(item => {
+    const stats = fs.statSync(`${params.output_dir}/${item}`);
+    extra_strings.push({string: `${item}: ${printSize(stats.size)}`, color: 'greenBright'});
+  });
+
+  if(params.snippet_path  !== params.output_dir && params.snippet_name !== null) {
+    extra_strings.push(
+      {string: ''},
+      {string: `Il file snippet '${params.snippet_name}' è stato salvato nella directory:`, color: 'green'},
+      {string: remove_homedir_string(params.snippet_path ), color: 'yellow'},
+    );
+
+  } else if(params.snippet_name === null) {
+    extra_strings.push(
+      {string: ''},
+      {string: 'Il file snippet non è stato generato', color: 'magentaBright'},
+    );
+  }
+
+
+  printFrame({
+    strings: [
+      {string: '** Creazione favicons completata **', color: 'bgGreen'},
+      {string: ''},
+      {string: 'I file generati sono nella directory:', color: 'green'},
+      {string: remove_homedir_string(params.output_dir), color: 'yellow'},
+      {string: ''},
+      ...extra_strings
+    ],
+    frameColor: 'green',
+    frameType: 'single'
+  });
+}