Astro4.14 Content Layer API

作成: 更新:
heroimage

Astro 4.14 Content Layer API

Astro4.14になってContents Collectionに替わる予定のContent Layer APIが実装(実験的)されたので自分のサ イトに設定してみた。

参考

Astro 4.14 | Astro
Astro 4.14 is available now! This release includes the first experimental version of the Content Layer API, experimental support for Intellisense inside content files, and more.
Astro 4.14 | Astro favicon https://astro.build/blog/astro-4140/
Astro 4.14 | Astro
Configuration Reference
Configuration Reference favicon https://docs.astro.build/en/reference/configuration-reference/#migrating-an-existing-content-collection-to-use-the-content-layer-api
Configuration Reference

ブログ用markdownファイルの移動

今までの/src/content/から/src/data/へブログ用markdownファイルを移動する。

Content Layerでは/src/content/の中にあるmarkdownファイルを処理しないのでエラーになる。

/src/content/config.tsは動かしてはいけない。

astro.config.mjs に追記

まだ実験的なので以下のように追記する

export default defineConfig({
  experimental: {
    contentLayer: true,
    //省略
  },

/src/content/config.ts の修正

astro/loadersからglobをインポートする

// loadersのインポートエラーがでていたが
// tsconfig.jsonを修正して直った
//
//     "moduleResolution": "node",
//                 ↓
//     "moduleResolution": "Bundle",
import { glob } from "astro/loaders";

Collection に loader を追加

const blogCollection = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/data/blog" }),
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    //省略
export const collections = {
  blog: blogCollection,
};

slug を id にする

Content Layerではslugは存在しないので各所のslugをidにする

ファイル名も変える
[...slug].astro -> [...id].astro
// slug: entry.slug のようなところも id に

export async function getStaticPaths() { const blogEntries = await getCollection(BLOG_NAME); const numberOfPosts
= blogEntries.length; return blogEntries.sort(sortByDate).map((entry, i) => ({ params: { id: entry.id
},// 元は slug: entry.slug props: { entry, prevPost: i + 1 === numberOfPosts ? "" : blogEntries[i + 1],
nextPost: i === 0 ? "" : blogEntries[i - 1], }, })); } // urlを作るときに参照するのも id const url =
post.data.baseUrl ? post.data.baseUrl + post.id : "/" + post.id + "/";

その他各所slugをidに変更した。(RSSのURLなど)

renderの変更

---
const { Content, headings } = await entry.render();
// ↑これを以下のようにする

// インポートしたrenderを使う
import { render } from "astro:content";

const { Content, headings } = await render(entry);
---

サイトの画像

Astro 4.14とは関係ないがサイトの画像変換のAstro Remark Eleventy Image がVercelでよく画像生成を失敗し たりするので画像変換をAstroに任せることにした。

それに伴い各画像ファイルはpublicから/src/assets/images/へ移動した。

markdown内の画像にclassをつけることも EleventyがやっていたのでBridgy Fedに必要なu-photoクラスがつけ られなくなってしまった。

rehype-add-classなどでclassを付与することもやってみたがpages内のmarkdownファイルだとclassが正しく付 与されるがContent Layerのmarkdownファイルには<img className="u-photo">とつけられてしまう。

現在対処方法がないので画像にu-photoをつける場合はmdxファイルにするしかない。