Astro 4.11 | Astro

Вышел Astro 4.11 с улучшениями кастомных страниц 500 и Shiki transformers в компоненте Code.

Подробнее:

Улучшения 500.astro
Shiki transformers в компоненте <Code />

Чтобы обновить существующий проект, используйте CLI @astrojs/upgrade. Или обновите вручную:

# Рекомендуется:
npx @astrojs/upgrade

# Вручную:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Improvements to 500.astro

src/pages/500.astro — специальная страница Astro для обработки 500 ошибок. 500 чаще всего при баге в приложении — например, без try/catch вокруг хрупкого кода. При исключении в компоненте Astro ловит его и возвращает 500. Если есть src/pages/500.astro, она рендерится в тело ответа.

В 4.11 500.astro получает error как prop — можно показать более контекстную информацию об ошибке.

---
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>

Shiki transfomers in the Code component

Встроенный <Code /> рендерит подсвеченные блоки кода в Astro-страницах. Использует Shiki со всеми популярными темами и языками. Теперь можно применять Shiki transformers через prop transformers:

---
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 включает исправления и улучшения, не вошедшие в этот пост! Полные release notes. Особая благодарность Sarah, Bjorn, Ema, Florian, braebo и всем остальным контрибьюторам релиза.

Improvements to 500.astro

Shiki transfomers in the Code component

More