From a3809e4f1e14f3949e9e25f7ffbdea2920408edb Mon Sep 17 00:00:00 2001 From: Gabriele Mercolino Date: Mon, 12 Jun 2023 23:41:27 +0200 Subject: Added italian translations (#190) * added italian translations * Apply suggestions from code review Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Apply suggestions from code review Grazie mille dei suggerimenti 😀! Non credevo di aver lasciato così tanti errori 😬 Co-authored-by: Chris Swithinbank * Apply suggestions from code review Co-authored-by: Chris Swithinbank * Update frontmatter.md * Add changeset --------- Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Co-authored-by: Chris Swithinbank --- .changeset/spicy-schools-applaud.md | 5 + docs/astro.config.mjs | 11 +- docs/src/content/docs/it/environmental-impact.md | 140 +++++++++ docs/src/content/docs/it/getting-started.mdx | 123 ++++++++ .../content/docs/it/guides/authoring-content.md | 210 +++++++++++++ docs/src/content/docs/it/guides/components.mdx | 107 +++++++ docs/src/content/docs/it/guides/i18n.mdx | 201 +++++++++++++ .../content/docs/it/guides/project-structure.mdx | 48 +++ docs/src/content/docs/it/index.mdx | 44 +++ .../src/content/docs/it/reference/configuration.md | 326 +++++++++++++++++++++ docs/src/content/docs/it/reference/frontmatter.md | 119 ++++++++ packages/starlight/translations/index.ts | 3 +- packages/starlight/translations/it.json | 20 ++ 13 files changed, 1353 insertions(+), 4 deletions(-) create mode 100644 .changeset/spicy-schools-applaud.md create mode 100644 docs/src/content/docs/it/environmental-impact.md create mode 100644 docs/src/content/docs/it/getting-started.mdx create mode 100644 docs/src/content/docs/it/guides/authoring-content.md create mode 100644 docs/src/content/docs/it/guides/components.mdx create mode 100644 docs/src/content/docs/it/guides/i18n.mdx create mode 100644 docs/src/content/docs/it/guides/project-structure.mdx create mode 100644 docs/src/content/docs/it/index.mdx create mode 100644 docs/src/content/docs/it/reference/configuration.md create mode 100644 docs/src/content/docs/it/reference/frontmatter.md create mode 100644 packages/starlight/translations/it.json diff --git a/.changeset/spicy-schools-applaud.md b/.changeset/spicy-schools-applaud.md new file mode 100644 index 00000000..d6b11ce3 --- /dev/null +++ b/.changeset/spicy-schools-applaud.md @@ -0,0 +1,5 @@ +--- +"@astrojs/starlight": patch +--- + +Added Italian language support diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 3a6bb2af..c6543cec 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -45,6 +45,7 @@ export default defineConfig({ es: { label: 'Español', lang: 'es' }, ja: { label: '日本語', lang: 'ja' }, fr: { label: 'Français', lang: 'fr' }, + it: { label: 'Italiano', lang: 'it' }, }, sidebar: [ { @@ -54,6 +55,7 @@ export default defineConfig({ es: 'Comienza aqui', ja: 'ここからはじめる', fr: 'Commencez ici', + it: 'Inizia qui', }, items: [ { @@ -63,7 +65,8 @@ export default defineConfig({ de: 'Erste Schritte', es: 'Empezando', ja: '入門', - fr: 'Mise en route' + fr: 'Mise en route', + it: 'Iniziamo', }, }, { @@ -72,14 +75,15 @@ export default defineConfig({ translations: { es: 'Documentación ecológica', ja: '環境への負荷', - fr: 'Impact environnemental' + fr: 'Impact environnemental', + it: 'Impatto ambientale', }, }, ], }, { label: 'Guides', - translations: { de: 'Anleitungen', es: 'Guías', ja: 'ガイド', fr: 'Guides' }, + translations: { de: 'Anleitungen', es: 'Guías', ja: 'ガイド', fr: 'Guides', it: "Guide", }, autogenerate: { directory: 'guides' }, }, { @@ -89,6 +93,7 @@ export default defineConfig({ es: 'Referencias', ja: 'リファレンス', fr: 'Référence', + it: 'Riferimenti', }, autogenerate: { directory: 'reference' }, }, diff --git a/docs/src/content/docs/it/environmental-impact.md b/docs/src/content/docs/it/environmental-impact.md new file mode 100644 index 00000000..c52a9e4b --- /dev/null +++ b/docs/src/content/docs/it/environmental-impact.md @@ -0,0 +1,140 @@ +--- +title: Documentazione ecologica +description: Impara come Starlight può aiutarti a costruire siti per documentazione più verdi e ridurre la tua impronta ecologica. +--- + +Le stime dell'impatto ambientale del web si aggirano tra il [2%][sf] e il [4% delle emissioni globali di gas serra][bbc], equivalente circa alle emissioni dell'industria aerea. +Ci sono molti complessi fattori per calcolare l'impatto ambientale di un sito web, ma questa guida include dei consigli per ridurre l'impronta ecologica del tuo sito. + +La buona notizia è che scegliere Starlight è un ottimo punto di partenza. +Secondo il Website Carbon Calculator, questo sito è [più pulito del 99% delle pagine web testate][sl-carbon], producendo 0,01 g di CO₂ per pagina visitata. + +## Peso per pagina + +Più dati una pagina web trasferisce, più risorse energetiche sono necessarie. +Nell'aprile 2023, la pagina web media richiede all'utente di scaricare più di 2.000 KB secondo i [dati dell'HTTP Archive][http]. + +Starlight costruisce le pagine nel modo più leggero possibile. +Per esempio, alla prima visita, l'utente scaricherà meno di 50 KB di dati compressi — soltanto il 2,5 % della media dell'HTTP Archive. +Inoltre, con una strategia appropriata di cache, successive visite potranno richiedere solamente 10 KB. + +### Immagini + +Anche se Starlight fornisce un buon punto di partenza, le immagini possono velocemente aumentare il peso della pagina. +Starlight usa il [supporto ottimizzato degli asset][assets] di Astro per ottimizzare le immagini nei file Markdown e MDX. + +### Componenti UI + +I componenti costruiti con framework UI come React o Vue possono facilmente aggiungere grandi quantità di JavaScript nella pagina. +Dato che Starlight è costruito su Astro, i componenti come questo caricano **zero JavaScript all'utente per default** grazie alle [Isole Astro][islands]. + +### Caching + +La cache è utilizzata per salvare per un periodo di tempo dati già scaricati in modo che il browser possa riutilizzarli. +Una buona strategia di cache permette all'utente di scaricare nuovi contenuti il prima possibile quando cambiano, ma anche evitare di scaricare nuovamente gli stessi più volte quando non sono cambiati. + +Il modo più comune per configurarla è grazie al [`Cache-Control` header HTTP][cache]. +Quando si utilizza Starlight, puoi controllare per quanto tempo salvare in cache nella cartella `/_astro/`. +Questa cartella contiene CSS, JavaScript e altri asset che possono essere salvati in cache per sempre, riducendo download non necessari: + +``` +Cache-Control: public, max-age=604800, immutable +``` + +La configurazione della cache dipende dal tuo host. Per esempio, Vercel applica questa strategia di cache per te senza configurazione richiesta, mentre puoi specificare degli [headers personalizzati per Netlify][ntl-headers] aggiungendo il file `public/_headers` nel progetto: + +``` +/_astro/* + Cache-Control: public + Cache-Control: max-age=604800 + Cache-Control: immutable +``` + +[cache]: https://csswizardry.com/2019/03/cache-control-for-civilians/ +[ntl-headers]: https://docs.netlify.com/routing/headers/ + +## Consumo energetico + +Come una pagina web sia costruita può impattare l'energia richiesta per visualizzarla nel dispositivo dell'utente. +Starlight riduce il consumo energetico del cellulare, tablet o computer che l'utente utilizza sfruttando pochissimo JavaScript. + +Bisogna fare attenzione quando si vuole aggiungere funzionalità come script analitici o contenuti che utilizzano grandi quantità di JavaScript come video incorporati, dato che questi possono aumentare il consumo energetico. +Se necessario, si considerino [Cabin][cabin], [Fathom][fathom], o [Plausible][plausible] per funzionalità analitiche siccome non sono pesanti. +Video integrati come YouTube e Vimeo possono essere migliorati aspettando di [caricare il video dopo interazione][lazy-video]. +Pacchetti come [`astro-embed`][embed] possono aiutare per servizi comuni. + +:::tip[Lo sapevi ?] +L'analisi e la compilazione di JavaScript è una delle operazioni più costose che il browser deve fare. +Se si confronta con la visualizzazione di un'immagine JPEG dello stesso peso, [JavaScript può richiedere anche più di 30 volte il tempo necessario per essere processato][cost-of-js]. +::: + +[cabin]: https://withcabin.com/ +[fathom]: https://usefathom.com/ +[plausible]: https://plausible.io/ +[lazy-video]: https://web.dev/iframe-lazy-loading/ +[embed]: https://www.npmjs.com/package/astro-embed +[cost-of-js]: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e + +## Hosting + +La piattaforma utilizzata per hostare un sito può avere un impatto significativo per l'impronta ecologica. +I data center e server farm possono impattare di molto l'ambiente, usando grandi quantità di energia elettrica e d'acqua. + +Scegliere un host che usi energia da fonti rinnovabili significa ridurre le emissioni di gas serra per il tuo sito. Il [Green Web Directory][gwb] è uno degli strumenti che si possono utilizzare per trovare host di questo tipo. + +[gwb]: https://www.thegreenwebfoundation.org/directory/ + +## Comparazioni + +Curioso di come altri framework per documentazioni si comparano? +Questi test eseguiti con [Website Carbon Calculator][wcc] confrontano pagine simili costruite con diversi framework. + +| Framework | CO₂ per visita | +| --------------------------- | -------------------- | +| [Starlight][sl-carbon] | 0,01 g | +| [VitePress][vp-carbon] | 0,05 g | +| [Docus][dc-carbon] | 0,05 g | +| [Sphinx][sx-carbon] | 0,07 g | +| [MkDocs][mk-carbon] | 0,10 g | +| [Nextra][nx-carbon] | 0,11 g | +| [docsify][dy-carbon] | 0,11 g | +| [Docusaurus][ds-carbon] | 0,24 g | +| [Read the Docs][rtd-carbon] | 0,24 g | +| [GitBook][gb-carbon] | 0,71 g | + +Dati collezionati il 14 Maggio 2023. Clicca i link per vedere i dati aggiornati. + +[sl-carbon]: https://www.websitecarbon.com/website/starlight-astro-build-getting-started/ +[vp-carbon]: https://www.websitecarbon.com/website/vitepress-dev-guide-what-is-vitepress/ +[dc-carbon]: https://www.websitecarbon.com/website/docus-dev-introduction-getting-started/ +[sx-carbon]: https://www.websitecarbon.com/website/sphinx-doc-org-en-master-usage-quickstart-html/ +[mk-carbon]: https://www.websitecarbon.com/website/mkdocs-org-getting-started/ +[nx-carbon]: https://www.websitecarbon.com/website/nextra-site-docs-docs-theme-start/ +[dy-carbon]: https://www.websitecarbon.com/website/docsify-js-org/ +[ds-carbon]: https://www.websitecarbon.com/website/docusaurus-io-docs/ +[rtd-carbon]: https://www.websitecarbon.com/website/docs-readthedocs-io-en-stable-index-html/ +[gb-carbon]: https://www.websitecarbon.com/website/docs-gitbook-com/ + +## Altre risorse + +### Strumenti + +- [Website Carbon Calculator][wcc] +- [GreenFrame](https://greenframe.io/) +- [Ecograder](https://ecograder.com/) +- [WebPageTest Carbon Control](https://www.webpagetest.org/carbon-control/) +- [Ecoping](https://ecoping.earth/) + +### Articoli e discussioni + +- [“Building a greener web”](https://youtu.be/EfPoOt7T5lg), conferenza di Michelle Barker +- [“Sustainable Web Development Strategies Within An Organization”](https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/), articolo di Michelle Barker +- [“A sustainable web for everyone”](https://2021.stateofthebrowser.com/speakers/tom-greenwood/), conferenza di Tom Greenwood +- [“How Web Content Can Affect Power Usage”](https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/), articolo di Benjamin Poulain e Simon Fraser + +[sf]: https://www.sciencefocus.com/science/what-is-the-carbon-footprint-of-the-internet/ +[bbc]: https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think +[http]: https://httparchive.org/reports/state-of-the-web +[assets]: https://docs.astro.build/en/guides/assets/ +[islands]: https://docs.astro.build/en/concepts/islands/ +[wcc]: https://www.websitecarbon.com/ diff --git a/docs/src/content/docs/it/getting-started.mdx b/docs/src/content/docs/it/getting-started.mdx new file mode 100644 index 00000000..24221d6a --- /dev/null +++ b/docs/src/content/docs/it/getting-started.mdx @@ -0,0 +1,123 @@ +--- +title: Iniziamo +description: Impara come iniziare a costruire il tuo prossimo sito per documentazione con Starlight per Astro. +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +:::caution[Lavoro in corso] +Starlight è in fase di sviluppo iniziale. +Se trovi qualcosa che non funziona, [apri una nuova issue su GitHub](https://github.com/withastro/starlight/issues/new/choose) o contattaci su [Discord](https://astro.build/chat). +::: + +## Creare un nuovo progetto + +Starlight è un tema per documentazione completo di funzionalità costruito su [Astro](https://astro.build). + +Puoi creare un nuovo progetto Astro + Starlight usando il comando: + + + +```sh +# crea un nuovo progetto con npm +npm create astro@latest -- --template starlight +``` + + + + +```sh +# crea un nuovo progetto con pnpm +pnpm create astro --template starlight +``` + + + + +```sh +# crea un nuovo progetto con yarn +yarn create astro --template starlight +``` + + + + +Questo creerà una nuova [cartella del progetto](/it/guides/projet-structure/) con tutti i file e configurazioni necessarie per il tuo sito. + +:::tip[Guardalo in azione] +Prova Starlight nel browser: +[apri il template su StackBlitz](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics). +::: + +## Creare contenuti con Starlight + +Starlight è pronto per aggiungere nuovi contenuti, compresi i tuoi file! + +### Formati dei file + +Starlight supporta la creazione di contenuti in Markdown e MDX. (Puoi aggiungere il supporto per Markdoc installando l'integrazione sperimentale [Astro Markdoc](https://docs.astro.build/en/guides/integrations-guide/markdoc/)). + +### Aggiungere pagine + +Aggiungi pagine automaticamente creando file `.md` o `.mdx` in `src/content/docs/`. Aggiungi sotto-cartelle per organizzare i file e creare percorsi multipli: + +``` +src/content/docs/hello-world.md => il-tuo-sito.com/hello-world +src/content/docs/guides/faq.md => il-tuo-sito.com/guides/faq +``` + +### Type-safe frontmatter + +Tutte le pagine Starlight condividono un [insieme comune di proprietà](/fr/reference/frontmatter/) personalizzabile per controllare come la pagina deve apparire: + +```md +--- +title: Ciao Mondo! +description: Questa è una pagina nel mio sito Starlight. +--- +``` + +Se dovessi dimenticare qualcosa di importante, Starlight te lo farà sapere. + +## Pubblicare il sito Starlight + +Una volta creato e personalizzato il tuo sito Starlight, puoi pubblicarlo in una piattaforma a tua scelta, inclusi Netlify, Vercel, GitHub Pages e molti altri. + +[Impara come pubblicare un sito nella documentazione Astro](https://docs.astro.build/en/guides/deploy/) + +## Aggiornare Starlight + +:::tip[Suggerimento] +Siccome Starlight è un software ancora beta, ci sarano frequentemente aggiornamenti e miglioramenti. Ricordati di aggiornare regolarmente! +::: + +Starlight è un'integrazione per Astro, si aggiorna come qualsiasi integrazione `@astrojs/*`: + + + + +```sh +# aggiorna Starlight con npm +npm install @astrojs/starlight@latest +``` + + + + +```sh +# aggiorna Starlight con pnpm +pnpm upgrade @astrojs/starlight --latest +``` + + + + +```sh +# aggiorna Starlight con yarn +yarn upgrade @astrojs/starlight --latest +``` + + + + +Puoi esplorare tutte le modifiche effettuate in ogni aggiornamento nel [changelog Starlight](https://github.com/withastro/starlight/blob/main/packages/starlight/CHANGELOG.md). diff --git a/docs/src/content/docs/it/guides/authoring-content.md b/docs/src/content/docs/it/guides/authoring-content.md new file mode 100644 index 00000000..6ab0e3fe --- /dev/null +++ b/docs/src/content/docs/it/guides/authoring-content.md @@ -0,0 +1,210 @@ +--- +title: Creazione di contenuti in Markdown +description: Una panoramica della sintassi Markdown supportata da Starlight. +--- + +Starlight supporta l'intera sintassi [Markdown](https://daringfireball.net/projects/markdown/) nei file `.md` insieme al frontmatter [YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) per definire metadati come il titolo e la descrizione. + +Assicurarsi di guardare la [documentazione MDX](https://mdxjs.com/docs/what-is-mdx/#markdown) o la [documentazione Markdoc](https://markdoc.dev/docs/syntax) se si vogliono usare questi formati, dato che il supporto Markdown può variare. + +## Stili in linea + +Il testo può essere **grassetto**, _corsivo_, o ~~barrato~~. + +```md +Il testo può essere **grassetto**, _corsivo_, o ~~barrato~~. +``` + +Puoi [aggiungere un link ad un'altra pagina](/it/getting-started/). + +```md +Puoi [aggiungere un link ad un'altra pagina](/it/getting-started/). +``` + +Puoi evidenziare `codice in linea` con apici inversi. + +```md +Puoi evidenziare `codice in linea` con apici inversi. +``` + +## Immagini + +Le immagini in Starlight utilizzano l'ottimizzazione degli asset di Astro. + +Markdown e MDX supportano la sintassi Markdown per rappresentare immagini che includono testo alternativo per le tecnologie assistive. + +![Un'illustrazione di pianeti e stelle con la scritta "astro"](https://raw.githubusercontent.com/withastro/docs/main/public/default-og-image.png) + +```md +![Un'illustrazione di pianeti e stelle con la scritta "astro"](https://raw.githubusercontent.com/withastro/docs/main/public/default-og-image.png) +``` + +I percorsi relativi sono supportati per immagini salvate localmente nel tuo progetto. + +```md +// src/content/docs/page-1.md + +![Un'astronave nello spazio](../../assets/images/rocket.svg) +``` + +## Titoli + +Puoi strutturare i contenuti utilizzando dei titoli. In Markdown sono indicati dal numero di `#` all'inizio della linea. + +### Come strutturare i contenuti della pagina in Starlight + +Starlight è configurato per utilizzare automaticamente il titolo della pagina come intestazione e includerà una "Panoramica" in alto per ogni tabella dei contenuti. Si raccomanda di iniziare ogni pagina con un paragrafo e di usare titoli a partire da `

`: + +```md +--- +title: Guida Markdown +description: Come utilizzare Markdown in Starlight +--- + +Questa pagina descrive come utilizzare Markdown in Starlight. + +## Stili in linea + +## Titoli + +``` + +### Link titoli automatici + +Utilizzando titoli in Markdown verranno generati automaticamente i rispettivi link per navigare velocemente in certe sezioni della tua pagina: + +```md +--- +title: La mia pagina dei contenuti +description: Come utilizzare i link automatici di Starlight +--- +## Introduzione + +Posso collegarmi alla [conclusione](#conclusione) che si trova più in basso. + +## Conclusione + +`https://my-site.com/page1/#introduzione` porta direttamente all'introduzione. +``` + +Titoli di livello 2 (`

`) e di livello 3 (`

`) verranno inclusi automaticamente nella tabella dei contenuti. + +## Asides + +Gli aside (conosciuti anche come "richiami") sono utili per indicare contenuti secondari insieme ai contenuti principali. + +Starlight fornisce una sintassi Markdown personalizzata per indicarli. I blocchi aside sono indicati da `:::` per racchiudere i contenuti e possono essere di tipo `note`, `tip`, `caution` o `danger`. + +Dentro un "aside" puoi inserire qualsiasi altro contenuto Markdown anche se sono più indicati per contenere poche informazioni. + +### Note aside + +:::note +Starlight è uno strumento per siti da documentazione con [Astro](https://astro.build/). Puoi iniziare con questo comando: + +```sh +npm run create astro@latest --template starlight +``` + +::: + +````md +:::note +Starlight è uno strumento per siti da documentazione con [Astro](https://astro.build/). +Puoi iniziare con questo comando: + +```sh +npm run create astro@latest --template starlight +``` + +::: +```` + +### Titoli aside personalizzati + +Si può specificare un titolo personalizzato per gli aside in parentesi quadre dopo aver specificato il tipo di aside, per esempio `:::tip[Lo sapevi?]`. + +:::tip[Lo sapevi?] +Astro ti aiuta a costruire siti più veloci con ["Islands Architecture"](https://docs.astro.build/en/concepts/islands/). +::: + +```md +:::tip[Lo sapevi?] +Astro ti aiuta a costruire siti più veloci con ["Islands Architecture"](https://docs.astro.build/en/concepts/islands/). +::: +``` + +### Altri tipi di aside + +Gli aside caution e danger sono d'aiuto per richiamare l'attenzione dell'utente a dettagli che potrebbero sorprenderli. +Se ti ritrovi ad usarli spesso, potrebbe essere segno che quelo che stai documentando potrebbe trarre beneficio da una riprogettazione. + +:::caution +Se non sei sicuro di voler un sito per documentazione fantastico, pensaci due volte prima di usare [Starlight](../../../). +::: + +:::danger +Gli utenti potrebbero essere più produttivi e trovare il tuo prodotto più facile da usare grazie alle utili funzioni di Starlight. + +- Navigazione chiara +- Temi configurabili dall'utente +- [Supporto per i18n](/it/guides/i18n) + +::: + +```md +:::caution +Se non sei sicuro di voler un sito per documentazione fantastico, pensaci due volte prima di usare [Starlight](../../../). +::: + +:::danger +Gli utenti potrebbero essere più produttivi e trovare il tuo prodotto più facile da usare grazie alle utili funzioni di Starlight. + +- Navigazione chiara +- Temi configurabili dall'utente +- [Supporto per i18n](/it/guides/i18n) + +::: +``` + +## Citazioni + +> Questo è un blockquote, che di solito viene utilizzato per citazioni di persone o documenti. +> +> I blockquote sono indicati da `>` all'inizio di ogni riga. + +```md +> Questo è un blockquote, che di solito viene utilizzato per citazioni di persone o documenti. +> +> I blockquote sono indicati da `>` all'inizio di ogni riga. +``` + +## Blocchi codice + +Un blocco di codice è indicato da tre backtick ``` all'inizio e alla fine. Puoi indicare il linguaggio di programmazione dopo i primi backtick. + +```js +// Codice JavaScript con sintassi evidenziata. +var fun = function lang(l) { + dateformat.i18n = require('./lang/' + l); + return true; +}; +``` + +````md +```js +// Codice JavaScript con sintassi evidenziata. +var fun = function lang(l) { + dateformat.i18n = require('./lang/' + l); + return true; +}; +``` +```` + +```md +I blocchi lunghi su una linea sola non vanno a capo. Se sono troppo lunghi si può scrollare orizzontalmente. Questo dovrebbe essere abbastanza lungo per dimostrarlo. +``` + +## Altre funzionalità Markdown utili + +Starlight supporta tutte le altre funzionalità Markdown, come liste e tabelle. Guarda la [Markdown Cheat Sheet da The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) per una panoramica veloce su tutte le funzionalità Markdown. diff --git a/docs/src/content/docs/it/guides/components.mdx b/docs/src/content/docs/it/guides/components.mdx new file mode 100644 index 00000000..f7944371 --- /dev/null +++ b/docs/src/content/docs/it/guides/components.mdx @@ -0,0 +1,107 @@ +--- +title: Componenti +description: Utilizzo dei componenti in MDX con Starlight. +--- + +I componenti permettono di riutilizzare un elemento UI o altro ripetutamente. +Degli esempi potrebbero essere delle sezioni di link o un video YouTube integrato. +Starlight supporta l'utilizzo di questi nei file [MDX](https://mdxjs.com/) e fornisce dei componenti per te già pronti. + +[Vedi di più sulla costruzione di componenti nella documentazione Astro](https://docs.astro.build/en/core-concepts/astro-components/). + +## Utilizzare un componente + +Puoi usare un componente importandolo nel tuo file MDX e poi visualizzarlo come un tag JSX. +Questi possono ricordare dei tag HTML ma iniziano con una maiuscola: + +```mdx +--- +# src/content/docs/index.mdx +title: Benvenuto nella mia documentazione +--- + +import SomeComponent from '../../components/SomeComponent.astro'; +import AnotherComponent from '../../components/AnotherComponent.astro'; + + + + + I componenti possono avere **contenuti interni**. + +``` + +Siccome Starlight è integrato con Astro, puoi aggiungere componenti costruiti con qualsiasi [UI framework supportato (React, Preact, Svelte, Vue, Solid, Lit, and Alpine)](https://docs.astro.build/en/core-concepts/framework-components/). +Vedi di più su come [usare componenti in MDX](https://docs.astro.build/en/guides/markdown-content/#using-components-in-mdx) nella documentazione Astro. + +## Componenti integrati + +Starlight fornisce dei componenti per casi comuni in una documentazione. +Questi sono disponibili nel pacchetto `@astrojs/starlight/components`. + +### Tabs + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Puoi rappresentare contenuti con un'interfaccia a schede con i componenti `` e ``. +Ogni `` deve avere un `label` per indicare la scheda corrispondente. + +```mdx +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + Sirius, Vega, Betelgeuse + Io, Europa, Ganymede + +``` + + + Sirius, Vega, Betelgeuse + Io, Europa, Ganymede + + +### Card + +import { Card, CardGrid } from '@astrojs/starlight/components'; + +Puoi rappresentare i contenuti in un riquadro che rispecchia il tema Starlight usando il componente ``. +Racchiudi più card in `` per visualizzarle fianco a fianco se c'è abbastanza spazio. + +Una `` necessita di `title` e può avere eventualmente un attributo `icon` impostato ad [una delle icone Starlight](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Icons.ts). + +```mdx +import { Card, CardGrid } from '@astrojs/starlight/components'; + +Contenuti interessanti da evidenziare. + + + + Sirius, Vega, Betelgeuse + + + Io, Europa, Ganymede + + +``` + +Contenuti interessanti da evidenziare. + + + + Sirius, Vega, Betelgeuse + + + Io, Europa, Ganymede + + + +:::tip[Suggerimento] +Usa la griglia nella pagina principale per evidenziare le funzionalità chiave del progetto. +Aggiungi l'attributo `stagger` per rappresentare la seconda colonna più in basso per rendere il tutto più interessante: + +```astro + + + +``` + +::: diff --git a/docs/src/content/docs/it/guides/i18n.mdx b/docs/src/content/docs/it/guides/i18n.mdx new file mode 100644 index 00000000..e4a2f097 --- /dev/null +++ b/docs/src/content/docs/it/guides/i18n.mdx @@ -0,0 +1,201 @@ +--- +title: Internazionalizzazione (i18n) +description: Impara come configurare il tuo sito Starlight per supportare più lingue. +--- + +import FileTree from '../../../../components/file-tree.astro'; + +Starlight offre il supporto per siti multilingua, compreso di indirizzamento, contenuti fallback e completo supporto per lingue scritte da destra a sinistra (RTL). + +## Configurare i18n + +1. Indicare a Starlight le lingue che si vuole supportare passando `locales` e `defaultLocale` all'integrazione Starlight: + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'My Docs', + // Indica l'inglese come lingua predefinita. + defaultLocale: 'en', + locales: { + // La documentazione in inglese si trova in `src/content/docs/en/` + en: { + label: 'English', + }, + // La documentazione in cinese semplificato si trova in `src/content/docs/zh/` + zh: { + label: '简体中文', + lang: 'zh-CN', + }, + // La documentazione in arabo si trova in `src/content/docs/ar/` + ar: { + label: 'العربية', + dir: 'rtl', + }, + }, + }), + ], + }); + ``` + + Il `defaultLocale` sarà utilizzato come fallback per contenuti ed interfaccia, quindi scegli il linguaggio per cui c'è più probabilità di iniziare a scrivere o già hai contenuti. + +2. Creare una cartella per ogni lingua in `src/content/docs/`. + Per esempio, per la configurazione di sopra: + + + + - src/ + - content/ + - docs/ + - ar/ + - en/ + - zh/ + + + +3. Puoi ora aggiungere file nelle cartelle. Usa file con lo stesso nome per associare pagine tra i linguaggi e sfruttare le funzionalità di Starlight per i18n, compresi i contenuti di fallback, avvisi di traduzione e altro. + + Per esempio, crea `ar/index.md` e `en/index.md` per rappresentare la homepage rispettivamente in arabo e inglese. + +### Utilizzare una lingua principale + +Puoi utilizzare una lingua principale per non avere il prefisso i18n nel percorso. Per esempio, se l'inglese è la lingua principale, un indirizzo sarà del tipo `/about` invece che `/en/about`. + +Per fare questo, utilizza la chiave `root` nella configurazione `locales`. Se la lingua principale è anche la lingua di default rimuovi `defaultLocale` o impostala a `'root'`. + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'My Docs', + defaultLocale: 'root', // opzionale + locales: { + root: { + label: 'English', + lang: 'en', // necessario per root + }, + zh: { + label: '简体中文', + lang: 'zh-CN', + }, + }, + }), + ], +}); +``` + +Quando si usa una lingua `root`, metti le pagine direttamente in `src/content/docs/` invece che in una cartella dedicata alla lingua. Per esempio, qui si trovano i file delle pagine per inglese e cinese quando si utilizza la configurazione precedente: + + + +- src/ + - content/ + - docs/ + - **index.md** + - zh/ + - **index.md** + + + +#### Siti monolingua + +Per default, Starlight è un sito monolingua (inglese). Per creare un sito monolingua in un'altra, impostala come `root` in `locales`: + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'My Docs', + locales: { + root: { + label: '简体中文', + lang: 'zh-CN', + }, + }, + }), + ], +}); +``` + +Questo ti permette di sovrascrivere le impostazione predefinite di Starlight per la lingua senza abilitare l'internazionalizzazione. + +## Contenuti fallback + +Starlight si aspetta che crei pagine equivalenti per tutte le lingue impostate. Per esempio, se hai un file `en/about.md`, crea un `about.md` per ogni altra lingua impostata. Questo permette a Starlight di avere contenuti fallback per le pagine che non hai ancora tradotto. + +Se una traduzione non è ancora disponibile per una lingua, Starlight mostrerà ai lettori i contenuti per quella pagina nel linguaggio predefinito (impostato da `defaultLocale`). Per esempio, se non hai ancora creato una versione italiana della pagina About e la lingua predefinita è inglese, gli utenti per `/it/about` vedranno i contenuti in inglese di `/en/about` con un avviso che la pagina non è stata ancora tradotta. + +## Tradurre l'interfaccia Starlight + +In aggiunta alla possibilità di avere pagine multilingua, Starlight permette di tradurre le scritte dell'interfaccia (per esempio l'intestazione "In questa pagina" nella tabella dei contenuti) in modo che i lettori possano vedere il sito interamente nella lingua selezionata. + +Inglese, francese, tedesco, giapponese, portoghese, spagnolo e italiano sono disponibili di default, e sono benvenute [contribuzioni per aggiungere altre lingue](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md). + +Puoi fornire traduzioni per lingue aggiuntive — o sovrascrivere i valori predefiniti — con la collezione `i18n`. + +1. Configura la collezione `i18n` in `src/content/config.ts` se non lo è già: + + ```js + // src/content/config.ts + import { defineCollection } from 'astro:content'; + import { docsSchema, i18nSchema } from '@astrojs/starlight/schema'; + + export const collections = { + docs: defineCollection({ schema: docsSchema() }), + i18n: defineCollection({ type: 'data', schema: i18nSchema() }), + }; + ``` + +2. Crea un file JSON in `src/content/i18n/` per ogni lingua di cui si vuole fornire la traduzione all'interfaccia. + Per esempio, questo aggiungerebbe traduzioni per arabo e cinese semplificato: + + + + - src/ + - content/ + - i18n/ + - ar.json + - zh-CN.json + + + +3. Aggiungere traduzioni per le chiavi che vuoi tradurre. Traduci solo i valori, le chiavi non devono essere modificate (per esempio `"search.label": "Buscar"`). + + Queste sono le traduzioni di default per l'inglese: + + ```json + { + "skipLink.label": "Skip to content", + "search.label": "Search", + "search.shortcutLabel": "(Press / to Search)", + "search.cancelLabel": "Cancel", + "themeSelect.accessibleLabel": "Select theme", + "themeSelect.dark": "Dark", + "themeSelect.light": "Light", + "themeSelect.auto": "Auto", + "languageSelect.accessibleLabel": "Select language", + "menuButton.accessibleLabel": "Menu", + "sidebarNav.accessibleLabel": "Main", + "tableOfContents.onThisPage": "On this page", + "tableOfContents.overview": "Overview", + "i18n.untranslatedContent": "This content is not available in your language yet.", + "page.editLink": "Edit page", + "page.lastUpdated": "Last updated:", + "page.previousLink": "Next", + "page.nextLink": "Previous" + } + ``` diff --git a/docs/src/content/docs/it/guides/project-structure.mdx b/docs/src/content/docs/it/guides/project-structure.mdx new file mode 100644 index 00000000..3bd2dca2 --- /dev/null +++ b/docs/src/content/docs/it/guides/project-structure.mdx @@ -0,0 +1,48 @@ +--- +title: Struttura del progetto +description: Impara come organizzare i file nel tuo progetto Starlight. +--- + +Questa guida ti mostrerà come un progetto Starlight è organizzato e cosa i file nel progetto fanno. + +I progetti Starlight seguono generalmente la stessa struttura di file e cartelle come altri progetti Astro. Vedi [la documentazione sulla struttura dei progetti Astro](https://docs.astro.build/en/core-concepts/project-structure/) per più dettagli. + +## File e cartelle + +- `astro.config.mjs` — Il file di configurazione di Astro; include l'integrazione Starlight e la sua configurazione. +- `src/content/config.ts` — File di configurazione delle collezioni; aggiunge il frontmatter di Starlight al tuo progetto. +- `src/content/docs/` — File dei contenuti. Starlight trasforma i file `.md`, `.mdx` o `.mdoc` in questa cartella in una pagina del tuo sito. +- `src/content/i18n/` (opzionale) — Supporto all'[internazionalizzazione](/it/guides/i18n/). +- `src/` — Altri file (componenti, stili, immagini, ecc.) che aggiungi al progetto. +- `public/` — Asset statici (font, favicon, PDF, etc.) che non saranno processati da Astro. + +## Esempio struttura di un progetto + +La struttura di un progetto Starlight potrebbe essere questa: + +import FileTree from '../../../../components/file-tree.astro'; + + + +- public/ + - favicon.svg +- src/ + - assets/ + - logo.svg + - screenshot.jpg + - components/ + - CustomButton.astro + - InteractiveWidget.jsx + - content/ + - docs/ + - guides/ + - 01-getting-started.md + - 02-advanced.md + - index.mdx + - config.ts + - env.d.ts +- astro.config.mjs +- package.json +- tsconfig.json + + diff --git a/docs/src/content/docs/it/index.mdx b/docs/src/content/docs/it/index.mdx new file mode 100644 index 00000000..adc3943e --- /dev/null +++ b/docs/src/content/docs/it/index.mdx @@ -0,0 +1,44 @@ +--- +title: Starlight 🌟 Costruire siti per documentazione con Astro +description: Starlight ti aiuta a creare siti belli e performanti con Astro. +template: splash +hero: + title: Fai brillare la tua documentazione con Starlight + tagline: Tutto quello di cui hai bisogno per creare documentazione stellare. Veloce, accessibile e facile da usare. + image: + file: ../../../assets/hero-star.webp + actions: + - text: Inizia + icon: right-arrow + variant: primary + link: /it/getting-started/ + - text: Vedi su GitHub + icon: external + link: https://github.com/withastro/starlight +--- + +import { CardGrid, Card } from '@astrojs/starlight/components'; +import AboutAstro from '../../../components/about-astro.astro'; + + + + Include: Navigazione, ricerca, internazionalizzazione, ottimizzazione del motore di ricerca, caratteri facili da leggere, evidenziazione del codice, tema scuro e altro. + + + Sfrutta la potenza di Astro. Estendi Starlight con le tue integrazioni e librerie preferite. + + + Utilizza il tuo linguaggio markup preferito. Starlight fornisce validazione frontmatter con TypeScript. + + + Starlight è una soluzione indipendente da framework. Estendi come vuoi con React, Vue, Svelte, Solid e altro. + + + + +Astro è il framework completo progettato per essere veloce. +Prendi i tuoi contenuti da dove preferisci e pubblica dove vuoi, il tutto con i tuoi componenti UI e librerie preferite. + +[Impara Astro](https://astro.build/) + + diff --git a/docs/src/content/docs/it/reference/configuration.md b/docs/src/content/docs/it/reference/configuration.md new file mode 100644 index 00000000..24e3bbe0 --- /dev/null +++ b/docs/src/content/docs/it/reference/configuration.md @@ -0,0 +1,326 @@ +--- +title: Riferimenti configurazione +description: Una panoramica sulle configurazione supportate da Starlight. +--- + +## Configurare l'integrazione `starlight` + +Starlight è un'integrazione costruita sul framework [Astro](https://astro.build). Puoi configurare il tuo progetto nel file `astro.config.mjs` : + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'Il mio delizioso sito per documentazione', + }), + ], +}); +``` + +Puoi configurare le seguenti opzioni nell'integrazione `starlight`. + +### `title` (obbligatorio) + +**type:** `string` + +Definisce il titolo del tuo sito. Sarà usato nei metadati e nel titolo della finestra. + +### `description` + +**type:** `string` + +Definisce la descrizione del tuo sito. Sarà usato nei metadati condivisi con le engine di ricerca nel tag `` se `description` non è specificato nell'intestazione della pagina. + +### `logo` + +**type:** [`LogoConfig`](#logoconfig) + +Definisce il logo da rappresentare nella barra di navigazione con o al posto del nome del sito. Puoi definire un singolo `src` o indicare due separate immagini per `light` e `dark`. + +```js +starlight({ + logo: { + src: '/src/assets/my-logo.svg', + }, +}); +``` + +#### `LogoConfig` + +```ts +type LogoConfig = { alt?: string; replacesTitle?: boolean } & ( + | { src: string } + | { light: string; dark: string } +); +``` + +### `tableOfContents` + +**type:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }` +**default:** `{ minHeadingLevel: 2; maxHeadingLevel: 3; }` + +Configura la tabella dei contenuti vista a destra di ogni pagina. Per predefinite, i titoli `

` e `

` saranno incluse in essa. + +### `editLink` + +**type:** `{ baseUrl: string }` + +Abilita il link "Modifica questa pagina" definendo l'URL base da usare. Il link finale sarà `editLink.baseUrl` + il percorso corrente. Per esempio, per abilitare la possibilità di modificare la repository `withastro/starlight` su GitHub: + +```js +starlight({ + editLink: { + baseUrl: 'https://github.com/withastro/starlight/edit/main/', + }, +}); +``` + +Con questa configurazione, una pagina `/introduction` avrà un link di modifica a `https://github.com/withastro/starlight/edit/main/src/docs/introduction.md`. + +### `sidebar` + +**type:** [`SidebarGroup[]`](#sidebargroup) + +Configura la barra laterale di navigazione del tuo sito. + +Una barra laterale è un array di gruppi, ognuno avente un `label` e o un array `items` o un oggetto `autogenerate`. + +Puoi manualmente impostare i contenuti di un gruppo con `items`, che è un array che può includere link e sottogruppi. Puoi anche automaticamente generare i contenuti di un gruppo da una specifica cartella della documentazione utilizzando `autogenerate`. + +```js +starlight({ + sidebar: [ + // Un gruppo intitolato "Inizia qui" contenente due link. + { + label: 'Inizia qui', + items: [ + { label: 'Introduzione', link: '/intro' }, + { label: 'Prossimi passi', link: '/next-steps' }, + ], + }, + // Un gruppo che si riferisce a tutte le pagine nella cartella reference. + { + label: 'Riferimenti', + autogenerate: { directory: 'reference' }, + }, + ], +}); +``` + +#### Ordinamento + +I gruppi generati automaticamente sono ordinati alfabeticamente. +Per esempio, una pagina generata da `astro.md` apparirà sopra a quella generata da `starlight.md`. + +#### Tradurre i titoli + +Se il tuo sito è multilingua, ogni elemento di `label` è considerato come appartenente alla lingua di default. Puoi definire `translations` per fornire i titoli per le altre lingue: + +```js +sidebar: [ + // Un esempio di barra laterale con traduzioni in italiano. + { + label: 'Start here', + translations: { it: 'Inizia qui' }, + items: [ + { + label: 'Getting Started', + translations: { it: 'Iniziamo' }, + link: '/getting-started', + }, + { + label: 'Project Structure', + translations: { it: 'Struttura del progetto' }, + link: '/structure', + }, + ], + }, +]; +``` + +#### `SidebarGroup` + +```ts +type SidebarGroup = + | { + label: string; + translations?: Record; + items: Array; + } + | { + label: string; + translations?: Record; + autogenerate: { + directory: string; + }; + }; +``` + +#### `LinkItem` + +```ts +interface LinkItem { + label: string; + link: string; +} +``` + +### `locales` + +**type:** `{ [dir: string]: LocaleConfig }` + +Configura l'internazionalizzazione (i18n) del sito impostando quali `locales` sono supportati. + +Ogni elemento deve utilizzare come chiave la cartella dove i file della lingua associata si trovano. + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'My Site', + // Imposta inglese come il linguaggio predefinito. + defaultLocale: 'en', + locales: { + // La documentazione in inglese si trova in `src/content/docs/en/` + en: { + label: 'English', + }, + // La documentazione in cinese semplificato si trova in `src/content/docs/zh/` + zh: { + label: '简体中文', + lang: 'zh-CN', + }, + // La documentazione in arabo si trova in `src/content/docs/ar/` + ar: { + label: 'العربية', + dir: 'rtl', + }, + }, + }), + ], +}); +``` + +#### Opzioni per locale + +Puoi impostare le seguenti opzioni per ogni locale: + +##### `label` (obbligatorio) + +**type:** `string` + +L'etichetta per questa lingua da rappresentare agli utenti, per esempio nel selettore di lingue. Spesso vorrai usare il nome della lingua per come l'utente si aspetta di leggere, per esempio `"English"`, `"العربية"`, o `"简体中文"`. + +##### `lang` + +**type:** `string` + +Il tag BCP-47 per la lingua, per esempio `"en"`, `"ar"`, o `"zh-CN"`. Se non lo imposti sarà utilizzato il nome della cartella. + +##### `dir` + +**type:** `'ltr' | 'rtl'` + +Il verso di scrittura della lingua; `"ltr"` per sinistra a destra (predefinita) e `"rtl"` per destra a sinistra. + +#### Lingua principale + +Puoi definire un linguaggio principale senza una cartella `/lang/` definendo `root`: + +```js +starlight({ + locales: { + root: { + label: 'English', + lang: 'en', + }, + it: { + label: 'Italiano', + }, + }, +}); +``` + +Per esempio, questo ti permette di fornire `/getting-started/` come un percorso in inglese e `/it/getting-started/` come quello equivalente in italiano. + +### `defaultLocale` + +**type:** `string` + +Definisce la lingua predefinita del sito. +Il valore deve corrispondere ad una chiave di [`locales`](#locales). +(Se la lingua predefinita è il [root](#lingua-principale), non è necessario). + +Verrà utilizzato come fallback per le pagine non tradotte. + +### `social` + +**type:** `{ discord?: string; github?: string; mastodon?: string; twitter?: string }` + +Dettagli opzionali per gli account social del sito. Se vengono aggiunti apparirà l'icona corrispondente nella barra superiore. + +```js +starlight({ + social: { + discord: 'https://astro.build/chat', + github: 'https://github.com/withastro/starlight', + mastodon: 'https://m.webtoo.ls/@astro', + twitter: 'https://twitter.com/astrodotbuild', + }, +}); +``` + +### `customCss` + +**type:** `string[]` + +Utilizza file CSS aggiuntivi per personalizzare il sito Starlight. + +Supporta file CSS locali relativi alla cartella principale del progetto, ad esempio `'/src/custom.css'`, e CSS installato come modulo npm, per esempio `'@fontsource/roboto'`. + +```js +starlight({ + customCss: ['/src/custom-styles.css', '@fontsource/roboto'], +}); +``` + +### `head` + +**type:** [`HeadConfig[]`](#headconfig) + +Aggiunge tag all'`` del sito Starlight. +Può essere utile per aggiungere script e risorse di terze parti. + +```js +starlight({ + head: [ + // Esempio : aggiunge Fathom analytics. + { + tag: 'script', + attrs: { + src: 'https://cdn.usefathom.com/script.js', + 'data-site': 'MY-FATHOM-ID', + defer: true, + }, + }, + ], +}); +``` + +#### `HeadConfig` + +```ts +interface HeadConfig { + tag: string; + attrs?: Record; + content?: string; +} +``` diff --git a/docs/src/content/docs/it/reference/frontmatter.md b/docs/src/content/docs/it/reference/frontmatter.md new file mode 100644 index 00000000..9290d990 --- /dev/null +++ b/docs/src/content/docs/it/reference/frontmatter.md @@ -0,0 +1,119 @@ +--- +title: Riferimenti frontmatter +description: Una panoramica sui campi predefiniti del frontmatter Starlight. +--- + +Puoi personalizzare pagine Markdown e MDX in Starlight definendo i valori nel frontmatter. Per esempio, una pagina potrebbe definire `title` e `description` : + +```md +--- +title: A proposito del progetto +description: Scopri di più sul progetto a cui sto lavorando. +--- + +Benvenuto alla pagina "a proposito del progetto"! +``` + +## Campi del frontmatter + +### `title` (obbligatorio) + +**type:** `string` + +Devi fornire un titolo ad ogni pagina. Questo sarà usato in testa alla pagina, nelle finestre del browser e nei metadati della pagina. + +### `description` + +**type:** `string` + +La descrizione è utilizzata nei metadati e sarà utilizzata dai motori di ricerca e nelle anteprime nei social. + +### `editUrl` + +**type:** `string | boolean` + +Sovrascrive la [configurazione globale `editLink`](/it/reference/configuration/#editlink). Metti a `false` per disabilitare "Modifica la pagina" per quella pagina specifica oppure fornisci un link alternativo. + +### `head` + +**type:** [`HeadConfig[]`](/it/reference/configuration/#headconfig) + +Puoi aggiungere tag aggiuntivi nell'`` della pagina utilizzando la chiave `head` nel frontmatter. Questo significa che puoi aggiungere stili personalizzati, metadati o altri tag in una pagina. Il funzionamento è simile [all'opzione globale `head`](/it/reference/configuration/#head). + +```md +--- +title: Chi siamo +head: + # Utilizza un personalizzato + - tag: title + content: Titolo personalizzato +--- +``` + +### `tableOfContents` + +**type:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }` + +Sovrascrive la [configurazione globale `tableOfContents`](/it/reference/configuration/#tableofcontents). +Cambia i livelli di titoli inclusi o, se messo a `false`, nasconde la tabella dei contenuti della pagina. + +### `template` + +**type:** `'doc' | 'splash'` +**default:** `'doc'` + +Definisce il layout per la pagina. +Le pagine utilizzano `'doc'` come predefinita. +Se valorizzato a `'splash'` viene utilizzato un layout senza barre laterali ottimale per la pagina iniziale. + +### `hero` + +**type:** [`HeroConfig`](#heroconfig) + +Aggiunge un componente hero all'inizio della pagina. Funziona bene con `template: splash`. + +Per esempio, questa configurazione illustra comuni opzioni, incluso il caricamento di un'immagine. + +```md +--- +title: La mia pagina principale +template: splash +hero: + title: 'Il mio progetto: Stellar Stuff Sooner' + tagline: Porta le tue cose sulla Luna e torna indietro in un battito d'occhio. + image: + alt: Un logo brillante e luminoso + file: ../../assets/logo.png + actions: + - text: Dimmi di più + link: /getting-started/ + icon: right-arrow + variant: primary + - text: Vedi su GitHub + link: https://github.com/astronaut/my-project + icon: external +--- +``` + +#### `HeroConfig` + +```ts +interface HeroConfig { + title?: string; + tagline?: string; + image?: { + alt?: string; + // Percorso relativo ad un’immagine dentro il tuo progetto. + file?: string; + // HTML non elaborato da utilizzare al posto dell'immagine. + // Potrebbe essere un tag personalizzato `<img>` o `<svg>` in linea. + html?: string; + }; + actions?: Array<{ + text: string; + link: string; + variant: 'primary' | 'secondary' | 'minimal'; + icon: string; + }>; +} +``` diff --git a/packages/starlight/translations/index.ts b/packages/starlight/translations/index.ts index ee16ba32..b7b982ee 100644 --- a/packages/starlight/translations/index.ts +++ b/packages/starlight/translations/index.ts @@ -5,9 +5,10 @@ import de from './de.json'; import ja from './ja.json'; import pt from './pt.json'; import fr from './fr.json'; +import it from './it.json'; const parse = i18nSchema().required().strict().parse; export default Object.fromEntries( - Object.entries({ en, es, de, ja, pt, fr }).map(([key, dict]) => [key, parse(dict)]) + Object.entries({ en, es, de, ja, pt, fr, it }).map(([key, dict]) => [key, parse(dict)]) ); diff --git a/packages/starlight/translations/it.json b/packages/starlight/translations/it.json new file mode 100644 index 00000000..649d14d8 --- /dev/null +++ b/packages/starlight/translations/it.json @@ -0,0 +1,20 @@ +{ + "skipLink.label": "Salta ai contenuti", + "search.label": "Cerca", + "search.shortcutLabel": "(Usa / per cercare)", + "search.cancelLabel": "Cancella", + "themeSelect.accessibleLabel": "Seleziona tema", + "themeSelect.dark": "Scuro", + "themeSelect.light": "Chiaro", + "themeSelect.auto": "Auto", + "languageSelect.accessibleLabel": "Seleziona lingua", + "menuButton.accessibleLabel": "Menu", + "sidebarNav.accessibleLabel": "Principale", + "tableOfContents.onThisPage": "In questa pagina", + "tableOfContents.overview": "Panoramica", + "i18n.untranslatedContent": "Questi contenuti non sono ancora disponibili nella tua lingua.", + "page.editLink": "Modifica pagina", + "page.lastUpdated": "Ultimo aggiornamento:", + "page.previousLink": "Indietro", + "page.nextLink": "Avanti" +} -- cgit