Major Changes
-
#15332
7c55f80Thanks @matthewp! - Adds frontmatter parsing support torenderMarkdownin content loaders. When markdown content includes frontmatter, it is now extracted and available inmetadata.frontmatter, and excluded from the HTML output. This makesrenderMarkdownbehave consistently with theglobloader.const loader = { name: 'my-loader', load: async ({ store, renderMarkdown }) => { const content = `--- title: My Post --- # Hello World `; const rendered = await renderMarkdown(content); // rendered.metadata.frontmatter is now { title: 'My Post' } // rendered.html contains only the content, not the frontmatter }, };
Minor Changes
-
#15291
89b6cddThanks @florian-lefebvre! - Removes theexperimental.fontsflag and replaces it with a new configuration optionfonts- (v6 upgrade guidance) -
#15332
7c55f80Thanks @matthewp! - Adds afileURLoption torenderMarkdownin content loaders, enabling resolution of relative image paths. When provided, relative image paths in markdown will be resolved relative to the specified file URL and included inmetadata.localImagePaths.const loader = { name: 'my-loader', load: async ({ store, renderMarkdown }) => { const content = ` # My Post  `; // Provide a fileURL to resolve relative image paths const fileURL = new URL('./posts/my-post.md', import.meta.url); const rendered = await renderMarkdown(content, { fileURL }); // rendered.metadata.localImagePaths now contains the resolved image path }, };
-
#15291
89b6cddThanks @florian-lefebvre! - Adds a new Fonts API to provide first-party support for adding custom fonts in Astro.This feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including preloading and fallback font generation.
To enable this feature, configure
fontswith one or more fonts:import { defineConfig, fontProviders } from 'astro/config'; export default defineConfig({ fonts: [ { provider: fontProviders.fontsource(), name: 'Roboto', cssVariable: '--font-roboto', }, ], });
Import and include the
<Font />component with the requiredcssVariableproperty in the head of your page, usually in a dedicatedHead.astrocomponent or in a layout component directly:--- // src/layouts/Layout.astro import { Font } from 'astro:assets'; --- <html> <head> <Font cssVariable="--font-roboto" preload /> </head> <body> <slot /> </body> </html>
In any page rendered with that layout, including the layout component itself, you can now define styles with your font's
cssVariableto apply your custom font.In the following example, the
<h1>heading will have the custom font applied, while the paragraph<p>will not.--- // src/pages/example.astro import Layout from '../layouts/Layout.astro'; --- <Layout> <h1>In a galaxy far, far away...</h1> <p>Custom fonts make my headings much cooler!</p> <style> h1 { font-family: var('--font-roboto'); } </style> </Layout>
Visit the updated fonts guide to learn more about adding custom fonts to your project.
Patch Changes
-
#15337
7ff7b11Thanks @ematipico! - Fixes a bug where the development server couldn't serve newly created new pages while the development server is running. -
#15331
4592be5Thanks @matthewp! - Fixes an issue where API routes would overwrite public files during build. Public files now correctly take priority over generated routes in both dev and build modes. -
Updated dependencies [
7c55f80]:- @astrojs/markdown-remark@7.0.0-beta.3