Skip to content

Commit

Permalink
i18n(es): Updated wordpress.mdx, makdoc.mdx & `directives-referen…
Browse files Browse the repository at this point in the history
…ce.mdx` (withastro#3853)

* update wp

* update wp

* add updates

---------

Co-authored-by: Yan Thomas <[email protected]>
  • Loading branch information
Waxer59 and yanthomasdev authored Jul 27, 2023
1 parent 0c30d32 commit bd80e0a
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 3 deletions.
4 changes: 2 additions & 2 deletions src/content/docs/es/guides/cms/wordpress.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Headless WordPress & Astro
title: Headless WordPress y Astro
description: Agrega contenido a tu proyecto Astro usando WordPress como CMS
type: cms
stub: false
Expand Down Expand Up @@ -155,7 +155,7 @@ let [post] = await res.json();
---
```

La propiedad `_embedded['wp:featuredmedia']['0'].source_url` devuelve una imagen destacada en cada página de dinosaurio.
La propiedad `_embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url` devuelve una imagen destacada en cada página de dinosaurio. (Reemplaza `medium` con el tamaño de imagen deseado).

```astro title="/src/pages/dinos/[slug].astro" {3}
<Layout title={post.title.rendered}>
Expand Down
51 changes: 50 additions & 1 deletion src/content/docs/es/guides/integrations-guide/markdoc.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const { Content } = await entry.render();

📚 Consulta la [documentación de Astro sobre Colecciones de Contenido][astro-content-collections] para más información.

## Configuración
## Configuración de Markdoc

`@astrojs/markdoc` ofrece opciones de configuración para usar todas las características de Markdoc y conectar componentes de interfaz de usuario a tu contenido.

Expand Down Expand Up @@ -165,6 +165,31 @@ Esto genera la siguiente declaración de importación internamente:
import { Tabs } from '@astrojs/starlight/components';
```

### Utiliza los componentes de Astro desde paquetes npm y archivos TypeScript

Es posible que necesites utilizar los componentes de Astro expuestos como exportaciones nombradas desde archivos TypeScript o JavaScript. Esto es común cuando se utilizan paquetes npm y sistemas de diseño.

Puedes pasar el nombre de importación como segundo argumento a la función `component()`:

```js
// markdoc.config.mjs
import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';

export default defineMarkdocConfig({
tags: {
tabs: {
render: component('@astrojs/starlight/components', 'Tabs'),
},
},
});
```

Esto genera la siguiente declaración de importación internamente:

```ts
import { Tabs } from '@astrojs/starlight/components';
```

### Encabezados personalizados

`@astrojs/markdoc` automaticamente agrega enlaces a tus encabezados, y [genera una lista de `headings` a través de la API de colecciones de contenido](/es/guides/content-collections/#rendering-content-to-html). Para personalizar aún más cómo se renderizan los encabezados, puedes aplicar un componente de Astro [como un nodo Markdoc][markdoc-nodes].
Expand Down Expand Up @@ -405,6 +430,30 @@ const { Content } = await entry.render();
Esto ahora puede ser accedido como `$frontmatter` en tu Markdoc.
## Opciones de configuración de integración
La integración de Astro con Markdoc se encarga de configurar opciones y capacidades de Markdoc que no están disponibles a través del archivo `markdoc.config.js`.
### `allowHTML`
Permite escribir marcas HTML junto con etiquetas y nodos de Markdoc.
Por defecto, Markdoc no reconocerá las marcas HTML como contenido semántico.
Para lograr una experiencia más similar a Markdown, donde los elementos HTML pueden incluirse junto con tu contenido, establece `allowHTML:true` como opción de integración de `markdoc`. Esto habilitará el análisis de HTML en las marcas de Markdoc.
```js {7} "allowHTML: true"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import markdoc from '@astrojs/markdoc';

export default defineConfig({
// ...
integrations: [markdoc({ allowHTML: true })],
});
```
:::caution
Cuando `allowHTML` está habilitado, el marcado HTML dentro de los documentos de Markdoc se representará como elementos HTML reales (incluyendo `<script>`), lo que hace posible vectores de ataque como XSS. Asegúrate de que cualquier marcado HTML provenga de fuentes confiables.
:::
## Ejemplos
* La [plantilla de inicio Astro Markdoc](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) muestra como usar archivos Markdoc en tu proyecto Astro.
Expand Down
1 change: 1 addition & 0 deletions src/content/docs/es/reference/directives-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ Una directiva de maquetado nunca se incluye directamente en el HTML del compilad
- `Object`: Todas las keys verdaderas se agregan al elemento `class`
- `Array`: aplanado
- `Set`: aplanado
- `false` o `null`: omitido

```astro
<!-- Esto -->
Expand Down

0 comments on commit bd80e0a

Please sign in to comment.