Astro v5にアップグレードする他

最近業務委託先でAI活用が進んでいて色々と触る機会が増えたものの、 業務で利用できるツールにはある程度制限があるため、使用したいツールによっては個人開発のコードを材料にする必要があります。

プライベートなプロジェクトもあるにはあるのですが、ブログは公開サイトでありながら気軽に変更できて最適なAIお試しの場所だと思い、活用してみようと思いました。

ですが、しばらく放置していたのでまずはライブラリを最新にしたいと思います(手作業)

作業内容

アップグレードガイドを参考に作業を進めます。

bunx @astrojs/upgrade

  @astrojs/rss is up to date on v4.0.12
  @astrojs/sitemap is up to date on v3.4.1
  @astrojs/check will be updated from v0.3.4 to v0.9.4
  @astrojs/markdoc will be updated from v0.8.3 to v0.15.0
  astro will be updated  from v4.16.18 to v5.10.1 
  @astrojs/mdx will be updated  from v2.3.1 to v4.3.0 

devサーバーのコンソールでメッセージが表示されていたので修正します。

Auto-generating collections for folders in "src/content/" that are not defined as collections.
This is deprecated, so you should define these collections yourself in "src/content.config.ts".
The following collections have been auto-generated: diary, paint, practice

Astroではsrc/content以下のコンテンツファイルからいい感じに型が生成されていたと思うのですが、ちゃんと設定ファイルで定義してねって感じになった模様です。なのでsrc/content.config.tsファイルを作成してファイルと型の定義をします。

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const baseSchema = z.object({
  title: z.string(),
  description: z.string().optional(),
  comments: z.boolean().default(false).optional(),
  categories: z.array(z.string()).default([]),
  tags: z.array(z.string()).default([]),
});

const diary = defineCollection({
  loader: glob({
    pattern: "*.md",
    base: "./src/content/diary",
  }),
  schema: baseSchema,
});

const paint = defineCollection({
  loader: glob({
    pattern: "*.md",
    base: "./src/content/paint",
  }),
  schema: baseSchema.extend({
    directory: z.string(),
    images: z.array(z.string()).default([]),
  }),
});

const practice = defineCollection({
  loader: glob({
    pattern: "*.md",
    base: "./src/content/practice",
  }),
  schema: baseSchema,
});

export const collections = { diary, paint, practice };

コード上も型エラーが表示されているので修正します。大きい変更としてはコレクションのキー?がslugからidに変更されていました。(Dynamic Routesのパラメーター名に影響はないようでした)

その他の変更

Astro以外にいくつかの変更をしました。

bunのロックファイルをbun.lockbからbun.lockにする

bunのロックファイルはbun.lockbというバイナリ形式のものだったのですが、去年末ぐらいにbun.lockというテキストベースのものが使えるようになりました。なのでそれに移行しました。

知らないうちにbun auditが使えるようになっているのも嬉しいですね。

formatterをPrettierからBiomeにする

ブログなのであまり利点はないのですが、他プロジェクトでもBiomeを使っていて良かったので移行しました。linterとしての機能もあるので、CSSをSassから移行した際の名残でいくつか問題のあるSyntaxが放置されており修正することができたので良かったです。

おわりに

アップグレードが無事に終わりました。これでAIお試しの場は整いました。早速Astro Auditで画像表示周りのアクセシビリティ問題が発見されていることに気づいたので、今度試してみようと思いました。