@massimo-cassandro/minimo 1.39.2 → 1.40.1

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

@@ -15,7 +15,7 @@ export const default_params = {
 
   // directory output (percorso relativo alla dir di lavoro)
   // se la dir non esiste, viene creata
-  output_dir: './output',
+  output_dir: './output', // symfony -> '../../public',
 
 
   // WEBMANIFEST
@@ -43,12 +43,12 @@ export const default_params = {
   // 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: 'favicons.html',
+  snippet_name: 'favicons.html', // symfony -> 'favicons.incl.html.twig',
 
   // 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,
+  snippet_path: null, // symfony -> '../../templates/_incl',
 
   // path del file in cui scrivere le righe dello snippet
   // questa impostazione è alternativa alle due precedenti e, se presente, queste
@@ -62,7 +62,7 @@ export const default_params = {
 
   // linguaggio da utilizzare per la sintassi dello snippet html
   // html, pug, ejs
-  snippet_language: 'ejs',
+  snippet_language: 'ejs', // symfony: 'html',
 
   // template per la costruzione dello snippet.
   // si tratta di una stringa (anche su più righe) in cui deve essere presente
@@ -78,7 +78,7 @@ export const default_params = {
 
   // se true aggiunge allo snippet una query string per ovviare ad eventuali
   // problemi di caching del browser
-  add_cache_buster: false,
+  add_cache_buster: false, // symfony: true,
 
   //****************************************************************************
 

package/dev-tools/design-tokens-builder/tokens-config-sample.mjs

@@ -114,7 +114,7 @@ const config = {
     // your project tokens — e.g. remaps a Figma/Penpot-exported `primary`
     // color to minimo's own `primary.100` naming
     {
-      src: './project-tokens/*.{js,mjs,jsonc,json}',
+      src: './design-tokens/*.{js,mjs,jsonc,json}',
       prefix: 'my-project',
       transform: { primary: 'primary.100' },
     }

package/dev-tools/find-orphan-css-classes/find-orphan-css-classes.mjs

@@ -0,0 +1,451 @@
+#!/usr/bin/env node
+
+
+/*
+ * find-orphan-css-classes.mjs
+ *
+ * Analizza i file sorgente (html, js, php, ecc.) ed elenca le classi CSS
+ * utilizzate che non sono definite nei file CSS indicati.
+ * Per i file js/jsx controlla anche le classi dei CSS modules
+ * (styles.xxx, ${styles.xxx}, styles['xxx']), verificandole rispetto al
+ * file .module.css importato.
+ *
+ * Nessuna dipendenza esterna, richiede Node >= 18.
+ *
+ * Il report viene scritto nel file `orphan-classes.md`, nella stessa directory
+ * del file di configurazione, con link cliccabili alle occorrenze. Se non ci
+ * sono classi mancanti il file viene eliminato.
+ *
+ * Uso:
+ *   node find-orphan-css-classes.mjs --config orphan-css-classes.config.mjs
+ *   node find-orphan-css-classes.mjs -c orphan-css-classes.config.mjs --json
+ *
+ * Opzioni:
+ *   -c, --config   file di configurazione JavaScript (.mjs consigliato, con export default)
+ *       --json     output JSON su stdout (nessun file scritto)
+ *   -h, --help     mostra questo messaggio
+ *
+ * Configurazione (i percorsi relativi sono risolti rispetto alla directory
+ * del file di configurazione):
+ *   src        (obbligatorio) file o directory da analizzare
+ *   css        (obbligatorio) file o directory contenenti i CSS
+ *   ext        estensioni dei sorgenti
+ *   cssExt     estensioni dei file CSS
+ *   excludeDir nomi di directory da saltare (default: node_modules, .git, dist, vendor)
+ *   excludeCssFiles  percorsi di file CSS (o CSS modules) da non considerare
+ *              nel confronto (default: [])
+ *   ignore     espressioni regolari (RegExp o stringhe) di classi da ignorare
+ *   cssModules {
+ *     enabled   attiva il controllo dei CSS modules (default: true)
+ *     ext       estensioni dei sorgenti in cui cercare i CSS modules (default: js, jsx)
+ *     pattern   espressione regolare (RegExp o stringa) che identifica i file module
+ *     camelCase se true, styles.myClass corrisponde anche a .my-class
+ *   }
+ *
+ * Codice di uscita: 0 = nessuna classe mancante, 1 = trovate classi mancanti,
+ * 2 = errore di configurazione.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { parseArgs } from 'node:util';
+
+const DEFAULTS = {
+  ext: ['html', 'htm', 'js', 'mjs', 'jsx', 'ts', 'tsx', 'php', 'vue', 'twig'],
+  cssExt: ['css'],
+  excludeDir: ['node_modules', '.git', 'dist', 'vendor'],
+  excludeCssFiles: [],
+  ignore: [],
+  cssModules: {
+    enabled: true,
+    ext: ['js', 'jsx'],
+    pattern: '\\.module\\.(css|scss|sass|less)$',
+    camelCase: false
+  }
+};
+
+const REPORT_FILE = 'orphan-classes.md';
+
+const DYN = '\u0000'; /* segnaposto per le parti dinamiche (PHP, template literal, ecc.) */
+
+/* classe CSS in un selettore: .nome, con eventuali caratteri di escape */
+const CSS_CLASS_RE = /\.(-?(?:[_a-zA-Z]|\\.)(?:[\w-]|\\.)*)/g;
+
+/* class="..." / className='...' / class: `...` */
+const CLASS_ATTR_RE = /\b(?:class|className)\s*[=:]\s*(["'`])((?:(?!\1)[\s\S])*?)\1/g;
+
+/* el.classList.add('a', 'b') ecc. */
+const CLASSLIST_RE = /\.classList\.(?:add|remove|toggle|contains|replace)\(([^)]*)\)/g;
+const STRING_RE = /(["'`])((?:(?!\1).)*?)\1/g;
+
+/* querySelector('.a .b'), closest('.a'), matches('.a') */
+const SELECTOR_RE = /\b(querySelectorAll|querySelector|closest|matches)\(\s*(["'`])((?:(?!\2).)*?)\2/g;
+
+/* getElementsByClassName('a b') */
+const BY_CLASS_RE = /\bgetElementsByClassName\(\s*(["'`])((?:(?!\1).)*?)\1/g;
+
+/*
+ * Import di un CSS module:
+ *   import styles from './x.module.css'
+ *   import * as styles from './x.module.css'
+ *   import styles, { foo } from './x.module.css'
+ *   const styles = require('./x.module.css')
+ */
+const IMPORT_RE = /\bimport\s+(?:\*\s+as\s+)?([A-Za-z_$][\w$]*)\s*(?:,\s*\{[^}]*\})?\s*from\s*(["'])([^"']+)\2/g;
+const REQUIRE_RE = /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*require\(\s*(["'])([^"']+)\2\s*\)/g;
+
+/* ---------- utilità ---------- */
+
+function unescapeCss(name) {
+  return name.replace(/\\(.)/g, '$1');
+}
+
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function camelize(s) {
+  return s.replace(/[-_]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''));
+}
+
+function maskDynamic(value) {
+  return value
+    .replace(/<\?[\s\S]*?\?>/g, DYN)
+    .replace(/\{\{[\s\S]*?\}\}/g, DYN)
+    .replace(/\{%[\s\S]*?%\}/g, DYN)
+    .replace(/\$\{[^}]*\}/g, DYN);
+}
+
+/*
+ * Divide un valore di attributo in singole classi.
+ * I token che contengono parti dinamiche (es. "btn-<?= $x ?>") vengono
+ * scartati, perché il nome reale della classe non è noto.
+ */
+function splitTokens(value) {
+  return maskDynamic(value)
+    .split(/\s+/)
+    .filter(t => t && !t.includes(DYN) && !/[<>"'`]/.test(t));
+}
+
+function normalizeExt(list) {
+  return new Set(list.map(e => e.replace(/^\./, '').toLowerCase()));
+}
+
+function collectFiles(entries, extensions, exclude) {
+  const out = new Set();
+
+  const visit = (p, explicit) => {
+    let stat;
+    try {
+      stat = fs.statSync(p);
+    } catch {
+      console.error(`Percorso non trovato: ${p}`);
+      return;
+    }
+
+    if (stat.isDirectory()) {
+      for (const entry of fs.readdirSync(p, { withFileTypes: true })) {
+        if (exclude.has(entry.name)) continue;
+        visit(path.join(p, entry.name), false);
+      }
+    } else if (explicit || extensions.has(path.extname(p).slice(1).toLowerCase())) {
+      out.add(path.resolve(p));
+    }
+  };
+
+  entries.forEach(p => visit(p, true));
+  return [...out];
+}
+
+function buildLineIndex(text) {
+  const idx = [0];
+  for (let i = 0; i < text.length; i++) {
+    if (text.charCodeAt(i) === 10) idx.push(i + 1);
+  }
+  return idx;
+}
+
+function lineAt(idx, pos) {
+  let lo = 0;
+  let hi = idx.length - 1;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (idx[mid] <= pos) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo + 1;
+}
+
+/* ---------- configurazione ---------- */
+
+async function loadConfig(configPath) {
+  const abs = path.resolve(configPath);
+  const mod = await import(pathToFileURL(abs).href);
+  const raw = mod.default ?? mod;
+
+  for (const key of ['src', 'css']) {
+    if (!Array.isArray(raw[key]) || !raw[key].length) {
+      throw new Error(`Nel file di configurazione manca la lista "${key}"`);
+    }
+  }
+
+  const baseDir = path.dirname(abs);
+  const toAbs = list => list.map(p => path.resolve(baseDir, p));
+  const modules = { ...DEFAULTS.cssModules, ...(raw.cssModules ?? {}) };
+
+  return {
+    src: toAbs(raw.src),
+    css: toAbs(raw.css),
+    ext: normalizeExt(raw.ext ?? DEFAULTS.ext),
+    cssExt: normalizeExt(raw.cssExt ?? DEFAULTS.cssExt),
+    excludeDir: new Set(raw.excludeDir ?? DEFAULTS.excludeDir),
+    excludeCssFiles: new Set(toAbs(raw.excludeCssFiles ?? DEFAULTS.excludeCssFiles)),
+    baseDir,
+    ignore: (raw.ignore ?? DEFAULTS.ignore).map(s => new RegExp(s)),
+    cssModules: {
+      enabled: Boolean(modules.enabled),
+      ext: normalizeExt(modules.ext),
+      pattern: new RegExp(modules.pattern),
+      camelCase: Boolean(modules.camelCase)
+    }
+  };
+}
+
+/* ---------- estrazione classi dai CSS ---------- */
+
+function extractCssClasses(css) {
+  const clean = css
+    .replace(/\/\*[\s\S]*?\*\//g, '') /* commenti */
+    .replace(/"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'/g, '""') /* stringhe */
+    .replace(/url\([^)]*\)/gi, 'url()');
+
+  const classes = new Set();
+  const preludeRe = /([^{}]+)\{/g; /* testo che precede ogni "{" */
+  let m;
+
+  while ((m = preludeRe.exec(clean))) {
+    /* con il CSS nesting il testo può includere dichiarazioni precedenti */
+    const prelude = m[1].slice(m[1].lastIndexOf(';') + 1).trim();
+    if (!prelude || prelude.startsWith('@')) continue; /* at-rule: @media, @font-face, ecc. */
+
+    for (const c of prelude.matchAll(CSS_CLASS_RE)) {
+      classes.add(unescapeCss(c[1]));
+    }
+  }
+
+  return classes;
+}
+
+/* ---------- estrazione classi dai sorgenti ---------- */
+
+function* extractUsages(text) {
+  for (const m of text.matchAll(CLASS_ATTR_RE)) {
+    for (const cls of splitTokens(m[2])) yield { cls, index: m.index };
+  }
+
+  for (const m of text.matchAll(CLASSLIST_RE)) {
+    for (const lit of m[1].matchAll(STRING_RE)) {
+      for (const cls of splitTokens(lit[2])) yield { cls, index: m.index };
+    }
+  }
+
+  for (const m of text.matchAll(BY_CLASS_RE)) {
+    for (const cls of splitTokens(m[2])) yield { cls, index: m.index };
+  }
+
+  for (const m of text.matchAll(SELECTOR_RE)) {
+    const selector = maskDynamic(m[3]);
+    for (const c of selector.matchAll(CSS_CLASS_RE)) {
+      /* se la classe è seguita da una parte dinamica il nome è incompleto */
+      if (selector[c.index + c[0].length] === DYN) continue;
+      yield { cls: unescapeCss(c[1]), index: m.index };
+    }
+  }
+}
+
+/*
+ * Classi dei CSS modules: individua le variabili a cui è assegnato un file
+ * module (qualunque nome, non solo "styles") e cerca nome.xxx / nome['xxx'].
+ * Il caso ${styles.xxx} è coperto da nome.xxx.
+ * "module" è il percorso assoluto del file importato, o null se non risolvibile
+ * (es. alias di webpack).
+ */
+function* extractModuleUsages(text, file, pattern) {
+  const bindings = new Map();
+
+  for (const re of [IMPORT_RE, REQUIRE_RE]) {
+    for (const m of text.matchAll(re)) {
+      const name = m[1];
+      const spec = m[3];
+      if (!pattern.test(spec)) continue;
+
+      let resolved = null;
+      if (spec.startsWith('.')) {
+        const candidate = path.resolve(path.dirname(file), spec);
+        if (fs.existsSync(candidate)) resolved = candidate;
+      }
+      bindings.set(name, resolved);
+    }
+  }
+
+  for (const [name, resolved] of bindings) {
+    const id = escapeRegExp(name);
+    const dotRe = new RegExp(`(?<![\\w$.])${id}\\.([A-Za-z_$][\\w$]*)`, 'g');
+    const bracketRe = new RegExp(`(?<![\\w$.])${id}\\[\\s*(["'])([^"']+)\\1\\s*\\]`, 'g');
+
+    for (const m of text.matchAll(dotRe)) {
+      yield { cls: m[1], index: m.index, isModule: true, module: resolved };
+    }
+    for (const m of text.matchAll(bracketRe)) {
+      yield { cls: m[2], index: m.index, isModule: true, module: resolved };
+    }
+  }
+}
+
+/* ---------- main ---------- */
+
+const { values } = parseArgs({
+  options: {
+    config: { type: 'string', short: 'c' },
+    json: { type: 'boolean', default: false },
+    help: { type: 'boolean', short: 'h', default: false }
+  }
+});
+
+if (values.help) {
+  const header = fs.readFileSync(new URL(import.meta.url), 'utf8').match(/\/\*[\s\S]*?\*\//)[0];
+  console.log(header);
+  process.exit(0);
+}
+
+if (!values.config) {
+  console.error('Specificare il file di configurazione con --config <file> (usare --help per i dettagli).');
+  process.exit(2);
+}
+
+let cfg;
+try {
+  cfg = await loadConfig(values.config);
+} catch (err) {
+  console.error(`Errore nel file di configurazione: ${err.message}`);
+  process.exit(2);
+}
+
+const camel = cfg.cssModules.camelCase;
+
+/* con camelCase attivo ogni classe è disponibile anche in forma camelCase */
+function withCamel(set) {
+  if (camel) for (const c of [...set]) set.add(camelize(c));
+  return set;
+}
+
+const allCssFiles = collectFiles(cfg.css, cfg.cssExt, cfg.excludeDir);
+const cssFiles = allCssFiles.filter(f => !cfg.excludeCssFiles.has(f));
+const srcFiles = collectFiles(cfg.src, cfg.ext, cfg.excludeDir).filter(f => !allCssFiles.includes(f));
+
+if (!cssFiles.length) {
+  console.error('Nessun file CSS trovato.');
+  process.exit(2);
+}
+
+/*
+ * I file module presenti nella lista CSS non contribuiscono alle classi
+ * "globali" (sono raggiungibili solo tramite import), ma servono come
+ * riferimento di riserva quando l'import non è risolvibile.
+ */
+const globalClasses = new Set();
+const allModuleClasses = new Set();
+const moduleCache = new Map();
+
+function getModuleClasses(file) {
+  if (!moduleCache.has(file)) {
+    moduleCache.set(file, withCamel(extractCssClasses(fs.readFileSync(file, 'utf8'))));
+  }
+  return moduleCache.get(file);
+}
+
+for (const file of cssFiles) {
+  if (cfg.cssModules.enabled && cfg.cssModules.pattern.test(file)) {
+    for (const cls of getModuleClasses(file)) allModuleClasses.add(cls);
+  } else {
+    for (const cls of extractCssClasses(fs.readFileSync(file, 'utf8'))) globalClasses.add(cls);
+  }
+}
+
+const fallbackClasses = new Set([...globalClasses, ...allModuleClasses]);
+
+function isDefined(usage) {
+  /* usages of an excluded CSS module are not checked */
+  if (usage.module && cfg.excludeCssFiles.has(usage.module)) return true;
+  if (!usage.isModule) return globalClasses.has(usage.cls);
+  const set = usage.module ? getModuleClasses(usage.module) : fallbackClasses;
+  return set.has(usage.cls);
+}
+
+const missing = new Map(); /* classe -> [{ file, line, module? }] */
+
+for (const file of srcFiles) {
+  const text = fs.readFileSync(file, 'utf8');
+  const lineIndex = buildLineIndex(text);
+  const rel = path.relative(cfg.baseDir, file);
+  const ext = path.extname(file).slice(1).toLowerCase();
+
+  const usages = [...extractUsages(text)];
+  if (cfg.cssModules.enabled && cfg.cssModules.ext.has(ext)) {
+    usages.push(...extractModuleUsages(text, file, cfg.cssModules.pattern));
+  }
+
+  for (const usage of usages) {
+    if (isDefined(usage) || cfg.ignore.some(re => re.test(usage.cls))) continue;
+
+    const entry = { file: rel, line: lineAt(lineIndex, usage.index) };
+    if (usage.isModule) {
+      entry.module = usage.module ? path.relative(cfg.baseDir, usage.module) : 'non risolto';
+    }
+
+    const list = missing.get(usage.cls) ?? [];
+    if (!list.some(e => e.file === entry.file && e.line === entry.line && e.module === entry.module)) {
+      list.push(entry);
+    }
+    missing.set(usage.cls, list);
+  }
+}
+
+const sorted = [...missing.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+
+if (values.json) {
+  console.log(JSON.stringify({
+    cssFiles: cssFiles.length,
+    sourceFiles: srcFiles.length,
+    definedClasses: globalClasses.size,
+    missing: Object.fromEntries(sorted)
+  }, null, 2));
+} else {
+  const reportPath = path.resolve(cfg.baseDir, REPORT_FILE);
+
+  if (sorted.length) {
+    /* flat list sorted by file and line, with a clickable link to each occurrence */
+    const items = sorted
+      .flatMap(([cls, locations]) => locations.map(loc => ({ cls, ...loc })))
+      .sort((a, b) => a.file.localeCompare(b.file) || a.line - b.line);
+
+    const lines = items.map(({ cls, file, line, module }) => {
+      const href = `${file.split(path.sep).map(encodeURIComponent).join('/')}#L${line}`;
+      return `* [${path.basename(file)}:${line}](${href}) -> \`.${cls}\``
+        + (module ? ` (CSS module: ${module})` : '');
+    });
+
+    fs.writeFileSync(reportPath, `## Missing CSS classes\n\n${lines.join('\n')}\n`, 'utf-8');
+  } else if (fs.existsSync(reportPath)) {
+    fs.unlinkSync(reportPath);
+  }
+
+  console.log(
+    `File CSS: ${cssFiles.length} (${globalClasses.size} classi globali) | File analizzati: ${srcFiles.length}\n`
+    + `Classi mancanti: ${sorted.length}`
+    + (sorted.length ? ` -> ${path.relative(process.cwd(), reportPath)}` : '')
+  );
+}
+
+process.exit(sorted.length ? 1 : 0);

package/dev-tools/find-orphan-css-classes/orphan-css-classes.config.mjs

@@ -0,0 +1,44 @@
+/*
+ * Configurazione per find-prphan-css-classes.mjs
+ * I percorsi relativi sono risolti rispetto alla directory di questo file.
+ *
+ * Config Da Copiare Nella Root Del Progetto
+ */
+
+const minimo_path = '../../node_modules/@massimo-cassandro/minimo';
+
+export default {
+  /* file o directory da analizzare */
+  src: ['../src', '../../templates'],
+
+  /* file o directory contenenti i CSS */
+  css: ['./', '../src', `${minimo_path}/src`],
+
+  /* estensioni dei sorgenti */
+  ext: ['html', 'js', 'jsx', 'php'],
+
+  /* estensioni dei file CSS */
+  cssExt: ['css'],
+
+  /* directory da saltare */
+  excludeDir: [/* 'node_modules',  */'.git', 'dist', 'vendor'],
+
+  /* file CSS (o CSS modules) da non considerare nel confronto (default: []) */
+  excludeCssFiles: [],
+
+  /* classi da ignorare (RegExp o stringhe) */
+  ignore: [/^js-/, /^is-/],
+
+  cssModules: {
+    enabled: true,
+
+    /* sorgenti in cui cercare l'uso dei CSS modules */
+    ext: ['js', 'jsx'],
+
+    /* file considerati CSS modules */
+    pattern: /\.module\.css$/,
+
+    /* se true, styles.myClass corrisponde anche a .my-class */
+    camelCase: false
+  }
+};

package/dev-tools/starter-kit/source_files/app/css/fonts.css

@@ -3,5 +3,5 @@
 
 */
 
-@import '@fontsource-variable/rubik/wght.css';
-@import '@fontsource-variable/rubik/wght-italic.css';
+/* @import '@fontsource-variable/rubik/wght.css';
+@import '@fontsource-variable/rubik/wght-italic.css'; */

package/dev-tools/starter-kit/source_files/root/__project__.code-workspace

@@ -41,6 +41,10 @@
       {
         "filePath": "node_modules/open-props/open-props.style-dictionary-tokens.json",
         "group": "Default"
+      },
+      {
+        "filePath": "node_modules/@massimo-cassandro/minimo/src/css",
+        "group": "Default"
       }
     ],
 

package/dev-tools/starter-kit/source_files/root/_editorconfig

@@ -11,7 +11,16 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+# [*.yaml]
+# indent_size = 4
+
+# [*.php]
+# indent_size = 4
+
+# [{compose.yaml,compose.*.yaml}]
+# indent_size = 2
+
 [*.md]
-max_line_length = off
+max_line_length = 80
 trim_trailing_whitespace = false
 

package/dev-tools/starter-kit/source_files/root/_gitignore

@@ -22,3 +22,4 @@ node_modules
 _private
 public/_dev
 unresolved-unused-props.md
+orphan-classes.md

package/dev-tools/starter-kit/source_files/root/_sf/controller/UnsplashController.php

@@ -22,7 +22,8 @@ class UnsplashController extends AbstractController
       $orientation = 'landscape';
     }
 
-    $unsplash_access_key = 'xxxxxxx';
+    $unsplash_access_key = 'xxxxxxx'; // vedi minimo/_private/unsplash-access-keys.md
+
     $collections_ids = '3660951'; // comma separated list
     $count = null;
 

package/dev-tools/starter-kit/source_files/root/_sf/symfony-webpack-setup.md

@@ -34,7 +34,7 @@ twig:
     file_name_pattern: '*.twig'
 
     form_themes:
-        - '_tpl/incl/bs5-form-layout.html.twig'
+        - '_incl/minimo-form-layout.html.twig'
     paths:
         '%kernel.project_dir%/public/%env(ASSETS_DIR)%': assets_path
         '%kernel.project_dir%/public': public_path

package/dev-tools/starter-kit/source_files/root/_sf/templates/_main-tpl.html.twig

@@ -4,17 +4,22 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>{%- block title -%}{%- endblock %} | Marketing</title>
+    <title>{%- block title -%}{%- endblock %} | xxxxx</title>
     <meta name="robots" content="noindex, nofollow, noarchive">
     {%- include '_incl/favicons.incl.html.twig'-%}
+
+    <link rel="preload" href="{{ asset('fonts/xxxxx.woff2') }}" as="font" type="font/woff2" crossorigin>
+
     {{- '' -}}
+    {#- shared.js, runtime.js e shared.css servono solo con `useSharedChunk: true` in webpack.config.mjs:
+        con `false` rimuovere tutte le righe che li referenziano (qui sotto e a fine body) -#}
     <link rel="preload" href="{{ asset('index.js') }}" as="script">
     <link rel="preload" href="{{ asset('shared.js') }}" as="script">
     <link rel="preload" href="{{ asset('runtime.js') }}" as="script">
     {{- '' -}}
     <link rel="preload" href="{{ asset('shared.css') }}" as="style">
     <link rel="preload" href="{{ asset('index.css') }}" as="style">
-    {# shared.css va linkato PRIMA del css della entry (ordine della cascata) #}
+    {# shared.css va inserito PRIMA del css della entry (ordine della cascata) #}
     <link rel="stylesheet" href="{{ asset('shared.css') }}" type="text/css" media="all">
     <link rel="stylesheet" href="{{ asset('index.css') }}" type="text/css" media="all">
     <style>
@@ -24,6 +29,8 @@
   </head>
   <body>
 
+    {%- block body -%}{%- endblock -%}
+
     <script src="{{ asset('runtime.js') }}"></script>
     <script src="{{ asset('shared.js') }}"></script>
     <script src="{{ asset('index.js') }}"></script>

package/dev-tools/starter-kit/source_files/root/_sf/templates/bundles/TwigBundle/Exception/error.html.twig

@@ -1,6 +1,6 @@
 {#- https://symfony.com/doc/current/controller/error_pages.html#testing-error-pages-during-development -#}
 <!DOCTYPE html>
-<html lang="it" data-err-code="{{ status_code }}" data-err-text="{{ status_text}}">
+<html lang="it" class="uspg" data-err-code="{{ status_code }}" data-err-text="{{ status_text}}">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -8,6 +8,10 @@
   <title>Errore {{ status_code }}</title>
   <meta name="robots" content="noindex, nofollow, noarchive">
   {%- include '_incl/favicons.incl.html.twig'-%}
+  {#- shared.css, shared.js e runtime.js servono solo con `useSharedChunk: true` in webpack.config.mjs:
+      con `false` rimuovere tutte le righe che li referenziano -#}
+  <link rel="preload" href="{{ asset('shared.css') }}" as="style">
+  <link rel="stylesheet" href="{{ asset('shared.css') }}" media="all">
   <link rel="preload" href="{{ asset('index.css') }}" as="style">
   <link rel="stylesheet" href="{{ asset('index.css') }}" media="all">
   <link rel="preload" href="{{ asset('error-pages.css') }}" as="style">

package/dev-tools/starter-kit/source_files/root/_sf/templates/home.html.twig

@@ -0,0 +1,17 @@
+{% extends '_main-tpl.html.twig' %}
+
+{% block title %}xxxx{% endblock %}
+{% block head %}
+
+<link rel="preload" href="{{ asset('__page__.css') }}" as="style">
+<link rel="stylesheet" href="{{ asset('__page__.css') }}" media="all">
+<link rel="preload" href="{{ asset('__page__.js') }}" as="script">
+{% endblock %}
+{% block js %}
+<script src="{{ asset('__page__.js') }}"></script>
+{% endblock %}
+
+{% block body %}
+  home
+  <div id="root"><div class="spinner"></div></div>
+{% endblock %}