Astro を触っている

Astro

先日 v2 がリリースされ割とホットなのかなと思うので、このブログを Astro で書き換えようと着手している。

静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量 Markdown 対応、「Hybrid Rendering」で静的と動的ページの混在可能に － Publickey

JS をできる限り排除できるのはやっぱり魅力的。

以下は着手している中での雑なメモ。

Astro の Content Collections

公式のドキュメントはこれ。

Content Collections
Content collections help organize your Markdown and type-check your frontmatter with schemas.
Content Collections favicon docs.astro.build
Content Collections 
$ tree ./src/content
./src/content
├── config.ts
├── blog
│   ├── aaa.md
│   ├── bbb.md
│   ├── ccc.md
└── schemes.ts

こんな感じで ./src/content 配下に Markdown, MDX などのコンテンツを管理する Astro v2 で追加になった機能を使って実装してみている。./src/content/scheme.ts では Markdown の frontmatter の型定義をするようにした。

ページ側で Markdown を読み込むのも非常に簡単で、以下のようにするだけで画面に表示できた。

---
import { getCollection } from "astro:content";

const allPosts = await getCollection("blog");
---