Rebaja + Astro = ❤️

Markdown es un gran invento que nos permite escribir menos marcas. También maneja cuestiones tipográficas como la conversión de apóstrofes rectos (') a la cotización de apertura o cierre (' o ') para nosotros.

Aunque Astro tiene soporte incorporado para Markdown a través de .md documento, creo que puedes mejorar tu experiencia Markdown de dos maneras:

1. MDX
2. Componentes de precio reducido

Los he cubierto en profundidad. Astro práctico: sistema de contenidos.

Hoy nos centraremos en MDX.

MDX

MDX Es un superconjunto de Markdown. Te permite utilizar elementos en Markdown Además de todas las demás funciones de Markdown, existe JSX simple.

Para Astro, también puede utilizar elementos de cualquier marco de interfaz de usuario que haya instalado. Entonces puedes hacer esto:

---
# Frontmatter...
---

import AstroComp from '@/components/AstroComp.astro'
import SvelteComp from '@/components/AstroComp.astro'

<AstroComp> ... </AstroComp>
<SvelteComp> ... </SvelteComp>

Es una buena alternativa para los que tienen mucho contenido, ya que le permite escribir etiquetas como la que se muestra a continuación.

<div class="card">
  ### Card Title

  Content goes here

  - List
  - Of
  - Items

  Second paragraph
</div>

Astro convertirá MDX al siguiente HTML:

<div class="card">
  <h2>Card Title</h2>

  <p>Content goes here </p>

  <ul>
    <li> List </li>
    <li> Of </li>
    <li> Items </li>
  </ul>

  <p>Second paragraph</p>
</div>

Tenga en cuenta lo que hice arriba:

• he usado ## en lugar de completo h2 Etiqueta.
• he usado - en lugar de <ul> y <li> para representar una lista.
• No necesito ninguna etiqueta de párrafo.

Escribir todo el contenido directamente en HTML sería un poco complicado.

Instalar MDX

La gente de Astro ya ha creado integraciones para MDX, por lo que es fácil agregarlo a su proyecto. solo sigue Estas instrucciones.

Tres formas principales de utilizar MDX

Estos métodos también funcionan con archivos Markdown estándar.

1. Importar directamente a archivos Astro
2. a través de la recopilación de contenidos
3. a través del diseño

Importación directa

El primer método consiste simplemente en importar el archivo MDX y utilizarlo directamente como componente.

---
import MDXComp from '../components/MDXComp.mdx'
---

<MDXComp />

Entonces, MDX funciona como piezas.

a través de la recopilación de contenidos

Primero, introduzca el MDX en el conjunto de contenidos. Tenga en cuenta que debe agregar mdx Aquí está su modo global.

Sólo importalo directamente

El primer método consiste simplemente en importar el archivo MDX y utilizarlo directamente como componente.

// src/content.config.js
import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/blog" }),
});

export const collections = { blog };

Luego, recupera el archivo MDX de la colección de contenido.

---
import { getEntry, render } from 'astro:content'
const { slug } = Astro.props
const post = await getEntry('blog', slug)
const { Content } = await render(post)
---

<Content />

Cuando haces esto, Puede pasar componentes a archivos MDX Por lo que no es necesario importarlos individualmente en cada archivo.

Por ejemplo, así es como pasaría Image Componentes de Laboratorio brillante a cada uno de mis archivos MDX.

---
import { Image } from '@splendidlabz/astro'
// ...
const { Content } = await render(post)
const components = { Image }
---

<Content {components} />

En mi archivo MDX ahora puedo usar Image No es necesario importarlo.

<Image src="https://css-tricks.com/markdown-astro/..." alt="https://css-tricks.com/markdown-astro/..." />

Usar diseño

Finalmente, puede agregar un diseño frontal al archivo MDX.

---
title: Blog Post Title
layout: @/layouts/MDX.astro
---

este layout El frontmatter debería apuntar al archivo Astro.

En este archivo:

• Puede extraer la propiedad frontmatter de Astro.props.content.
• El contenido MDX se puede representar de las siguientes maneras <slot>.

---
import Base from './Base.astro'
const props = Astro.props.content
const { title } = props
---

<Base>
  <h1>{title}</h1>
  <slot />
</Base>

Cosas a tener en cuenta

El formateo y el Linting fallaron

ESLint y Prettier no formatean bien los archivos MDX, por lo que terminarás sangrando la mayor parte del marcado manualmente.

Esto está bien para pequeñas cantidades de marcado. Pero si tiene muchos de estos elementos… entonces los elementos Markdown serían una mejor opción.

Más sobre esto en otro próximo artículo.

este Integración Astro RSS Los archivos MDX no son compatibles de fábrica.

Afortunadamente, esto se puede solucionar fácilmente utilizando contenedores Astro. Te mostraré cómo hacer esto Astronomía práctica.

ir más lejos

He estado construyendo con Astro durante más de 3 años y sigo encontrando los mismos puntos de fricción en sitios web ricos en contenido: páginas de blog, páginas con pestañas, paginación y una estructura de carpetas que se abarrota con el tiempo.

así que construí Astro práctico: sistema de contenidos7 soluciones listas para usar para flujos de trabajo de contenido de Astro (MDX es solo una de ellas). Obtienes el código y las ideas detrás de él.

Si desea un flujo de trabajo de contenido más limpio y tranquilo, compruébelo.

También escribí sobre el modo Astro y el uso de Tailwind + CSS. mi blog. ¡Ven a saludar!