Minor Changes
-
#13520
a31edb8
Thanks @openscript! - Adds a new propertyroutePattern
available toGetStaticPathsOptions
This provides the original, dynamic segment definition in a routing file path (e.g.
/[...locale]/[files]/[slug]
) from the Astro render context that would not otherwise be available within the scope ofgetStaticPaths()
. This can be useful to calculate theparams
andprops
for each page route.For example, you can now localize your route segments and return an array of static paths by passing
routePattern
to a customgetLocalizedData()
helper function. Theparams
object will be set with explicit values for each route segment (e.g.locale
,files
, andslug)
. Then, these values will be used to generate the routes and can be used in your page template viaAstro.params
.// src/pages/[...locale]/[files]/[slug].astro import { getLocalizedData } from "../../../utils/i18n"; export async function getStaticPaths({ routePattern }) { const response = await fetch('...'); const data = await response.json(); console.log(routePattern); // [...locale]/[files]/[slug] // Call your custom helper with `routePattern` to generate the static paths return data.flatMap((file) => getLocalizedData(file, routePattern)); } const { locale, files, slug } = Astro.params;
For more information about this advanced routing pattern, see Astro's routing reference.
-
#13651
dcfbd8c
Thanks @ADTC! - Adds a newSvgComponent
typeYou can now more easily enforce type safety for your
.svg
assets by directly importingSVGComponent
fromastro/types
:--- // src/components/Logo.astro import type { SvgComponent } from 'astro/types'; import HomeIcon from './Home.svg'; interface Link { url: string; text: string; icon: SvgComponent; } const links: Link[] = [ { url: '/', text: 'Home', icon: HomeIcon, }, ]; ---
-
#14206
16a23e2
Thanks @Fryuni! - Warn on prerendered routes collision.Previously, when two dynamic routes
/[foo]
and/[bar]
returned values on theirgetStaticPaths
that resulted in the same final path, only one of the routes would be rendered while the other would be silently ignored. Now, when this happens, a warning will be displayed explaining which routes collided and on which path.Additionally, a new experimental flag
failOnPrerenderCollision
can be used to fail the build when such a collision occurs.
Patch Changes
-
#13811
69572c0
Thanks @florian-lefebvre! - Adds a newgetFontData()
method to retrieve lower-level font family data programmatically when using the experimental Fonts APIThe
getFontData()
helper function fromastro:assets
provides access to font family data for use outside of Astro. This can then be used in an API Route or to generate your own meta tags.import { getFontData } from 'astro:assets'; const data = getFontData('--font-roboto');
For example,
getFontData()
can get the font buffer from the URL when using satori to generate OpenGraph images:// src/pages/og.png.ts import type { APIRoute } from 'astro'; import { getFontData } from 'astro:assets'; import satori from 'satori'; export const GET: APIRoute = (context) => { const data = getFontData('--font-roboto'); const svg = await satori(<div style={{ color: 'black' }}>hello, world</div>, { width: 600, height: 400, fonts: [ { name: 'Roboto', data: await fetch(new URL(data[0].src[0].url, context.url.origin)).then((res) => res.arrayBuffer(), ), weight: 400, style: 'normal', }, ], }); // ... };
See the experimental Fonts API documentation for more information.