@massimo-cassandro/minimo 1.12.0 → 1.13.0

package/charts/src/node-helpers/create-svg-canvas-node.mjs

@@ -0,0 +1,37 @@
+/*
+  per utilizzo con applicazioni node, di default non utilizzato.
+  Dove necessario rimpiazza la funzione `createSvgCanvas` di default
+  Vedi ./demo/node-demo/index.mjs
+
+  {
+    utils: { createSvgCanvas: createSvgCanvasNode}
+    // ...
+  }
+
+*/
+
+import { createSVGWindow } from 'svgdom';
+import { SVG, registerWindow } from '@svgdotjs/svg.js';
+
+// "@svgdotjs/svg.js": "^3.2.4",
+//     "svgdom": "^0.1.21"
+
+
+// https://svgjs.dev/docs/3.2/getting-started/
+// https://github.com/svgdotjs/svgdom#readme
+
+
+export function createSvgCanvasNode() {
+
+  // returns a window with a document and an svg root node
+  const window = createSVGWindow();
+  const document = window.document;
+
+  // register window and document
+  registerWindow(window, document);
+
+  // create svgCanvas
+  const svgCanvas = SVG(document.documentElement);
+
+  return svgCanvas;
+}

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/init-start-text.txt

@@ -0,0 +1,20 @@
+/*
+  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.
+
+  (o `npx create-favicons  --dir=./path/to/config/dir` dalla root del progetto)
+
+  TUTTI I PERCORSI DALLA DIRECTORY CHE CONTIENE IL FILE DI CONFIGURAZIONE
+
+  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/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/dev-tools/webpack-setup/webpack-modules/mini-svg-data-uri-loader.cjs

@@ -0,0 +1,25 @@
+// ./loaders/mini-svg-data-uri-loader.cjs
+// Questo file USA la libreria 'mini-svg-data-uri', ma è un wrapper specifico per Webpack.
+
+/* eslint-env node */
+// Nota: require perché i Webpack Loaders sono tradizionalmente CommonJS,
+// e Node.js li gestisce correttamente con l'estensione .cjs.
+const svgToMiniDataURI = require('mini-svg-data-uri');
+
+/**
+ * Webpack Loader che prende una stringa SVG e la converte in un
+ * Data URI compatto usando la libreria mini-svg-data-uri.
+ * @param {string} source - Contenuto SVG (già ottimizzato da svgo-loader)
+ * @returns {string} Il Data URI SVG compatto (formato stringa)
+ */
+module.exports = function (source) {
+
+  // rimuove height e width nel svgo non fosse attivato
+  source = source.replace(/ width="\d+"/, '').replace(/ height="\d+"/, '');
+  
+  // Richiama la funzione per ottenere l'URI compatto
+  const dataUri = svgToMiniDataURI(source);
+
+  // Ritorna la stringa Data URI
+  return dataUri;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -55,11 +55,9 @@
     "design-tokens/tokens/**/*.{tokens.json,tokens.jsonc}",
     "design-tokens/_src/**/*.{tokens.json,tokens.jsonc,mjs,js,md}",
     "design-tokens/utilities/**/*.{mjs,md}",
-    "charts/**/*.{js,md}",
-    "dev-tools/**/*.{js,mjs,md,html}",
-    "dev-tools/webpack-setup/**/*.{js,mjs,md,sh,json,ejs}",
-    "dev-tools/webpack-setup/**/_*",
-    "snippets/**/*.{php,js,md,twig}"
+    "charts/**/*.{js,mjs,md}",
+    "dev-tools/**/*",
+    "snippets/**/*"
   ],
   "peerDependenciesMeta": {
     "@svgdotjs/svg.js": {
@@ -80,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"
   }
 }

package/snippets/build-chrome-custom-device-list.mjs

@@ -0,0 +1,101 @@
+/* eslint-disable no-console */
+/* eslint-env node */
+
+import fs from 'fs';
+
+const device_std_height = 700,
+
+  breakpoints = [
+    {title: 'moto g5',  w:  360, h: 512},
+
+    {title: 'bs5 xs max',  w:  575, h: device_std_height},
+    {title: 'bs5 sm min',  w:  576, h: device_std_height},
+    {title: 'bs5 sm max',  w:  767, h: device_std_height},
+    {title: 'bs5 md min',  w:  768, h: device_std_height},
+    {title: 'bs5 md max',  w:  991, h: device_std_height},
+    {title: 'bs5 lg min',  w:  992, h: device_std_height},
+    {title: 'bs5 lg max',  w: 1199, h: device_std_height},
+    {title: 'bs5 xl min',  w: 1200, h: device_std_height},
+    {title: 'bs5 xl max',  w: 1399, h: device_std_height},
+    {title: 'bs5 xxl min', w: 1400, h: device_std_height},
+
+
+    {title: 'schermo staff BV (1280x960)', w: 1280, h: 960},
+    {title: '1366x768', w: 1366, h: 768},
+    {title: '1280x720 (HD)', w: 1280, h: 720},
+    {title: '1920x1080 (full HD)', w: 1920, h: 1980},
+
+  ];
+
+let device_list = breakpoints.map((item, idx) => {
+
+  return {
+    'title': ('00' + String(idx+1)).slice(-2) + '. ' + item.title,
+    'type': 'unknown',
+    'user-agent': '',
+    'capabilities': [
+      'mobile'
+    ],
+    'screen': {
+      'device-pixel-ratio': 0,
+      'vertical': {
+        'width': item.w,
+        'height': item.h
+      },
+      'horizontal': {
+        'width': item.h,
+        'height': item.w
+      }
+    },
+    'modes': [
+      {
+        'title': '',
+        'orientation': 'vertical',
+        'insets': {
+          'left': 0,
+          'top': 0,
+          'right': 0,
+          'bottom': 0
+        }
+      },
+      {
+        'title': '',
+        'orientation': 'horizontal',
+        'insets': {
+          'left': 0,
+          'top': 0,
+          'right': 0,
+          'bottom': 0
+        }
+      }
+    ],
+    'show-by-default': true,
+    'dual-screen': false,
+    'show': 'Default',
+    'user-agent-metadata': {
+      'brands': [
+        {
+          'brand': '',
+          'version': ''
+        }
+      ],
+      'fullVersion': '',
+      'platform': '',
+      'platformVersion': '',
+      'architecture': '',
+      'model': '',
+      'mobile': true
+    }
+  };
+});
+
+
+const dest = 'ChromeCustomDeviceList.txt',
+  str = '"custom-emulated-device-list":"'+ JSON.stringify(device_list).replace(/"/g, '\\"') + '",';
+
+fs.writeFileSync(dest, str);
+
+console.log (
+  'copiare all\'interno del file `~/Library/Application Support/Google/Chrome/Default/Preferences` (NB: è un file JSON)\n'+
+  'vedi: https://stackoverflow.com/a/70905335/743443\n'
+);

package/snippets/config-templates/_env.local

@@ -0,0 +1,13 @@
+DATABASE_URL=mysql://root:mysql8root@127.0.0.1:3306/xxxx?serverVersion=8.0
+
+APP_ENV=dev
+APP_DEBUG=1
+
+### mailHog
+MAILER_DSN=smtp://localhost:1025
+
+### supporto webpack
+# cartella, dentro public, in cui webpack salva js, css immagini ecc
+ASSETS_DIR=_dev
+
+

package/snippets/config-templates/_github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm" # Indica che stiamo usando NPM
+    directory: "/"           # Dove si trova il package.json
+    schedule:
+      interval: "monthly"     # Può essere: daily, weekly, monthly
+    open-pull-requests-limit: 15 # Massimo 10 PR aperte contemporaneamente
+    labels:
+      - "dependencies"
+      - "javascript"

package/snippets/config-templates/_hintrc.cjs

@@ -0,0 +1,35 @@
+module.exports = {
+  "connector": {
+    "name": "local",
+    "options": {
+      "pattern": ["./build/**/*.html"] // Analizza i file HTML generati nella directory di build
+    }
+  },
+  "extends": [
+    "development", // Configurazione base per lo sviluppo
+    "accessibility", // Regole per l'accessibilità
+    "performance", // Regole per le prestazioni
+    "security", // Regole per la sicurezza
+    "html-checker" // Controllo della validità HTML
+  ],
+  "hints": {
+    "axe": "error", // Controlla l'accessibilità con axe-core
+    "content-type": "error", // Verifica i tipi di contenuto corretti
+    "disown-opener": "warning", // Consiglia di usare `rel="noopener"`
+    "http-cache": ["warning", { "maxAge": 31536000 }], // Suggerisce una cache HTTP ottimale
+    "image-optimization-cloudinary": "off", // Disattiva l'ottimizzazione delle immagini
+    "meta-viewport": "error", // Verifica la presenza del meta tag viewport
+    "no-vulnerable-javascript-libraries": "error", // Controlla librerie JS vulnerabili
+    "performance-budget": [
+      "warning",
+      {
+        "resourceTypes": {
+          "script": 250, // Limite di 250 KB per gli script
+          "image": 500 // Limite di 500 KB per le immagini
+        }
+      }
+    ],
+    "strict-transport-security": "error", // Suggerisce l'uso di HSTS
+    "validate-set-cookie-header": "error" // Controlla l'uso corretto dell'header Set-Cookie
+  }
+};

package/snippets/config-templates/_htaccess

@@ -0,0 +1,69 @@
+
+# no cache
+# <IfModule mod_headers.c>
+#   Header set Cache-Control "no-cache, no-store, must-revalidate"
+#   Header set Pragma "no-cache"
+#   Header set Expires 0
+# </IfModule>
+
+# blocco iframe
+# "deny" = tutti siti
+# "sameorigin" tutti tranne quelli che vengono dalla stessa origine
+# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
+Header set X-Frame-Options "sameorigin"
+
+
+<IfModule mod_expires.c>
+  ExpiresActive On
+  AddType application/vnd.ms-fontobject .eot
+  AddType application/x-font-ttf .ttf
+  AddType application/x-font-opentype .otf
+  AddType application/x-font-woff .woff
+  AddType application/x-font-woff2 .woff2
+  AddType application/font-sfnt otf ttf
+  AddType application/font-woff  woff
+  AddType application/font-woff2 woff2
+  AddType image/svg+xml .svg
+
+  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
+  ExpiresByType application/x-font-ttf "access plus 1 year"
+  ExpiresByType application/x-font-opentype "access plus 1 year"
+  ExpiresByType application/x-font-woff "access plus 1 year"
+  ExpiresByType application/x-font-woff2 "access plus 1 year"
+  ExpiresByType application/font-sfnt "access plus 1 year"
+  ExpiresByType application/font-woff "access plus 1 year"
+  ExpiresByType application/font-woff2 "access plus 1 year"
+
+  ExpiresByType text/html "access plus 1 hour"
+  ExpiresByType text/css "access plus 1 year"
+  ExpiresByType text/x-javascript "access plus 1 year"
+  ExpiresByType application/javascript "access plus 1 year"
+  ExpiresByType application/x-javascript "access plus 1 year"
+
+  ExpiresByType image/svg+xml "access plus 1 year"
+  ExpiresByType image/gif "access plus 1 year"
+  ExpiresByType image/png "access plus 1 year"
+  ExpiresByType image/jpeg "access plus 1 year"
+  ExpiresByType image/pjpeg "access plus 1 year"
+  ExpiresByType image/webp "access plus 1 year"
+  ExpiresByType image/avif "access plus 1 year"
+
+  ExpiresByType application/pdf "access plus 1 year"
+
+  ExpiresByType video/mp4 "access plus 1 year"
+  ExpiresByType video/webm "access plus 1 year"
+  ExpiresByType video/x-m4v "access plus 1 year"
+  ExpiresByType video/quicktime "access plus 1 year"
+  ExpiresByType audio/mpeg "access plus 1 year"
+  ExpiresByType audio/x-wav "access plus 1 year"
+
+  ExpiresByType image/x-icon "access plus 1 year"
+  ExpiresDefault "access plus 1 year"
+</IfModule>
+
+<IfModule !mod_expires.c>
+  <IfModule mod_headers.c>
+    # 1 year
+    Header set Cache-Control 'public, max-age 31536000'
+  </IfModule>
+</IfModule>

package/snippets/config-templates/_npmignore

@@ -0,0 +1,8 @@
+*~
+.codekit-cache/
+config.codekit3
+*.code-workspace
+.DS_Store*
+ehthumbs.db
+Icon?
+Thumbs.db

package/snippets/config-templates/_npmrc

@@ -0,0 +1 @@
+package-lock=false

package/snippets/config-templates/_stylelintignore

@@ -0,0 +1,5 @@
+
+/**/*.css
+/**/node_modules/**/*.css
+/**/node_modules/**/*.scss
+/**/node_modules/**/*.less

package/snippets/config-templates/babel.config--react.json

@@ -0,0 +1,20 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
+      ]
+    ],
+    "plugins": [],
+    "env": {
+      "production": {
+        "plugins": [
+          "transform-react-remove-prop-types"
+        ]
+      }
+    }
+  }
+

package/snippets/config-templates/babel.config--solidJS.json

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env", "babel-preset-solid"
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-jsx"
+  ]
+}

package/snippets/config-templates/react/offcanvas/offcanvas.jsx

@@ -0,0 +1,89 @@
+/**
+* Offcanvas
+*
+*
+*/
+
+
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styles from './offcanvas.module.scss';
+
+// https://react-icons.github.io/react-icons/icons/pi/
+import { PiXCircleBold } from 'react-icons/pi';
+
+
+function Offcanvas(props) {
+  const [isHiding, setIsHiding] = React.useState(false),
+    [isShowing, setIsShowing] = React.useState(props.show),
+    [content, setContent] = React.useState();
+
+  React.useEffect(() => {
+
+    // disable body scroll
+    document.body.classList.toggle('no-scroll', props.show);
+
+    if(props.show) {
+      setIsShowing(true);
+    }
+  }, [props.show]);
+
+  useEffect(() => {
+    setContent(
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={classnames(
+          styles.offcanvas,
+          props.className,
+          {
+            [styles.fullscreen]: props.fullscreen,
+            [styles.show]: props.show,
+            [styles.hiding]: isHiding,
+            [styles.showing]: isShowing
+          }
+        )}
+        tabIndex="-1"
+        onTransitionEnd={() => {setIsHiding(false); setIsShowing(false);}}
+      >
+        <div className={styles.offcanvasInner}>
+          <div className={styles.offcanvasHeader}>
+            <button
+              type="button"
+              className={styles.offcanvasClose}
+              aria-label="Close"
+              onClick={() => {
+                setIsHiding(true);
+                props.offcanvasShowHandler(props.handlerHideValue);
+              }}
+            ><PiXCircleBold /></button>
+          </div>
+          <div className={styles.offcanvasBody}>
+            {props.children}
+          </div>
+        </div>
+      </div>
+    );
+  }, [isHiding, isShowing, props]);
+
+  return (content);
+}
+
+// https://www.npmjs.com/package/prop-types
+
+Offcanvas.propTypes = {
+  className: PropTypes.string,
+  offcanvasShowHandler: PropTypes.func,
+  show: PropTypes.bool,
+  fullscreen: PropTypes.bool,
+  handlerHideValue: PropTypes.any
+
+};
+Offcanvas.defaultProps = {
+  show: false,
+  fullscreen: false,
+  handlerHideValue: false
+};
+
+export default Offcanvas;

package/snippets/config-templates/react/offcanvas/offcanvas.module.scss

@@ -0,0 +1,109 @@
+// da bs
+
+// @use '../scss/cfg/cfg-settings' as settings;
+// @use '../scss/cfg/grid-breakpoints' as breakpoints;
+// @use 'sass:map
+
+@use '../scss/mixins/media-mixins' as mediaMixins;
+@use '../scss/mixins/buttons-mixins' as buttonsMixins;
+// @use '../scss/cfg/status-mixins' as statusMixins;
+// @use '../scss/cfg/text-mixins' as textMixins;
+
+.offcanvas {
+  --offcanvas-padding-x: 1.4rem;
+  --offcanvas-padding-y: 2rem;
+
+  position: fixed;
+  inset: 0;
+  z-index: 1045;
+  display: block;
+  visibility: hidden;
+  background-color: var(--overlay-color);
+  backdrop-filter: blur(1px);
+
+  &.show, &.hiding, &.showing {
+    visibility: visible;
+  }
+
+}
+
+.offcanvasInner {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 18rem;
+  min-width: 280px;
+  max-width: 100dvw;
+  // height: 100%;
+  color: var(--text-color);
+  background-color: var(--body-bg-color);
+  background-clip: padding-box;
+  border-left: var(--text-color);
+  outline: 0;
+  box-shadow: var(--shadow-3);
+  // opacity: 0;
+  // transition: transform, opacity .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transform: translateX(100%);
+
+  .show & {
+    box-shadow: -.5rem 0 .5rem var(--text-color);
+    // opacity: 1;
+    transform: none;
+  }
+
+  .fullscreen & {
+    inset: 0;
+    width: auto;
+    border-left: none;
+  }
+  .fullscreen.show & {
+    box-shadow: none;
+  }
+
+  // @include mediaMixins.media-desktop-up() {}
+  @media screen and (min-width: __desktop_breakpoint__) {
+    .fullscreen & {
+      inset: 1.5rem;
+    }
+    .fullscreen.show & {
+      inset: 1.5rem;
+      box-shadow:
+        10px 10px 1rem var(--overlay),
+        -10px 10px 1rem var(--overlay),
+        10px -10px 1rem var(--overlay),
+        -10px -10px 1rem var(--overlay);
+
+    }
+
+  }
+
+}
+
+.offcanvasHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x) calc(var(--offcanvas-padding-y) / 2);
+}
+
+.offcanvasClose {
+  @include buttonsMixins.reset-button();
+  font-size: 2rem;
+  color: var(--bz-primary);
+}
+
+.offcanvasBody {
+  flex-grow: 1;
+  padding: 0 var(--offcanvas-padding-x) var(--offcanvas-padding-y);
+  overflow-y: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .offcanvas {
+    transition: none;
+  }
+}

package/snippets/config-templates/robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+# Disallow: /
+
+Sitemap: https://www.example.com/sitemap.xml

package/snippets/config-templates/rollup.config.mjs

@@ -0,0 +1,115 @@
+import terser  from '@rollup/plugin-terser';
+import fs from 'fs';
+import node_resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+
+// https://github.com/hyhappy/rollup-plugin-string-html
+// import htmlString from 'rollup-plugin-string-html';
+
+// https://github.com/exuanbo/rollup-plugin-minify-html-template-literals
+// https://github.com/asyncLiz/minify-html-literals
+// https://github.com/kangax/html-minifier#options-quick-reference
+// import minifyHTML from 'rollup-plugin-minify-html-template-literals';
+
+import p from '../package.json'; // assert { type: 'json' };
+
+const terserOptions = {
+    compress: {
+      passes: 2
+    }
+  },
+  anno = new Date().getFullYear(),
+  dirs = [
+    {source_dir: './front-end/js', output_dir: './AppBundle/Resources/public/js'}
+  ];
+
+let config = [];
+
+// lettura subdir apps e aggiunta a `dirs`
+fs.readdirSync('./front-end/apps').forEach(item => {
+  let stats = fs.statSync(`./front-end/apps/${item}`); // stats.isFile() / stats.isDirectory()
+  if(stats.isDirectory()) {
+    dirs.push({
+      source_dir: `./front-end/apps/${item}`,
+      output_dir: `./AppBundle/Resources/public/apps/${item}`
+    });
+  }
+});
+
+dirs.forEach(dir => {
+
+  fs.readdirSync(dir.source_dir)
+    .filter(f => /\.js$/.test(f))
+    .filter(f => /^[^_]/.test(f)) // ignore files starting with _
+    .forEach(file => {
+
+      let format = 'iife',
+        name = null;
+
+      if(/(-umd\.js)$/.test(file)) {
+        format = 'umd';
+        name = file.replace('-umd.js', '').replace(/-/g, '_');
+      }
+
+      config.push(
+        {
+          // preserveEntrySignatures: false,
+          input: `${dir.source_dir}/${file}`,
+          plugins: [
+            // deve essere il primo
+            // minifyHTML({
+            //   options: {
+            //     minifyOptions: {
+            //       html5: true,
+            //       collapseWhitespace: true,
+            //       collapseInlineTagWhitespace: true,
+            //       conservativeCollapse: true,
+            //       decodeEntities: true
+            //     },
+            //     shouldMinify: () => true
+            //   },
+            // }),
+            node_resolve(),
+            commonjs(),
+            terser(terserOptions),
+          ],
+          output: [{
+            file: `${dir.output_dir}/${file.replace('.js', '-min.js')}`,
+            format: format,
+            sourcemap: true,
+            name: name,
+            banner: `/*! xxxx v.${p.version} - Massimo Cassandro ${anno} */`,
+            // footer: `//! Released on ${new Date().toLocaleString('it-IT', { year: 'numeric',  month: 'short', day: '2-digit', hour12: false, hour:'2-digit', minute:'2-digit' })}`
+          }]
+        }
+      );
+
+    });
+});
+
+export default config;
+
+
+// versione statica
+
+// export default [
+//   {
+//     input: 'input.js',
+//     plugins: [
+//       node_resolve(),
+//       // commonjs(),
+//       terser({ compress: { passes: 2 } }),
+//     ],
+//     output: [
+//       {
+//         file: 'output.min.js',
+//         format: 'iife',
+//         sourcemap: true,
+
+//         banner: `/*! xxxx v.${p.version} - Massimo Cassandro ${anno} */`,
+//         // footer: `//! Released on ${new Date().toLocaleString('it-IT', { year: 'numeric',  month: 'short', day: '2-digit', hour12: false, hour:'2-digit', minute:'2-digit' })}`
+//       }
+//     ]
+//   },
+//   ...
+// ];