@massimo-cassandro/minimo 1.41.3 → 1.41.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -12
- package/charts/src/node-helpers/create-svg-canvas-node.mjs +2 -2
- package/charts/src/node-helpers/svg-text-to-path.js +9 -9
- package/charts/src/rating-display/index.js +1 -1
- package/charts/src/rating-display/ratindDisplayAnimation.js +3 -3
- package/design-tokens/README.md +2 -2
- package/design-tokens/_src/_readme.md +26 -26
- package/dev-tools/README.md +16 -16
- package/dev-tools/create-favicons/README.md +31 -31
- package/dev-tools/create-favicons/src/create-ico.mjs +2 -2
- package/dev-tools/create-favicons/src/default-params.mjs +1 -1
- package/dev-tools/create-favicons/src/init.mjs +1 -1
- package/dev-tools/design-tokens-builder/README.md +102 -102
- package/dev-tools/design-tokens-builder/build-tokens-src/build-source-modes.mjs +85 -73
- package/dev-tools/design-tokens-builder/build-tokens-src/config.mjs +109 -85
- package/dev-tools/design-tokens-builder/build-tokens-src/formats/css.mjs +113 -90
- package/dev-tools/design-tokens-builder/build-tokens-src/formats/json.mjs +107 -95
- package/dev-tools/design-tokens-builder/build-tokens-src/legacy-tokens-parser.mjs +71 -64
- package/dev-tools/design-tokens-builder/build-tokens-src/light-dark.mjs +75 -65
- package/dev-tools/design-tokens-builder/build-tokens-src/merge-css.mjs +113 -102
- package/dev-tools/design-tokens-builder/build-tokens-src/platforms.mjs +36 -30
- package/dev-tools/design-tokens-builder/build-tokens-src/resolve-source-paths.mjs +15 -13
- package/dev-tools/design-tokens-builder/build-tokens-src/source-prefixes.mjs +44 -42
- package/dev-tools/design-tokens-builder/build-tokens-src/source-transforms.mjs +89 -83
- package/dev-tools/design-tokens-builder/build-tokens-src/token-rename-parser.mjs +99 -86
- package/dev-tools/design-tokens-builder/build-tokens-src/transforms.mjs +64 -48
- package/dev-tools/design-tokens-builder/build-tokens.mjs +80 -68
- package/dev-tools/design-tokens-builder/check-unresolved-custom-props.mjs +103 -77
- package/dev-tools/design-tokens-builder/tokens-config-sample.mjs +275 -238
- package/dev-tools/find-orphan-css-classes/find-orphan-css-classes.mjs +2 -2
- package/dev-tools/starter-kit/source_files/app/CLAUDE.md +4 -2
- package/dev-tools/starter-kit/source_files/app/index.css +10 -0
- package/dev-tools/starter-kit/source_files/app/index.js +1 -1
- package/dev-tools/starter-kit/source_files/root/_sf/controller/ImgViewerController.php +3 -3
- package/dev-tools/starter-kit/source_files/root/_sf/controller/ViewerController.php +2 -2
- package/dev-tools/starter-kit/source_files/root/stylelint.config.mjs +1 -1
- package/dev-tools/starter-kit/source_files/root/webpack-config-modules/css-rules.mjs +1 -1
- package/dev-tools/starter-kit/starter-install.sh +2 -2
- package/dev-tools/stylelint-config/README.md +7 -7
- package/dev-tools/svg-icons-tools/README.md +32 -32
- package/dev-tools/svg-icons-tools/src/config-manager.mjs +1 -1
- package/dev-tools/svg-icons-tools/src/default-config.mjs +118 -118
- package/dev-tools/svg-icons-tools/src/jsx-icon-file-builder.mjs +24 -24
- package/dev-tools/svg-icons-tools/src/parse-svg-filename.mjs +3 -3
- package/dev-tools/svg-icons-tools/src/parse-svg-files.mjs +1 -1
- package/dev-tools/svg-icons-tools/src/parse-svg-markup.mjs +4 -4
- package/dev-tools/svg-icons-tools/src/svg-to-jsx.mjs +2 -2
- package/dev-tools/svg-icons-tools/src/svg-to-optimized.mjs +2 -2
- package/dev-tools/svg-icons-tools/src/svg-to-symbols.mjs +2 -2
- package/dev-tools/upd@m/README.md +1 -1
- package/dev-tools/upd@m/index.mjs +1 -1
- package/dev-tools/update-version/README.md +9 -9
- package/index.js +1 -0
- package/package.json +3 -1
- package/snippets/unsplash-browser-app/README.md +1 -1
- package/snippets/unsplash-browser-app/unsplash-utilities.js +9 -9
- package/src/components/autocomplete/README.md +3 -3
- package/src/components/autocomplete/autocomplete-engine.js +75 -63
- package/src/components/autocomplete/check-autocomplete.js +3 -3
- package/src/components/dismiss-alerts.js +3 -3
- package/src/components/form-reset-submit.js +6 -6
- package/src/components/inner-nav/inner-nav.js +2 -2
- package/src/components/modal-alert/modal-alert.js +67 -65
- package/src/components/modal-alert/modal-alert.minimo.tokens.mjs +1 -1
- package/src/components/modal-popup/modal-popup.js +56 -56
- package/src/components/overlay/overlay.js +3 -3
- package/src/components/sf-macro/readme.md +1 -1
- package/src/components/sf-macro/sf-macro.js +27 -23
- package/src/components/slide-up-down-toggle/slide-up-down-toggle.js +83 -79
- package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css +44 -44
- package/src/components/snackbar/snackbar.js +19 -19
- package/src/components/spinner/spinner.js +3 -3
- package/src/components/unsplash-page/README.md +8 -8
- package/src/components/unsplash-page/fetch-unsplash-data.js +3 -3
- package/src/components/unsplash-page/unsplash-page.js +33 -33
- package/src/components/unsplash-page/unsplash-page.module.css +1 -1
- package/src/css/alerts.css +2 -2
- package/src/css/forms/forms.css +4 -4
- package/src/css/forms/validation.css +1 -1
- package/src/css/margin-padding-media.css +4 -4
- package/src/css/margin-padding.css +4 -4
- package/src/css/reset.css +11 -11
- package/src/icons/read-me.md +1 -1
- package/src/minimo.css +3 -9
- package/src/utilities/better-text-with-places.js +105 -105
- package/src/utilities/better-text.js +42 -35
- package/src/utilities/classnames.js +8 -8
- package/src/utilities/cookies.js +6 -6
- package/src/utilities/create-id.js +3 -3
- package/src/utilities/disable-btns-on-submit.js +2 -2
- package/src/utilities/dom-builder/dom-builder.js +89 -86
- package/src/utilities/dom-builder/domBuilderBasicSetup.js +9 -9
- package/src/utilities/dom-builder/parseDomString.js +23 -23
- package/src/utilities/dom-builder-helpers/README.md +2 -2
- package/src/utilities/dom-builder-helpers/form-tags.js +100 -100
- package/src/utilities/dom-builder-helpers/picture-tag.js +39 -39
- package/src/utilities/enable-submit-btns.js +1 -1
- package/src/utilities/escape-html.js +2 -2
- package/src/utilities/generate-pwd.js +4 -4
- package/src/utilities/linked-dates.js +13 -13
- package/src/utilities/parse-file-size.js +6 -6
- package/src/utilities/random-id.js +3 -3
- package/src/utilities/relative-date.js +40 -40
- package/src/utilities/sentence-case.js +1 -1
- package/src/utilities/strip-tags.js +1 -1
- package/src/utilities/title-case.js +1 -1
- package/src/utilities/truncate-string.js +5 -5
- package/src/utilities/validation-error-class.js +12 -12
- package/src/web-components/json-table/json-table-component.js +123 -121
- package/src/web-components/json-table/json-table-component.module.css +6 -6
- package/src/web-components/json-table/json-table.minimo.tokens.mjs +6 -6
- package/src/web-components/json-table/readme.md +76 -110
- package/src/web-components/json-table/src/cell-content.js +25 -25
- package/src/web-components/json-table/src/content-utils.js +21 -21
- package/src/web-components/json-table/src/data-types.js +32 -32
- package/src/web-components/json-table/src/defaults.js +230 -191
- package/src/web-components/json-table/src/get-data.js +55 -38
- package/src/web-components/json-table/src/icons.js +17 -17
- package/src/web-components/json-table/src/info-section.js +18 -18
- package/src/web-components/json-table/src/main-builder.js +45 -45
- package/src/web-components/json-table/src/pagination.js +32 -32
- package/src/web-components/json-table/src/parse-cols.js +18 -18
- package/src/web-components/json-table/src/parse-rows.js +17 -17
- package/src/web-components/json-table/src/resolve-params.js +53 -41
- package/src/web-components/json-table/src/search.js +13 -13
- package/src/web-components/json-table/src/sorting.js +20 -20
- package/src/web-components/json-table/src/table-body.js +13 -13
- package/src/web-components/json-table/src/table-builder.js +34 -34
- package/src/web-components/json-table/src/table-tfoot.js +8 -8
- package/src/web-components/json-table/src/table-thead.js +21 -21
- package/src/web-components/json-table/src/update-info.js +11 -11
- package/types/classes.d.ts +2 -2
- package/types/global.d.ts +18 -12
package/README.md
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
# Minimo
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Il mio framework leggero + utilità
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installazione
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm i @massimo-cassandro/minimo
|
|
9
9
|
|
|
10
|
-
#
|
|
10
|
+
# opzionale:
|
|
11
11
|
npm i -D @massimo-cassandro/eslint-config
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
>
|
|
14
|
+
> Nota: una configurazione stylelint è inclusa in minimo (non serve un'installazione separata) — vedi [dev-tools/stylelint-config/README.md](dev-tools/stylelint-config/README.md).
|
|
15
15
|
|
|
16
|
-
>
|
|
16
|
+
> Nota: **minimo** è pensato per essere usato con webpack, con la configurazione disponibile nella [cartella starter-kit](./dev-tools/starter-kit/) di questo repository. Se vengono apportate modifiche (ad esempio al modo in cui vengono importati i file SVG), il funzionamento potrebbe non essere quello atteso.
|
|
17
17
|
>
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
Per installare tutti i moduli webpack necessari, usare lo script `./dev-tools/starter-kit/starter-install.sh`, eseguendo:
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
22
|
zsh ./node_modules/@massimo-cassandro/minimo/dev-tools/starter-kit/starter-install.sh
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
Per avviare un progetto **prima** di installare l'intero pacchetto, scaricare solo la cartella `starter-kit` dal tarball npm ed eseguire lo script da lì:
|
|
26
26
|
|
|
27
27
|
```bash
|
|
28
28
|
curl -sL "$(npm view @massimo-cassandro/minimo dist.tarball)" | tar xz package/dev-tools/starter-kit
|
|
@@ -34,16 +34,16 @@ rm -rf package
|
|
|
34
34
|
|
|
35
35
|
## Design tokens
|
|
36
36
|
|
|
37
|
-
Minimo
|
|
37
|
+
Minimo include un insieme di design token e alcune utilità per gestirli. Vedi il [readme dei Design Tokens](design-tokens/README.md).
|
|
38
38
|
|
|
39
39
|
## Dev Tools
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
La cartella [`dev-tools`](./dev-tools/README.md) contiene un insieme di utilità CLI Node.js indipendenti per la gestione di un progetto web: aggiornamento delle dipendenze, incremento della versione e del changelog, generazione e ottimizzazione di icone SVG e favicon. Sono pubblicate insieme al pacchetto `minimo` ed esposte tramite le voci `bin` di `package.json` (`update-version`, `upd@m`, `svgIconsTools`, `create-favicons`); vedi il [README di Dev Tools](./dev-tools/README.md) per l'elenco completo e le istruzioni d'uso.
|
|
42
42
|
|
|
43
43
|
|
|
44
|
-
##
|
|
44
|
+
## Documentazione e demo
|
|
45
45
|
|
|
46
|
-
[
|
|
46
|
+
[Documentazione](docs/README.md)
|
|
47
47
|
|
|
48
|
-
[Demo](https://massimo-cassandro.github.io/minimo/) (in
|
|
48
|
+
[Demo](https://massimo-cassandro.github.io/minimo/) (in lavorazione)
|
|
49
49
|
|
|
@@ -23,11 +23,11 @@ import { SVG, registerWindow } from '@svgdotjs/svg.js';
|
|
|
23
23
|
|
|
24
24
|
export function createSvgCanvasNode() {
|
|
25
25
|
|
|
26
|
-
//
|
|
26
|
+
// restituisce una window con un document e un nodo radice svg
|
|
27
27
|
const window = createSVGWindow();
|
|
28
28
|
const document = window.document;
|
|
29
29
|
|
|
30
|
-
//
|
|
30
|
+
// registra window e document
|
|
31
31
|
registerWindow(window, document);
|
|
32
32
|
|
|
33
33
|
// create svgCanvas
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
// https://stackblitz.com/edit/vitejs-vite-acphht?file=main.js
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
|
-
//
|
|
4
|
+
// Esempio di utilizzo:
|
|
5
5
|
const fontUrl = './Rubik Moonrocks.ttf';
|
|
6
6
|
const text = 'Hello, World!';
|
|
7
|
-
const fontSize = 16; // in
|
|
7
|
+
const fontSize = 16; // in punti
|
|
8
8
|
textToSvgPath(fontUrl, text, fontSize)
|
|
9
9
|
.then(({ svgPathData, svg }) => {
|
|
10
|
-
//console.log(svgPathData); //
|
|
11
|
-
console.log(svg); // SVG
|
|
10
|
+
//console.log(svgPathData); // stringa con i dati del path SVG
|
|
11
|
+
console.log(svg); // elemento SVG come stringa
|
|
12
12
|
})
|
|
13
13
|
.catch((err) => console.error(err));
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
|
-
//
|
|
16
|
+
// Funzione che carica il font e converte il testo in path SVG
|
|
17
17
|
// vedi ada-frontend/ada-charts/test/textToPath-test.mjs
|
|
18
18
|
|
|
19
19
|
export async function textToSvgPath(fontUrl, text, fontSize) {
|
|
@@ -21,17 +21,17 @@ export async function textToSvgPath(fontUrl, text, fontSize) {
|
|
|
21
21
|
const opentype = (await import(/* webpackIgnore: true */ 'opentype.js')).default;
|
|
22
22
|
const font = await opentype.load(fontUrl);
|
|
23
23
|
|
|
24
|
-
//
|
|
24
|
+
// Coordinate x e y da cui inizia il testo
|
|
25
25
|
const x = 0;
|
|
26
26
|
const y = 50;
|
|
27
27
|
|
|
28
|
-
//
|
|
28
|
+
// Ottiene il path che rappresenta il testo
|
|
29
29
|
const path = font.getPath(String(text), x, y, fontSize);
|
|
30
30
|
|
|
31
|
-
//
|
|
31
|
+
// Converte il path in una stringa di dati path SVG
|
|
32
32
|
const pathData = path.toPathData();
|
|
33
33
|
|
|
34
|
-
//
|
|
34
|
+
// In alternativa, converte il path in un elemento SVG
|
|
35
35
|
const pathElementString = path.toSVG();
|
|
36
36
|
|
|
37
37
|
return { pathData, pathElementString };
|
|
@@ -123,7 +123,7 @@ export async function ratingDisplay({
|
|
|
123
123
|
displayLabelRowGap = 2,
|
|
124
124
|
|
|
125
125
|
/**
|
|
126
|
-
* @param {Object[]|null} [miniDisplay=null] - Configurazione mini display secondari (max 2).
|
|
126
|
+
* @param {Object[]|null} [miniDisplay=null] - Configurazione mini display secondari (max 2). Array di uno o due oggetti (default: null)
|
|
127
127
|
* @param {string} miniDisplay[].position - Posizione: 'sx' | 'dx' (alias: 'left' | 'right').
|
|
128
128
|
* @param {number} miniDisplay[].value - Valore numerico da rappresentare.
|
|
129
129
|
* @param {string} miniDisplay[].type - Tipo di visualizzazione: 'gauge' (tachimetro) o 'value' (testo di `value`).
|
|
@@ -21,11 +21,11 @@ export function ratindDisplayAnimation() {
|
|
|
21
21
|
// request another frame
|
|
22
22
|
const animationRequest = window.requestAnimationFrame(step);
|
|
23
23
|
|
|
24
|
-
//
|
|
24
|
+
// se è trascorso abbastanza tempo, disegna il frame successivo
|
|
25
25
|
if (elapsed >= fpsInterval) {
|
|
26
26
|
|
|
27
|
-
//
|
|
28
|
-
//
|
|
27
|
+
// Prepara il frame successivo impostando startTimestamp=now, ma...
|
|
28
|
+
// regola anche il valore perché fpsInterval non è multiplo di 16.67
|
|
29
29
|
startTimestamp = now - (elapsed % fpsInterval);
|
|
30
30
|
|
|
31
31
|
svgElement.style.setProperty(
|
package/design-tokens/README.md
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
<!-- TODO intro -->
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Uso dei design token
|
|
6
6
|
|
|
7
7
|
<!-- TODO modalità d'uso (da tokens penpots o figma, con o snza merge css ecc...) -->
|
|
8
8
|
|
|
9
9
|
## Design Tokens Builder
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Gli script Node.js che generano le custom properties CSS / i file JSON dei token a partire dai sorgenti di questa directory (`build-tokens.mjs`, `check-unresolved-custom-props.mjs`, esposti come bin `buildTokens` / `checkUnresolvedProps`) si trovano in [dev-tools/design-tokens-builder](../dev-tools/design-tokens-builder/README.md), insieme alle altre utilità CLI standalone di dev-tools.
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
|
|
2
|
-
# SD
|
|
2
|
+
# Tipi SD
|
|
3
3
|
|
|
4
|
-
* **
|
|
5
|
-
*
|
|
6
|
-
* **
|
|
7
|
-
*
|
|
8
|
-
* **
|
|
9
|
-
*
|
|
10
|
-
* **
|
|
11
|
-
*
|
|
12
|
-
* **
|
|
13
|
-
* Array
|
|
14
|
-
* **Font
|
|
15
|
-
*
|
|
16
|
-
* **
|
|
17
|
-
*
|
|
4
|
+
* **Colore** (`$type` value: `color`)
|
|
5
|
+
* Colori in Hex, RGB, HSL o nomi standard. ("#00ff00" or "rgba(0,0,0,0.5)" )
|
|
6
|
+
* **Dimensione** (`dimension`)
|
|
7
|
+
* Misure con unità (px, rem, em, %, ecc.). ("16px", "1.5rem", "50%" )
|
|
8
|
+
* **Numero** (`number`)
|
|
9
|
+
* Valori numerici puri senza unità (es. opacità). (0.75, 1.2, 100 )
|
|
10
|
+
* **Durata** (`duration`)
|
|
11
|
+
* Intervalli di tempo per animazioni e transizioni. ("200ms", "0.5s" )
|
|
12
|
+
* **Curva temporale** (`cubicBezier`)
|
|
13
|
+
* Array di 4 numeri per le curve di easing. ([0.42, 0, 0.58, 1] )
|
|
14
|
+
* **Font family** (`fontFamily`)
|
|
15
|
+
* Nome della font family o elenco (array). ("Inter", ["Helvetica", "Arial"] )
|
|
16
|
+
* **Peso del font** (`fontWeight`)
|
|
17
|
+
* Peso del font (numero o alias testuale). (700, "bold", "light" )
|
|
18
18
|
|
|
19
|
-
##
|
|
19
|
+
## composti:
|
|
20
20
|
|
|
21
|
-
* **
|
|
22
|
-
*
|
|
23
|
-
* **
|
|
24
|
-
*
|
|
25
|
-
* **
|
|
26
|
-
*
|
|
27
|
-
* **
|
|
28
|
-
*
|
|
29
|
-
* **
|
|
30
|
-
*
|
|
21
|
+
* **bordo** (`border`)
|
|
22
|
+
* Composto: richiede color, width, style. ({"color": "#000", "width": "1px", "style": "solid"} )
|
|
23
|
+
* **Ombra** (`shadow`)
|
|
24
|
+
* Composto: color, offsetX, offsetY, blur, spread, inset. ({"color": "#0003", "offsetX": "0px", "offsetY": "4px", "blur": "10px"} )
|
|
25
|
+
* **Tipografia** (`typography`)
|
|
26
|
+
* Composto: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing. ({"fontFamily": "Inter", "fontSize": "16px", "fontWeight": 400} )
|
|
27
|
+
* **Gradiente** (`gradient`)
|
|
28
|
+
* Composto: array di "stops" (colore e posizione). ([{"color": "#000", "offset": 0}, {"color": "#fff", "offset": 1}] )
|
|
29
|
+
* **Stile del tratto** (`strokeStyle`)
|
|
30
|
+
* Composto: definisce i pattern delle linee (tratteggi). ({"dashArray": ["4px", "2px"], "lineCap": "round"} )
|
package/dev-tools/README.md
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
# Dev tools
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Raccolta di utilità CLI Node.js standalone che aiutano nelle attività quotidiane di gestione di un progetto web (aggiornamento delle dipendenze, versionamento/changelog, generazione di icone e favicon). Ogni strumento risiede in una propria sottocartella, funziona in modo indipendente dagli altri e dal pacchetto `minimo`, ed è documentato nel proprio README — questa pagina ne dà solo una panoramica.
|
|
4
4
|
|
|
5
|
-
* [update-version](./update-version/README.md) —
|
|
6
|
-
* [Svg Icons Tools](./svg-icons-tools/README.md) —
|
|
7
|
-
* [Create favicons](./create-favicons/README.md) —
|
|
8
|
-
* [upd@m](./upd@m/README.md) —
|
|
9
|
-
* [Design Tokens Builder](./design-tokens-builder/README.md) —
|
|
10
|
-
* [starter-kit](#starter-kit) — script
|
|
5
|
+
* [update-version](./update-version/README.md) — incrementa la versione in `package.json` e aggiunge una voce a `changelog.md`
|
|
6
|
+
* [Svg Icons Tools](./svg-icons-tools/README.md) — ottimizza le icone SVG e le combina/converte in symbol, JSX o variabili SCSS
|
|
7
|
+
* [Create favicons](./create-favicons/README.md) — genera il set completo di favicon (SVG, PNG, ICO, webmanifest, snippet HTML) a partire da un'immagine sorgente
|
|
8
|
+
* [upd@m](./upd@m/README.md) — aggiorna tutti i pacchetti `@massimo-cassandro/*` installati in `node_modules`
|
|
9
|
+
* [Design Tokens Builder](./design-tokens-builder/README.md) — genera un file di custom properties CSS (e, opzionalmente, file JSON di token) a partire dai sorgenti dei design token
|
|
10
|
+
* [starter-kit](#starter-kit) — script per installare l'ambiente minimo
|
|
11
11
|
|
|
12
12
|
## starter-kit
|
|
13
13
|
|
|
14
|
-
`starter-kit/starter-install.sh`
|
|
14
|
+
`starter-kit/starter-install.sh` avvia un nuovo progetto frontend: copia i file di configurazione starter (`package.json`, `.gitignore`, `jsconfig.json`, configurazioni eslint/stylelint, configurazione e moduli webpack, ...) nella root del progetto e i file frontend (template webpack, `CLAUDE.md`, `_root_htaccess`/`_root_robots.txt`, ...) in una cartella `./app` fissa, quindi installa tutte le dipendenze di sviluppo necessarie.
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
Lo script **richiede zsh** (termina con un errore se lanciato con `sh` o `bash`). I file esistenti non vengono mai sovrascritti: vengono copiati accanto con il prefisso `NEW-` (da integrare manualmente o da rimuovere). Se la cartella `./app` esiste già, l'intero set di file frontend viene copiato in `./NEW-app`.
|
|
17
17
|
|
|
18
|
-
###
|
|
18
|
+
### Se minimo è già installato
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
Lo script è esposto come `bin` del pacchetto:
|
|
21
21
|
|
|
22
22
|
```bash
|
|
23
23
|
npx starter-kit
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
Poiché l'installazione non sovrascrive mai nulla, lo script può essere anche **rieseguito in qualsiasi momento per aggiornare** una configurazione esistente (ad es. per aggiornare i moduli webpack o reinstallare le dipendenze di sviluppo): i file esistenti vengono copiati con il prefisso `NEW-`, quindi rieseguire lo script non duplica né sovrascrive mai nulla.
|
|
27
27
|
|
|
28
|
-
###
|
|
28
|
+
### Senza installare minimo
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
Per avviare un progetto **prima** di installare l'intero pacchetto, scaricare solo la cartella `starter-kit` dal tarball npm ed eseguire lo script da lì:
|
|
31
31
|
|
|
32
32
|
```bash
|
|
33
33
|
curl -sL "$(npm view @massimo-cassandro/minimo dist.tarball)" | tar xz package/dev-tools/starter-kit
|
|
@@ -35,7 +35,7 @@ zsh package/dev-tools/starter-kit/starter-install.sh
|
|
|
35
35
|
rm -rf package
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
-
## SVG
|
|
38
|
+
## Strumenti per SVG e favicon
|
|
39
39
|
|
|
40
40
|
```bash
|
|
41
41
|
## SVG Icons Tools
|
|
@@ -46,7 +46,7 @@ npx create-favicons init
|
|
|
46
46
|
npx create-favicons [--dir=./path/to/dir]
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
-
##
|
|
49
|
+
## Aggiungere gli strumenti più usati alla sezione scripts di `package.json`:
|
|
50
50
|
|
|
51
51
|
```json
|
|
52
52
|
{
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
# Create favicons
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Crea i file favicon come descritto in [How to Favicon in 2024](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Il file sorgente può essere SVG o un formato raster (PNG, JPEG, WEBP, GIF, TIFF, AVIF). I file generati sono PNG (apple-touch-icon e altri file Android) e ICO (un'altra favicon per la compatibilità con i browser più vecchi); viene generata anche una favicon SVG, ma solo quando il file sorgente è a sua volta SVG (da una sorgente raster non si può ricavare una favicon vettoriale). Vengono generati anche i file `manifest.webmanifest`, insieme a uno snippet HTML opzionale con i tag `link` per inserire gli elementi generati (lo snippet omette il tag `link` SVG quando non è stata generata alcuna favicon SVG).
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Le immagini vengono generate con [Sharp](https://sharp.pixelplumbing.com/), [SVGO](https://github.com/svg/svgo), and [sharp-ico](https://github.com/ssnangua/sharp-ico).
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Installazione
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
12
|
npm i -D @massimo-cassandro/create-favicons
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Creazione dei file di configurazione di esempio (vedi sotto)
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
18
|
npx create-favicons init
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## Utilizzo
|
|
22
22
|
|
|
23
23
|
```bash
|
|
24
24
|
npx create-favicons [--dir=./path/to/dir]
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
Lo script viene normalmente eseguito nella directory corrente, ma con il parametro opzionale `--dir`
|
|
28
|
+
si può indicare una directory alternativa (percorso relativo alla directory di esecuzione).
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
Lo script cerca prima nella directory di lavoro il file `create-favicons-cfg.mjs`, che contiene un oggetto
|
|
31
|
+
con tutti i parametri necessari (vedi sotto).
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
Se manca, cerca il file `favicon-src.svg` da usare come sorgente per tutte le immagini, assumendo i valori di default (vedi sotto) per tutti gli altri parametri.
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
Tra gli altri, si può indicare il parametro `small_src_img` se serve un'immagine ottimizzata per le dimensioni ridotte (32px).
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
Il formato migliore per i file sorgente è SVG, oppure PNG/JPEG/WEBP/GIF/TIFF/AVIF.
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
Se entrambi i file mancano, viene restituito un errore.
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
I parametri di default sono elencati in dettaglio nel file `src/create-favicons/src/default-params.mjs`
|
|
42
|
+
e possono essere personalizzati nel file di configurazione, che deve avere questa forma:
|
|
43
43
|
|
|
44
44
|
```javascript
|
|
45
45
|
// file create-favicons-cfg.mjs
|
|
@@ -48,38 +48,38 @@ const params = [{ /* ... */ }];
|
|
|
48
48
|
export default params;
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
`params`
|
|
51
|
+
`params` può essere un oggetto o un array. Nel secondo caso, ogni elemento dell'array corrisponde a un set di favicon diverso.
|
|
52
52
|
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
Per creare un file cfg di esempio **nella directory corrente** (con tutti i valori di default e le relative descrizioni),
|
|
54
|
+
usare il comando:
|
|
55
55
|
|
|
56
56
|
```bash
|
|
57
57
|
npx create-favicons init
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
-
##
|
|
60
|
+
## Uso remoto
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
I comandi possono essere eseguiti anche senza installare prima il pacchetto:
|
|
63
63
|
|
|
64
64
|
```
|
|
65
65
|
npx --package=@massimo-cassandro/dev-utilities create-favicons init
|
|
66
66
|
npx --package=@massimo-cassandro/dev-utilities create-favicons [--dir=...]
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
-
##
|
|
69
|
+
## Esecuzione
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
Lo script produce le varie immagini png e svg, il file `manifest.webmanifest` e uno snippet HTML (o nel linguaggio indicato nel parametro `snippet_language`).
|
|
72
|
+
Tutte le immagini vengono ottimizzate con [SVGO](https://github.com/svg/svgo) e [imagemin](https://github.com/imagemin/imagemin).
|
|
73
73
|
|
|
74
|
-
|
|
74
|
+
Tutti i file vengono salvati nella directory indicata in `output_dir` (default: directory corrente).
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
Facoltativamente, il file dello snippet può essere salvato in una directory diversa (`snippet_path`) oppure si può scegliere di non crearlo,
|
|
77
|
+
impostando il valore `snippet_name` a `null`.
|
|
78
78
|
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
Nel file di configurazione si può impostare anche il parametro `webmanifest_extra`, che permette di aggiungere ulteriori voci al file *manifest*.
|
|
80
|
+
Per maggiori informazioni: <https://developer.mozilla.org/en-US/docs/Web/Manifest>
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
File generati:
|
|
83
83
|
|
|
84
84
|
```html
|
|
85
85
|
<link rel="icon" href="/favicon.ico" sizes="any"> <!-- 32×32 + 16x16 -->
|
|
@@ -98,4 +98,4 @@ Files generated:
|
|
|
98
98
|
}
|
|
99
99
|
```
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
Vedi anche i file della demo
|
|
@@ -10,8 +10,8 @@ export async function createIco(params) {
|
|
|
10
10
|
`${params.output_dir}/favicon.ico`,
|
|
11
11
|
{
|
|
12
12
|
sizes: [16, 32],
|
|
13
|
-
// sizes: "default", //
|
|
14
|
-
resizeOptions: {}, //
|
|
13
|
+
// sizes: "default", // equivale a [256, 128, 64, 48, 32, 24, 16]
|
|
14
|
+
resizeOptions: {}, // opzioni di resize di sharp
|
|
15
15
|
}
|
|
16
16
|
);
|
|
17
17
|
|
|
@@ -9,7 +9,7 @@ import { remove_homedir_string } from './remove-homedir-string.mjs';
|
|
|
9
9
|
|
|
10
10
|
export function init() {
|
|
11
11
|
// const __filename = new URL('', import.meta.url).pathname;
|
|
12
|
-
//
|
|
12
|
+
// conterrà lo slash finale
|
|
13
13
|
const src_dir = new URL('.', import.meta.url).pathname,
|
|
14
14
|
cfg_sample_file = process.cwd() + '/create-favicons-cfg.mjs';
|
|
15
15
|
|