github withastro/astro astro@6.0.0-beta.6

latest release: @astrojs/mdx@5.0.0-beta.3
pre-release2 hours ago

Major Changes

  • #15332 7c55f80 Thanks @matthewp! - Adds frontmatter parsing support to renderMarkdown in content loaders. When markdown content includes frontmatter, it is now extracted and available in metadata.frontmatter, and excluded from the HTML output. This makes renderMarkdown behave consistently with the glob loader.

    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 89b6cdd Thanks @florian-lefebvre! - Removes the experimental.fonts flag and replaces it with a new configuration option fonts - (v6 upgrade guidance)

  • #15332 7c55f80 Thanks @matthewp! - Adds a fileURL option to renderMarkdown in 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 in metadata.localImagePaths.

    const loader = {
      name: 'my-loader',
      load: async ({ store, renderMarkdown }) => {
        const content = `
    # My Post
    
    ![Local image](./image.png)
    `;
        // 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 89b6cdd Thanks @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 fonts with 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 required cssVariable property in the head of your page, usually in a dedicated Head.astro component 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 cssVariable to 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 7ff7b11 Thanks @ematipico! - Fixes a bug where the development server couldn't serve newly created new pages while the development server is running.

  • #15331 4592be5 Thanks @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

Don't miss a new astro release

NewReleases is sending notifications on new releases.