Skip to content

Latest commit

 

History

History
79 lines (63 loc) · 3.09 KB

astro-4110.mdx

File metadata and controls

79 lines (63 loc) · 3.09 KB
Raw
title description publishDate authors coverImage socialImage lang
Astro 4.11
Astro 4.11 is out with custom 500 page improvements and Shiki transformers in the Code component.
June 20, 2024
matthew
/src/content/blog/_images/astro-4110/header-astro-4.11.webp
/src/content/blog/_images/astro-4110/og-image-4.11.webp
en

Astro 4.11 is out with custom 500 page improvements and Shiki transformers in the Code component.

Learn more on each of these:

To upgrade an existing project, use the automated @astrojs/upgrade CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:

# Recommended:
npx @astrojs/upgrade

# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Improvements to 500.astro

src/pages/500.astro is a special page file in Astro that allows you to handle 500 errors gracefully. A 500 error most commonly happens where there is a bug in your application; such as not wrapping delicate code in a try/catch. When component code throws, Astro catches and returns a 500 response. If you have src/pages/500.astro this page gets rendered into the response body.

New in 4.11, 500.astro now receives the error as a prop. This allows you to give more contextual information about the error.

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

Astro's built-in <Code /> component is used to render syntax highlighted code blocks inside of Astro pages. The component uses Shiki and supports all popular themes and languages. Now, you can also use Shiki transformers on the code blocks by passing the transformers prop:

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

More

As always, Astro 4.11 includes more bug fixes and smaller improvements that couldn't make it into this post! Check out the full release notes to learn more. Special thanks to Sarah, Bjorn, Ema, Florian, braebo and everyone else who contributed to this release.