@intlayer/docs 9.3.3 → 9.4.0

package/docs/en-GB/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-06-23
+updatedAt: 2026-08-25
 title: "TanStack Start i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) TanStack Start app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
@@ -20,6 +20,9 @@ applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-templ
 applicationShowcase: https://intlayer-tanstack-start-template.vercel.app
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 9.4.0
+    date: 2026-08-25
+    changes: "Compare static, dynamic and cached dynamic resolution of metadata dictionaries in route head functions"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Update Solid useIntlayer API usage to direct property access"
@@ -81,7 +84,7 @@ Scoping your application's content **facilitates maintenance** for large-scale a
 
 <Accordion header="AI Agent">
 
-Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
+Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
 
 </Accordion>
 
@@ -317,14 +320,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
-> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
-
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
 </Step>
 
 <Step number={6} title="Create Locale Layout">
@@ -516,17 +511,18 @@ export const useLocalizedNavigate = () => {
 
 <Step number={9} title="Utilize Intlayer in Your Pages">
 
+> Use **`useIntlayer`** by default: it is the recommended way to read content inside components, and the compiler resolves it to the locale being rendered. Reach for `getIntlayer` / `getIntlayerAsync` only outside the React tree: route `head`, loaders and server functions.
+
 Access your content dictionaries throughout your application:
 
 #### Localised Home Page
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/react-router";
-import { getIntlayer } from "intlayer";
 import { useIntlayer } from "react-intlayer";
 
 import LocaleSwitcher from "@/components/locale-switcher";
-import { LocalisedLink } from "@/components/localized-link";
+import { LocalizedLink } from "@/components/localized-link";
 import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";
 
 export const Route = createFileRoute("/{-$locale}/")({
@@ -543,8 +539,8 @@ function RouteComponent() {
         {content.title}
         <LocaleSwitcher />
         <div>
-          <LocalisedLink to="/">{content.links.home}</LocalisedLink>
-          <LocalisedLink to="/about">{content.links.about}</LocalisedLink>
+          <LocalizedLink to="/">{content.links.home}</LocalizedLink>
+          <LocalizedLink to="/about">{content.links.about}</LocalizedLink>
         </div>
         <div>
           <button onClick={() => navigate({ to: "/" })}>
@@ -560,11 +556,19 @@ function RouteComponent() {
 }
 ```
 
-> To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useIntlayer.md).
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
+>
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
+> To learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useIntlayer.md).
 
 </Step>
 
-<Step number={10} title="Create a Locale Switcher Component">
+<Step number={9} title="Create a Locale Switcher Component">
 
 Create a component to allow users to change languages:
 
@@ -580,7 +584,7 @@ import {
 import type { FC } from "react";
 import { useLocale } from "react-intlayer";
 
-import { LocalisedLink, type To } from "./localized-link";
+import { LocalizedLink, type To } from "./localized-link";
 
 export const LocaleSwitcher: FC = () => {
   const { pathname } = useLocation();
@@ -593,7 +597,7 @@ export const LocaleSwitcher: FC = () => {
     <ol>
       {availableLocales.map((localeEl) => (
         <li key={localeEl}>
-          <LocalisedLink
+          <LocalizedLink
             aria-current={localeEl === locale ? "page" : undefined}
             onClick={() => setLocale(localeEl)}
             params={{ locale: getPrefix(localeEl).localePrefix }}
@@ -615,7 +619,7 @@ export const LocaleSwitcher: FC = () => {
               {/* Language in English - e.g. French */}
               {getLocaleName(localeEl, Locales.ENGLISH)}
             </span>
-          </LocalisedLink>
+          </LocalizedLink>
         </li>
       ))}
     </ol>
@@ -623,15 +627,17 @@ export const LocaleSwitcher: FC = () => {
 };
 ```
 
-> To Learn more about the `useLocale` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useLocale.md).
+> To learn more about the `useLocale` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useLocale.md).
 
 </Step>
 
-<Step number={11} title="HTML Attributes Management">
+<Step number={10} title="HTML Attributes Management">
 
 As seen in Step 5, you can manage the `lang` and `dir` attributes of the `html` tag using `useParams` in your root component. This ensures that the correct attributes are set on the server and client.
 
 ```tsx fileName="src/routes/__root.tsx"
+const localeRoute = getRouteApi("/{-$locale}");
+
 function RootDocument({ children }: { children: ReactNode }) {
   const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
@@ -648,12 +654,14 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 </Step>
 
-<Step number={12} title="Add middleware">
+<Step number={11} title="Add middleware">
 
 You can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
 
 > Note that to use the `intlayerProxy` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
 
+> Since Intlayer v9, `intlayerProxy()` is bundled directly into the `intlayer()` plugin and enabled by default through the `routing.enableProxy` option (`true` by default). Registering it separately as shown below is now optional: it is kept for backward compatibility and for setups that need to control plugin order. Set `routing.enableProxy: false` to opt out. See the [v9 release notes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/releases/v9.md).
+
 ```typescript fileName="vite.config.ts"
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import viteReact from "@vitejs/plugin-react";
@@ -684,28 +692,91 @@ export default defineConfig({
 
 </Step>
 
-<Step number={13} title="Internationalise your Metadata">
+<Step number={12} title="Internationalise your Metadata">
 
-You can also use the `getIntlayer` hook to access your content dictionaries throughout your application:
+<Tabs>
+
+<Tab label="Static resolution" value="static">
+
+`getIntlayer` resolves synchronously against the **merged** dictionary, the one holding every declared locale. `head` stays synchronous and nothing is awaited, but the whole multilingual dictionary is pulled into the route chunk sent to the browser.
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/react-router";
-import { getIntlayer } from "intlayer";
+import {
+  defaultLocale,
+  getIntlayer,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
 
 export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
   head: ({ params }) => {
-    const { locale } = params;
+    const { locale = defaultLocale } = params;
     const path = "/"; // The path for this route
 
     const metaContent = getIntlayer("app", locale);
 
     return {
       links: [
-        // Canonical link: Points to the current localized page
+        // Canonical link: Points to the current localised page
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: Tell Google about all localised versions
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: For users in unmatched languages
+        // Define the default fallback locale (usually your primary language)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: metaContent.title },
+        { name: "description", content: metaContent.meta.description },
+      ],
+    };
+  },
+});
+```
+
+Best for small metadata dictionaries, a handful of locales, or while prototyping.
+
+</Tab>
+
+<Tab label="Dynamic resolution" value="dynamic">
+
+`getIntlayerAsync` (available from **v9.4**) behaves like `getIntlayer`, but the build plugin points it at the per-locale chunk in `.intlayer/dynamic_dictionaries/` instead of the merged dictionary. A page therefore ships only the locale it renders. Because that chunk is loaded on demand, `head` becomes `async`:
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  head: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // The path for this route
+
+    const metaContent = await getIntlayerAsync("app", locale);
+
+    return {
+      links: [
+        // Canonical link: Points to the current localised page
         { rel: "canonical", href: getLocalizedUrl(path, locale) },
 
-        // Hreflang: Tell Google about all localized versions
+        // Hreflang: Tell Google about all localised versions
         ...localeMap(({ locale: mapLocale }) => ({
           rel: "alternate",
           hrefLang: mapLocale,
@@ -729,11 +800,94 @@ export const Route = createFileRoute("/{-$locale}/")({
 });
 ```
 
+> If a `head` reads several dictionaries, resolve them with `Promise.all`: awaiting each `getIntlayerAsync` on its own line chains the requests instead of running them in parallel.
+
+The trade-off: the dynamic import is resolved whilst `head` runs, on the critical path of the document render. On a cold route this delays the head by a few milliseconds and can slightly degrade **LCP**.
+
+</Tab>
+
+<Tab label="Cached dynamic resolution" value="cached">
+
+Resolve the dictionary in the route `loader` and read it back from `loaderData` in `head`. Loaders of the matched routes run in parallel, and `staleTime: Infinity` tells TanStack Router the result never goes stale, so the per-locale chunk is resolved once and served from the router cache afterwards, leaving `head` synchronous.
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  // Resolved in parallel with the other matched routes, off the head critical path
+  loader: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+
+    return { metaContent: await getIntlayerAsync("app", locale) };
+  },
+  // The dictionary never changes for a given locale: resolve the chunk once
+  staleTime: Infinity,
+  head: ({ params, loaderData }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // The path for this route
+
+    return {
+      links: [
+        // Canonical link: Points to the current localised page
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: Tell Google about all localised versions
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: For users in unmatched languages
+        // Define the default fallback locale (usually your primary language)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: loaderData?.metaContent.title },
+        {
+          name: "description",
+          content: loaderData?.metaContent.meta.description,
+        },
+      ],
+    };
+  },
+});
+```
+
+> `head` can be called before the loader settles, so `loaderData` is typed as possibly `undefined`. Keep the optional chaining, or return a fallback title.
+
+You keep the per-locale chunk without paying its cost on the head critical path. The price is developer experience: the content has to be threaded explicitly from the loader to the `head` through `loaderData`.
+
+</Tab>
+
+</Tabs>
+
+### Which resolution should I pick?
+
+|                      | Static resolution     | Dynamic resolution         | Cached dynamic resolution              |
+| -------------------- | --------------------- | -------------------------- | -------------------------------------- |
+| API                  | `getIntlayer`         | `getIntlayerAsync` (v9.4+) | `getIntlayerAsync` in `loader` (v9.4+) |
+| `head` signature     | synchronous           | `async`                    | synchronous, reads `loaderData`        |
+| Locales shipped      | every declared locale | requested locale only      | requested locale only                  |
+| Client navigations   | nothing to resolve    | re-entered on every match  | served from the router cache           |
+| Developer experience | simplest              | one `await`                | content threaded through `loaderData`  |
+
 ---
 
 </Step>
 
-<Step number={14} title="Retrieve the locale in your server actions">
+<Step number={13} title="Retrieve the locale in your server actions">
 
 You may want to access the current locale from inside your server actions or API endpoints.
 You can do this using the `getLocale` helper from `intlayer`.
@@ -761,7 +915,7 @@ export const getLocaleServer = createServerFn().handler(async () => {
     getHeader: (name) => getRequestHeader(name),
   });
 
-  // Retrieve some content using getIntlayer()
+  // Retrieve some content using getIntlayerAsync()
   const content = getIntlayer("app", locale);
 
   return { locale, content };
@@ -772,6 +926,132 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 </Step>
 
+<Step number={14} title="Manage not found pages">
+
+When a user visits a non-existing page, you can display a custom not found page and the locale prefix may impact the way the not found page is triggered.
+
+#### Localised Home Page
+
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
+>
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
+> To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useIntlayer.md).
+
+</Step>
+
+```tsx fileName="src/components/locale-switcher.tsx"
+import { useLocation } from "@tanstack/react-router";
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getPathWithoutLocale,
+  getPrefix,
+  Locales,
+} from "intlayer";
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+import { LocalisedLink, type To } from "./localized-link";
+
+export const LocaleSwitcher: FC = () => {
+  const { pathname } = useLocation();
+
+  const { availableLocales, locale, setLocale } = useLocale();
+
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
+
+  return (
+    <ol>
+      {availableLocales.map((localeEl) => (
+        <li key={localeEl}>
+          <LocalisedLink
+            aria-current={localeEl === locale ? "page" : undefined}
+            onClick={() => setLocale(localeEl)}
+            params={{ locale: getPrefix(localeEl).localePrefix }}
+            to={pathWithoutLocale as To}
+          >
+            <span>
+              {/* Locale - e.g. FR */}
+              {localeEl}
+            </span>
+            <span>
+              {/* Language in its own Locale - e.g. Français */}
+              {getLocaleName(localeEl, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
+              {/* Language in current Locale - e.g. Francés with current locale set to Locales.SPANISH */}
+              {getLocaleName(localeEl)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Language in English - e.g. French */}
+              {getLocaleName(localeEl, Locales.ENGLISH)}
+            </span>
+          </LocalisedLink>
+        </li>
+      ))}
+    </ol>
+  );
+};
+```
+
+> To Learn more about the `useLocale` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useLocale.md).
+
+</Step>
+
+<Step number={11} title="HTML Attributes Management">
+
+return (
+<html dir={getHTMLTextDir(locale)} lang={locale}>
+{/* ... _/}
+</html>
+);
+} {/_ ... */}
+</html>
+);
+}
+
+export const Route = createFileRoute("/{-$locale}/")({
+component: RouteComponent,
+head: async ({ params }) => {
+const { locale = defaultLocale } = params;
+const path = "/"; // The path for this route
+
+    const metaContent = await getIntlayerAsync("app", locale);
+
+````
+
+> If a `head` reads several dictionaries, resolve them with `Promise.all`: awaiting each `getIntlayerAsync` on its own line chains the requests instead of running them in parallel.
+
+The trade-off: the dynamic import is resolved while `head` runs, on the critical path of the document render. On a cold route this delays the head by a few milliseconds and can slightly degrade **LCP**.
+
+</Tab>
+
+<Tab label="Cached dynamic resolution" value="cached">
+
+Resolve the dictionary in the route `loader` and read it back from `loaderData` in `head`. Loaders of the matched routes run in parallel, and `staleTime: Infinity` tells TanStack Router the result never goes stale, so the per-locale chunk is resolved once and served from the router cache afterwards, leaving `head` synchronous.
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+      return getCookie(name, cookieString);
+    },
+    // Get the header from the request (default: 'x-intlayer-locale')
+    // Fallback using Accept-Language negotiation
+    getHeader: (name) => getRequestHeader(name),
+  });
+
+  // Retrieve some content using getIntlayer()
+  const content = getIntlayer("app", locale);
+
+````
+
+---
+
+</Step>
+
 <Step number={15} title="Manage not found pages">
 
 When a user visits a non-existing page, you can display a custom not found page and the locale prefix may impact the way the not found page is triggered.
@@ -785,80 +1065,79 @@ In TanStack Router, handling 404 pages with localised routes requires a multi-la
 3. **Catch-all route**: Captures any unmatched paths within the locale segment
 
 ```tsx fileName="src/routes/{-$locale}/404.tsx"
-import { createFileRoute } from "@tanstack/react-router";
 
-// This creates a dedicated /[locale]/404 route
-// It's used both as a direct route and imported as a component in other files
-export const Route = createFileRoute("/{-$locale}/404")({
-  component: NotFoundComponent,
-});
-
-// Exported separately so it can be reused in notFoundComponent and catch-all routes
-export function NotFoundComponent() {
-  return (
-    <div>
-      <h1>404</h1>
-    </div>
-  );
-}
 ```
 
 ```tsx fileName="src/routes/{-$locale}/route.tsx"
-import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
-import { validatePrefix } from "intlayer";
-import { NotFoundComponent } from "./404";
 
-export const Route = createFileRoute("/{-$locale}")({
-  // beforeLoad runs before the route renders (on both server and client)
-  // It's the ideal place to validate the locale prefix
-  beforeLoad: ({ params }) => {
-    const localeParam = params.locale;
+```
 
-    // validatePrefix checks if the locale is valid according to your intlayer config
-    const { isValid, localePrefix } = validatePrefix(localeParam);
+```tsx fileName="src/routes/{-$locale}/$.tsx"
 
-    if (!isValid) {
-      // Invalid locale prefix - redirect to the 404 page with a valid locale prefix
-      throw redirect({
-        to: "/{-$locale}/404",
-        params: { locale: localePrefix },
-      });
-    }
+```
+
+</Step>
+
+<Step number={15} title="Extract the content of your components" isOptional={true}>
+
+If you have an existing codebase, transforming thousands of files can be time-consuming.
+
+To ease this process, Intlayer proposes a [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/extract.md) to transform your components and extract the content.
+
+To set it up, you can add a `compiler` section in your `intlayer.config.ts` file:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { type IntlayerConfig } from "intlayer";
+
+    /**
+     * Defines the output files path
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Dictionary key prefix
+     */
+    dictionaryKeyPrefix: "",
   },
-  component: Outlet,
-  // notFoundComponent is called when a child route doesn't exist
-  // e.g., /en/non-existent-page triggers this within the /en layout
-  notFoundComponent: NotFoundComponent,
-});
+};
+
+export default config;
 ```
 
-```tsx fileName="src/routes/{-$locale}/$.tsx"
-import { createFileRoute } from "@tanstack/react-router";
+<Tabs>
+ <Tab value='Extract command'>
 
-import { NotFoundComponent } from "./404";
+Run the extractor to transform your components and extract the content
+
+```bash packageManager="npm"
 
-// The $ (splat/catch-all) route matches any path that doesn't match other routes
-// e.g., /en/some/deeply/nested/invalid/path
-// This ensures ALL unmatched paths within a locale show the 404 page
-// Without this, unmatched deep paths might show a blank page or error
-export const Route = createFileRoute("/{-$locale}/$")({
-  component: NotFoundComponent,
-});
 ```
 
----
+```bash packageManager="pnpm"
 
-</Step>
+```
 
-<Step number={16} title="Generate Sitemap">
+```bash packageManager="yarn"
 
-Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
+```
 
-To use it, you first need to configure your `vite.config.ts` to enable pre-rendering for your localized routes and disable the default TanStack Start sitemap generation.
+```bash packageManager="bun"
 
-```typescript fileName="vite.config.ts"
-import { localeFlatMap } from "intlayer";
-// ... other imports
+</Tab>
+</Tabs>
+
+---
+
+I'm ready to help audit the translation. However, I notice that:
+
+1. **BLOCK 2 of 3** (the English reference) appears to be empty
+2. **BLOCK 2 of 3** (the current en-GB content to review) also appears to be empty
+
+Could you please provide:
+- The English (en) source content that I should use as reference
+- The British English (en-GB) content that needs to be audited
+
+Once you share the actual content blocks, I'll perform the audit and return the corrected, fully updated file in British English (en-GB).---
 
 export const pathList = ["", "/about", "/404"];
 
@@ -892,13 +1171,24 @@ export default defineConfig({
 
 Then, create a `src/routes/sitemap[.]xml.ts` route that uses the `generateSitemap` function:
 
-```typescript fileName="src/routes/sitemap[.]xml.ts"
-import { createFileRoute } from "@tanstack/react-router";
-import { generateSitemap } from "intlayer";
+````typescript fileName="src/routes/sitemap[.]xml.ts"
+
+---
+
+I have received:
+- **BLOCK 1 of 2** (English reference): `</Step>`
+- **BLOCK 1 of 2** (Current en-GB to review): empty
+
+<Step number={17} title="Configure TypeScript">
+
+I'm ready to audit and update the translation to British English (en-GB). However, I notice that the blocks appear to be empty in your message.
 
-const SITE_URL = (
-  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
-).replace(/\/$/, "");
+Please provide:
+
+1. **BLOCK 3 of 3** - The English (en) source content that serves as the reference
+2. **Current content in British English (en-GB)** - The translation that needs to be audited and updated
+
+I'm waiting for the content blocks to proceed with the audit.---
 
 export const Route = createFileRoute("/sitemap.xml")({
   server: {
@@ -919,19 +1209,6 @@ export const Route = createFileRoute("/sitemap.xml")({
     },
   },
 });
-```
-
----
-
-</Step>
-
-<Step number={17} title="Configure TypeScript">
-
-Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
-
-Ensure your TypeScript configuration includes the autogenerated types:
-
-```json5 fileName="tsconfig.json"
 {
   // ... your existing configurations
   include: [
@@ -939,13 +1216,6 @@ Ensure your TypeScript configuration includes the autogenerated types:
     ".intlayer/**/*.ts", // Include the auto-generated types
   ],
 }
-```
-
----
-
-</Step>
-
-</Steps>
 
 ### Git Configuration
 
@@ -956,7 +1226,7 @@ To do this, you can add the following instructions to your `.gitignore` file:
 ```plaintext fileName=".gitignore"
 # Ignore the files generated by Intlayer
 .intlayer
-```
+````
 
 ---