diff --git a/README.md b/README.md index 90b47fd46d315..b668603315b0a 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,6 @@ This repo contains all the source code we use to build our docs site. [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/withastro/docs) [![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/github.com/withastro/docs) -🎃 **Participating in Hacktoberfest?** [See our Hacktoberfest guide](https://github.com/withastro/docs/blob/main/.github/hacktoberfest.md)! 🎃 - ## We are Astro Astro is an all-in-one web framework for building fast, content-focused websites. diff --git a/contributor-guides/translating-astro-docs.md b/contributor-guides/translating-astro-docs.md index 73cc93adde86b..ce458548a47d6 100644 --- a/contributor-guides/translating-astro-docs.md +++ b/contributor-guides/translating-astro-docs.md @@ -2,8 +2,6 @@ Thanks for your interest in helping us translate [docs.astro.build](https://docs.astro.build/)! This can be a great way to get involved with open-source development without having to code. -**Participating in Hacktoberfest?** See how you can get recognized for your translation PRs and PR reviews in our [Hacktoberfest guide](../.github/hacktoberfest.md). - Currently, we are aiming to translate the Astro documentation into the following languages: - Brazilian Portuguese diff --git a/src/content/docs/es/guides/cms/tina-cms.mdx b/src/content/docs/es/guides/cms/tina-cms.mdx index 31fa1b26cff4c..eeb5d443aa452 100644 --- a/src/content/docs/es/guides/cms/tina-cms.mdx +++ b/src/content/docs/es/guides/cms/tina-cms.mdx @@ -38,7 +38,7 @@ Para empezar, necesitarás un proyecto Astro existente. - Cuando se te pregunte "¿Qué framework estás usando?", escoge **Otro**. - Cuando se te pregunte donde se almacenan los archivos del directorio public, presione Enter. - Depués de haber terminado lo anterior, deberías tener una carpeta `.tina` en la raíz de tu proyecto y una carpeta `admin` en tu directorio public. También creará un archivo Markdown en `content/posts/hello-world.md`. + Depués de haber terminado lo anterior, deberías tener una carpeta `.tina` en la raíz de tu proyecto y un archivo `hello-world.md` generado en `content/posts/hello-world.md`. 2. Cambia el script `dev` en `package.json`: @@ -132,7 +132,7 @@ Para empezar, necesitarás un proyecto Astro existente. name: "body", label: "Body", isBody: true, - }, + }, ], }, ], diff --git a/src/content/docs/es/guides/markdown-content.mdx b/src/content/docs/es/guides/markdown-content.mdx index 001897df302f1..0db36ad9e3a75 100644 --- a/src/content/docs/es/guides/markdown-content.mdx +++ b/src/content/docs/es/guides/markdown-content.mdx @@ -564,7 +564,7 @@ export default defineConfig({ ### Resaltado de sintaxis -Astro viene con soporte integrado para [Shiki](https://shiki.matsu.io/) y [Prism](https://prismjs.com/). Esto proporciona un resaltado de sintaxis instantáneo para: +Astro viene con soporte integrado para [Shiki](https://shiki.matsu.io/) (via [Shikiji](https://github.com/antfu/shikiji)) y [Prism](https://prismjs.com/). Esto proporciona un resaltado de sintaxis instantáneo para: - todas las vallas de código (\`\`\`) usadas en Markdown o archivos MDX. - el contenido dentro del [componente incorporado ``](/es/reference/api-reference/#code-) (con la tecnología de Shiki) @@ -585,6 +585,12 @@ export default defineConfig({ // Escoge entre los temas integrados de Shiki (o agrega los tuyos propios) // https://github.com/shikijs/shiki/blob/main/docs/themes.md theme: 'dracula', + // Alternativamente, proporciona múltiples temas. + // https://github.com/antfu/shikiji#lightdark-dual-themes + experimentalThemes: { + light: 'github-light', + dark: 'github-dark', + }, // Agrega lenguajes de programación personalizados // Nota: Shiki tiene innumerables lenguajes de programación incorporados, ¡incluido .astro! // https://github.com/shikijs/shiki/blob/main/docs/languages.md diff --git a/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx index ffb838017b2b9..144cbca347711 100644 --- a/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/es/guides/migrate-to-astro/from-nextjs.mdx @@ -504,12 +504,14 @@ Aquí te mostramos cómo recrear eso en `src/pages/index.astro`, remplazando `ge - El fragmento `<> ` no es necesario en la plantilla de Astro. + - `key` es un atributo de React y no es un atributo de `li` en Astro. + ```astro title="src/pages/index.astro" "class" "" " {pokemons.map((pokemon) => ( -
  • +
  • No. {pokemon.id}

    {`Foto diff --git a/src/content/docs/es/guides/view-transitions.mdx b/src/content/docs/es/guides/view-transitions.mdx index 5d138b624906d..dc1bace968651 100644 --- a/src/content/docs/es/guides/view-transitions.mdx +++ b/src/content/docs/es/guides/view-transitions.mdx @@ -250,7 +250,7 @@ Las siguientes opciones te permiten controlar aún más cuándo ocurre la navega Existen casos en los que no se puede navegar a través del enrutamiento del lado del cliente ya que ambas páginas involucradas deben utilizar el enrutador `` para evitar una recarga de página completa. También puede que no desees la navegación del lado del cliente en cada cambio de navegación y prefieras una navegación de página tradicional en rutas selectas en su lugar. -Puedes optar por no utilizar la navegación del lado del cliente de manera selectiva para cada enlace añadiendo el atributo `data-astro-reload` a cualquier etiqueta `
    `. Este atributo anulará cualquier componente `` existente y, en su lugar, provocará una recarga del navegador durante la navegación. +Puedes optar por no utilizar la navegación del lado del cliente de manera selectiva para cada enlace añadiendo el atributo `data-astro-reload` a cualquier etiqueta `` o `
    `. Este atributo anulará cualquier componente `` existente y, en su lugar, provocará una recarga del navegador durante la navegación. El siguiente ejemplo muestra cómo evitar la navegación del lado del cliente al navegar a un artículo desde la página de inicio únicamente. Esto aún te permite tener animaciones en elementos compartidos, como una imagen destacada, al navegar a la misma página desde una página de listado de artículos: @@ -339,6 +339,7 @@ El método `navigate` toma los siguientes argumentos: - `'push'`: el enrutador utilizará `history.pushState` para crear una nueva entrada en el historial del navegador. - `'replace'`: el enrutador utilizará `history.replaceState` para actualizar la URL sin agregar una nueva entrada en la navegación. - `'auto'` (por defecto): el enrutador intentará utilizar `history.pushState`, pero si la URL no es una que se pueda transicionar, la URL actual permanecerá sin cambios en el historial del navegador. + - `formData`: Un objeto FormData para solicitudes `POST`. Para navegar hacia atrás y hacia delante por el historial del navegador, puedes combinar `navigate()` con las funciones integradas `history.back()`, `history.forward()` e `history.go()` del navegador. Si `navigate()` es llamado durante la renderización del lado del servidor de tu componente, no tendrá efecto alguno. @@ -363,6 +364,34 @@ El siguiente ejemplo navega a la página `/main`, pero no agrega una nueva entra Esto tiene el efecto de que si retrocedes desde la página `/main`, el navegador no mostrará la página `/confirmation`, sino la página anterior a ella. +### Transiciones con formularios + + + +Por defecto, el enrutador `` solo realiza transiciones en la navegación desencadenada por clics en ``. También puedes permitir transiciones en envíos de formularios al agregar la opción `handleForms` en el enrutador. + +```astro title="src/pages/index.astro" +--- +import { ViewTransitions } from "astro:transitions"; +--- + + + + + + + + +``` + +Con esta opción, el enrutador activará transiciones dentro de la página desde elementos ``, admitiendo tanto solicitudes `GET` como `POST`. Puedes optar por excluir las transiciones del enrutador en formularios individuales mediante el atributo `data-astro-reload`: + +```astro title="src/components/Form.astro" + + + +``` + ## Control de respaldo El enrutador `` funciona mejor en navegadores que admiten las View Transitions (p.ej. navegadores basados en Chromium), pero también incluye soporte predeterminado de respaldo para otros navegadores. Incluso si el navegador no admite la API de View Transitions, Astro seguirá proporcionando navegación en el navegador utilizando una de las opciones de respaldo para obtener una experiencia comparable. diff --git a/src/content/docs/es/recipes.mdx b/src/content/docs/es/recipes.mdx index 37d4421495127..7ba38eec1a659 100644 --- a/src/content/docs/es/recipes.mdx +++ b/src/content/docs/es/recipes.mdx @@ -38,3 +38,4 @@ Mira ejemplos guiados de cómo agregar características a tu proyecto de Astro. - [Añade Github OAuth con Lucia](https://lucia-auth.com/guidebook/github-oauth/astro) - [Integrando Sentry con Astro](https://akashrajpurohit.com/blog/seamless-error-tracking-integrating-sentry-with-astro/) - [Configura páginas de borrador de manera efectiva en Astro con autoría de contenido impulsada por configuración](https://akashrajpurohit.com/blog/set-up-draft-pages-effectively-in-astro-with-configdriven-content-authoring/) +- [¿Cómo enviar cualquier dato a tu feed RSS? Una guía con Astro + RSS](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/) \ No newline at end of file diff --git a/src/content/docs/es/recipes/streaming-improve-page-performance.mdx b/src/content/docs/es/recipes/streaming-improve-page-performance.mdx new file mode 100644 index 0000000000000..72475648e0b82 --- /dev/null +++ b/src/content/docs/es/recipes/streaming-improve-page-performance.mdx @@ -0,0 +1,101 @@ +--- +title: "Utilizando transmisión para mejorar el rendimiento de la página" +description: "Aprende cómo utilizar la transmisión para mejorar el rendimiento de la página." +type: recipe +i18nReady: true +--- + +El SSR de Astro utiliza la transmisión de HTML para enviar cada componente al navegador cuando está disponible, lo que acelera la carga de la página. Para mejorar aún más el rendimiento de tu página, puedes construir estratégicamente tus componentes para optimizar su carga, evitando bloqueos durante la recuperación de datos. + +El siguiente ejemplo de refactorización demuestra cómo mejorar el rendimiento de la página al trasladar las llamadas de recuperación de datos a otros componentes, sacándolas de un componente donde bloquean el rendimiento de la página. + +La siguiente página realiza `await`s para la recuperación de algunos datos en su frontmatter. Astro esperará a que todas las llamadas `fetch` se resuelvan antes de enviar cualquier HTML al navegador. + +```astro title="src/pages/index.astro" +--- +const personResponse = await fetch('https://randomuser.me/api/'); +const personData = await personResponse.json(); +const randomPerson = personData.results[0]; +const factResponse = await fetch('https://catfact.ninja/fact'); +const factData = await factResponse.json(); +--- + + + Un nombre y un hecho + + +

    Un nombre

    +

    {randomPerson.name.first}

    +

    Un hecho

    +

    {factData.fact}

    + + +``` + +Al trasladar las llamadas `await` a componentes más pequeños, puedes aprovechar la transmisión de Astro. Al utilizar los siguientes componentes para realizar las recuperaciones de datos, Astro puede renderizar parte del HTML primero, como el título, y luego los párrafos cuando los datos estén listos. + +```astro title="src/components/RandomName.astro" +--- +const personResponse = await fetch('https://randomuser.me/api/'); +const personData = await personResponse.json(); +const randomPerson = personData.results[0]; +--- +

    {randomPerson.name.first}

    +``` + +```astro title="src/components/RandomFact.astro" +--- +const factResponse = await fetch('https://catfact.ninja/fact'); +const factData = await factResponse.json(); +--- +

    {factData.fact}

    +``` + +La página de Astro que se muestra a continuación, utilizando estos componentes, puede renderizar partes de la página más pronto. Las etiquetas ``, ``, y `

    ` ya no están bloqueadas por las recuperaciones de datos. El servidor luego recuperará datos para `RandomName` y `RandomFact` en paralelo y transmitirá el HTML resultante al navegador. + +```astro title="src/pages/index.astro" +--- +import RandomName from '../components/RandomName.astro' +import RandomFact from '../components/RandomFact.astro' +--- + + + Un nombre y un hecho + + +

    Un nombre

    + +

    Un hecho

    + + + +``` + +#### Incluyendo Promesas directamente + +También puedes incluir promesas directamente en la plantilla. En lugar de bloquear todo el componente, resolverá la promesa en paralelo y solo bloqueará el marcado que viene después de ella. + +```astro title="src/pages/index.astro" +--- +const personPromise = fetch('https://randomuser.me/api/') + .then(response => response.json()) + .then(arr => arr[0].name.first); +const factPromise = fetch('https://catfact.ninja/fact') + .then(response => response.json()) + .then(factData => factData.fact); +--- + + + Un nombre y un hecho + + +

    Un nombre

    +

    {personPromise}

    +

    Un hecho

    +

    {factPromise}

    + + +``` + +En este ejemplo, `Un nombre` se renderizará mientras se están cargando `personPromise` y `factPromise`. +Una vez que `personPromise` se haya resuelto, aparecerá `Un hecho` y `factPromise` se renderizará cuando haya terminado de cargarse. \ No newline at end of file diff --git a/src/content/docs/fr/guides/deploy/space.mdx b/src/content/docs/fr/guides/deploy/space.mdx index 778945b0e7fb9..148a7dab2cd31 100644 --- a/src/content/docs/fr/guides/deploy/space.mdx +++ b/src/content/docs/fr/guides/deploy/space.mdx @@ -35,9 +35,9 @@ Le CLI de Space tentera d'auto-détecter la configuration de votre application. Apportez les modifications suivantes au fichier `Spacefile` à la racine de votre projet généré par le CLI Space. - 1. Changez le moteur (engine) en `static`. - 2. Ajoutez la commande de compilation d'Astro à la liste des `commands`. - 3. Servez le répertoire `dist` généré par Astro. +1. Changez le moteur (engine) en `static`. +2. Ajoutez la commande de compilation d'Astro à la liste des `commands`. +3. Servez le répertoire `dist` généré par Astro. ```yaml title="Spacefile" {6,8,9} # Spacefile Docs: https://go.deta.dev/docs/spacefile/v0 diff --git a/src/content/docs/fr/recipes.mdx b/src/content/docs/fr/recipes.mdx index 02a879122edd3..25a5f9dcf20fa 100644 --- a/src/content/docs/fr/recipes.mdx +++ b/src/content/docs/fr/recipes.mdx @@ -8,6 +8,7 @@ import RecipesNav from '~/components/RecipesNav.astro'; Voir des exemples guidés pour ajouter des fonctionnalités à votre projet Astro. + ## Méthodes officielles @@ -37,3 +38,4 @@ Ajoutez les vôtres ici ! Voir notre [guide de contribution aux méthodes](https - [Ajouter GitHub OAuth avec Lucia](https://lucia-auth.com/guidebook/github-oauth/astro) - [Intégration de Sentry avec Astro](https://akashrajpurohit.com/blog/seamless-error-tracking-integrating-sentry-with-astro/) - [Configurer efficacement les pages de brouillon dans Astro avec la création de contenu basée sur la configuration](https://akashrajpurohit.com/blog/set-up-draft-pages-effectively-in-astro-with-configdriven-content-authoring/) +- [Comment envoyer n'importe quelle donnée vers votre flux RSS ? Un guide avec Astro + RSS](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/)