i18n(es): update of astro-pages.mdx, markdown-content.mdx, `rss.m…

…dx`, `styling.mdx` & `auto.mdx` (#2425) * updates * missing import * fixed links * fixed typo * applied suggestions * Update src/pages/es/core-concepts/astro-pages.mdx Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com>
withastro · Jan 23, 2023 · fbccd92 · fbccd92
1 parent b154d1e
commit fbccd92
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 81 deletions.
diff --git a/src/pages/es/core-concepts/astro-pages.mdx b/src/pages/es/core-concepts/astro-pages.mdx
@@ -22,6 +22,8 @@ Astro es compatible con los siguientes tipos de archivos en el directorio `src/p
 
 Astro aprovecha una estrategia de enrutamiento llamada **enrutamiento basado en archivos**. Cada archivo `.astro` en la carpeta `src/pages` se convierte en una página o un endpoint en tu proyecto de acuerdo a su ruta.
 
+Un archivo puede generar múltiples páginas usando [enrutamiento dinámico](/es/core-concepts/routing/#rutas-dinámicas). Esto te permite crear páginas incluso si tu contenido está fuera del directorio especial `/pages/`, como en una [colección de contenido](/es/guides/content-collections/) o un [CMS](/es/guides/cms/).
+
 📚 Lea más sobre [enrutamiento en Astro](/es/core-concepts/routing/)
 
 ### Link entre páginas
@@ -62,6 +64,8 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';
 
 Astro trata archivos Markdown (`.md`) dentro de `src/pages/` como páginas en tu proyecto. Si tienes la [integración de MDX instalada](/es/guides/integrations-guide/mdx/#installation), también procesa los archivos MDX (`.mdx`) de la misma manera. Estos se usan comúnmente para páginas con mucho texto, como artículos de blog y documentación.
 
+[Las colecciones de contenido de páginas Markdown o MDX](/es/guides/content-collections/) en `src/content/` pueden ser usadas para [generar páginas dinámicamente](/es/core-concepts/routing/#rutas-dinámicas).
+
 Las plantillas de página son especialmente útiles para [archivos Markdown](#páginas-markdownmdx). Los archivos Markdown pueden usar la propiedad de frontmatter `layout` para especificar un [componente de plantilla](/es/core-concepts/layouts/) que envolverá el contenido de Markdown en un  documento de página `<html>...</html>`.
 
 ```md {3}

diff --git a/src/pages/es/guides/markdown-content.mdx b/src/pages/es/guides/markdown-content.mdx
@@ -4,7 +4,7 @@ title: Markdown & MDX
 description: Aprende a crear contenido usando Markdown o MDX en Astro
 i18nReady: true
 ---
-
+import FileTree from '~/components/FileTree.astro';
 import Since from '~/components/Since.astro';
 
 El [Markdown](https://daringfireball.net/projects/markdown/) se usa comúnmente para crear contenido con mucho texto, como artículos de blog y documentación. Astro incluye soporte integrado para archivos estándar de Markdown (`.md`, `.markdown`, `.mdown`, `.mkdn`, `.mkd`, `.mdwn`).
@@ -15,6 +15,24 @@ Con la [integración @astrojs/mdx](/es/guides/integrations-guide/mdx/) instalada
 
 ## Páginas de Markdown y MDX
 
+### Colecciones de contenido
+
+Puedes gestionar tus archivos Markdown y MDX en Astro en una carpeta especial `src/content/`. [Las colecciones de contenido](/es/guides/content-collections/) te ayudan a organizar tu contenido, validar tu frontmatter y proporcionar seguridad de tipo TypeScript automática mientras trabajas con tu contenido.
+
+<FileTree>
+- src/content/
+  - **newsletter/** 
+    - week-1.md
+    - week-2.md
+  - **authors/**
+    - grace-hopper.md
+    - alan-turing.md
+</FileTree>
+
+
+
+Ver más sobre el uso de [colecciones de contenido en Astro](/es/guides/content-collections/).
+
 ### Enrutamiento basado en archivos
 
 Astro trata cualquier archivo `.md` (u otra extensión alternativa soportada) o `.mdx` dentro de la carpeta `/src/pages` como una página.
@@ -131,6 +149,9 @@ const { frontmatter } = Astro.props;
 </html>
 ```
 
+Puedes también [aplicar estilos al Markdown](/es/guides/styling/#estilando-markdown) en tu componente plantilla.
+
+
 📚 Aprende más acerca de [Plantillas de Markdown](/es/core-concepts/layouts/#plantillas-de-markdownmdx).
 
 
@@ -151,7 +172,6 @@ Puedo vincular internamente a [mi conclusión](#conclusión) en la misma página
 Puedo usar la URL `https://mi-dominio.com/page-1/#introducción` para navegar directamente a mi Introducción en la página.
 ```
 
-
 ### Escapando caracteres especiales
 
 Ciertos caracteres tienen un significado especial en Markdown y MDX. Puedes necesitar usar una sintaxis diferente si deseas mostrarlos. Para hacer esto, puedes usar [entidades HTML](https://developer.mozilla.org/es/docs/Glossary/Entity) para esos caracteres en su lugar.
@@ -428,7 +448,7 @@ Puedes personalizar cómo remark analiza tu Markdown en `astro.config.mjs`. Pued
 
 ### Plugins de Markdown
 
-Astro es compatible con plugins externos de [remark](https://github.com/remarkjs/remark) y [rehype](https://github.com/rehypejs/rehype) para Markdown y MDX. Estos plugins te permiten extender tu Markdown con nuevas características, como [generación automática de tabla de contenidos](https://github.com/remarkjs/remark-toc), [aplicar etiquetas accesibles a emojis](https://github.com/florianeckerstorfer/remark-a11y-emoji) y más.
+Astro es compatible con plugins externos de [remark](https://github.com/remarkjs/remark) y [rehype](https://github.com/rehypejs/rehype) para Markdown y MDX. Estos plugins te permiten extender tu Markdown con nuevas características, como [generación automática de tabla de contenidos](https://github.com/remarkjs/remark-toc), [aplicar etiquetas accesibles a emojis](https://github.com/florianeckerstorfer/remark-a11y-emoji) y [aplicar estilos al Markdown](/es/guides/styling/#estilando-markdown).
 
 ¡Te invitamos a darle un vistazo a las listas [awesome-remark](https://github.com/remarkjs/awesome-remark) y [awesome-rehype](https://github.com/rehypejs/awesome-rehype) para ver más plugins populares! Puedes leer sus README para seguir las instrucciones de instalación de cada uno.
 

diff --git a/src/pages/es/guides/rss.mdx b/src/pages/es/guides/rss.mdx
@@ -36,114 +36,153 @@ Primero, instala `@astrojs/rss` utilizando tu gestor de paquetes favorito:
   </Fragment>
 </PackageManagerTabs>
 
-Luego, asegúrate de haber [configurado un `site`](/es/reference/configuration-reference/#site) en el archivo `astro.config` de tu proyecto. Vas a utilizar esto para generar links en tu feed RSS [por medio de la variable de entorno `SITE`](/es/guides/environment-variables/#variables-de-entorno-predeterminadas).
-
-:::note[Requiere v1]
-La variable de entorno `SITE` solamente está disponible en la versión beta 1.0 de Astro. Actualiza a la última versión de Astro (`astro@latest`), o escribe tu `site` manualmente (puedes ver los ejemplos a continuación).
-:::
+Luego asegurate de haber [configurado un `site`](/es/reference/configuration-reference/#site) en el `astro.config` de tu proyecto. Lo usarás para generar links a tus artículos RSS.
 
 ¡Ahora, generemos nuestro primer RSS feed! Crea un archivo `rss.xml.js` en la carpeta `src/pages/`. La URL en producción será `rss.xml`, así que siéntete libre de renombrarlo si así lo deseas.
 
 Luego, importa la helper function `rss` del paquete `@astrojs/rss` y llámala con los siguientes parámetros:
 
-```js
-// src/pages/rss.xml.js
+```js title="src/pages/rss.xml.js"
 import rss from '@astrojs/rss';
 
-export const get = () => rss({
-  // campo `<title>` en el xml generado
-  title: 'Blog de Buzz',
-  // campo `<description>` en el xml generado
-  description: 'Guía para las estrellas de un humilde astronauta',
-  // URL base para links de <item> en el RSS
-  // SITE utilizará "site" del astro.config de tu proyecto.
-  site: import.meta.env.SITE,
-  // lista de `<item>`s en el xml generado
-  // ejemplo simple: generar items por cada archivo md en /src/pages
-  // puedes ver la sección "Generando items" para ver el frontmatter requerido y casos de uso avanzados
-  items: import.meta.glob('./**/*.md'),
-  // (opcional) inyecta xml personalizado
-  customData: `<language>es-es</language>`,
-});
+export function get(context) {
+  return rss({
+    // `<title>` campo en el xml generado
+    title: 'Buzz’s Blog',
+    // `<description>` campo en el xml generado
+    description: 'A humble Astronaut’s guide to the stars',
+    // Usa el "site" desde el contexto del endpoint
+    // https://docs.astro.build/en/reference/api-reference/#contextsite
+    site: context.site,
+    // Array de `<item>`s en el xml generado
+    // Consulta la sección "Generando `items`" para ejemplos utilizando colecciones de contenido y glob imports
+    items: [],
+    // (opcional) inyecta xml personalizado
+    customData: `<language>en-us</language>`,
+  });
+}
 ```
 
 ## Generando `items`
 
-El campo `items` acepta cualquiera de estas dos opciones:
-
-1. [El resultado de `import.meta.glob(...)`](#1-resultado-de-importmetaglob) **(utilízalo únicamente para archivos `.md` dentro de la carpeta `src/pages/`!)**
-2. [Una lista de objetos RSS feed](#2-listado-de-objetos-rss-feed), cada uno con los campos requeridos `link`, `title`, `pubDate`, y los opcionales `description` y `customData`.
-
-### 1. Resultado de `import.meta.glob`
-
-Recomendamos esta opción como un atajo conveniente para archivos `.md` dentro de la carpeta `src/pages/`. Cada artículo debe tener los campos requeridos `title`, `pubDate` y los opcionales `description` y `customData` en su frontmatter. Si esto no es posible, o si prefiere generar el frontmatter utilizando código, [vea la opción 2](#2-listado-de-objetos-rss-feed).
-
-En el caso en que los artículos de tu blog estén guardados en la carpeta `src/pages/blog/`, puedes generar un RSS feed de la siguiente manera:
+El campo `items` acepta una lista de objetos RSS feed, cada uno con un `link`, `title`, `pubDate`, y campos opcionales `description`, `content` y `customData`. Puedes generar este arreglo desde una colección de contenido o utilizando glob imports.
+
+### Usando colecciones de contenido
+
+Para crear un RSS feed de páginas manejadas en [colecciones de contenido](/es/guides/content-collections/), utiliza la función `getCollection()` para recuperar la lista de tus artículos.
+
+```js title="src/pages/rss.xml.js" "items:" "const blog = await getCollection('blog');"
+export async function get(context) {
+  const blog = await getCollection('blog');
+  return rss({
+    title: 'Buzz’s Blog',
+    description: 'A humble Astronaut’s guide to the stars',
+    site: context.site,
+    items: blog.map((post) => ({
+      title: post.data.title,
+      pubDate: post.data.pubDate,
+      description: post.data.description,
+      customData: post.data.customData,
+      // Calcula el link RSS desde el `slug` del post 
+      // Este ejemplo asume que todos los posts son renderizados como rutas `/blog/[slug]`
+      link: `/blog/${post.slug}/`,
+    })),
+  });
+}
+```
 
-```js
-// src/pages/rss.xml.js
-import rss from '@astrojs/rss';
+Puedes configurar tu esquema de colección para verificar y enforzar estas propiedades en el RSS. Importa y aplica `rssSchema` para asegurarte que cada entrada de colección produzca un item RSS válido.
 
-export const get = () => rss({
-  title: 'Blog de Buzz',
-  description: 'Guía para las estrellas de un humilde astronauta',
-  site: import.meta.env.SITE,
-  items: import.meta.glob('./blog/**/*.md'),
+```js title="src/content/config.ts" "rssSchema"
+import { rssSchema } from '@astrojs/rss';
+const blog = defineCollection({
+  schema: rssSchema,
 });
+
+export const collections = { blog };
 ```
 
-Puedes ver la [documentación de glob import de Vite](https://vitejs.dev/guide/features.html#glob-import) para más información sobre esta sintaxis de importación.
+### Usando glob imports
 
-### 2. Listado de objetos RSS feed
+<Since v="2.1.0" pkg="@astrojs/rss" />
 
-Recomendamos esta opción para archivos `.md` que se encuentran fuera de la carpeta `pages`. Esto es común cuando generamos rutas [vía `getStaticPaths`](/es/reference/api-reference/#getstaticpaths).
+Para crear un RSS feed de documentos en `src/pages/`, utiliza la función `pagesGlobToRssItems()`. Esta acepta un resultado de [`import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import) y devuelve un array de items RSS válidos (consulta [más sobre escribir patrones glob](/es/guides/imports/#patrones-glob) para especificar qué páginas incluir).
 
-En el caso en que los artículos de tu blog estén guardados en la carpeta `src/posts/`, y cada artículo posea un `title`, `pubDate` y `slug` en su frontmatter (donde `slug` corresponde a la URL en producción en su sitio), podemos generar un RSS feed utilizando la [helper function de Vite `import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import) de la siguiente manera:
+Esta función asume, pero no verifica, que todas las propiedades RSS necesarias están presentes en el frontmatter de cada documento. Si encuentras errores, verifica manualmente el frontmatter de cada página.
 
-```js
-// src/pages/rss.xml.js
-import rss from '@astrojs/rss';
+```js title="src/pages/rss.xml.js" "pagesGlobToRssItems" "await pagesGlobToRssItems("
+import rss, { pagesGlobToRssItems } from '@astrojs/rss';
+export async function get(context) {
+  return rss({
+    title: 'Buzz’s Blog',
+    description: 'A humble Astronaut’s guide to the stars',
+    site: context.site,
+    items: await pagesGlobToRssItems(
+      import.meta.glob('./blog/*.{md,mdx}'),
+    ),
+  });
+}
+```
 
-const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true });
-const posts = Object.values(postImportResult);
-
-export const get = () => rss({
-  title: 'Blog de Buzz',
-  description: 'Guía para las estrellas de un humilde astronauta',
-  site: import.meta.env.SITE,
-  items: posts.map((post) => ({
-    link: post.url,
-    title: post.frontmatter.title,
-    pubDate: post.frontmatter.pubDate,
-  }))
-});
+:::note[¿Estás usando una versión anterior?]
+En versiones de `@astrojs/rss` anteriores a la v2.1.0, pasa tu resultado de glob directamente a `items` sin el wrapper `pagesGlobToRssItems()`:
+```js
+items: import.meta.glob('./blog/*.{md,mdx}'),
 ```
+:::
 
 ### Incluyendo contenido completo de un artículo
 
 <Since v="1.6.14" />
 
-Por defecto, la integración Astro RSS no tiene soporte para incluir el contenido de cada uno de tus artículos en el feed por si mismo.
+La llave `content` contiene el contenido completo del post como HTML. Esto te permite hacer disponible todo el contenido del post a los lectores de RSS.
+
+:::tip
+Cuando estés usando contenido HTML en XML, te recomendamos usar un paquete como [`sanitize-html`](https://www.npmjs.com/package/sanitize-html) para asegurarse de que tu contenido está correctamente desinfectado, escapado y codificado.
+:::
 
-Sin embargo, si tu mismo creas una lista con objetos RSS feed, puedes pasar el contenido de los archivos Markdown (no MDX), a la llave `content` usando la propiedad [`compiledContent()`](/es/guides/markdown-content/#propiedades-exportadas). Te recomendamos usar un paquete como [`sanitize-html`](https://www.npmjs.com/package/sanitize-html) para asegurarse de que tu contenido está correctamente desinfectado, escapado y codificado para su uso en el feed XML.
+Cuando utilices colecciones de contenido, renderiza el `body` del post usando un parser de Markdown estándar como [`markdown-it`](https://github.com/markdown-it/markdown-it) y desinfecta el resultado:
 
-```js ins={2, 16} title={src/pages/rss.xml.js}
+```js title="src/pages/rss.xml.js" ins={2, 3, 4, 14}
 import rss from '@astrojs/rss';
 import sanitizeHtml from 'sanitize-html';
-// ¡Funciona con archivos Markdown únicamente!
-const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true });
-const posts = Object.values(postImportResult);
-export const get = () => rss({
-  title: 'El Blog de Buzz',
-  description: 'Guía para las estrellas de un humilde astronauta',
-  site: import.meta.env.SITE,
-  items: posts.map((post) => ({
-    link: post.url,
-    title: post.frontmatter.title,
-    pubDate: post.frontmatter.pubDate,
-    content: sanitizeHtml(post.compiledContent()),
-  }))
-});
+import MarkdownIt from 'markdown-it';
+const parser = new MarkdownIt();
+export async function get(context) {
+  const blog = await getCollection('blog');
+  return rss({
+    title: 'Buzz’s Blog',
+    description: 'A humble Astronaut’s guide to the stars',
+    site: context.site,
+    items: blog.map((post) => ({
+      link: `/blog/${post.slug}/`,
+      // Note: this will not process components or JSX expressions in MDX files.
+      content: sanitizeHtml(parser.render(post.body)),
+      ...post.data,
+    })),
+  });
+}
+```
+
+Cuando utilices imports glob con Markdown, recomendamos utilizar la función `compiledContent()` para recuperar el HTML renderizado para desinfectarlo. Nota: esta función **no** es compatible con archivos MDX.
+
+```js title="src/pages/rss.xml.js" ins={2, 13}
+import rss from '@astrojs/rss';
+import sanitizeHtml from 'sanitize-html';
+export function get(context) {
+  const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true }); 
+  const posts = Object.values(postImportResult);
+  return rss({
+    title: 'Buzz’s Blog',
+    description: 'A humble Astronaut’s guide to the stars',
+    site: context.site,
+    items: posts.map((post) => ({
+      link: post.url,
+      content: sanitizeHtml(post.compiledContent()),
+      ...post.frontmatter,
+    })),
+  });
+}
 ```
 
 ## Añadiendo una hoja de estilos

diff --git a/src/pages/es/guides/styling.mdx b/src/pages/es/guides/styling.mdx
@@ -478,6 +478,13 @@ Vue en Astro es compatible con los mismos métodos que `vue-loader`:
 
 Svelte en Astro también funciona exactamente como se espera: [Svelte Styling Docs][svelte-style].
 
+## Estilando Markdown
+
+Cualquier método de estilo en Astro está disponible para un [componente de diseño de Markdown](/es/core-concepts/layouts/#plantillas-de-markdownmdx).
+
+Puede aplicar estilos globales a tu contenido de Markdown agregando [etiquetas `<style>`](#estilos-globales) y [hojas de estilo importadas](#estilos-externos) al la plantilla que envuelve el contenido de tu página. También puedes agregar [integraciones de CSS](#integraciones-css) incluyendo [Tailwind](/es/guides/integrations-guide/tailwind/).
+
+Si usas Tailwind, el [plugin de tipografía](https://tailwindcss.com/docs/typography-plugin) puede ser útil para estilar Markdown.
 
 ## Avanzado
 

diff --git a/src/pages/es/install/auto.mdx b/src/pages/es/install/auto.mdx
@@ -89,26 +89,40 @@ Si no es posible abrir el proyecto en el navegador, regresa a la terminal donde
 
 ## Plantillas de Inicio
 
-También comenzar un proyecto nuevo de Astro basado en un repositorio de GitHub existente pasando el argumento `--template` al comando `create astro`.
+Puedes empezar un nuevo proyecto de Astro basado en un [ejemplo oficial](https://github.com/withastro/astro/tree/main/examples) o en la rama `main` de cualquier repositorio de GitHub pasando un argumento `--template` al comando `create astro`.
 
 <PackageManagerTabs>
   <Fragment slot="npm">
   ```shell
+  # crea un nuevo proyecto a partir de un ejemplo oficial
+  npm create astro@latest -- --template <example-name>
+
+  # crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHub
   npm create astro@latest -- --template <github-username>/<github-repo>
   ```
   </Fragment>
   <Fragment slot="pnpm">
   ```shell
+  # crea un nuevo proyecto a partir de un ejemplo oficial
+  pnpm create astro@latest --template <example-name>
+
+  # crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHub
   pnpm create astro@latest --template <github-username>/<github-repo>
   ```
   </Fragment>
   <Fragment slot="yarn">
   ```shell
+  # crea un nuevo proyecto a partir de un ejemplo oficial
+  yarn create astro --template <example-name>
+
+  # crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHub
   yarn create astro --template <github-username>/<github-repo>
   ```
   </Fragment>
 </PackageManagerTabs>
 
+Por defecto, este comando utilizará la rama `main` del repositorio de plantilla. Para utilizar una rama diferente, pásala como parte del argumento `--template`: `<github-username>/<github-repo>#<branch>`.
+
 Explora nuestros [temas y proyectos de inicio](https://astro.build/themes/) donde puedes navegar por temas para blogs, portafolios, documentación, páginas de inicio y más. ¡O, [busca en GitHub](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories) para más proyectos de inicio!
 
 ## Siguientes pasos