Skip to content

Commit

Permalink
Merge branch 'main' into update-nav-and-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
yanthomasdev authored Mar 13, 2024
2 parents 53d12b9 + 4f59bbb commit 5913405
Show file tree
Hide file tree
Showing 47 changed files with 1,829 additions and 200 deletions.
10 changes: 6 additions & 4 deletions src/content/docs/en/guides/astro-db.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Astro DB is a fully-managed SQL database designed exclusively for Astro. Develop

## Installation

Add Astro DB to a new or existing Astro project (requires `astro@4.5` or later) with the [`@astrojs/db` integration](/en/guides/integrations-guide/db/) (`v0.8.0` or later). Astro includes a built-in `astro add` command to automate this setup process for you.
Add Astro DB to a new or existing Astro project (requires `astro@4.5` or later) with the [`@astrojs/db` integration](/en/guides/integrations-guide/db/) (`v0.8.1` or later). Astro includes a built-in `astro add` command to automate this setup process for you.

<PackageManagerTabs>
<Fragment slot="npm">
Expand Down Expand Up @@ -54,6 +54,7 @@ export default defineDb({
Data in Astro DB is stored using SQL tables. Tables structure your data into rows and columns, where columns enforce the type of each row value. Astro DB supports the following column types:

```ts title="db/config.ts" "column.text()" "column.number()" "column.boolean()" "column.date()" "column.json()"
import { defineTable, column } from 'astro:db';

const Comment = defineTable({
columns: {
Expand Down Expand Up @@ -100,7 +101,7 @@ export default defineDb({

Relationships between tables are a common pattern in database design. For example, a `Blog` table may be closely related to other tables of `Comment`, `Author`, and `Category`.

You can define these relations tables and save them into your database schema using **reference columns**. To establish a relationship, you will need:
You can define these relations between tables and save them into your database schema using **reference columns**. To establish a relationship, you will need:

- An **identifier column** on the referenced table. This is usually an `id` column with the `primaryKey` property.
- A column on the base table to **store the referenced `id`**. This uses the `references` property establish a relationship.
Expand Down Expand Up @@ -212,7 +213,8 @@ const comments = await db.select().from(Comment);
<label for="author">Author</label>
<input id="author" name="author" />
<textarea name="content"></textarea>
<label for="content">Content</label>
<textarea id="content" name="content"></textarea>
<button type="submit">Submit</button>
</form>
Expand Down Expand Up @@ -312,7 +314,7 @@ This example seeds multiple rows in a single request using the `db.batch()` meth
import { db, Author, Comment } from 'astro:db';

export default async function () {
let queries;
const queries = [];
// Seed 100 sample comments into your remote database
// with a single network request.
for (let i = 0; i < 100; i++) {
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/guides/cms/ghost.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,6 @@ To deploy your site visit our [deployment guide](/en/guides/deploy/) and follow
- [`astro-starter-ghost`](https://github.com/PhilDL/astro-starter-ghost) on GitHub
- [`astro-ghostcms`](https://github.com/MatthiesenXYZ/astro-ghostcms) on GitHub
- [Astro + Ghost + Tailwind CSS](https://andr.ec/posts/astro-ghost-blog/) by Andre Carrera
- [Ghost CMS & Astro Tutorial](https://matthiesen.xyz/blog/tutorial-ghost-cms-astro) by Adam Matthiesen
- [Ghost CMS & Astro Tutorial](https://matthiesen.xyz/blog/astro-ghostcms) by Adam Matthiesen


8 changes: 5 additions & 3 deletions src/content/docs/en/guides/cms/strapi.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -206,9 +206,11 @@ You can modify this interface, or create multiple interfaces, to correspond to y
<ul>
{
articles.map((article) => (
<a href={`/blog/${article.attributes.slug}/`}>
{article.attributes.title}
</a>
<li>
<a href={`/blog/${article.attributes.slug}/`}>
{article.attributes.title}
</a>
</li>
))
}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/reference/configuration-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1230,7 +1230,7 @@ Alternatively, you can set this in your [VSCode `json.schemas` settings](https:/
"fileMatch": [
"/src/content/test/**"
],
"url": "../../../.astro/collections/test.schema.json"
"url": "./.astro/collections/test.schema.json"
}
]
```
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorials/add-view-transitions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ With view transitions, some scripts may no longer re-run after page navigation l
document.addEventListener('astro:after-swap', () => {
localStorage.theme === 'dark'
? document.documentElement.classList.add("dark")
: document.documentElement.classList.add("light");
: document.documentElement.classList.remove("dark");
});
</script>
```
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/es/guides/integrations-guide/lit.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ public-hoist-pattern[]=*lit*

### Limitaciones

- La integración de Lit está impulsada por `@lit-labs/ssr`que tiene algunas limitaciones. Consulta su [documentación de limitaciones](https://www.npmjs.com/package/@lit-labs/ssr#user-content-notes-and-limitations) para obtener más información al respecto.
- La integración de Lit está impulsada por `@lit-labs/ssr`que tiene algunas limitaciones. Consulta su [documentación de limitaciones](https://www.npmjs.com/package/@lit-labs/ssr#notes-and-limitations) para obtener más información al respecto.

- Astro no admite componentes IntelliSense para Lit.

Expand Down
6 changes: 3 additions & 3 deletions src/content/docs/es/guides/integrations-guide/markdoc.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ Por ejemplo, el encabezado `### Level 3 heading!` pasará `level: 3` e `id: 'lev

### Resaltado de sintaxis

`@astrojs/markdoc` proporciona extensiones de [Shiki](https://github.com/shikijs/shiki) y [Prism](https://github.com/PrismJS) para resaltar tus bloques de código.
`@astrojs/markdoc` proporciona extensiones de [Shiki](https://shiki.style) y [Prism](https://github.com/PrismJS) para resaltar tus bloques de código.

#### Shiki

Expand All @@ -250,14 +250,14 @@ export default defineMarkdocConfig({
shiki({
// Escoge de los temas integrados de Shiki (o agrega el tuyo)
// Por defecto: 'github-dark'
// https://github.com/shikijs/shiki/blob/main/docs/themes.md
// https://shiki.style/themes
theme: 'dracula',
// Habilita el ajuste de palabras para evitar el desplazamiento horizontal
// Por defecto: false
wrap: true,
// Pasa lenguajes personalizados
// Nota: Shiki tiene innumerables lenguajes integrados, ¡incluyendo `.astro`!
// https://github.com/shikijs/shiki/blob/main/docs/languages.md
// https://shiki.style/languages
langs: [],
}),
],
Expand Down
12 changes: 6 additions & 6 deletions src/content/docs/es/guides/markdown-content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -565,7 +565,7 @@ export default defineConfig({

### Resaltado de sintaxis

Astro viene con soporte integrado para [Shiki](https://shiki.matsu.io/) (via [Shikiji](https://github.com/shikijs/shiki)) y [Prism](https://prismjs.com/). Esto proporciona un resaltado de sintaxis instantáneo para:
Astro viene con soporte integrado para [Shiki](https://shiki.style/) 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 `<Code />`](/es/reference/api-reference/#code-) (con la tecnología de Shiki)
Expand All @@ -584,17 +584,17 @@ export default defineConfig({
markdown: {
shikiConfig: {
// Escoge entre los temas integrados de Shiki (o agrega los tuyos propios)
// https://github.com/shikijs/shiki/blob/main/docs/themes.md
// https://shiki.style/themes
theme: 'dracula',
// Alternativamente, proporciona múltiples temas.
// https://shiki.style/guide/dual-themes#light-dark-dual-themes
experimentalThemes: {
// https://shiki.style/guide/dual-themes
themes: {
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
// https://shiki.style/languages
langs: [],
// Habilita word wrap para evitar el desplazamiento horizontal
wrap: true,
Expand All @@ -621,7 +621,7 @@ export default defineConfig({
});
```

También sugerimos leer [la documentación de Shiki sobre sus temas](https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme) para explorar la carga de temas personalizados, alternar entre modo claro y oscuro, o estilar utilizando variables de CSS.
También sugerimos leer [la documentación de Shiki sobre sus temas](https://shiki.style/themes) para explorar la carga de temas personalizados, alternar entre modo claro y oscuro, o estilar utilizando variables de CSS.

#### Cambia el resaltador de sintaxis predeterminado

Expand Down
18 changes: 8 additions & 10 deletions src/content/docs/es/guides/middleware.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,9 @@ i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Un **Middleware** te permite interceptar las solicitudes y respuestas e inyectar comportamientos dinámicamente cada vez que una página o endpoint está a punto de ser renderizado.
Un **Middleware** te permite interceptar las solicitudes y respuestas e inyectar comportamientos dinámicamente cada vez que una página o endpoint está a punto de ser renderizado. Esta renderización se produce en tiempo de compilación para todas las páginas prerenderizadas, pero se produce cuando se solicita la ruta para las páginas renderizadas bajo demanda.

Esto también te permite establecer y compartir información específica de la solicitud en todos los endpoints y páginas mediante la mutación de un objeto `locals` que está disponible en todos los componentes de Astro y endpoints de API.

El middleware está disponible tanto en proyectos de Astro SSG como en proyectos de Astro SSR.

:::note
En todas las páginas prerenderizadas, el middleware se ejecuta solo durante el **proceso de construcción** para crear páginas estáticas y no se ejecuta en el sitio web desplegado. Esto se aplica a todas las páginas en un proyecto `static` (SSG). Esto también incluye páginas prerenderizadas en modo `hybrid` (predeterminado) y cualquier página en modo `server` con `export const prerender = true`.

Para las páginas renderizadas bajo demanda en modo `server` (predeterminado) o `hybrid` (con `export const prerender = false`), el middleware se ejecuta en el sitio web desplegado cuando se solicita la ruta.
:::
El middleware también permite establecer y compartir información específica de la solicitud entre endpoints y páginas mutando un objeto `locals` que está disponible en todos los componentes Astro y endpoints API. Este objeto está disponible incluso cuando este middleware se ejecuta en tiempo de compilación.

## Uso básico

Expand Down Expand Up @@ -203,3 +195,9 @@ respuesta de saludo
respuesta de autenticación
respuesta de validación
```

## Páginas de error

El middleware intentará ejecutarse para todas las páginas renderizadas bajo demanda, incluso cuando no se pueda encontrar una ruta coincidente. Esto incluye la página 404 por defecto (en blanco) de Astro y cualquier página 404 personalizada. Sin embargo, depende del [adaptador](/es/guides/server-side-rendering/) decidir si ese código se ejecuta. Algunos adaptadores pueden servir una página de error específica de la plataforma en su lugar.

El middleware también intentará ejecutarse antes de servir una página de error 500, incluyendo una página 500 personalizada, a menos que el error del servidor se haya producido en la ejecución del propio middleware. Si tu middleware no se ejecuta correctamente, entonces no tendrás acceso a `Astro.locals` para renderizar tu página 500.
46 changes: 38 additions & 8 deletions src/content/docs/es/guides/view-transitions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,10 @@ Por ejemplo, el siguiente `<video>` continuará reproduciéndose a medida que na

También puedes colocar la directiva en una [isla de Astro](/es/concepts/islands/) (un componente de framework UI con una directiva [`client:`](/es/reference/directives-reference/#directivas-del-cliente)). Si ese componente existe en la siguiente página, la isla de la página antigua **con su estado actual** continuará mostrándose, en lugar de reemplazarla con la isla de la nueva página.

En el ejemplo de abajo, el `count` no se restablecerá al navegar hacia adelante y hacia atrás a través de páginas que contengan el componente `<Counter />` con el atributo `transition:persist`.
En el siguiente ejemplo, el estado interno del componente del recuento no se restablecerá cuando se navegue hacia adelante y hacia atrás por páginas que contengan el componente `<Counter />` con el atributo `transition:persist`.

```astro title="components/Header.astro" "transition:persist"
<Counter client:load transition:persist count={5} />
<Counter client:load transition:persist initialCount={5} />
```

También puedes [identificar manualmente los elementos correspondientes](#nombrando-una-transición) si la isla/elemento está en un componente diferente entre las dos páginas.
Expand All @@ -132,6 +132,15 @@ Una alternativa práctica, `transition:persist` puede tomar un nombre de transic
<video controls="" autoplay="" transition:persist="media-player">
```

#### `transition:persist-props`
<p><Since v="4.5.0" /></p>

Esto te permite controlar si los props de una isla deben persistir o no tras la navegación.

Por defecto, cuando se añade `transition:persist` a una isla, el estado se mantiene durante la navegación, pero el componente se vuelve a renderizar con nuevos props. Esto es útil, por ejemplo, cuando un componente recibe props específicos de la página, como el `title` de la página actual.

Puede anular este comportamiento con `transition:persist-props`. Al añadir esta directiva se conservarán los accesorios existentes de una isla (no se volverá a renderizar con nuevos valores) además de mantener su estado existente.

### Directivas de animación integradas

Astro viene con algunas animaciones integradas para anular la transición `fade` predeterminada. Agrega la directiva `transition:animate` a elementos individuales para personalizar el comportamiento de transiciones específicas.
Expand Down Expand Up @@ -440,11 +449,34 @@ Cuando se utiliza el enrutador `<ViewTransitions />`, se siguen los siguientes p
7. El enrutador ejecuta cualquier nuevo script agregado a la página.
8. Se dispara el evento `astro:page-load`. Esto marca el final del proceso de navegación.

## Comportamiento del script durante la navegación de la página
## Comportamiento del script con view transitions

Al añadir view transitions a un proyecto de Astro existente, es posible que algunos de tus scripts ya no se vuelvan a ejecutar tras la navegación por la página, como ocurría con las actualizaciones de página completa del navegador. Utiliza la siguiente información para asegurarte de que tus scripts se ejecutan como se espera.

### Orden del Script

Al navegar entre páginas con el componente `<ViewTransitions />`, los scripts se ejecutan en orden secuencial para ajustarse al comportamiento del navegador.

### Reejecución del script

Los [Bundled module scripts](/es/guides/client-side-scripts/#procesamiento-de-scripts), que son los scripts por defecto en Astro, sólo se ejecutan una vez. Después de la ejecución inicial serán ignorados, incluso si el script existe en la nueva página después de una transición.

Cuando navegas entre páginas con el componente `<ViewTransitions />`, los scripts se ejecutan en orden secuencial para coincidir con el comportamiento del navegador.
A diferencia de los scripts de módulos empaquetados, los [scripts inline](/es/guides/client-side-scripts/#optar-por-no-procesar) pueden volver a ejecutarse durante la visita de un usuario a un sitio si existen en una página que se visita varias veces. Los scripts inline también pueden volver a ejecutarse cuando un visitante navega a una página sin el script y luego vuelve a una con el script.

#### `data-astro-rerun`

<p><Since v="4.5.0" /></p>

Para forzar a los scripts inline a reejecutarse después de cada transición, añade la propiedad `data-astro-rerun`. Al añadir cualquier atributo a un script también se añade implícitamente `is:inline`, por lo que esto sólo está disponible para scripts que no están empaquetados y procesados por Astro.

Si tienes código que configura el estado global, este estado deberá tener en cuenta que el script puede ejecutarse más de una vez. Comprueba el estado global en tu etiqueta `<script>`, y ejecuta condicionalmente tu código cuando sea posible:

```astro
<script is:inline data-astro-rerun>...</script>
```

Para garantizar que un script se ejecuta cada vez que se carga una página durante la navegación del lado del cliente, debe ser ejecutado por un [evento del ciclo de vida](#eventos-del-ciclo-de-vida). Por ejemplo, los escuchadores de eventos para `DOMContentLoaded` pueden sustituirse por el evento de ciclo de vida [`astro:page-load`](/es/guides/view-transitions/#astropage-load).

Si tienes código que establece un estado global en un script inline, este estado necesitará tener en cuenta que el script podría ejecutarse más de una vez. Comprueba el estado global en tu etiqueta `<script>`, y ejecuta condicionalmente tu código cuando sea posible. Esto funciona porque `window` se mantiene.

```astro
<script is:inline>
Expand All @@ -454,9 +486,7 @@ Si tienes código que configura el estado global, este estado deberá tener en c
</script>
```

Los scripts de módulo, incluyendo aquellos que añaden listeners de eventos para `DOMContentLoaded`, solo se ejecutan una vez debido a que el navegador realiza un seguimiento de los módulos que ya están cargados. Debes añadir listeners para un [evento del ciclo de vida](#eventos-del-ciclo-de-vida) para volver a ejecutar scripts durante la navegación de la página en el lado del cliente.

Consulta el [tutorial Ampliar con View Transitions](/es/tutorials/add-view-transitions/#actualiza-los-scripts) para ver un ejemplo actualizando los scripts existentes en un proyecto.
Consulta el [Tutorial Añadir View Transitions](/es/tutorials/add-view-transitions/#actualiza-los-scripts) para ver un ejemplo de actualización de scripts existentes en un proyecto.

## Eventos del ciclo de vida

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/es/reference/api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1382,7 +1382,7 @@ import { Code } from 'astro:components';
</p>
```

Este componente proporciona resaltado de sintaxis para bloques de código en el momento de la compilación (no incluye JavaScript del lado del cliente). El componente funciona internamente con Shiki y es compatible con todos los [temas populares](https://github.com/shikijs/shiki/blob/main/docs/themes.md) y [lenguajes de programación](https://github.com/shikijs/shiki/blob/main/docs/languages.md). Además, puedes agregar temas y lenguajes de programación personalizados modificando `theme` y `lang` respectivamente.
Este componente proporciona resaltado de sintaxis para bloques de código en el momento de la compilación (no incluye JavaScript del lado del cliente). El componente funciona internamente con Shiki y es compatible con todos los [temas populares](https://shiki.style/themes) y [lenguajes de programación](https://shiki.style/languages). Además, puedes agregar temas y lenguajes de programación personalizados modificando `theme` y `lang` respectivamente.

### `<Fragment />`

Expand Down
Loading

0 comments on commit 5913405

Please sign in to comment.