diff --git a/src/pages/es/core-concepts/astro-pages.mdx b/src/pages/es/core-concepts/astro-pages.mdx index c1d3ef65ef4e4..35801787c4214 100644 --- 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 `...`. ```md {3} diff --git a/src/pages/es/guides/markdown-content.mdx b/src/pages/es/guides/markdown-content.mdx index 0d6c3d4f7ae6f..443baeb444e39 100644 --- 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. + + +- src/content/ + - **newsletter/** + - week-1.md + - week-2.md + - **authors/** + - grace-hopper.md + - alan-turing.md + + + + +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; ``` +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 index ee03ef3e1fbf7..c4aeefa1799fe 100644 --- 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: -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 `` 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 index 9ad064d11635e..5b76c77d30044 100644 --- 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 index dac8e2fb3bc2d..bd35ec7647ce2 100644 --- 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