From 34063835bbf5a0c458fd6c1fcbc4542cb2c459ef Mon Sep 17 00:00:00 2001 From: Matteo Manfredi Date: Tue, 7 Nov 2023 12:01:08 +0100 Subject: [PATCH] i18n(it): translate `core-concepts` (#4529) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Christian Sarnataro Co-authored-by: Elian ☕️ --- .../it/core-concepts/astro-components.mdx | 347 ++++++++++++++++++ .../docs/it/core-concepts/astro-pages.mdx | 174 +++++++++ .../docs/it/core-concepts/astro-syntax.mdx | 175 +++++++++ .../docs/it/core-concepts/endpoints.mdx | 222 +++++++++++ .../it/core-concepts/framework-components.mdx | 6 +- src/content/docs/it/core-concepts/layouts.mdx | 8 +- 6 files changed, 925 insertions(+), 7 deletions(-) create mode 100644 src/content/docs/it/core-concepts/astro-components.mdx create mode 100644 src/content/docs/it/core-concepts/astro-pages.mdx create mode 100644 src/content/docs/it/core-concepts/astro-syntax.mdx create mode 100644 src/content/docs/it/core-concepts/endpoints.mdx diff --git a/src/content/docs/it/core-concepts/astro-components.mdx b/src/content/docs/it/core-concepts/astro-components.mdx new file mode 100644 index 0000000000000..3c626e23735ff --- /dev/null +++ b/src/content/docs/it/core-concepts/astro-components.mdx @@ -0,0 +1,347 @@ +--- +title: Componenti +description: Un'introduzione alla sintassi del componente .astro. +--- + +I **componenti Astro** sono gli elementi costitutivi di base di qualsiasi progetto Astro. Sono componenti di modello solo HTML senza runtime lato client. Puoi individuare un componente Astro dalla sua estensione di file: `.astro`. + +I componenti Astro sono estremamente flessibili. Spesso, un componente Astro conterrà alcune **UI riutilizzabili sulla pagina**, come un'intestazione o una scheda del profilo. Altre volte, un componente Astro può contenere un frammento di codice HTML più piccolo, come una raccolta di tag `` comuni che semplificano il lavoro con la SEO. I componenti Astro possono contenere anche un intero layout di pagina. + +La cosa più importante da sapere sui componenti Astro è che **non vengono renderizzati sul client**. Eseguono il rendering in HTML in fase di compilazione o su richiesta utilizzando il [rendering lato server (SSR)](/it/guides/server-side-rendering/). Puoi includere il codice JavaScript all'interno del frontmatter del tuo componente e tutto verrà rimosso dalla pagina finale inviata ai browser dei tuoi utenti. Il risultato è un sito più veloce, con zero impatto JavaScript aggiunto per impostazione predefinita. + +Quando il tuo componente Astro necessita di interattività lato client, puoi aggiungere [tag HTML standard ` + + +
+
Destinazione qui
+ + +
+``` + +Il parziale `.astro` deve esistere nel percorso del file corrispondente e includere un'esportazione che definisce la pagina come parziale: + +```astro title="src/pages/partials/clicked.astro" {2} +--- +export const partial = true; +--- +
Mi hanno cliccato!
+``` + +Consulta la [documentazione htmx](https://htmx.org/docs/) per ulteriori dettagli sull'utilizzo di htmx. diff --git a/src/content/docs/it/core-concepts/astro-syntax.mdx b/src/content/docs/it/core-concepts/astro-syntax.mdx new file mode 100644 index 0000000000000..2f23e6be5967f --- /dev/null +++ b/src/content/docs/it/core-concepts/astro-syntax.mdx @@ -0,0 +1,175 @@ +--- +title: Sintassi Astro +description: un'introduzione alla sintassi del componente .astro. +--- + +**Se conosci l'HTML, ne sai già abbastanza per scrivere il tuo primo componente Astro.** + +La sintassi del componente Astro è un superset di HTML. La sintassi è stata [progettata per risultare familiare a chiunque abbia esperienza nella scrittura di HTML o JSX](#differenze-tra-astro-e-jsx) e aggiunge il supporto per includere componenti ed espressioni JavaScript. + + +## Espressioni simili a JSX + +Puoi definire variabili JavaScript locali all'interno dello script del componente frontmatter tra i due separatori del codice (`---`) di un componente Astro. Puoi quindi inserire queste variabili nel modello HTML del componente utilizzando espressioni simili a JSX! + +:::note[dinamico vs reattivo] +Utilizzando questo approccio, puoi includere valori **dinamici** calcolati nel frontmatter. Ma una volta inclusi, questi valori non sono **reattivi** e non cambieranno mai. I componenti Astro sono modelli che vengono eseguiti solo una volta, durante la fase di rendering. + +Vedi sotto per ulteriori esempi di [differenze tra Astro e JSX](#differenze-tra-astro-e-jsx). +::: + +### Variabili + +Le variabili locali possono essere aggiunte all'HTML utilizzando la sintassi delle parentesi graffe: + +```astro title="src/components/Variables.astro" "{name}" +--- +const name = "Astro"; +--- +
+

Hello {name}!

+
+``` + +### Attributi dinamici + +Le variabili locali possono essere utilizzate tra parentesi graffe per passare i valori degli attributi sia agli elementi che ai componenti HTML: + +```astro title="src/components/DynamicAttributes.astro" "{name}" "${name}" +--- +const name = "Astro"; +--- +

Attribute expressions are supported

+ + +``` + +:::caution +Gli attributi HTML verranno convertiti in stringhe, quindi non è possibile passare funzioni e oggetti agli elementi HTML. +Ad esempio, non puoi assegnare un gestore eventi a un elemento HTML in un componente Astro: + +```astro +--- +// dont-do-this.astro +function handleClick () { + console.log("button clicked!"); +} +--- + + +``` + +Utilizza invece uno script lato client per aggiungere il gestore eventi, come faresti in JavaScript puro: + +```astro +--- +// do-this-instead.astro +--- + + +``` +::: + +### HTML dinamico + +Le variabili locali possono essere utilizzate in funzioni simili a JSX per produrre elementi HTML generati dinamicamente: + +```astro title="src/components/DynamicHtml.astro" "{item}" +--- +const items = ["Dog", "Cat", "Platypus"]; +--- +
    + {items.map((item) => ( +
  • {item}
    • + ))} +
+``` + +Astro può visualizzare in modo condizionale l'HTML utilizzando gli operatori logici JSX e le espressioni ternarie. + +```astro title="src/components/ConditionalHtml.astro" "visible" +--- +const visible = true; +--- +{visible &&

Show me!

} + +{visible ?

Show me!

:

Else show me!

} +``` + +### Tag dinamici + +Puoi anche utilizzare tag dinamici impostando una variabile sul nome di un tag HTML o sull'importazione di un componente: + +```astro title="src/components/DynamicTags.astro" /Element|(?Hello! + +``` + +Quando si utilizzano tag dinamici: + +- **I nomi delle variabili devono essere scritti in maiuscolo.** Ad esempio, utilizza `Element`, non `element`. Altrimenti, Astro proverà a rendere il nome della tua variabile come un tag HTML letterale. + +- **Le direttive di idratazione non sono supportate.** Quando si utilizzano le [direttive di idratazione `client:*`](/it/core-concepts/framework-components/#componenti-interattivi-idratanti), Astro deve sapere quali componenti raggruppare per la produzione e il modello di tag dinamico ne impedisce il funzionamento. + +### Frammenti + +Astro supporta l'uso di ` ` o della abbreviazione `<> `. + +I frammenti possono essere utili per evitare elementi wrapper quando si aggiungono [direttive `set:*`](/it/reference/directives-reference/#sethtml), come nell'esempio seguente: + +```astro title="src/components/SetHtml.astro" "Fragment" +--- +const htmlString = '

Raw HTML content

'; +--- + +``` + +### Differenze tra Astro e JSX + +La sintassi del componente Astro è un superset di HTML. È stato progettato per risultare familiare a chiunque abbia esperienza con HTML o JSX, ma ci sono un paio di differenze fondamentali tra i file ".astro" e JSX. + +#### Attributi + +In Astro, utilizzi il formato standard "kebab-case" per tutti gli attributi HTML invece del formato "camelCase" utilizzato in JSX. Funziona anche per "class", che non è supportato da React. + +```jsx del={1} ins={2} title="example.astro" +
+
+``` + +#### Elementi multipli + +Un modello di componente Astro può eseguire il rendering di più elementi senza la necessità di racchiudere tutto in un singolo `
` o `<>`, a differenza di JavaScript o JSX. + +```astro title="src/components/RootElements.astro" +--- +// Template with multiple elements +--- +

No need to wrap elements in a single containing element.

+

Astro supports multiple root elements in a template.

+``` + +#### Commenti + +In Astro, puoi utilizzare commenti HTML standard o commenti in stile JavaScript. + +```astro title="example.astro" +--- +--- + +{/* JS comment syntax is also valid */} +``` + +:::caution +I commenti in stile HTML verranno inclusi nel DOM del browser, mentre quelli JS verranno saltati. Per lasciare messaggi TODO o altre spiegazioni riservate allo sviluppo, potresti invece voler utilizzare commenti in stile JavaScript. +::: diff --git a/src/content/docs/it/core-concepts/endpoints.mdx b/src/content/docs/it/core-concepts/endpoints.mdx new file mode 100644 index 0000000000000..67c80c547cd2a --- /dev/null +++ b/src/content/docs/it/core-concepts/endpoints.mdx @@ -0,0 +1,222 @@ +--- +title: Endpoint +description: Scopri come creare endpoint che servono qualsiasi tipo di dati +--- +import RecipeLinks from "~/components/RecipeLinks.astro"; + +Astro ti consente di creare endpoint personalizzati per servire qualsiasi tipo di dati. Puoi utilizzarlo per generare immagini, esporre un documento RSS o utilizzarli come percorsi API per creare un'API completa per il tuo sito. + +Nei siti generati staticamente, gli endpoint personalizzati vengono chiamati in fase di compilazione per produrre file statici. Se attivi la modalità [SSR](/it/guides/server-side-rendering/), gli endpoint personalizzati si trasformano in endpoint server live che vengono chiamati su richiesta. Gli endpoint statici e SSR sono definiti in modo simile, ma gli endpoint SSR supportano funzionalità aggiuntive. + +## Endpoint file statici + +Per creare un endpoint personalizzato, aggiungi un file `.js` o `.ts` alla directory `/pages`. L'estensione `.js` o `.ts` verrà rimossa durante il processo di creazione, quindi il nome del file dovrebbe includere l'estensione dei dati che desideri creare. Ad esempio, `src/pages/data.json.ts` creerà un endpoint `/data.json`. + +Gli endpoint esportano una funzione `GET` (facoltativamente `async`) che riceve un [oggetto contesto](/it/reference/api-reference/#endpoint-context) con proprietà simili al globale `Astro`. Qui restituisce un oggetto Response con un `nome` e un `url` e Astro lo chiamerà in fase di compilazione e utilizzerà il contenuto del corpo per generare il file. + +```ts +// Example: src/pages/builtwith.json.ts +// Outputs: /builtwith.json +export async function GET({params, request}) { + return new Response( + JSON.stringify({ + name: 'Astro', + url: 'https://astro.build/' + }) + ) +} +``` + +A partire da Astro v3.0, l'oggetto `Response` restituito non deve più includere la proprietà `encoding`. Ad esempio, per produrre un'immagine png binaria: + +```ts title="src/pages/astro-logo.png.ts" {3} +export async function GET({ params, request }) { + const response = await fetch("https://docs.astro.build/assets/full-logo-light.png"); + return new Response(await response.arrayBuffer()); +} +``` + +Puoi anche aggiungere i tipi per le funzioni dell'endpoint utilizzando il tipo `APIRoute`: + +```ts +import type { APIRoute } from 'astro'; + +export const GET: APIRoute = async ({ params, request }) => {...} +``` + +### `params` e routing dinamico + +Gli endpoint supportano le stesse funzionalità di [routing dinamico](/it/core-concepts/routing/#percorsi-dinamici) delle pagine. Assegna un nome al file con un nome di parametro tra parentesi ed esporta una [funzione `getStaticPaths()`](/it/reference/api-reference/#getstaticpaths). Quindi, puoi accedere al parametro utilizzando la proprietà `params` passata alla funzione endpoint: + +```ts title="src/pages/api/[id].json.ts" +import type { APIRoute } from 'astro'; + +const usernames = ["Sarah", "Chris", "Yan", "Elian"] + +export const GET: APIRoute = ({ params, request }) => { + const id = params.id; + return new Response( + JSON.stringify({ + name: usernames[id] + }) + ) +} + +export function getStaticPaths() { + return [ + { params: { id: "0"} }, + { params: { id: "1"} }, + { params: { id: "2"} }, + { params: { id: "3"} } + ] +} +``` + +Ciò genererà quattro endpoint JSON in fase di compilazione: `/api/0.json`, `/api/1.json`, `/api/2.json` e `/api/3.json`. Il routing dinamico con gli endpoint funziona allo stesso modo delle pagine, ma poiché l'endpoint è una funzione e non un componente, le [proprietà](/it/reference/api-reference/#data-passing-with-props) non sono supportate. + +### `request` + +Tutti gli endpoint ricevono una proprietà `request`, ma in modalità statica hai accesso solo a `request.url`. Restituisce l´URL completo dell'endpoint corrente e funziona allo stesso modo di [Astro.request.url](/it/reference/api-reference/#astrorequest) per le pagine. + +```ts title="src/pages/request-path.json.ts" +import type { APIRoute } from 'astro'; + +export const GET: APIRoute = ({ params, request }) => { + return new Response(JSON.stringify({ + path: new URL(request.url).pathname + }) + ) +} +``` + +## Endpoint server (percorsi API) + +Tutto quanto descritto nella sezione endpoint file statici può essere utilizzato anche in modalità SSR: i file possono esportare una funzione `GET` che riceve un [oggetto contesto](/it/reference/api-reference/#endpoint-context) con proprietà simili a l´`Astro` globale. + +Ma, a differenza della modalità `static`, quando configuri la modalità `server`, gli endpoint verranno creati quando verranno richiesti. Ciò sblocca nuove funzionalità che non sono disponibili in fase di creazione e ti consente di creare percorsi API che ascoltano le richieste ed eseguono in modo sicuro il codice sul server in fase di esecuzione. + + + +:::note +Assicurati di [abilitare SSR](/it/guides/server-side-rendering/) prima di provare questi esempi. +::: + +Gli endpoint server possono accedere a `params` senza esportare `getStaticPaths` e possono restituire un oggetto [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response), consentendoti per impostare codici di stato e intestazioni: + +```js title="src/pages/[id].json.js" +import { getProduct } from '../db'; + +export async function GET({ params }) { + const id = params.id; + const product = await getProduct(id); + + if (!product) { + return new Response(null, { + status: 404, + statusText: 'Not found' + }); + } + + return new Response( + JSON.stringify(product), { + status: 200, + headers: { + "Content-Type": "application/json" + } + } + ); +} +``` + +Questo risponderà a qualsiasi richiesta che corrisponda al percorso dinamico. Ad esempio, se navighiamo su `/helmet.json`, `params.id` verrà impostato su `helmet`. Se `helmet` esiste nel database del prodotto fittizio, l'endpoint utilizzerà la creazione di un oggetto `Response` per rispondere con JSON e restituire un [codice di stato HTTP](https://developer.mozilla.org/en-US/docs/Web/API/Response/status) riuscito. In caso contrario, utilizzerà un oggetto `Response` per rispondere con un `404`. + +In modalità SSR, alcuni provider richiedono l'intestazione `Content-Type` per restituire un'immagine. In questo caso, utilizza un oggetto `Response` per specificare una proprietà `headers`. Ad esempio, per produrre un'immagine binaria `.png`: + +```ts title="src/pages/astro-logo.png.ts" +export async function GET({ params, request }) { + const response = await fetch("https://docs.astro.build/assets/full-logo-light.png"); + const buffer = Buffer.from(await response.arrayBuffer()); + return new Response(buffer, { + headers: { "Content-Type": "image/png" }, + }); +} +``` + +### Metodi HTTP + +Oltre alla funzione `GET`, puoi esportare una funzione con il nome di qualsiasi [metodo HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). Quando arriva una richiesta, Astro controllerà il metodo e chiamerà la funzione corrispondente. + +Puoi anche esportare una funzione `ALL` per far corrispondere qualsiasi metodo che non abbia una funzione esportata corrispondente. Se è presente una richiesta senza metodo corrispondente, verrà reindirizzata alla [pagina 404](/it/core-concepts/astro-pages/#pagina-di-errore-404-personalizzata) del tuo sito. + +```ts title="src/pages/methods.json.ts" +export const GET: APIRoute = ({ params, request }) => { + return new Response(JSON.stringify({ + message: "This was a GET!" + }) + ) +} + +export const POST: APIRoute = ({ request }) => { + return new Response(JSON.stringify({ + message: "This was a POST!" + }) + ) +} + +export const DELETE: APIRoute = ({ request }) => { + return new Response(JSON.stringify({ + message: "This was a DELETE!" + }) + ) +} + +export const ALL: APIRoute = ({ request }) => { + return new Response(JSON.stringify({ + message: `This was a ${request.method}!` + }) + ) +} +``` + + + +### `request` + +In modalità SSR, la proprietà `request` restituisce un oggetto [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) completamente utilizzabile che fa riferimento alla richiesta corrente. Ciò ti consente di accettare dati e controllare le intestazioni: + +```ts title="src/pages/test-post.json.ts" +export const POST: APIRoute = async ({ request }) => { + if (request.headers.get("Content-Type") === "application/json") { + const body = await request.json(); + const name = body.name; + return new Response(JSON.stringify({ + message: "Your name was: " + name + }), { + status: 200 + }) + } + return new Response(null, { status: 400 }); +} +``` + +### Reindirizzamenti + +Il contesto dell'endpoint esporta un'utilità `redirect()` simile a `Astro.redirect`: + +```js title="src/pages/links/[id].js" {14} +import { getLinkUrl } from '../db'; + +export async function GET({ params, redirect }) { + const { id } = params; + const link = await getLinkUrl(id); + + if (!link) { + return new Response(null, { + status: 404, + statusText: 'Not found' + }); + } + + return redirect(link, 307); +} +``` diff --git a/src/content/docs/it/core-concepts/framework-components.mdx b/src/content/docs/it/core-concepts/framework-components.mdx index fe127d98c7693..f85d3cc119f19 100644 --- a/src/content/docs/it/core-concepts/framework-components.mdx +++ b/src/content/docs/it/core-concepts/framework-components.mdx @@ -5,7 +5,7 @@ description: Impara come usare React, Svelte, ecc. Costruisci il tuo sito web Astro senza rinunciare al tuo framework UI preferito. -Astro supporta molti tra i framework più diffusi, tra cui [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/) e [Lit](https: //lit.dev/). +Astro supporta molti tra i framework più diffusi, tra cui [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/) e [Lit](https://lit.dev/). ## Installazione delle integrazioni @@ -129,7 +129,7 @@ import MyReactSidebar from '../components/MyReactSidebar.jsx'; ``` -Inoltre, puoi utilizzare [slot nominati](/it/core-concepts/astro-components/#named-slots) per raggruppare insieme figli specifici. +Inoltre, puoi utilizzare [slot nominati](/it/core-concepts/astro-components/#slot-con-nome) per raggruppare insieme figli specifici. Per React, Preact e Solid questi slot verranno convertiti in proprietà di livello superiore. I nomi degli slot che utilizzano `kebab-case` verranno convertiti in `camelCase`. @@ -205,7 +205,7 @@ Il rendering dei componenti Astro viene sempre eseguito in HTML statico, anche q Qualsiasi componente del framework dell'interfaccia utente diventa un´"isola" di tale framework. Questi componenti devono essere scritti interamente come codice valido per quel framework, utilizzando solo le proprie importazioni e pacchetti. Non è possibile importare componenti `.astro` in un componente del framework dell'interfaccia utente (ad esempio `.jsx` o `.svelte`). -Puoi, tuttavia, utilizzare [il pattern Astro ``](/it/core-concepts/astro-components/#slots) per passare il contenuto statico generato dai componenti Astro come figli ai componenti del framework **all'interno di un Componente `.astro`**. +Puoi, tuttavia, utilizzare [il pattern Astro ``](/it/core-concepts/astro-components/#slot) per passare il contenuto statico generato dai componenti Astro come figli ai componenti del framework **all'interno di un Componente `.astro`**. ```astro title="src/pages/astro-children.astro" {6} --- diff --git a/src/content/docs/it/core-concepts/layouts.mdx b/src/content/docs/it/core-concepts/layouts.mdx index 121e07ad3c50d..29b5c408a46e8 100644 --- a/src/content/docs/it/core-concepts/layouts.mdx +++ b/src/content/docs/it/core-concepts/layouts.mdx @@ -7,9 +7,9 @@ I **Layout** sono [componenti Astro](/it/core-concepts/astro-components/) utiliz Usiamo convenzionalmente il termine "layout" per i componenti Astro che forniscono elementi comuni dell'interfaccia utente condivisi tra le pagine come intestazioni, barre di navigazione e piè di pagina. Un tipico componente di layout Astro fornisce [pagine Astro, Markdown o MDX](/it/core-concepts/astro-pages/) con: - una **shell di pagina** (tag ``, `` e ``) -- uno [**``**](/it/core-concepts/astro-components/#slots) per specificare dove deve essere inserito il contenuto della singola pagina. +- uno [**``**](/it/core-concepts/astro-components/#slot) per specificare dove deve essere inserito il contenuto della singola pagina. - Ma non c'è niente di speciale in un componente di layout! Possono [accettare proprietà](/it/core-concepts/astro-components/#component-props) e [importare e utilizzare altri componenti](/it/core-concepts/astro-components/#component-structure) come qualsiasi altro altro componente Astro. Possono includere [componenti del framework dell'interfaccia utente](/it/core-concepts/framework-components/) e [script lato client](/it/guides/client-side-scripts/). Non devono nemmeno fornire una shell di pagina intera e possono invece essere utilizzati come modelli di interfaccia utente parziali. + Ma non c'è niente di speciale in un componente di layout! Possono [accettare proprietà](/it/core-concepts/astro-components/#proprietà-dei-componenti) e [importare e utilizzare altri componenti](/it/core-concepts/astro-components/#struttura-dei-componenti) come qualsiasi altro altro componente Astro. Possono includere [componenti del framework dell'interfaccia utente](/it/core-concepts/framework-components/) e [script lato client](/it/guides/client-side-scripts/). Non devono nemmeno fornire una shell di pagina intera e possono invece essere utilizzati come modelli di interfaccia utente parziali. I componenti del layout vengono comunemente posizionati in una directory `src/layouts` nel progetto per l'organizzazione, ma questo non è un requisito; puoi scegliere di posizionarli ovunque nel tuo progetto. Puoi anche collocare i componenti del layout accanto alle tue pagine [prefissando i nomi dei layout con `_`](/it/core-concepts/routing/#pagine-escluse). @@ -53,7 +53,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro'; ``` -📚 Scopri di più sugli [slot](/it/core-concepts/astro-components/#slots). +📚 Scopri di più sugli [slot](/it/core-concepts/astro-components/#slot). ## Layout Markdown/MDX @@ -79,7 +79,7 @@ Puoi usarlo sia nei file Markdown che MDX situati in `src/pages/`. Un layout tipico per le pagine Markdown o MDX include: 1. La proprietà `frontmatter` per accedere al frontmatter e ad altri dati della pagina Markdown o MDX. -2. Uno [``](/it/core-concepts/astro-components/#slots) predefinito per indicare dove deve essere visualizzato il contenuto Markdown/MDX della pagina. +2. Uno [``](/it/core-concepts/astro-components/#slot) predefinito per indicare dove deve essere visualizzato il contenuto Markdown/MDX della pagina. ```astro /(?" ---