-
- {rows.map((post) => (
-
- {post.title} - ))} -
{rows[0].title}
-``` - -## Risorse per Turso -- [Documentazione di Turso](https://docs.turso.tech) -- [Turso su GitHub](https://github.com/tursodatabase) -- [Utilizzo di Turso per servire il contenuto di un blog Astro renderizzato lato server](https://blog.turso.tech/using-turso-to-serve-a-server-side-rendered-astro-blogs-content-58caa6188bd5) diff --git a/src/content/docs/it/guides/backend/xata.mdx b/src/content/docs/it/guides/backend/xata.mdx deleted file mode 100644 index 4954a9bc33955..0000000000000 --- a/src/content/docs/it/guides/backend/xata.mdx +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Xata & Astro -description: Aggiungi un database serverless con ricerca full-text al tuo progetto con Xata -type: backend -service: Xata -stub: false -i18nReady: true ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import { FileTree } from '@astrojs/starlight/components'; - - -[Xata](https://xata.io) è una **Piattaforma dati serverless** che combina le funzionalità di un database relazionale, un motore di ricerca e un motore di analisi, e li rende utilizzabili attraverso una singola REST API. - -## Aggiunta di un database con Xata - -### Prerequisiti - -- Un account [Xata](https://app.xata.io/signin) con un database. (Puoi utilizzare il database di esempio dall'interfaccia utente.) -- Un Token di Accesso (`XATA_TOKEN_API`). -- L'URL del tuo Database. - -Dopo aver aggiornato e inizializzato la [Xata CLI](https://xata.io/docs/getting-started/installation), avrai il tuo token per l'API nel file `.env` e l'URL del database. - -Alla fine della configurazione, dovresti avere: - -```ini title=".env" -XATA_API_KEY=hash_key - -# Branch Xata che verrà utilizzato -# se non esiste un branch xata con -# lo stesso nome del tuo branch git -XATA_BRANCH=main -``` - -E l'URL del database: - -```ini title=".xatarc" -{ - "databaseUrl": "https://il-tuo-url-del-database" -} -``` - -### Configurazione dell'ambiente - -Per avere IntelliSense e dei tipi per le tue variabili d'ambiente, modifica o crea il file `env.d.ts` nella tua cartella `src/`: - -```ts title="src/env.d.ts" -interface ImportMetaEnv { - readonly XATA_API_KEY: string; - readonly XATA_BRANCH?: string; -} - -interface ImportMeta { - readonly env: ImportMetaEnv; -} -``` - -:::tip -Per ulteriori informazioni sulle [variabili d'ambiente](/it/guides/environment-variables/) e sui file `.env` in Astro, leggi questa guida. -::: - -Utilizzando la Xata CLI per generare il codice di base e scegliendo l'opzione TypeScript, sarà generata un'istanza del SDK per te, con i tipi adattati allo schema del tuo database. Inoltre, `@xata.io/client` sarà aggiunto al tuo `package.json`. - -Le tue variabili d'ambiente Xata e l'URL del database sono stati automaticamente acquisiti dall'istanza del SDK, quindi non è necessario alcun altro lavoro di configurazione. - -Ora, il tuo progetto dovrebbe avere la seguente struttura: - --
- {records.map((post) => (
-
- {post.title} - ))} -
Usa componenti React direttamente in Astro!
-
-
-```
-
-:::caution
-Solo i componenti **Astro** (`.astro`) possono contenere componenti provenienti da più framework.
-:::
-
-## Passaggio di proprietà ai componenti dei framework
-
-Puoi passare proprietà dai componenti Astro ai componenti dei framework:
-
-```astro title="src/pages/frameworks-props.astro"
----
-import TodoList from '../components/TodoList.jsx';
-import Counter from '../components/Counter.svelte';
----
-
-
-```
-
-:::caution[passare funzioni come proprietà]
-Puoi passare una funzione come proprietà a un componente di un framework, ma questo funzionerà solo durante il rendering del server. Se provi a utilizzare la funzione in un componente idratato (ad esempio, come gestore eventi), si verificherà un errore.
-
-Questo perché le funzioni non possono essere _serializzate_ (trasferite dal server al client) da Astro.
-:::
-
-
-## Passaggio dei figli ai componenti del framework
-
-All'interno di un componente Astro, **puoi** passare dei figli ai componenti di un framework. Ogni framework ha un proprio meccanismo per fare riferimento a componenti figli: React, Preact e Solid usano tutti un oggetto speciale chiamato `children`, mentre Svelte e Vue usano l'elemento `Ecco una barra laterale con del testo e un pulsante.
-Menu
-Ecco una barra laterale con del testo e un pulsante.
- -Ecco una barra laterale con del testo e un pulsante.
-
-
-Read more about Astro!
-``` - -## Percorsi statici - -[I componenti della pagina](/it/basics/astro-pages/) `.astro` nonché file Markdown e MDX (`.md`, `.mdx`) nella directory `src/pages/` **diventano automaticamente pagine del tuo sito web**. Il percorso di ogni pagina corrisponde al suo percorso e al nome file all'interno della directory `src/pages/`. - -```diff -# Esempio: percorsi statici -src/pages/index.astro -> mysite.com/ -src/pages/about.astro -> mysite.com/about -src/pages/about/index.astro -> mysite.com/about -src/pages/about/me.astro -> mysite.com/about/me -src/pages/posts/1.md -> mysite.com/posts/1 -``` - -:::tip -Non esiste una "configurazione di routing" separata da mantenere in un progetto Astro! Quando aggiungi un file alla directory `src/pages/`, viene creato automaticamente un nuovo percorso. Nelle build statiche, puoi personalizzare il formato di output del file utilizzando l'opzione di configurazione [`build.format`](/it/reference/configuration-reference/#buildformat). -::: - -## Percorsi dinamici - -Un file di pagine Astro può specificare parametri di percorso dinamici nel nome file per generare più pagine corrispondenti. Ad esempio, `src/pages/authors/[author].astro` genera una pagina bio per ogni autore sul tuo blog. `author` diventa un _parametro_ a cui puoi accedere dall'interno della pagina. - -Nella modalità di output statica predefinita di Astro, queste pagine vengono generate al momento della creazione, quindi è necessario predeterminare l'elenco degli `author` che ottengono un file corrispondente. In modalità SSR, verrà generata una pagina su richiesta per qualsiasi percorso corrispondente. - -### Modalità statica (SSG) - -Poiché tutte le rotte devono essere determinate in fase di creazione, una rotta dinamica deve esportare un `getStaticPaths()` che restituisce un array di oggetti con una proprietà `params`. Ciascuno di questi oggetti genererà un percorso corrispondente. - -`[dog].astro` definisce il parametro dinamico `dog` nel suo nome file, quindi gli oggetti restituiti da `getStaticPaths()` devono includere `dog` nei loro `params`. La pagina può quindi accedere a questo parametro utilizzando `Astro.params`. - -```astro title="src/pages/dogs/[dog].astro" ---- -export function getStaticPaths() { - return [ - {params: {dog: 'clifford'}}, - {params: {dog: 'rover'}}, - {params: {dog: 'spot'}}, - ]; -} - -const { dog } = Astro.params; ---- -Good dog, {dog}!
-```
-
-Verranno generate tre pagine: `/dogs/clifford`, `/dogs/rover` e `/dogs/spot`, ciascuna contenente il nome del cane corrispondente.
-
-Il nome file può includere più parametri, che devono essere tutti inclusi negli oggetti `params` in `getStaticPaths()`:
-
-```astro title="src/pages/[lang]-[version]/info.astro"
----
-export function getStaticPaths () {
- return [
- {params: {lang: 'en', version: 'v1'}},
- {params: {lang: 'fr', version: 'v2'}},
- ];
-}
-
-const { lang, version } = Astro.params;
----
-...
-```
-
-Questo genererà `/en-v1/info` e `/fr-v2/info`.
-
-I parametri possono essere inclusi in parti separate del percorso. Ad esempio, il file `src/pages/[lang]/[version]/info.astro` con lo stesso `getStaticPaths()` genererà i percorsi `/it/v1/info` e `/fr/v2/info`.
-
-{title}
-{text}
- - -``` - -### Modalità server (SSR) -Nella [modalità SSR](/it/guides/on-demand-rendering/), i percorsi dinamici sono definiti allo stesso modo: includi parentesi `[param]` o `[...path]` nei nomi dei file per corrispondere a quelli arbitrari stringhe o percorsi. Ma poiché i percorsi non vengono più creati in anticipo, la pagina verrà pubblicata su qualsiasi percorso corrispondente. Poiché questi non sono percorsi "statici", non è necessario utilizzare `getStaticPaths`. - -```astro title="src/pages/resources/[resource]/[id].astro" ---- -const { resource, id } = Astro.params; ---- -{resource}: {id}
-``` -Questa pagina verrà pubblicata per qualsiasi valore di `risorsa` e `id`: `resources/users/1`, `resources/colors/blue`, ecc. - -#### Modifica dell'esempio `[...slug]` per SSR - -Poiché le pagine SSR non possono utilizzare `getStaticPaths()`, non possono ricevere proprietà. L'[esempio precedente](#esempio-pagine-dinamiche-a-più-livelli) può essere adattato per la modalità SSR cercando il valore del parametro `slug` in un oggetto. Se il percorso è alla radice ("/"), il parametro slug sarà `undefined`. Se il valore non esiste nell'oggetto, reindirizziamo a una pagina 404. - -```astro title="src/pages/[...slug].astro" ---- -const pages = [ - { - slug: undefined, - title: 'Astro Store', - text: 'Welcome to the Astro store!', - }, - { - slug: 'products', - title: 'Astro products', - text: 'We have lots of products for you', - }, - { - slug: 'products/astro-handbook', - title: 'The ultimate Astro handbook', - text: 'If you want to learn Astro, you must read this book.', - } -]; - -const { slug } = Astro.params; -const page = pages.find((page) => page.slug === slug); -if (!page) return Astro.redirect("/404"); -const { title, text } = page; ---- - - -{title}
-{text}
- - -``` - -## Reindirizzamenti - -A volte dovrai reindirizzare i tuoi lettori a una nuova pagina, in modo permanente perché la struttura del tuo sito è cambiata o in risposta a un'azione come l'accesso a un percorso autenticato. - -Puoi definire le regole per [reindirizzare gli utenti alle pagine spostate in modo permanente](#reindirizzamenti-configurati) nella configurazione di Astro. Oppure [reindirizza gli utenti in modo dinamico](#reindirizzamenti-dinamici) mentre utilizzano il tuo sito. - -### Reindirizzamenti configurati - -Page {page.currentPage}
--
-
- {page.data.map(({ astronaut }) =>
- {astronaut} )} -
Page {page.currentPage}
--
- {page.data.map(({ astronaut }) =>
- {astronaut} )} -
{data.greeting} world!
- ``` diff --git a/src/content/docs/it/recipes/captcha.mdx b/src/content/docs/it/recipes/captcha.mdx deleted file mode 100644 index e7eeb0cad6c66..0000000000000 --- a/src/content/docs/it/recipes/captcha.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Verifica un Captcha -description: Impara come creare un percorso API e recuperarlo dal client. -i18nReady: true -type: recipe ---- - -Gli [endpoints del server](/it/guides/endpoints/#endpoint-server-percorsi-api) possono essere utilizzati come endpoint API REST per eseguire funzioni come autenticazioni, accesso al database e verifiche senza esporre dati sensibili al client. - -In questa ricetta, un percorso API viene utilizzato per verificare Google reCAPTCHA v3 senza esporre il secret ai client. - -## Prerequisiti -- Un progetto con [SSR](/it/guides/on-demand-rendering/) (`output: 'server'`) abilitato - -## Ricetta - -1. Crea un endpoint `POST` che accetta i dati di recaptcha, quindi li verifica con l'API di reCAPTCHA. Qui puoi definire in modo sicuro i valori segreti o leggere le variabili di ambiente. - - ```js title="src/pages/recaptcha.js" - export async function POST({ request }) { - const data = await request.json(); - - const recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify'; - const requestHeaders = { - 'Content-Type': 'application/x-www-form-urlencoded' - }; - const requestBody = new URLSearchParams({ - secret: "YOUR_SITE_SECRET_KEY", // This can be an environment variable - response: data.recaptcha // The token passed in from the client - }); - - const response = await fetch(recaptchaURL, { - method: "POST", - headers: requestHeaders, - body: requestBody.toString() - }); - - const responseData = await response.json(); - - return new Response(JSON.stringify(responseData), { status: 200 }); - } - ``` - -2. Accedi al tuo endpoint utilizzando `fetch` da uno script client: - - ```astro title="src/pages/index.astro" - - - - - - - - - - - - ``` diff --git a/src/content/docs/it/recipes/external-links.mdx b/src/content/docs/it/recipes/external-links.mdx deleted file mode 100644 index 3124d857e0efe..0000000000000 --- a/src/content/docs/it/recipes/external-links.mdx +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Aggiungi delle icone ai link esterni -description: Impara come installare un plugin rehype per aggiungere icone ai link esterni nei tuoi file Markdown. -i18nReady: true -type: recipe ---- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - -Usando un plugin rehype, puoi identificare e modificare i link nei tuoi file Markdown che puntano a siti esterni. Questo esempio aggiunge icone alla fine di ogni link esterno, in modo che i visitatori sappiano che stanno lasciando il tuo sito. - -## Prerequisiti -- Un progetto Astro che usa Markdown per le pagine. - -## Ricetta - -1. Installa il plugin `rehype-external-links`. - -
-
-```
-
-### 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";
----
-Hello {name}!
-Attribute expressions are supported
- --
- {items.map((item) => (
-
- {item} - ))} -
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! -Raw HTML content
'; ---- -` 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/tutorial/2-pages/3.mdx b/src/content/docs/it/tutorial/2-pages/3.mdx index 08c8bcfb8e73d..b1f2f0d540402 100644 --- a/src/content/docs/it/tutorial/2-pages/3.mdx +++ b/src/content/docs/it/tutorial/2-pages/3.mdx @@ -283,4 +283,4 @@ Per ogni espressione del template Astro, puoi prevedere l'HTML (se presente!) ch ### Risorse -- [Espressioni dinamiche in Astro](/it/reference/astro-syntax/#espressioni-simili-a-jsx) +- [Espressioni dinamiche in Astro](/it/reference/astro-syntax/#jsx-like-expressions) diff --git a/src/content/docs/it/tutorial/2-pages/4.mdx b/src/content/docs/it/tutorial/2-pages/4.mdx index 77f492a537245..8b0314f7dcb5e 100644 --- a/src/content/docs/it/tutorial/2-pages/4.mdx +++ b/src/content/docs/it/tutorial/2-pages/4.mdx @@ -199,7 +199,7 @@ const textCase = "uppercase"; ### Risorse -- [Sintassi Astro vs JSX - confronto](/it/reference/astro-syntax/#differenze-tra-astro-e-jsx) +- [Sintassi Astro vs JSX - confronto](/it/reference/astro-syntax/#differences-between-astro-and-jsx) - [Tag `