Astroでは、MDXでコンテンツを管理することができますが、次のような悩みが生まれることもありました。
- MDXファイルでいちいちコンポーネントを
importするのがめんどくさい - Markdownベースで書きたいのに、結局コンポーネントのタグが並んでHTMLみたいな見た目になってしまう…
このような悩みを解決するために、MDXにディレクティブ記法を導入する独自のAstroインテグレーションを作りました。
コンポーネントの自動importとディレクティブ記法
このインテグレーションの設定オプションにコンポーネントを登録することで、たとえば次のようなコードを、
import { MediumSection } from "../../components/MediumSection.astro"
<MediumSection icon="circle" iconSize="L">
### hogehoge
- list item 1
- list item 2
- list item 3
</MediumSection>次のように書くことができるようになります。
:::MediumSection{icon="circle" iconSize="L"}
### hogehoge
- list item 1
- list item 2
- list item 3
:::このインテグレーションは内部でastro-auto-importを利用しているため、コンポーネントのimport文が不要になります。
さらに、<MediumSection>といったタグを、:::MediumSectionというようなディレクティブ記法に置き換えることができます。
HTML要素もディレクティブで簡単に書ける
このインテグレーションは、独自に定義したAstroコンポーネントだけでなく、HTML要素もディレクティブ記法で書くことを可能にします。HTML要素の場合、設定オプションへの登録は不要です。
たとえば、次のようなMDXのコードが、
:::main{#readme}
Lorem:br
ipsum.
::hr{.red}
A :i[lovely] language know as :abbr[HTML]{title="HyperText Markup Language"}!
:::次のようなHTMLに変換されるようになります。
<main id="readme">
<p>
Lorem<br />
ipsum.
</p>
<hr class="red" />
<p>
A <i>lovely</i> language know as <abbr title="HyperText Markup Language">HTML</abbr>!
</p>
</main>