ドキュメント向きのhtmlはmicroCMSで管理するのがよいですが、見栄えに特化したページは扱いづらいのでファイルとして管理することになります。
元々がhtmlファイルで管理されていた場合、それを１つ１つAstroファイル作るのもあれなので、Content Collectionsでhtmlを管理できないか探ってみます。
参考にするのがAstro製のドキュメントWebサイトフレームワークのStarlight。最近できたばかりでまだまだこれからのフレームワークですが、AstroのContent Collectionsのサンプルとしては適しているので、これを触りながらContent CollectionsやMDXの可能性について考えていきます。
withastro/starlight: 🌟 Build beautiful, high-performance documentation websites with Astro
Content Collection
Content Collections 🚀 Astro Documentation
扱えるのはMarkdown, MDX, JSON, YAML。
Astroファイル扱えれば実質htmlが扱えたのに残念。。
JSONやYAMLのデータとしてhtmlを扱えはするが、そのまま編集しやすいかというとそうではないので、htmlを別ファイルとして持っておきpre-build時にJSON化するなどが必要となりちょっと微妙。
MDXだとどこまでhtmlが扱えるか調べる。
MDX
Markdown for the component era | MDX
Javascriptが書けるMarkdownという認識だったが、もっといろいろできるみたいなので欲しい機能があるか調べる。
HTMLはサポートされてないがJSXは使える
micromark/mdx-state-machine: How to parse MDX
htmlをそのまま移植するのはちょっと厳しい面があるが、そこまで複雑なものでなければJSXでも対応しているので使えはするはず。
htmlからJSXにするライブラリもなくはないので、 スクレイピング -> html to JSX -> Content Collection のファイルとして出力も可能なのでは？
コンポーネント利用はできる
JSXにするのがあれな要素があればコンポーネントとして扱うこともできる。が、自動処理の場合は向いてないか。
Frontmatter
標準では対応していないがモジュール入れれば可能。StarlightやAstroのMDX integrationには標準で入ってる。
remarkjs/remark-frontmatter: remark plugin to support frontmatter (YAML, TOML, and more)
meta情報はFrontmatterで管理したいので、 スクレイピング -> YAML-> Frontmatter という具合に挿入されるのがいいか？ちょっと手間だけど。
まとめ
Content Collectionsでhtmlを直に扱うことはできないが、MDX内でJSXを扱えるため一部htmlはそのまま扱える。
htmltojsxで変換すればたいてい扱えるとは思うので、これが一番楽な手段なのかな。
追加でmeta情報などをFrontmatterに突っ込めば、大量のhtmlファイルを変換してMDXとして扱うこともできそう。
ページごとに追加で読み込んでいるcssやjsの扱いがちょっと課題ではある。
元のhtml構造が似ててスクレイピングしやすいということが前提。
似てなくて汚かったら数にもよるが手動でやっちゃったほうがいいこともあるし。
大量のhtmlファイルの変換についてもうちょっといい案ありそうなのでまた考えよう。