Páginas con markdown

Astro trae una compatibilidad por defecto con el formato Markdown y, también, con el formato MDX (un Markdown son superpoderes).

Nos quedaremos con el primero para que veas la fuerza que tiene a la hora de crear nuevas páginas.

🎧 Podcast: WR 262: Crea gráficos y presentaciones con Markdown

Vamos a crear una ruta /about más funcional así que renombra o borra el archivo /src/pages/about.astro (es muy importante que lo hagas para no duplicar rutas) y crea /src/pages/about.md

Permíteme el lujo de incorporar un texto más real en el “Sobre mí”. Adáptalo como quieras, es solo un ejemplo:

⚡️ Visita http://localhost:3000/about y verás que ha desaparecido la foto y todos los estilos, pero que este texto tiene formato con listas y negritas.

Astro hace por ti varias cosas aquí:

• Genera rutas directamente desde ficheros md
• Convierte el Markdown en HTML

Usando layouts anidados con páginas en markdown en astro ¶

Los separadores --- aparecieron en los ficheros Markdown de la mano de Jekyll, un generador de sitios estáticos.

El objetivo estaba en poder incorporar configuraciones y variables que luego pudieran usarse en la construcción del sitio.

👉 A esta forma de incluir datos se la llama frontmatter

Astro hereda ese poder y por eso si añades esto al comienzo de about.md

⚡️ Astro va a entenderlo todo, que quieres un title para la página y que el contenido va dentro de nuestro layout, pero si cargas /about verás que no funciona.

Ni se ve el título en la pestaña del navegador ni el texto aparece en el centro.

👉 Vamos a aprovecharnos de otra cualidad de Astro: los layouts anidados.

Crea src/layouts/MarkdownLayout.astro y copia esto dentro:

Y ahora, en src/pages/about.md haz este cambio:

⚡️ ¡Ahora funciona y se ve bien colocado y con estilos!

¿Qué hemos hecho?

Este es un fragmento de código de un componente Astro.

1. Primero, se importa el layout por defecto SiteLayout.

2. Luego, se extrae la propiedad frontmatter de Astro.props. En Astro, Astro.props es un objeto especial que contiene todas las propiedades pasadas a un componente. La variable frontmatter contiene metadatos para la página actual, como el título de la página, la descripción, la fecha de publicación, etc.

3. Dentro del bloque HTML, se utiliza el componente SiteLayout importado. A este componente se le pasa una prop title que es igual a frontmatter.title. (Lo vimos cuando creamos el layout y explicamos lo que eran los props)

4. Usamos la etiqueta especial <slot /> para que cualquier contenido que se coloque dentro de este componente cuando se utilice en otro lugar aparecerá en el lugar del <slot />.

💣 Podríamos haber intentado hacer otras cosas como incluir el HTML con los estilos, intentar llamar el markdown desde el layout, pero, quédate con esto: los componentes (y layouts) son capaces de envolverse entre ellos para darte toda la flexibilidad que necesitas.

💪 ¡Listo para desplegar!