Astro v4.11リリース！コードブロックや500エラーページの改善など

#Astro#JavaScript#TypeScript#Web開発#オープンソース#ニュース
投稿日：
サムネイル

オープンソースの静的サイトジェネレーター「Astro」のバージョン4.11がリリースされました。このリリースでは、500エラーページの改善や、<Code />コンポーネントにおけるShikiトランスフォーマーの扱いの改善などが含まれています。

この記事では、Astro 4.11のアップデート内容について詳しく解説します。

Astro 4.11の主な更新内容

500エラーページの改善

src/pages/500.astroは、Astroで500エラーページをカスタマイズするためのファイルです。

このファイルにおいて、errorプロパティを通して、エラーについての詳細なコンテキスト情報を取得できるようになりました。これにより、エラーページにエラーの詳細を表示するといったことが可能になりました。

src/pages/500.astro
---
interface Props {
  error: unknown
}
const { error } = Astro.props
---


<html lang="en">
<head>
  <title>Server error - Custom 500</title>
</head>
<body>
  <h1>Server error</h1>
  <p>{error instanceof Error ? error.message : 'Unknown error'}</p>
</body>
</html>

<Code />コンポーネントのShikiトランスフォーマー

Astroには<Code />コンポーネントが標準で用意されており、コードブロックのレンダリングに利用できます。

このリリースでは、<Code />コンポーネントにtransformersプロパティが追加され、Shikiトランスフォーマーを利用できるようになりました。このプロパティを使うことで、コードブロックのシンタックスハイライトの処理をカスタマイズできます。

---
import { transformerNotationFocus } from '@shikijs/transformers'
import { Code } from 'astro:components'
const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`
---
<Code {code} lang="js" transformers={[transformerNotationFocus()]} />
<style is:global>
  pre.has-focused .line:not(.focused) {
    filter: blur(1px);
  }
</style>

Astro 4.11へのアップデート方法

既存のプロジェクトをAstro v4.11にアップデートするには、@astrojs/upgradeを使用できます。または、パッケージマネージャーのアップグレードコマンドを実行して手動でアップグレードできます。

Terminal window
npx @astrojs/upgrade
Terminal window
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

まとめ

Astro 4.11では、500エラーページの改善や<Code />コンポーネントのShikiトランスフォーマーの追加などの機能が追加されました。これにより、Astroを使った開発がより便利になり、より高度なカスタマイズが可能になります。

参考

Xに共有する Blueskyに共有する Misskeyに共有する LINEに共有する Threadsに共有する
著者のアイコン画像
ろぼいん
Twitter Misskey GitHub Qiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

最新記事