@massimo-cassandro/minimo 1.12.1 → 1.13.0

package/dev-tools/create-favicons/README.md

@@ -2,7 +2,7 @@
 
 Create favicon files as described in [How to Favicon in 2024](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs).
 
-The files to be processed must be in SVG format, while the generated files are in SVG (favicon), PNG (apple-touch-icon and other Android files), and ICO (another favicon for compatibility with older browsers). The `manifest.webmanifest` files are also generated, along with an optional HTML snippet with `link` tags for inserting the generated elements.
+The source file can be SVG or a raster format (PNG, JPEG, WEBP, GIF, TIFF, AVIF). The generated files are PNG (apple-touch-icon and other Android files) and ICO (another favicon for compatibility with older browsers); an SVG favicon is also generated, but only when the source file itself is SVG (a vector favicon can't be derived from a raster source). The `manifest.webmanifest` files are also generated, along with an optional HTML snippet with `link` tags for inserting the generated elements (the snippet omits the SVG `link` tag when no SVG favicon was generated).
 
 Images are generated with [Sharp](https://sharp.pixelplumbing.com/), [SVGO](https://github.com/svg/svgo), and [sharp-ico](https://github.com/ssnangua/sharp-ico).
 
@@ -34,7 +34,7 @@ If it's missing, it searches for the `favicon-src.svg` file to use as the source
 
 Among others, you can specify the `small_src_img` parameter if you need to specify an image optimized for small dimensions (32px).
 
-The best format for source files is SVG, or alternatively PNG.
+The best format for source files is SVG, or alternatively PNG/JPEG/WEBP/GIF/TIFF/AVIF.
 
 If both files are missing, an error is returned.
 

package/dev-tools/create-favicons/src/create-favicons.mjs

@@ -18,13 +18,21 @@ export async function createFavicons(params) {
 
     log('green', 'Creating favicons...');
 
-    await Promise.all([
-      await createSvg(params),
-      await createPng(params),
-      await createIco(params),
-      await createWebmanifest(params), // after create png
-      await createSnippet(params),
-    ])
+    // createWebmanifest legge i png generati da createPng per calcolarne l'hash:
+    // deve quindi essere eseguito solo a scrittura completata
+    await createPng(params);
+
+    const tasks = [
+      createIco(params),
+      createWebmanifest(params),
+      createSnippet(params),
+    ];
+
+    if (params.generate_svg_favicon) {
+      tasks.push(createSvg(params));
+    }
+
+    await Promise.all(tasks)
       .then(result => {
         printResult(params);
 

package/dev-tools/create-favicons/src/create-png.mjs

@@ -9,7 +9,7 @@ export async function createPng(params) {
     ['icon-192.png', 192],
     ['icon-512.png', 512]
   ].map(file => {
-    sharp(params.src_img)
+    return sharp(params.src_img)
       .resize({ width: file[1], fit: 'inside' })
       .png(params.png_parameters)
       .toFile(`${params.output_dir}/${file[0]}`)

package/dev-tools/create-favicons/src/create-snippet.mjs

@@ -10,7 +10,7 @@ export async function createSnippet(params) {
     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' +
+        (params.generate_svg_favicon? '<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"/>';
 
@@ -24,7 +24,7 @@ export async function createSnippet(params) {
 
 
       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` +
+        (params.generate_svg_favicon? `<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')}"/>`;
 
@@ -42,7 +42,7 @@ export async function createSnippet(params) {
         const targetFileContent = fs.readFileSync(params.snippet_target_file, 'utf8'),
           regexp = /<!-- ?favicon-snippet-start ?-->(.*?)<!-- ?favicon-snippet-end ?-->/mis;
 
-        fs.promises.writeFile(params.snippet_target_file,
+        await fs.promises.writeFile(params.snippet_target_file,
           targetFileContent.replace(regexp,
             `<!-- favicon-snippet-start -->\n${snippet_content}\n<!-- favicon-snippet-end -->`
           )
@@ -54,7 +54,7 @@ export async function createSnippet(params) {
 
     } else {
 
-      fs.promises.writeFile(
+      await fs.promises.writeFile(
         `${params.snippet_path}/${params.snippet_name}`,
         snippet_content
       );

package/dev-tools/create-favicons/src/create-svg.mjs

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

package/dev-tools/create-favicons/src/create-webmanifest.mjs

@@ -1,7 +1,7 @@
 // web manifest
 
-// import * as fs from 'fs/promises';
 import * as fs from 'fs';
+import * as fsPromises from 'fs/promises';
 import { createHash } from 'node:crypto'
 
 
@@ -50,15 +50,9 @@ export async function createWebmanifest(params) {
     ...(params.webmanifest_extra?? {})
   };
 
-  // await fs.writeFile(`${params.output_dir}/manifest.webmanifest`, JSON.stringify(manifest, null, ' '));
-
-  await fs.writeFile(
+  await fsPromises.writeFile(
     `${params.output_dir}/${params.manifest_file_name}`,
-    JSON.stringify(manifest, null, ' '),
-    (err) => {
-      if (err) {throw err}
-      // console.log('The file has been saved!');
-    }
+    JSON.stringify(manifest, null, ' ')
   );
 
 }

package/dev-tools/create-favicons/src/default-params.mjs

@@ -5,10 +5,12 @@ export const default_params = {
 
   // tutti i percorsi sono relativi alla dir di lavoro
 
-  // immagine sorgente SVG o PNG 512x512
+  // immagine sorgente, min. 512x512
+  // formati accettati: svg, png, jpg/jpeg, webp, gif, tiff/tif, avif
+  // il file favicon.svg viene generato solo se la sorgente utilizzata è in formato svg
   src_img: 'favicon-src.svg',
 
-  // sorgente opzionale per immagini piccole (32px)
+  // sorgente opzionale per immagini piccole (32px), stessi formati di src_img
   small_src_img: null,
 
   // directory output (percorso relativo alla dir di lavoro)

package/dev-tools/create-favicons/src/parse-params.mjs

@@ -2,6 +2,15 @@ import { default_params } from './default-params.mjs';
 import * as path from 'path';
 import * as fs from 'fs';
 
+// formati accettati per le immagini sorgente (src_img / small_src_img)
+// vettoriale: svg
+// raster (letti tramite Sharp): png, jpg/jpeg, webp, gif, tiff/tif, avif
+const supported_img_ext = ['svg', 'png', 'jpg', 'jpeg', 'webp', 'gif', 'tiff', 'tif', 'avif'];
+
+function getImgExt(img_path) {
+  return path.extname(img_path).toLowerCase().replace(/^\./, '');
+}
+
 export function parseParams(config_params = null, work_dir = process.cwd()) {
 
   try {
@@ -31,6 +40,22 @@ export function parseParams(config_params = null, work_dir = process.cwd()) {
       params[item] = params[item]? path.resolve(params.work_dir, params[item]) : null
     );
 
+    // validazione formato immagini sorgente
+    [params.src_img, params.small_src_img].filter(Boolean).forEach(img_path => {
+      const ext = getImgExt(img_path);
+      if (!supported_img_ext.includes(ext)) {
+        throw new Error(
+          `Formato immagine non supportato: '${img_path}'. ` +
+          `Formati accettati: ${supported_img_ext.join(', ')}`
+        );
+      }
+    });
+
+    // il file favicon.svg viene generato solo se l'immagine sorgente utilizzata
+    // per le versioni piccole (small_src_img, o src_img in sua assenza) è già SVG:
+    // da un raster non è possibile ricavare una favicon vettoriale
+    params.generate_svg_favicon = getImgExt(params.small_src_img?? params.src_img) === 'svg';
+
     // creazione dir output se non esiste
     if (!fs.existsSync(params.output_dir)){
       fs.mkdirSync(params.output_dir);
@@ -56,6 +81,7 @@ export function parseParams(config_params = null, work_dir = process.cwd()) {
 
   } catch(e) {
     console.error( e ); // eslint-disable-line
+    process.exit(1);
   }
 
 }

package/dev-tools/create-favicons/src/print-result.mjs

@@ -21,7 +21,7 @@ export function printResult(params) {
   [
     'apple-touch-icon.png',
     'favicon.ico',
-    'favicon.svg',
+    ...(params.generate_svg_favicon? ['favicon.svg'] : []),
     'icon-192.png',
     'icon-512.png',
     params.manifest_file_name

package/dev-tools/webpack-setup/templates/jsconfig.json

@@ -1,22 +1,21 @@
 {
   "__help": "https://code.visualstudio.com/docs/languages/jsconfig",
   "compilerOptions": {
-    "checkJs": true,
-    "target": "ES2023",
-    "module": "ESNext",
+    "ignoreDeprecations": "6.0",
     "baseUrl": ".",
     "allowSyntheticDefaultImports": false,
+
+    "target": "es2023",
+    "module": "ES6",
     "paths": {
-      "@frontend/*": ["./frontend/*"],
-      "@src/*": ["frontend/src/*"],
+      "@css/*": ["./frontend/src/css/*"],
+      "@src/*": ["./frontend/src/*"],
+      "@icons/*": ["./frontend/icons/*"],
       "@imgs/*": ["./frontend/imgs/*"],
-      "@icone/*": ["./frontend/icone/*"],
-      "@backoffice/*": ["./frontend/backoffice/*"],
-      "@minimo/*": ["./node_modules/@massimo-cassandro/minimo/src/*"]
+      "@frontend/*": ["./frontend/*"],
+      "@minimo/*": ["./node_modules/@massimo-cassandro/minimo/src/*"],
+      "@minimoCharts/*": ["./node_modules/@massimo-cassandro/minimo/charts/*"]
     }
-
-
-
   },
   "exclude": ["node_modules", "dist", "docs", "build", "public"]
 }

package/dev-tools/webpack-setup/templates/package-tpl.json

@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "progetto JS webpack DEV": "npm 'launchChrome' && NODE_ENV=development webpack serve --config ./webpack.config.mjs #--open-app-name 'Google Chrome'",
-    "progettop sf webpack DEV": "rm -rf ./public/_dev && NODE_ENV=development webpack --config ./frontend/webpack.config.mjs",
+    "progetto sf webpack DEV": "rm -rf ./public/_dev && NODE_ENV=development webpack --config ./frontend/webpack.config.mjs",
     "webpack PROD": "NODE_ENV=production webpack --config ./webpack.config.mjs --stats minimal",
     "create-favicons INIT": "npx create-favicons init",
     "create-favicons": "npx create-favicons --dir=./src/favicons",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -78,6 +78,7 @@
     "@inquirer/select": "^5.2.1",
     "clipboardy": "^5.3.1",
     "sharp": "^0.35.3",
-    "sharp-ico": "^0.1.5"
+    "sharp-ico": "^0.1.5",
+    "svgo": "^4.0.2"
   }
-}
+}