Repository: withastro/docs
Pull request #11196: fix: update some codeblocks
Author: login: jsparkdev
Created: 2025-03-11T09:31:10Z | Merged: 2025-03-11T11:36:20Z

<!-- Thank you for opening a PR! We really appreciate you taking the time to help out 🙌 -->

#### Description (required)

- Added missing double quotes, semicolons.
- Removed unnecessary `async` keyword.
- Fixed incorrect code highlighting.
- Updated invalid whitespace.
- Formatted code to improve readability.

If you update by referencing the changes in this PR, please include the changes in [this PR](https://github.com/withastro/docs/pull/11200/files) as well! Thank you!



Diff:
diff --git a/src/content/docs/en/concepts/islands.mdx b/src/content/docs/en/concepts/islands.mdx
index a82894c632c80..3d507e9d25555 100644
--- a/src/content/docs/en/concepts/islands.mdx
+++ b/src/content/docs/en/concepts/islands.mdx
@@ -107,7 +107,7 @@ Add the [`server:defer` directive](/en/reference/directives-reference/#server-di
 
 ```astro title="src/pages/index.astro" "server:defer"
 ---
-import Avatar from '../components/Avatar.astro';
+import Avatar from "../components/Avatar.astro";
 ---
 <Avatar server:defer />
 ```
diff --git a/src/content/docs/en/guides/configuring-astro.mdx b/src/content/docs/en/guides/configuring-astro.mdx
index 7c39e665c8b2d..4724e6fe409ad 100644
--- a/src/content/docs/en/guides/configuring-astro.mdx
+++ b/src/content/docs/en/guides/configuring-astro.mdx
@@ -17,11 +17,11 @@ The [Astro config file](/en/reference/configuration-reference/) is a JavaScript
 
 ```js
 // astro.config.mjs
-import { defineConfig } from 'astro/config'
+import { defineConfig } from "astro/config";
 
 export default defineConfig({
   // your configuration options here...
-})
+});
 ```
 
 It is only required if you have something to configure, but most projects will use this file. The `defineConfig()` helper provides automatic IntelliSense in your IDE and is where you will add all your configuration options to tell Astro how to build and render your project to HTML.
@@ -57,13 +57,13 @@ For generating your sitemap and creating canonical URLs, configure your deployme
 Additionally, different deployment hosts may have different behavior regarding trailing slashes at the end of your URLs. (e.g. `example.com/about` vs `example.com/about/`). Once your site is deployed, you may need to configure your [`trailingSlash`](/en/reference/configuration-reference/#trailingslash) preference.
 
 ```js title="astro.config.mjs"
-import { defineConfig } from 'astro/config'
+import { defineConfig } from "astro/config";
 
 export default defineConfig({
-  site: 'https://www.example.com',
-  base: '/docs',
-  trailingSlash: 'always',
-})
+  site: "https://www.example.com",
+  base: "/docs",
+  trailingSlash: "always",
+});
 ```
 
 ### Add site metadata
@@ -76,7 +76,8 @@ One common pattern for Astro sites is to create a `<Head />` [`.astro` component
 
 ```astro title="src/components/MainLayout.astro"
 ---
-import Head from './Head.astro';
+import Head from "./Head.astro";
+
 const { ...props } = Astro.props;
 ---
 <html>
@@ -95,9 +96,10 @@ Because `Head.astro` is just a regular Astro component, you can import files and
 
 ```astro title="src/components/Head.astro"
 ---
-import Favicon from '../assets/Favicon.astro';
-import SomeOtherTags from './SomeOtherTags.astro';
-const { title = 'My Astro Website', ...props } = Astro.props;
+import Favicon from "../assets/Favicon.astro";
+import SomeOtherTags from "./SomeOtherTags.astro";
+
+const { title = "My Astro Website", ...props } = Astro.props;
 ---
 <link rel="sitemap" href="/sitemap-index.xml">
 <title>{title}</title>
diff --git a/src/content/docs/en/guides/data-fetching.mdx b/src/content/docs/en/guides/data-fetching.mdx
index c07da88e76bfc..201d0ad2d1bec 100644
--- a/src/content/docs/en/guides/data-fetching.mdx
+++ b/src/content/docs/en/guides/data-fetching.mdx
@@ -16,7 +16,7 @@ This fetch call will be executed at build time, and the data will be available t
 
 💡 Pass fetched data to both Astro and framework components, as props.
 
-```astro /await fetch\\(.*?\\)/
+```astro /await fetch\\(.*?\\);/
 ---
 // src/components/User.astro
 import Contact from "../components/Contact.jsx";
@@ -49,7 +49,7 @@ The `fetch()` function is also globally available to any [framework components](
 import type { FunctionalComponent } from 'preact';
 
 const data = await fetch('https://example.com/movies.json').then((response) =>
-  response.json()
+  response.json();
 );
 
 // Components that are build-time rendered also log to the CLI.
@@ -70,7 +70,8 @@ Astro can also use `fetch()` to query a GraphQL server with any valid GraphQL qu
 
 ```astro title="src/components/Film.astro" "await fetch"
 ---
-const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
+const response = await fetch(
+  "https://swapi-graphql.netlify.app/.netlify/functions/index",
   {
     method: "POST",
     headers: { "Content-Type": "application/json" },
@@ -87,7 +88,9 @@ const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functio
         id: "ZmlsbXM6MQ==",
       },
     }),
-  });
+  }
+);
+
 
 const json = await response.json();
 const { film } = json.data;
diff --git a/src/content/docs/en/guides/dev-toolbar.mdx b/src/content/docs/en/guides/dev-toolbar.mdx
index 5d2234415ae68..d8662b723f79c 100644
--- a/src/content/docs/en/guides/dev-toolbar.mdx
+++ b/src/content/docs/en/guides/dev-toolbar.mdx
@@ -60,7 +60,7 @@ export default defineConfig({
   devToolbar: {
     enabled: false
   }
-})
+});
 ```
 
 To enable the dev toolbar again, remove these lines from your configuration, or set `enabled: true`.
diff --git a/src/content/docs/en/guides/environment-variables.mdx b/src/content/docs/en/guides/environment-variables.mdx
index f77549916572d..1cd63bfa753d8 100644
--- a/src/content/docs/en/guides/environment-variables.mdx
+++ b/src/content/docs/en/guides/environment-variables.mdx
@@ -203,7 +203,7 @@ The `astro:env` API lets you configure a type-safe schema for [environment varia
 To configure a schema, add the `env.schema` option to your Astro config:
 
 ```js title="astro.config.mjs" ins={4-8}
-import { defineConfig } from "astro/config"
+import { defineConfig } from "astro/config";
 
 export default defineConfig({
   env: {
@@ -217,7 +217,7 @@ export default defineConfig({
 You can then [register variables as a string, number, enum, or boolean](#data-types) using the `envField` helper. Define the [kind of environment variable](#variable-types) by providing a `context` (`"client"` or `"server"`) and `access` (`"secret"` or `"public"`) for each variable, and pass any additional properties such as `optional` or `default` in an object:
 
 ```js title="astro.config.mjs" ins="envField"
-import { defineConfig, envField } from "astro/config"
+import { defineConfig, envField } from "astro/config";
 
 export default defineConfig({
   env: {
@@ -238,8 +238,8 @@ Import and use your defined variables from the appropriate `/client` or `/server
 
 ```astro
 ---
-import { API_URL } from "astro:env/client"
-import { API_SECRET_TOKEN } from "astro:env/server"
+import { API_URL } from "astro:env/client";
+import { API_SECRET_TOKEN } from "astro:env/server";
 
 const data = await fetch(`${API_URL}/users`, {
 	method: "GET",
@@ -251,9 +251,9 @@ const data = await fetch(`${API_URL}/users`, {
 ---
 
 <script>
-import { API_URL } from "astro:env/client"
-
-fetch(`${API_URL}/ping`)
+  import { API_URL } from "astro:env/client";
+  
+  fetch(`${API_URL}/ping`)
 </script>
 ```
 
@@ -264,19 +264,19 @@ There are three kinds of environment variables, determined by the combination of
 - **Public client variables**: These variables end up in both your final client and server bundles, and can be accessed from both client and server through the `astro:env/client` module:
 
    ```js
-   import { API_URL } from "astro:env/client"
+   import { API_URL } from "astro:env/client";
    ```
 
 - **Public server variables**: These variables end up in your final server bundle and can be accessed on the server through the `astro:env/server` module:
 
    ```js
-   import { PORT } from "astro:env/server"
+   import { PORT } from "astro:env/server";
    ```
 
 - **Secret server variables**: These variables are not part of your final bundle and can be accessed on the server through the `astro:env/server` module:
 
    ```js
-   import { API_SECRET } from "astro:env/server"
+   import { API_SECRET } from "astro:env/server";
    ```
 
    By default, secrets are only validated at runtime. You can enable validating private variables on start by [configuring `validateSecrets: true`](/en/reference/configuration-reference/#envvalidatesecrets).
@@ -290,7 +290,7 @@ There are three kinds of environment variables, determined by the combination of
 There are currently four data types supported: strings, numbers, enums, and booleans:
 
 ```js
-import { envField } from "astro/config"
+import { envField } from "astro/config";
 
 envField.string({
    // context & access
@@ -328,9 +328,9 @@ Despite defining your schema, you may want to retrieve the raw value of a given
 import {
    FOO, // boolean
    getSecret
-} from "astro:env/server"
+} from "astro:env/server";
 
-getSecret("FOO") // string | undefined
+getSecret("FOO"); // string | undefined
 ```
 
 <ReadMore>Learn more in [the API reference](/en/reference/modules/astro-env/#getsecret).</ReadMore>
@@ -355,16 +355,16 @@ getSecret("FOO") // string | undefined
    That means you always need to use secrets inside the request scope:
 
    ```js title="src/middleware.ts"
-   import { defineMiddleware } from "astro:middleware"
-   import { FOO, getSecret } from "astro:env"
+   import { defineMiddleware } from "astro:middleware";
+   import { FOO, getSecret } from "astro:env";
 
-   console.log(FOO) // undefined
-   console.log(getSecret("FOO")) // undefined
+   console.log(FOO); // undefined
+   console.log(getSecret("FOO")); // undefined
 
    export const onRequest = defineMiddleware((context, next) => {
-      console.log(FOO) // boolean
-      console.log(getSecret("FOO")) // string
+      console.log(FOO); // boolean
+      console.log(getSecret("FOO")); // string
 
-      return next()
+      return next();
    })
    ```
diff --git a/src/content/docs/en/guides/routing.mdx b/src/content/docs/en/guides/routing.mdx
index 3437cb00be5fe..db2f76b8f00da 100644
--- a/src/content/docs/en/guides/routing.mdx
+++ b/src/content/docs/en/guides/routing.mdx
@@ -94,7 +94,7 @@ The `params` provided to the function `getStaticPaths()` function are not decode
 --- 
 export function getStaticPaths() {
   return [
-    { params: { slug: decodeURI("%5Bpage%5D") } }, // decodes to "[page]"
+    { params: { slug: decodeURI("%5Bpage%5D") }}, // decodes to "[page]"
   ]
 }
 ---
@@ -147,7 +147,7 @@ In the following example, a rest parameter (`[...slug]`) and the [`props`](/en/r
 
 ```astro title="src/pages/[...slug].astro"
 ---
-export async function getStaticPaths() {
+export function getStaticPaths() {
   const pages = [
     {
       slug: undefined,
@@ -165,6 +165,7 @@ export async function getStaticPaths() {
       text: "If you want to learn Astro, you must read this book.",
     },
   ];
+  
   return pages.map(({ slug, title, text }) => {
     return {
       params: { slug },
@@ -255,7 +256,7 @@ You can specify a mapping of permanent redirects in your Astro config with the [
 
 For internal redirects, this is a mapping of an old route path to the new route. As of Astro v5.2.0, it is also possible to redirect to external URLs that start with `http` or `https` and [can be parsed](https://developer.mozilla.org/en-US/docs/Web/API/URL/canParse_static):
 
-```js title="astro.config.mjs" {4-6}
+```js title="astro.config.mjs" {4-7}
 import { defineConfig } from "astro/config";
 
 export default defineConfig({
@@ -334,7 +335,7 @@ The following example uses a rewrite to render the `/es/` version of a page when
 
 ```astro title="src/pages/es-cu/articles/introduction.astro"
 ---
-return Astro.rewrite("/es/articles/introduction")
+return Astro.rewrite("/es/articles/introduction");
 ---
 ```
 
@@ -343,7 +344,7 @@ Use `context.rewrite()` in your endpoint files to reroute to a different page:
 ```js title="src/pages/api.js"
 export function GET(context) {
   if (!context.locals.allowed) {
-    return context.rewrite("/")
+    return context.rewrite("/");
   }
 }
 ```
@@ -357,7 +358,7 @@ You can intentionally create a rewrite to render your `/404` page, for example t
 const { item } = Astro.params;
 
 if (!itemExists(item)) {
-  return Astro.rewrite("/404")
+  return Astro.rewrite("/404");
 }
 ---
 ``` 
@@ -427,26 +428,23 @@ Paginated route names should use the same `[bracket]` syntax as a standard dynam
 
 You can use the `paginate()` function to generate these pages for an array of values like so:
 
-```astro /{ (paginate) }/ /paginate\\(.*\\)/ /(?<=const.*)(page)/ /page\\.[a-zA-Z]+/
+```astro /{ (paginate) }/ /paginate\\(.*\\);/ /(?<=const.*)(page)/ /page\\.[a-zA-Z]+/
 ---
 // src/pages/astronauts/[page].astro
-export async function getStaticPaths({ paginate }) {
-  const astronautPages = [{
-    astronaut: "Neil Armstrong",
-  }, {
-    astronaut: "Buzz Aldrin",
-  }, {
-    astronaut: "Sally Ride",
-  }, {
-    astronaut: "John Glenn",
-  }];
+export function getStaticPaths({ paginate }) {
+  const astronautPages = [
+    { astronaut: "Neil Armstrong" },
+    { astronaut: "Buzz Aldrin" },
+    { astronaut: "Sally Ride" },
+    { astronaut: "John Glenn" },
+  ];
+  
   // Generate pages from our array of astronauts, with 2 to a page
   return paginate(astronautPages, { pageSize: 2 });
 }
 // All paginated data is passed on the "page" prop
 const { page } = Astro.props;
 ---
-
 <!-- Display the current page number. `Astro.params.page` can also be used! -->
 <h1>Page {page.currentPage}</h1>
 <ul>
@@ -502,7 +500,7 @@ The following example displays current information for the page along with links
 ---
 // src/pages/astronauts/[page].astro
 // Paginate same list of `{ astronaut }` objects as the previous example
-export async function getStaticPaths({ paginate }) { /* ... */ }
+export function getStaticPaths({ paginate }) { /* ... */ }
 const { page } = Astro.props;
 ---
 <h1>Page {page.currentPage}</h1>
@@ -535,7 +533,7 @@ In the following example, we will implement nested pagination to build the URLs
 ```astro /(?:[(]|=== )(tag)/ "params: { tag }," /const [{ ]*(page|params)/
 ---
 // src/pages/[tag]/[page].astro
-export async function getStaticPaths({ paginate }) {
+export function getStaticPaths({ paginate }) {
   const allTags = ["red", "blue", "green"];
   const allPosts = Object.values(import.meta.glob("../pages/post/*.md", { eager: true }));
   // For every tag, return a `paginate()` result.
diff --git a/src/content/docs/en/guides/typescript.mdx b/src/content/docs/en/guides/typescript.mdx
index 4daab81dc53ae..935c7acedbf18 100644
--- a/src/content/docs/en/guides/typescript.mdx
+++ b/src/content/docs/en/guides/typescript.mdx
@@ -100,8 +100,8 @@ If your project uses a [UI framework](/en/guides/framework-components/), additio
 Use explicit type imports and exports whenever possible.
 
 ```js del={1} ins={2} ins="type"
-import { SomeType } from './script';
-import type { SomeType } from './script';
+import { SomeType } from "./script";
+import type { SomeType } from "./script";
 ```
 
 This way, you avoid edge cases where Astro's bundler may try to incorrectly bundle your imported types as if they were JavaScript.
@@ -122,8 +122,8 @@ Astro supports [import aliases](/en/guides/imports/#aliases) that you define in
 
 ```astro title="src/pages/about/nate.astro" "@components" "@layouts"
 ---
-import HelloWorld from '@components/HelloWorld.astro';
-import Layout from '@layouts/Layout.astro';
+import HelloWorld from "@components/HelloWorld.astro";
+import Layout from "@layouts/Layout.astro";
 ---
 ```
 
@@ -171,7 +171,7 @@ interface Props {
   greeting?: string;
 }
 
-const { greeting = 'Hello', name } = Astro.props;
+const { greeting = "Hello", name } = Astro.props;
 ---
 <h2>{greeting}, {name}!</h2>
 ```
@@ -195,13 +195,13 @@ For example, if you were building a `<Link>` component, you could do the followi
 
 ```astro title="src/components/Link.astro" ins="HTMLAttributes" ins="HTMLAttributes<'a'>"
 ---
-import type { HTMLAttributes } from 'astro/types';
+import type { HTMLAttributes } from "astro/types";
 
 // use a `type`
-type Props = HTMLAttributes<'a'>;
+type Props = HTMLAttributes<"a">;
 
 // or extend with an `interface`
-interface Props extends HTMLAttributes<'a'> {
+interface Props extends HTMLAttributes<"a"> {
   myProp?: boolean;
 }
 
@@ -217,13 +217,13 @@ It is also possible to extend the default JSX definitions to add non-standard at
 ```ts title="src/custom-attributes.d.ts"
 declare namespace astroHTML.JSX {
   interface HTMLAttributes {
-    'data-count'?: number;
-    'data-label'?: string;
+    "data-count"?: number;
+    "data-label"?: string;
   }
 
   // Add a CSS custom property to the style object
   interface CSSProperties {
-    '--theme-color'?: 'black' | 'white';
+    "--theme-color"?: "black" | "white";
   }
 }
 ```
@@ -248,7 +248,7 @@ The following example shows using the `ComponentProps` utility from `astro/types
 
 ```astro title="src/pages/index.astro"
 ---
-import type { ComponentProps } from 'astro/types';
+import type { ComponentProps } from "astro/types";
 import Button from "./Button.astro";
 
 type ButtonProps = ComponentProps<typeof Button>;
@@ -265,7 +265,7 @@ The example below implements a fully-typed, polymorphic component that can rende
 
 ```astro
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { HTMLTag, Polymorphic } from "astro/types";
 
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
 
@@ -280,14 +280,18 @@ const { as: Tag, ...props } = Astro.props;
 
 Astro includes helpers for working with the types returned by your [`getStaticPaths()`](/en/reference/routing-reference/#getstaticpaths) function for dynamic routes.
 
-You can get the type of [`Astro.params`](/en/reference/api-reference/#params) with `InferGetStaticParamsType` and the type of [`Astro.props`](/en/reference/api-reference/#props) with `InferGetStaticPropsType`:
+You can get the type of [`Astro.params`](/en/reference/api-reference/#params) with `InferGetStaticParamsType` and the type of [`Astro.props`](/en/reference/api-reference/#props) with `InferGetStaticPropsType` or you can use `GetStaticPaths` to infer both at once:
 
-```astro title="src/pages/posts/[...id].astro" {2,14-15}
+```astro title="src/pages/posts/[...id].astro" {2-6,18-19} "satisfies GetStaticPaths;"
 ---
-import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
+import type {
+  InferGetStaticParamsType,
+  InferGetStaticPropsType,
+  GetStaticPaths,
+} from "astro";
 
 export const getStaticPaths = (async () => {
-  const posts = await getCollection('blog');
+  const posts = await getCollection("blog");
   return posts.map((post) => {
     return {
       params: { id: post.id },
diff --git a/src/content/docs/en/install-and-setup.mdx b/src/content/docs/en/install-and-setup.mdx
index e955affd6164b..5413b485bf2a7 100644
--- a/src/content/docs/en/install-and-setup.mdx
+++ b/src/content/docs/en/install-and-setup.mdx
@@ -222,13 +222,15 @@ If you prefer not to use our automatic `create astro` CLI tool, you can set up y
 
     Then, replace any placeholder "scripts" section of your `package.json` with the following:
 
-    ```json title="package.json" del={2} ins={3-6}
+    ```json title="package.json" del={3} ins={4-6}
+    {
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "dev": "astro dev",
         "build": "astro build",
         "preview": "astro preview"
       },
+    }
     ```
 
     You'll use these scripts later in the guide to start Astro and run its different commands.
@@ -281,7 +283,7 @@ If you prefer not to use our automatic `create astro` CLI tool, you can set up y
     Create `astro.config.mjs` at the root of your project, and copy the code below into it:
 
     ```js title="astro.config.mjs"
-    import { defineConfig } from 'astro/config';
+    import { defineConfig } from "astro/config";
 
     // https://astro.build/config
     export default defineConfig({});


Reviews:
user: login: ArmandPhilippot
body: LGTM, I just left a few nits not necessarily related to your changes but while updating...
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T10:50:30Z
user: login: jsparkdev
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T11:01:28Z
user: login: jsparkdev
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T11:09:11Z
user: login: jsparkdev
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T11:11:33Z
user: login: ArmandPhilippot
body: LGTM, thanks! 🙌🏽 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-11T11:23:06Z
user: login: jsparkdev
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-14T01:44:54Z

Review comments:
diff_hunk: @@ -427,26 +428,31 @@ Paginated route names should use the same `[bracket]` syntax as a standard dynam
 
 You can use the `paginate()` function to generate these pages for an array of values like so:
 
-```astro /{ (paginate) }/ /paginate\\(.*\\)/ /(?<=const.*)(page)/ /page\\.[a-zA-Z]+/
+```astro /{ (paginate) }/ /paginate\\(.*\\);/ /(?<=const.*)(page)/ /page\\.[a-zA-Z]+/
 ---
 // src/pages/astronauts/[page].astro
-export async function getStaticPaths({ paginate }) {
-  const astronautPages = [{
-    astronaut: "Neil Armstrong",
-  }, {
-    astronaut: "Buzz Aldrin",
-  }, {
-    astronaut: "Sally Ride",
-  }, {
-    astronaut: "John Glenn",
-  }];
+export function getStaticPaths({ paginate }) {
+  const astronautPages = [
+    {
+      astronaut: "Neil Armstrong",
+    },
+    {
+      astronaut: "Buzz Aldrin",
+    },
+    {
+      astronaut: "Sally Ride",
+    },
+    {
+      astronaut: "John Glenn",
+    },
+  ];
path: src/content/docs/en/guides/routing.mdx
user: login: ArmandPhilippot
body: Maybe each item could be on one line since there is only one property:
```suggestion
  const astronautPages = [
    { astronaut: "Neil Armstrong" },
    { astronaut: "Buzz Aldrin" },
    { astronaut: "Sally Ride" },
    { astronaut: "John Glenn" },
  ];
```
I mean that on desktop (1920x1080) the code snippet takes up almost the entire height of the screen, so if we reduce this space, the need to scroll on mobile will be reduced. But it's just a nit!

created_at: 2025-03-11T10:47:03Z
author_association: MEMBER
diff_hunk: @@ -282,12 +282,16 @@ Astro includes helpers for working with the types returned by your [`getStaticPa
 
 You can get the type of [`Astro.params`](/en/reference/api-reference/#params) with `InferGetStaticParamsType` and the type of [`Astro.props`](/en/reference/api-reference/#props) with `InferGetStaticPropsType`:
 
-```astro title="src/pages/posts/[...id].astro" {2,14-15}
+```astro title="src/pages/posts/[...id].astro" {2-6,18-19}
path: src/content/docs/en/guides/typescript.mdx
user: login: ArmandPhilippot
body: I wonder if we shouldn't also highlight `GetStaticPaths` here:
````suggestion
```astro title="src/pages/posts/[...id].astro" {2-6,18-19} "satisfies GetStaticPaths"
````
This is a bit tricky since the whole function would need to be updated (because of the parentheses) but highlighting only `satisfies GetStaticPaths` might still be a good hint.

I mean most of the time, people don't even need `InferGetStaticParamsType` and `InferGetStaticPropsType` if they use `GetStaticPaths` so I think it shouldn't be the least visible type.
created_at: 2025-03-11T10:48:00Z
author_association: MEMBER
diff_hunk: @@ -282,12 +282,16 @@ Astro includes helpers for working with the types returned by your [`getStaticPa
 
 You can get the type of [`Astro.params`](/en/reference/api-reference/#params) with `InferGetStaticParamsType` and the type of [`Astro.props`](/en/reference/api-reference/#props) with `InferGetStaticPropsType`:
path: src/content/docs/en/guides/typescript.mdx
user: login: ArmandPhilippot
body: For the same reason as the highlighting, perhaps we could update this sentence:
```suggestion
You can get the type of [`Astro.params`](/en/reference/api-reference/#params) with `InferGetStaticParamsType` and the type of [`Astro.props`](/en/reference/api-reference/#props) with `InferGetStaticPropsType` or you can use `GetStaticPaths` to infer both at once:
```
created_at: 2025-03-11T10:48:03Z
author_association: MEMBER
diff_hunk: @@ -427,26 +428,31 @@ Paginated route names should use the same `[bracket]` syntax as a standard dynam
 
 You can use the `paginate()` function to generate these pages for an array of values like so:
 
-```astro /{ (paginate) }/ /paginate\\(.*\\)/ /(?<=const.*)(page)/ /page\\.[a-zA-Z]+/
+```astro /{ (paginate) }/ /paginate\\(.*\\);/ /(?<=const.*)(page)/ /page\\.[a-zA-Z]+/
 ---
 // src/pages/astronauts/[page].astro
-export async function getStaticPaths({ paginate }) {
-  const astronautPages = [{
-    astronaut: "Neil Armstrong",
-  }, {
-    astronaut: "Buzz Aldrin",
-  }, {
-    astronaut: "Sally Ride",
-  }, {
-    astronaut: "John Glenn",
-  }];
+export function getStaticPaths({ paginate }) {
+  const astronautPages = [
+    {
+      astronaut: "Neil Armstrong",
+    },
+    {
+      astronaut: "Buzz Aldrin",
+    },
+    {
+      astronaut: "Sally Ride",
+    },
+    {
+      astronaut: "John Glenn",
+    },
+  ];
path: src/content/docs/en/guides/routing.mdx
user: login: jsparkdev
body: Great idea, thank you.
created_at: 2025-03-11T11:01:28Z
author_association: MEMBER
diff_hunk: @@ -282,12 +282,16 @@ Astro includes helpers for working with the types returned by your [`getStaticPa
 
 You can get the type of [`Astro.params`](/en/reference/api-reference/#params) with `InferGetStaticParamsType` and the type of [`Astro.props`](/en/reference/api-reference/#props) with `InferGetStaticPropsType`:
 
-```astro title="src/pages/posts/[...id].astro" {2,14-15}
+```astro title="src/pages/posts/[...id].astro" {2-6,18-19}
path: src/content/docs/en/guides/typescript.mdx
user: login: jsparkdev
body: Thanks, highlighting the newly added types sounds like a great idea!
created_at: 2025-03-11T11:09:11Z
author_association: MEMBER
diff_hunk: @@ -282,12 +282,16 @@ Astro includes helpers for working with the types returned by your [`getStaticPa
 
 You can get the type of [`Astro.params`](/en/reference/api-reference/#params) with `InferGetStaticParamsType` and the type of [`Astro.props`](/en/reference/api-reference/#props) with `InferGetStaticPropsType`:
path: src/content/docs/en/guides/typescript.mdx
user: login: jsparkdev
body: Thank you. You've added a clearer explanation.
created_at: 2025-03-11T11:11:33Z
author_association: MEMBER
diff_hunk: @@ -49,7 +49,7 @@ The `fetch()` function is also globally available to any [framework components](
 import type { FunctionalComponent } from 'preact';
 
 const data = await fetch('https://example.com/movies.json').then((response) =>
-  response.json()
+  response.json();
path: src/content/docs/en/guides/data-fetching.mdx
user: login: jsparkdev
body: If you update by referencing the changes in this PR, please include the changes in [this PR](https://github.com/withastro/docs/pull/11200/files) as well! Thank you!
created_at: 2025-03-14T01:44:54Z
author_association: MEMBER

PR comments:
user: login: netlify[bot]
created_at: 2025-03-11T09:31:28Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *astro-docs-2* ready!
Built [without sensitive environment variables](https://docs.netlify.com/configure-builds/environment-variables/#sensitive-variable-policy)

|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 4b35c169b58b1e9ff5edc9516f0ae818f7b4e8c1 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/astro-docs-2/deploys/67d01a9a2f47d60008a25407 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-11196--astro-docs-2.netlify.app](https://deploy-preview-11196--astro-docs-2.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTExMTk2LS1hc3Ryby1kb2NzLTIubmV0bGlmeS5hcHAifQ.yX4HQsr94NHp6VU016H3UoZJLto3bYbrLqsMoZy31gI)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [astro-docs-2 Preview](https://deploy-preview-11196--astro-docs-2.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/astro-docs-2/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: astrobot-houston
created_at: 2025-03-11T09:33:06Z
body: 
<!-- lunaria-action-comment -->

## Lunaria Status Overview


🌕 **This pull request will trigger status changes.**

<details>
<summary>Learn more</summary>

By default, every PR changing files present in the [Lunaria configuration's `files` property](https://lunaria.dev/reference/configuration/#files-required) will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the [`ignoreKeywords` property in your Lunaria configuration file](https://lunaria.dev/reference/configuration/#ignorekeywords) in the PR's title (ignoring all files) or by [including a tracker directive](https://lunaria.dev/guides/tracking/#tracker-directives) in the merged commit's description. 
</details>

### Tracked Files




| File                                                                                                                                                                                  | Note                                                       |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| [en/concepts/islands.mdx](https://github.com/withastro/docs/blob/4b35c169b58b1e9ff5edc9516f0ae818f7b4e8c1/src%2Fcontent%2Fdocs%2Fen%2Fconcepts%2Fislands.mdx)                         | Source changed, localizations will be marked as outdated.  |
| [en/guides/configuring-astro.mdx](https://github.com/withastro/docs/blob/4b35c169b58b1e9ff5edc9516f0ae818f7b4e8c1/src%2Fcontent%2Fdocs%2Fen%2Fguides%2Fconfiguring-astro.mdx)         | Source changed, localizations will be marked as outdated.  |
| [en/guides/data-fetching.mdx](https://github.com/withastro/docs/blob/4b35c169b58b1e9ff5edc9516f0ae818f7b4e8c1/src%2Fcontent%2Fdocs%2Fen%2Fguides%2Fdata-fetching.mdx)                 | Source changed, localizations will be marked as outdated.  |
| [en/guides/dev-toolbar.mdx](https://github.com/withastro/docs/blob/4b35c169b58b1e9ff5edc9516f0ae818f7b4e8c1/src%2Fcontent%2Fdocs%2Fen%2Fguides%2Fdev-toolbar.mdx)                     | Source changed, localizations will be marked as outdated.  |
| [en/guides/environment-variables.mdx](https://github.com/withastro/docs/blob/4b35c169b58b1e9ff5edc9516f0ae818f7b4e8c1/src%2Fcontent%2Fdocs%2Fen%2Fguides%2Fenvironment-variables.mdx) | Source changed, localizations will be marked as outdated.  |
| [en/guides/routing.mdx](https://github.com/withastro/docs/blob/4b35c169b58b1e9ff5edc9516f0ae818f7b4e8c1/src%2Fcontent%2Fdocs%2Fen%2Fguides%2Frouting.mdx)                             | Source changed, localizations will be marked as outdated.  |
| [en/guides/typescript.mdx](https://github.com/withastro/docs/blob/4b35c169b58b1e9ff5edc9516f0ae818f7b4e8c1/src%2Fcontent%2Fdocs%2Fen%2Fguides%2Ftypescript.mdx)                       | Source changed, localizations will be marked as outdated.  |
| [en/install-and-setup.mdx](https://github.com/withastro/docs/blob/4b35c169b58b1e9ff5edc9516f0ae818f7b4e8c1/src%2Fcontent%2Fdocs%2Fen%2Finstall-and-setup.mdx)                         | Source changed, localizations will be marked as outdated.  |

<details>
<summary>Warnings reference</summary>

| Icon | Description                                                                                                                                       |
| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| 🔄️  | The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied. |

</details>
author_association: CONTRIBUTOR
user: login: jsparkdev
created_at: 2025-03-11T11:14:24Z
body: @ArmandPhilippot 

Thanks for adding a clearer explanation of types!
author_association: MEMBER