@intlayer/docs 9.5.4 → 9.5.5

package/docs/en-GB/packages/astro-intlayer/intlayer.md

@@ -0,0 +1,76 @@
+---
+createdAt: 2026-01-21
+updatedAt: 2026-09-19
+title: intlayer Integration Documentation | astro-intlayer
+description: See how to configure and use the intlayer Astro integration in astro.config.mjs.
+keywords:
+  - intlayer
+  - astro
+  - astro-intlayer
+  - integration
+  - i18n
+  - Internationalisation
+  - Documentation
+slugs:
+  - doc
+  - packages
+  - astro-intlayer
+  - intlayer
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Update integration documentation with middleware and hooks details"
+  - version: 8.0.0
+    date: 2026-01-21
+    changes: "Init doc"
+author: aymericzip
+---
+
+# intlayer Astro Integration Documentation
+
+The `intlayer` integration for Astro configures your project for multilingual internationalisation (i18n). It handles build-time dictionary preparation, Vite plugin injection, automatic request middleware registration, and emitting localised prerendered pages.
+
+## Usage
+
+Add `intlayer()` to your `astro.config.mjs`:
+
+```ts fileName="astro.config.mjs"
+import { defineConfig } from "astro/config";
+import { intlayer } from "astro-intlayer";
+
+export default defineConfig({
+  integrations: [intlayer()],
+});
+```
+
+Astro CLI's codemod (`astro add astro-intlayer`) also generates a default import which is supported:
+
+```ts
+import intlayer from "astro-intlayer";
+```
+
+## Description
+
+The integration hooks into Astro's build and runtime lifecycle:
+
+1. **Config Setup (`astro:config:setup`)**:
+   - **Dictionary Preparation**: Prepares Intlayer dictionaries and generated types before the build runs.
+   - **Vite Plugins**: Injects plugins for Vite aliases (enabling seamless dictionary imports), locale routing proxies, and build pruning.
+   - **Middleware Registration**: Automatically injects `astro-intlayer/middleware` into your project's middleware chain, populating `Astro.locals.intlayer` on every incoming request.
+2. **Build Done (`astro:build:done`)**:
+   - **Page Rewrites**: Inspects localised URL rewrite rules and emits prerendered HTML pages at their corresponding localised paths.
+
+## What is Provided Out of the Box
+
+Once configured, your Astro application can immediately use:
+
+- The `useIntlayer`, `useDictionary`, and `useLocale` hooks inside `.astro` component frontmatter.
+- The `Astro.locals.intlayer` object in Astro endpoints and pages.
+- Client-side imports in `<script>` blocks that mirror the same API with reactive updates.
+- Built-in formatters under `astro-intlayer/format` (`useDate`, `useNumber`, `useCurrency`, etc.).
+
+## Related Documentation
+
+- [`useIntlayer` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useIntlayer.md)
+- [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useLocale.md)
+- [`onRequest` Middleware](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/onRequest.md)

package/docs/en-GB/packages/astro-intlayer/onRequest.md

@@ -0,0 +1,76 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: onRequest Middleware Documentation | astro-intlayer
+description: See how to use the onRequest middleware in Astro applications to resolve the request locale and populate Astro.locals.intlayer.
+keywords:
+  - onRequest
+  - middleware
+  - astro
+  - astro-intlayer
+  - Astro.locals
+  - Internationalisation
+  - Documentation
+slugs:
+  - doc
+  - packages
+  - astro-intlayer
+  - onRequest
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Init doc"
+author: aymericzip
+---
+
+# onRequest Astro Middleware Documentation
+
+The `onRequest` middleware from `astro-intlayer/middleware` resolves the locale of each incoming HTTP request and populates `Astro.locals.intlayer`.
+
+When you register the `intlayer()` integration in `astro.config.mjs`, this middleware is injected automatically. You only need to import it directly if you are manually composing Astro middleware using `sequence(...)`.
+
+## Usage
+
+```ts fileName="src/middleware.ts"
+import { onRequest as intlayer } from "astro-intlayer/middleware";
+import { sequence } from "astro:middleware";
+
+export const onRequest = sequence(intlayer, async (context, next) => {
+  // Access the resolved locale in your custom middleware
+  const { locale } = context.locals.intlayer;
+  console.log(`Handling request for locale: ${locale}`);
+
+  return next();
+});
+```
+
+## Description
+
+The middleware performs the following:
+
+1. **Locale Detection**:
+   - **URL**: Analyses the URL path prefix or `?locale=` search parameter (unless `routing.mode` is set to `no-prefix`).
+   - **Cookies / Headers**: Checks persisted locale cookies or custom header values.
+   - **Accept-Language**: Falls back to the browser's preferred language negotiation.
+   - For prerendered pages (`context.isPrerendered`), the locale is extracted strictly from the URL to prevent Astro build warnings.
+2. **Context Population**: Populates `Astro.locals.intlayer` with:
+   - `locale`: The resolved locale.
+   - `defaultLocale`: The default fallback locale.
+   - `availableLocales`: The array of configured locales.
+3. **AsyncLocalStorage Scope**: Wraps the downstream request processing inside an `AsyncLocalStorage` scope, allowing `useIntlayer()`, `useDictionary()`, and `useLocale()` to access request state without passing arguments.
+
+## `IntlayerLocals` Type
+
+```ts
+export type IntlayerLocals = {
+  locale: DeclaredLocales;
+  defaultLocale: DeclaredLocales;
+  availableLocales: DeclaredLocales[];
+};
+```
+
+## Related Documentation
+
+- [`intlayer` Integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/intlayer.md)
+- [`useIntlayer` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useIntlayer.md)
+- [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useLocale.md)

package/docs/en-GB/packages/astro-intlayer/useDictionary.md

@@ -0,0 +1,95 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: useDictionary Hook Documentation | astro-intlayer
+description: See how to use the useDictionary hook in Astro components and scripts to resolve dictionary objects.
+keywords:
+  - useDictionary
+  - dictionary
+  - astro
+  - astro-intlayer
+  - Intlayer
+  - intlayer
+  - Internationalisation
+  - Documentation
+slugs:
+  - doc
+  - packages
+  - astro-intlayer
+  - useDictionary
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Init doc"
+author: aymericzip
+---
+
+# useDictionary Hook Documentation
+
+The `useDictionary` hook resolves an imported or inline dictionary object and returns its content for the current locale in Astro applications.
+
+Unlike `useIntlayer`, which retrieves dictionaries by key from the global dictionary registry, `useDictionary` works directly with a dictionary object.
+
+## Usage
+
+```astro fileName="src/pages/index.astro"
+---
+import { useDictionary } from "astro-intlayer";
+import homeContent from "../content/home.content";
+
+const content = useDictionary(homeContent);
+---
+
+<main>
+  <h1>{content.title}</h1>
+  <p>{content.description}</p>
+</main>
+```
+
+You can also pass inline dictionaries defined with `t()`:
+
+```astro fileName="src/components/Footer.astro"
+---
+import { useDictionary } from "astro-intlayer";
+import { t } from "intlayer";
+
+const footer = useDictionary({
+  key: "footer",
+  content: {
+    copyright: t({
+      "en-GB": "All rights reserved.",
+      en: "All rights reserved.",
+      fr: "Tous droits réservés.",
+      es: "Todos los derechos reservados.",
+    }),
+  },
+});
+---
+
+<footer>
+  <p>{footer.copyright}</p>
+</footer>
+```
+
+## Parameters
+
+```ts
+useDictionary(dictionary, localeOrSelector?)
+```
+
+1. **`dictionary`**: A dictionary object or qualified dictionary group.
+2. **`localeOrSelector`** (optional): A specific locale or selector object (`{ item }`, `{ variant }`, optionally with `locale`).
+
+## Description
+
+The hook performs the following tasks:
+
+1. **Locale Detection**: On the server, it obtains the locale from `Astro.locals.intlayer`. In the browser, it uses the client-side store locale.
+2. **Content Processing**: Resolves translations (`t()`), enumerations, conditions, and nested structures according to the resolved locale.
+3. **Selectors**: Applies any item or variant selectors provided in the arguments.
+
+## Related Documentation
+
+- [`intlayer` Integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/intlayer.md)
+- [`useIntlayer` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useIntlayer.md)
+- [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useLocale.md)

package/docs/en-GB/packages/astro-intlayer/useIntlayer.md

@@ -0,0 +1,98 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: useIntlayer Hook Documentation | astro-intlayer
+description: See how to use the useIntlayer hook in Astro components and client scripts to access localised content.
+keywords:
+  - useIntlayer
+  - dictionary
+  - astro
+  - astro-intlayer
+  - Intlayer
+  - intlayer
+  - Internationalisation
+  - Documentation
+slugs:
+  - doc
+  - packages
+  - astro-intlayer
+  - useIntlayer
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Init doc"
+author: aymericzip
+---
+
+# useIntlayer Hook Documentation
+
+The `useIntlayer` hook allows you to retrieve localised dictionary content by key in Astro applications.
+
+It can be called in two distinct contexts using the same import path:
+
+1. **Server / Frontmatter**: Inside `.astro` files, it automatically resolves content using the request locale stored in `Astro.locals.intlayer`.
+2. **Browser / Client `<script>`**: Inside client scripts or UI framework components, it resolves to the client-side store implementation (`vanilla-intlayer`).
+
+## Usage
+
+### In Astro Component Frontmatter
+
+```astro fileName="src/pages/index.astro"
+---
+import { useIntlayer } from "astro-intlayer";
+
+const content = useIntlayer("home");
+---
+
+<main>
+  <h1>{content.title}</h1>
+  <p>{content.description}</p>
+</main>
+```
+
+### In Client `<script>` Blocks
+
+```astro fileName="src/components/InteractiveWidget.astro"
+---
+import { useIntlayer } from "astro-intlayer";
+
+const content = useIntlayer("home");
+---
+
+<button id="alert-btn">{content.buttonText}</button>
+
+<script>
+  import { useIntlayer } from "astro-intlayer";
+
+  const content = useIntlayer("home");
+
+  document.getElementById("alert-btn")?.addEventListener("click", () => {
+    alert(content.buttonText);
+  });
+</script>
+```
+
+## Parameters
+
+```ts
+useIntlayer(key, localeOrSelector?)
+```
+
+1. **`key`**: The unique key of the dictionary (as defined in your `.content.ts` declaration files).
+2. **`localeOrSelector`** (optional): A specific locale or selector object (`{ item }`, `{ variant }`, optionally with `locale`). When provided, it overrides the locale detected from the request context or client store.
+
+## Description
+
+The hook performs the following tasks:
+
+1. **Locale Resolution**:
+   - On the server, reads the active locale from `Astro.locals.intlayer` via an `AsyncLocalStorage` scope initialised by the `astro-intlayer/middleware`.
+   - In the browser, reads the active locale from the client storage/store.
+2. **Dictionary Retrieval**: Injects the dictionary content matching the specified key.
+3. **Translation Processing**: Resolves translations (`t()`), enumerations, conditions, and markdown into ready-to-render content.
+
+## Related Documentation
+
+- [`intlayer` Integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/intlayer.md)
+- [`useDictionary` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useDictionary.md)
+- [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useLocale.md)

package/docs/en-GB/packages/astro-intlayer/useLocale.md

@@ -0,0 +1,126 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: useLocale Hook Documentation | astro-intlayer
+description: See how to use the useLocale hook in Astro applications to access and manage the current locale.
+keywords:
+  - useLocale
+  - locale
+  - astro
+  - astro-intlayer
+  - Intlayer
+  - intlayer
+  - Internationalisation
+  - Documentation
+slugs:
+  - doc
+  - packages
+  - astro-intlayer
+  - useLocale
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Init doc"
+author: aymericzip
+---
+
+# useLocale Hook Documentation
+
+The `useLocale` hook from `astro-intlayer` provides access to the current request locale, the configured default locale, and all available locales in Astro applications.
+
+It behaves consistently across server-rendered `.astro` frontmatter and client-side `<script>` blocks.
+
+## Usage
+
+### In Component Frontmatter (Server-Rendered)
+
+```astro fileName="src/layouts/Layout.astro"
+---
+import { useLocale } from "astro-intlayer";
+import { getLocalizedUrl, getPathWithoutLocale } from "intlayer";
+
+const { locale, defaultLocale, availableLocales } = useLocale();
+const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
+---
+
+<!DOCTYPE html>
+<html lang={locale}>
+  <head>
+    <meta charset="utf-8" />
+    <title>Astro + Intlayer</title>
+  </head>
+  <body>
+    <header>
+      <span>Current: {locale}</span>
+      <span>Default: {defaultLocale}</span>
+      <nav>
+        <ul>
+          {availableLocales.map((localeItem) => (
+            <li key={localeItem} className="p-1">
+              <a
+                href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+                aria-current={localeItem === locale ? "page" : undefined}
+              >
+                {localeItem.toUpperCase()}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </header>
+    <slot />
+  </body>
+</html>
+```
+
+### In Client `<script>` (Interactive)
+
+```astro fileName="src/components/LocaleSwitcher.astro"
+---
+import { useLocale } from "astro-intlayer";
+
+const { locale, availableLocales } = useLocale();
+---
+
+<select id="locale-select">
+  {availableLocales.map((loc) => (
+    <option value={loc} selected={loc === locale}>
+      {loc.toUpperCase()}
+    </option>
+  ))}
+</select>
+
+<script>
+  import { useLocale, setLocaleInStorage } from "astro-intlayer";
+
+  const { setLocale } = useLocale();
+
+  document.getElementById("locale-select")?.addEventListener("change", (e) => {
+    const target = e.target as HTMLSelectElement;
+    setLocale(target.value);
+  });
+</script>
+```
+
+## Return Values
+
+The hook returns an object of type `UseLocaleResult`:
+
+| Property           | Type                                   | Description                                                                          |
+| ------------------ | -------------------------------------- | ------------------------------------------------------------------------------------ |
+| `locale`           | `DeclaredLocales`                      | The active locale.                                                                   |
+| `defaultLocale`    | `DeclaredLocales`                      | The default fallback locale configured in `intlayer.config.ts`.                      |
+| `availableLocales` | `DeclaredLocales[]`                    | Array of all supported locales configured for the project.                           |
+| `setLocale`        | `(locale: LocalesValues) => void`      | Function to update the locale. (Interactive in client `<script>`, warns during SSR). |
+| `subscribe`        | `(callback: () => void) => () => void` | Subscribes to client-side locale changes.                                            |
+
+## Server vs Client Behaviour
+
+- **During SSR / Server Rendering**: A request is rendered once with fixed parameters. Calling `setLocale()` during a server render has no effect and emits a warning; locale switching should be performed on the client or by navigating to the target locale URL.
+- **In Client Scripts**: `setLocale` updates the client store and updates persisted cookies or local storage according to your Intlayer configuration.
+
+## Related Documentation
+
+- [`intlayer` Integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/intlayer.md)
+- [`useIntlayer` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useIntlayer.md)
+- [`useDictionary` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/astro-intlayer/useDictionary.md)

package/docs/en-GB/packages/remix-intlayer/Intlayer.md

@@ -0,0 +1,77 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: Intlayer Context Documentation | remix-intlayer
+description: See how to use the Intlayer request context key and property in Remix 3 applications.
+keywords:
+  - Intlayer
+  - remix
+  - remix-3
+  - context
+  - RequestContext
+  - Internationalisation
+  - Documentation
+slugs:
+  - doc
+  - packages
+  - remix-intlayer
+  - Intlayer
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Init doc"
+author: aymericzip
+---
+
+# Intlayer Context Documentation
+
+In `remix-intlayer`, `Intlayer` is the `RequestContext` key used to access internationalisation state within Remix 3 request handlers.
+
+## Usage
+
+When the `intlayer()` middleware runs, it stores an `IntlayerState` object in the request context under the `Intlayer` key. You can retrieve it inside any route handler:
+
+```ts fileName="src/server.ts"
+import { createRouter } from "remix/router";
+import { intlayer, Intlayer } from "remix-intlayer";
+
+const router = createRouter({
+  middleware: [intlayer()],
+});
+
+router.get("/api/profile", (context) => {
+  // Access via context.get(Intlayer)
+  const { locale, defaultLocale, availableLocales } = context.get(Intlayer);
+
+  return Response.json({
+    locale,
+    defaultLocale,
+    availableLocales,
+  });
+});
+```
+
+You can also access it using the direct property shorthand `context.intlayer`:
+
+```ts
+router.get("/api/status", (context) => {
+  const currentLocale = context.intlayer.locale;
+  return Response.json({ status: "ok", locale: currentLocale });
+});
+```
+
+## `IntlayerState` Structure
+
+The `IntlayerState` object contains:
+
+| Property           | Type                | Description                                                   |
+| ------------------ | ------------------- | ------------------------------------------------------------- |
+| `locale`           | `DeclaredLocales`   | The locale resolved for the current request.                  |
+| `defaultLocale`    | `DeclaredLocales`   | The fallback locale defined in `intlayer.config.ts`.          |
+| `availableLocales` | `DeclaredLocales[]` | The list of all supported locales configured for the project. |
+
+## Related Documentation
+
+- [`intlayer` Middleware](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/remix-intlayer/intlayerMiddleware.md)
+- [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/remix-intlayer/useLocale.md)
+- [`useIntlayer` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/remix-intlayer/useIntlayer.md)