index.astro を index.mdx に変えてみました。 なんか React ぽい書き方が動いてしまいます。 不思議な感じがしますね。

/src/pages/index.mdx
---
layout: ../layouts/ProseLayout.astro
title: 三次元日誌
items: [
{
name: "MesonBook(docusaurus)",
url: "https://ousttrue.github.io/meson_book/",
icon: "🔗",
},
{
name: "CmakeBook(docusaurus)",
url: "https://ousttrue.github.io/cmake_book/",
icon: "🔗",
},
{
name: "BlenderBook(docusaurus)",
url: "https://ousttrue.github.io/blender_book/",
icon: "🔗",
},
{
name: "NvimNote(vitepress)",
url: "https://ousttrue.github.io/my_nvim/",
icon: "🔗",
},
]
---
MDX テステス。
`/src/pages/index.mdx`
export function Item(props) {
return <div>
{props.icon}
<a href={props.url}>{props.name}</a>
</div>
}
export function Items(props) {
return <>
{props.items.map((item) => <Item {...item} />)}
</>
}
<Items items={frontmatter.items} />

nvim の mdx 設定

ついでに nvim の mdx 対応を探索。 発見しました。

Good enough syntax highlight for MDX in Neovim using Treesitter

Setting up Neovim for Astro development · joschua.io

引き数の順番を間違えていた
vim.treesitter.language.register("markdown", "mdx")
  • ~/.config/nvim/file.lua に mdx 拡張子設定を追加
  • treesitter 設定で mdx を markdown に結びつける

の2点で作業完了。 最近の nvim は treesitter が強力で、既に主力の syntaxhight 定義は treesitter に移り変わっているように感じます。

astro の mdx

astro の ContentsCollection 経由の md/mdx とpages 配下の md/mdx で微妙に扱いが異なります。 だいたい同じだけどpages 配下の場合 render() の呼び出しが暗黙になっているなどの違いがありました。

pages 配下の md /mdx に対してLayout を適用する方法。

render 結果が slotContent が入ってくるのはわかるのだが、副次的な headings などは取得できるのであろうか。読まないとわからないですな。