@massimo-cassandro/create-favicons 1.1.0

package/index.mjs

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+
+/* eslint-disable no-console */
+/* eslint-env node */
+
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+import chalk from 'chalk';
+
+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';
+
+try {
+
+  // init: creazione file cfg base
+  if(process.argv.indexOf('init') !== -1) {
+
+    init();
+
+  } else {
+
+    let params = {};
+    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('=');
+
+    } else {
+      params.work_dir = './';
+    }
+
+    if(fs.existsSync(path.resolve(params.work_dir, cfg_filename))) {
+
+      import(path.resolve(params.work_dir, cfg_filename))
+        .then((custom_params) => {
+
+          if(Array.isArray(custom_params.default)) {
+
+            custom_params.default.forEach(item => {
+              createFavicons({ ...defaults, ...params, ...item });
+            });
+
+          } else {
+            createFavicons({ ...defaults, ...params, ...custom_params.default });
+          }
+        });
+
+    } else if(fs.existsSync(path.resolve(params.work_dir, defaults.src_img))) {
+
+      createFavicons({...defaults, ...params});
+
+    } else {
+
+      throw `'${cfg_filename}' e '${defaults.src_img}' non presenti`;
+    }
+
+  }
+
+
+
+} catch(err) {
+  console.error(chalk.bgRed(`\n ${err} \n`));
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@massimo-cassandro/create-favicons",
+  "version": "1.1.0",
+  "description": "Favicon files builder",
+  "bin": {
+    "create-favicons": "./index.mjs"
+  },
+  "type": "module",
+  "scripts": {
+    "update-version": "node ./src/update-version/index.mjs",
+    "upd@m": "node ./src/upd@m/index.mjs",
+    "npm-publish": "npm publish"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+
+  "author": "Massimo Cassandro",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/massimo-cassandro/create-favicons.git#main"
+  },
+  "bugs": {
+    "url": "https://github.com/massimo-cassandro/create-favicons/issues"
+  },
+  "homepage": "https://github.com/massimo-cassandro/create-favicons/tree/main#readme",
+  "eslintConfig": {
+    "extends": [
+      "./node_modules/@massimo-cassandro/linters-config/eslintrc.js"
+    ]
+  },
+  "stylelint": {
+    "extends": "@massimo-cassandro/linters-config/stylelintrc.js"
+  },
+  "files": [
+    "src/**/*",
+    "index.mjs"
+  ],
+  "engines": {
+    "node": ">= 18.0.0",
+    "npm": ">= 9.0.0"
+  },
+  "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"
+  }
+}

package/readme.md

@@ -0,0 +1,86 @@
+# Create favicons
+
+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:
+
+```bash
+npx create-favicons [--dir=./path/to/dir]
+```
+
+Lo script agisce normalmente nella directory corrente, ma, utilizzando il parametro opzionale `--dir`, 
+è possibile specificare una directory alternativa (percorso relativo alla dir di esecuzione). 
+
+Lo script in prima battuta cerca nella dir di lavoro il file `create-favicons-cfg.mjs` che contiene un oggetto
+con tutti i parametri necessari (vedi di seguito).
+
+In sua assenza, cerca il file `favicon-src.svg` da utilizzare come sorgente per tutte le immagini, e assumendo i valori di default (vedi dopo) per tutti gli altri parametri. 
+
+Tra gli altri, è possibile spcificare il parametro `small_src_img` nel caso sia necessario specificare un'immagine ottimizzata per le piccole dimensioni (32px).
+
+Il formato migliore per i file sorgenti è SVG, o in alternativa PNG.
+
+In assenza di entrambi i file viene restituito un errore.
+
+I parametri di default sono elencati in dettaglio nel file `src/create-favicons/src/defaults.mjs`, 
+e possono essere personalizzati nel file di configurazione, che deve avere questa forma: 
+
+```javascript
+// file create-favicons-cfg.mjs
+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.
+
+Per creare un file di cfg di esempio **nella directory corrente** (con tutti i valori di default e la loro descrizione), 
+utilizzare il comando:
+
+```bash
+npx create-favicons init
+```
+
+## Utilizzo da remoto
+
+I comandi possono essere eseguiti anche senza installare preventivamente il package:
+
+```
+npx --package=@massimo-cassandro/dev-utilities create-favicons init
+npx --package=@massimo-cassandro/dev-utilities create-favicons [--dir=...]
+
+```
+
+## Esecuzione
+
+Lo script produce le varie immagini png ed svg, il file `manifest.webmanifest` e uno snippet html (o nel linguaggio indicato nel parametro `snippet_language`).
+Tutte le immagini vengono ottimizzate con [SVGO](https://github.com/svg/svgo) e [imagemin](https://github.com/imagemin/imagemin).
+
+Tutti file vengono salvati nella dir indicata in `output_dir` (default: directory corrente).
+
+Opzionalmente il file snippet può essere salvato in una directory differente (`snippet_path`) o si può decidere di non crearlo, 
+impostando il valore `snippet_name` a `null`.
+
+Nel file di configurazione è anche possibile impostare il parametro `webmanifest_extra`, che permette di aggiungere voci aggiuntive al file *manifest*.
+Per ulteriori info: <https://developer.mozilla.org/en-US/docs/Web/Manifest>
+
+File generati:
+
+```html
+<link rel="icon" href="/favicon.ico" sizes="any"> <!-- 32×32 + 16x16 -->
+<link rel="icon" href="/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- 180×180 -->
+<link rel="manifest" href="/manifest.webmanifest">
+```
+
+```javascript
+// manifest.webmanifest
+{
+  "icons": [
+    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
+    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
+  ]
+}
+```
+
+Vedi anche esempio in <https://github.com/massimo-cassandro/dev-utilities/tree/main/test/test/create-favicons-test>.

package/src/create-favicons.mjs

@@ -0,0 +1,201 @@
+/* eslint-disable no-console */
+
+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';
+
+
+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);
+    }
+
+
+    // 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);
+        });
+
+      })
+      .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/defaults.mjs

@@ -0,0 +1,90 @@
+export const defaults = {
+
+  // delimitazione porzione da copiare nel file init
+  /*** INIT START ***/
+
+  // tutti i percorsi sono relativi alla dir di lavoro
+
+  // immagine sorgente SVG o PNG 512x512
+  src_img: 'favicon-src.svg',
+
+  // sorgente opzionale per immagini piccole (32px)
+  small_src_img: null,
+
+  // directory output (percorso relativo alla dir di lavoro)
+  // se la dir non esiste, viene creata
+  output_dir: 'favicons-output',
+
+
+  // WEBMANIFEST
+  //****************************************************************************
+  // chiavi aggiuntive per webmanifest, normalmente non necessarie per il browser
+  // vedi https://developer.mozilla.org/en-US/docs/Web/Manifest
+  // esempio:
+  // webmanifest_extra: {
+  //   name: "my Application",
+  //   short_name: "my app",
+  //   background_color: "#ffffff",
+  //   theme_color: "#ffffff",
+  //   display: "fullscreen"
+  // }
+  webmanifest_extra: null,
+
+
+  // SNIPPET
+  //****************************************************************************
+
+  // nome del file snippet, compresa l'estensione
+  // se questo parametro è null e anche `snippet_target_file` lo è, lo snippet non viene generato
+  snippet_name: 'favicon.html',
+
+  // path (relativo a questo file) in cui salvare lo snippet
+  // se null, viene utilizzato lo stesso percorso indicato in `output_dir`
+  // se la dir non esiste, viene creata
+  snippet_path: null,
+
+  // path del file in cui scrivere le righe dello snippet
+  // questa impostazione è alternativa alle due precedenti e, se presente, queste
+  // ultime vengono ignorate.
+  // Per utilizzarla, le va assegnato il percorso del file (già esistente) nel quale
+  // scrivere le righe delle snippet.
+  // Il file deve contenere dei segnaposti per contrassegnare lo spazio entro il quale
+  // scrivere lo snippets
+  // <!-- favicon-snippet-start --><!-- favicon-snippet-end -->
+  snippet_target_file: null,
+
+  // linguaggio da utilizzare per la sintassi dello snippet html
+  // html o pug
+  snippet_language: 'html',
+
+  // template per la costruzione dello snippet.
+  // si tratta di una stringa (anche su più righe) in cui deve essere presente
+  // '%_link_tags_%', che verrà sostituito con i tag links dei vari file
+  snippet_template: '%_link_tags_%',
+
+  // template per la costruzione di ogni singolo attributo `href` dei tag link.
+  // deve contenere la stringa '%_file_name_%', che conterrà il nome del file,
+  // e la stringa '%_cache_buster_%' (se attivata)', che conterrà `?_=xxxx`, dove
+  // 'xxxx' rappresenta il timestamp generato per annullare la cache.
+  // Va scritto tenendo conto del linguaggio utilizzato.
+  href_template: '/%_file_name_%%_cache_buster_%',
+
+  // se true aggiunge allo snippet una query string per ovviare ad eventuali
+  // problemi di caching del browser
+  add_cache_buster: false,
+
+
+  // IMAGEMIN 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]
+
+
+  /*** INIT END ***/
+
+};

package/src/init-start.txt

@@ -0,0 +1,16 @@
+/*
+  File di configurazione per `create-favicons`.
+
+  I valori indicati sono quelli di default.
+  Per avviare la generazione delle favicon digitare
+
+  npx create-favicons
+
+  dalla directory che contiene questo file.
+
+  Creazione favicons (senza installare il package nel progetto):
+  npx --package=@massimo-cassandro/create-favicons create-favicons (dalla dir corrente)
+
+  Altre info: https://github.com/massimo-cassandro/create-favicons
+
+*/

package/src/init.mjs

@@ -0,0 +1,51 @@
+/* eslint-env node */
+
+import { URL } from 'url';
+import * as fs from 'fs';
+
+
+import { printFrame } from './print-frame.mjs';
+import { remove_homedir_string } from './remove-homedir-string.mjs';
+
+export function init() {
+  // const __filename = new URL('', import.meta.url).pathname;
+  // Will contain trailing slash
+  const src_dir = new URL('.', import.meta.url).pathname,
+    cfg_sample_file = process.cwd() + '/create-favicons-cfg.mjs';
+
+  if(fs.existsSync(cfg_sample_file)) {
+    throw `${cfg_sample_file} già presente`;
+  }
+
+
+  let default_params = fs.readFileSync(src_dir + './defaults.mjs', 'UTF8');
+
+  const start_string = '/*** INIT START ***/',
+    end_string = '/*** INIT END ***/',
+    init_start_text = fs.readFileSync(src_dir +'./init-start.txt', 'utf8');
+
+
+
+  default_params = default_params.substring(
+    default_params.indexOf(start_string) + start_string.length, //from
+    default_params.indexOf(end_string)
+  );
+
+  fs.writeFileSync(
+    cfg_sample_file,
+    init_start_text.trim() + '\n\n' +
+    'const params = [{\n' +
+    default_params +
+    '\n}];\n\n' +
+    'export default params;'
+  );
+
+  printFrame({
+    strings: [
+      {string: 'File di configurazione di generato:', color: 'green'},
+      {string: remove_homedir_string(cfg_sample_file), color: 'bgGreen'},
+    ],
+    frameColor: 'green',
+    frameType: 'double'
+  });
+}

package/src/print-frame.mjs

@@ -0,0 +1,51 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+
+export function printFrame(options) {
+
+  /*
+    stringsArray = [
+      {string: '__string__', color: 'green', bg: false, bold: false, underline: false},
+      {...}
+    ]
+  */
+
+  const defaults = {
+      strings: [],
+      frameColor: 'green',
+      frametype: 'single'
+    },
+    string_defaults = { string: '', color: 'green', bg: false, bold: false, underline: false},
+    frame_lines = {
+      single: ['┌', '┐', '└', '┘', '┈', '│'],
+      double: ['╔', '╗', '╚', '╝', '═', '║']
+    };
+
+  options = {...defaults, ...options};
+
+  const frames_elements = frame_lines[options.frametype];
+
+  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)) {
+      item.string = ` ${item.string} `;
+    }
+  });
+
+  const total_length = Math.max( ...(options.strings.map(item => item.string.length)) ) + 2;
+
+  console.log( chalk[options.frameColor]( `\n${frames_elements[0]}` + frames_elements[4].repeat(total_length) + frames_elements[1]) );
+
+  options.strings.forEach(item => {
+    console.log(
+      chalk[options.frameColor](`${frames_elements[5]} `) +
+      chalk[item.color](item.string)  + ' '.repeat(total_length - item.string.length - 2) +
+      chalk[options.frameColor](` ${frames_elements[5]}`)
+    );
+  });
+
+  console.log( chalk[options.frameColor]( frames_elements[2] + frames_elements[4].repeat(total_length) + `${frames_elements[3]}\n` ) );
+}

package/src/remove-homedir-string.mjs

@@ -0,0 +1,9 @@
+// rimuove la porzione homedir da un path e la sostituisce con '~'
+
+import {homedir} from 'os';
+
+export function remove_homedir_string(path) {
+  const homeDirRegex = new RegExp('^' + homedir());
+
+  return path.replace(homeDirRegex, '~');
+}