Aprimorando o Astro com um componente Markdown

Existem duas maneiras de aprimorar o Markdown em um projeto Astro:

1. Através de MDX
2. Através de um componente Markdown

Este artigo se concentra no componente Markdown.

Por que usar um componente Markdown

Eu uso um componente Markdown por dois motivos principais:

1. Reduz a quantidade de marcação que preciso escrever.
2. Converte símbolos tipográficos como ' em aspas de abertura ou fechamento (' ou ').

Portanto, posso pular várias tags HTML – como <p>, <strong>, <em>, <ul>, <ol>, <li> e <a>. Também posso pular as tags de título se não precisar adicionar classes a elas.

<div class="card">
  <!-- prettier-ignore -->
  <Markdown>
    ## Card Title
    This is a paragraph with **strong** and *italic* text.
    This is the second paragraph with a [link](https://link-somewhere.com)

    - List
    - Of
    - Items
  </Markdown>
</div>

Notou o comentário <div class="card">
<!-- prettier-ignore -->
<Markdown>
## Card Title
This is a paragraph with **strong** and *italic* text.
This is the second paragraph with a [link](https://link-somewhere.com)

- List
- Of
- Items
</Markdown>
</div>? Diz ao Prettier para não formatar o conteúdo do bloco prettier-ignore para que o Prettier não atrapalhe meu conteúdo do Markdown.

A saída HTML será a seguinte:

<div class="card">
  <h2> Card Title </h2>
  <p>This is a paragraph with <strong>strong</strong> and <em>italic</em> text.</p>
  <p>This is the second paragraph with a <a href="https://link-somewhere.com">link</a></p>

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

Instalando o componente Markdown

Curiosidade: Astro veio com um componente prettier-ignore em seu lançamento inicial, mas este componente prettier-ignore foi migrou para um plugin separado na versão 1 e completamente removido na versão 3 .

Fiquei chateado com isso. Mas decidi construir um componente Markdown para mim, pois gostei de usá-lo. Você pode ver a documentação aqui .

Usar o componente Markdown é simples: basta importá-lo e utilizá-lo da forma que mostrei acima.

---
import { Markdown } from '@splendidlabz/astro'
---

<Markdown>
  ...
</Markdown>

Respeita o recuo automaticamente

Você pode escrever seu Markdown naturalmente, como se estivesse escrevendo conteúdo normalmente. Este componente Markdown detecta o recuo e gera os valores corretos (sem envolvê-los nas tags <Markdown> e <Markdown>).

<div>
  <div>
    <!-- prettier-ignore -->
    <Markdown>
      This is a paragraph

      This is a second paragraph
    </Markdown>
  </div>
</div>

Aqui está o resultado:

<div>
  <div>
    <p>This is a paragraph</p>
    <p>This is a second paragraph</p>
  </div>
</div>

Opção embutida

Há uma opção ---
import { Markdown } from '@splendidlabz/astro'
---

<Markdown>
...
</Markdown> que informa ao componente prettier-ignore para não gerar tags de parágrafo.

<h2 class="max-w-[12em]">
  <Markdown inline> Ain't this cool? </Markdown>
</h2>

Aqui está o resultado:

<h2 class="max-w-[12em]">
  Ain't this cool?
</h2>

Dicas e advertências

Mais bonito bagunça o bloco <code> se você tiver caracteres Unicode como emojis e travessões em qualquer lugar antes do bloco.

Aqui está o código original:

<!-- prettier-ignore -->
<Markdown>
  Markdown block that contains Unicode characters 🤗
</Markdown>

<!-- prettier-ignore -->
<Markdown>
  Second Markdown block.
</Markdown>

Veja como fica depois de salvar:

<!-- prettier-ignore -->
<Markdown>
  Markdown block that contains unicode characters 🤗
</Markdown>

<!-- prettier-ignore -->
<Markdown>
  Second Markdown block.
</Markdown>

Infelizmente, não podemos fazer muito em relação aos emojis porque o problema decorre do formatador do Prettier.

Mas, podemos usar <div>
<div>
<!-- prettier-ignore -->
<Markdown>
This is a paragraph

This is a second paragraph
</Markdown>
</div>
</div> e <div>
<div>
<p>This is a paragraph</p>
<p>This is a second paragraph</p>
</div>
</div> traços escrevendo inline e <Markdown>, respectivamente.

Solução alternativa de conteúdo

Você pode evitar que Prettier quebre todos aqueles <code> comentários não os usando!

Para fazer isso, basta colocar seu conteúdo dentro de uma propriedade <h2 class="max-w-[12em]">
Ain't this cool?
</h2>. Não há necessidade de se preocupar com espaços em branco também – isso é resolvido para você.

<Markdown content=`
  This is a paragraph

  This is another paragraph
`/>

Pessoalmente, acho que não parece tão bom quanto a versão do slot acima…

Mas permite usar markdown diretamente com qualquer conteúdo JS ou JSON que você carregar!

---
const content = `
  This is a paragraph

  This is another paragraph
`
---

<Markdown {content} />

Indo além

Venho construindo com o Astro há mais de 3 anos e continuei enfrentando os mesmos pontos de atrito em sites com muito conteúdo: páginas de blog, páginas de tags, paginação e estruturas de pastas que ficam confusas com o tempo.

Então eu construí Practical Astro: Content Systems — 7 soluções prontas para uso para fluxos de trabalho de conteúdo Astro (MDX é apenas uma delas). Você obtém o código e o pensamento por trás dele.

Se você deseja um fluxo de trabalho de conteúdo mais limpo e tranquilo, dê uma olhada.

Eu também escrevo sobre Astro Patterns e Usando Tailwind + CSS juntos em meu blog . Venha e diga oi!

Aprimorando o Astro com um componente Markdown originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.