@intlayer/docs 5.7.6 → 5.7.8

package/docs/en/intlayer_with_tanstack.md

@@ -0,0 +1,452 @@
+---
+createdAt: 2025-08-11
+updatedAt: 2025-08-11
+title: Getting Started with Intlayer in TanStack Start (React)
+description: Add i18n to your TanStack Start app using Intlayer—component-level dictionaries, localized URLs, and SEO-friendly metadata.
+keywords:
+  - Internationalization
+  - Documentation
+  - Intlayer
+  - TanStack Start
+  - TanStack Router
+  - React
+  - i18n
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - tanstack-start
+---
+
+# Getting Started Internationalizing (i18n) with Intlayer and TanStack Start (React)
+
+## What is Intlayer?
+
+**Intlayer** is an open-source i18n toolkit for React apps. It gives you:
+
+- **Component-local dictionaries** with TypeScript safety.
+- **Dynamic metadata & routes** (SEO-ready).
+- **Runtime locale switching** (and helpers to detect/persist locales).
+- **Vite plugin** for build-time transforms + dev DX.
+
+This guide shows how to wire Intlayer into a **TanStack Start** project (which uses Vite under the hood and TanStack Router for routing/SSR).
+
+---
+
+## Step 1: Install Dependencies
+
+```bash
+# npm
+npm i intlayer react-intlayer
+npm i -D vite-intlayer
+
+# pnpm
+pnpm add intlayer react-intlayer
+pnpm add -D vite-intlayer
+
+# yarn
+yarn add intlayer react-intlayer
+yarn add -D vite-intlayer
+```
+
+- **intlayer**: core (config, dictionaries, CLI/transforms).
+- **react-intlayer**: `<IntlayerProvider>` + hooks for React.
+- **vite-intlayer**: Vite plugin, plus optional middleware for locale detection/redirects (works in dev & SSR/preview; move to `dependencies` for production SSR).
+
+---
+
+## Step 2: Configure Intlayer
+
+Create `intlayer.config.ts` at your project root:
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  // You can also tweak: contentDir, contentFileExtensions, middleware options, etc.
+};
+
+export default config;
+```
+
+CommonJS/ESM variants are identical to your original doc if you prefer `cjs`/`mjs`.
+
+> Full config reference: see Intlayer’s configuration docs.
+
+---
+
+## Step 3: Add the Vite Plugin (and optional middleware)
+
+**TanStack Start uses Vite**, so add Intlayer’s plugin(s) to your `vite.config.ts`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    intlayerPlugin(),
+    // Optional but recommended for locale detection, cookies & redirects:
+    intLayerMiddlewarePlugin(),
+  ],
+});
+```
+
+> If you deploy SSR, move `vite-intlayer` to `dependencies` so the middleware runs in production.
+
+---
+
+## Step 4: Declare Your Content
+
+Place your dictionaries anywhere under `./src` (default `contentDir`). Example:
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    viteLogo: t({ en: "Vite logo", fr: "Logo Vite", es: "Logo Vite" }),
+    reactLogo: t({ en: "React logo", fr: "Logo React", es: "Logo React" }),
+    title: t({
+      en: "TanStack Start + React",
+      fr: "TanStack Start + React",
+      es: "TanStack Start + React",
+    }),
+    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
+    edit: t<ReactNode>({
+      en: (
+        <>
+          Edit <code>src/routes/index.tsx</code> and save to test HMR
+        </>
+      ),
+      fr: (
+        <>
+          Éditez <code>src/routes/index.tsx</code> et enregistrez pour tester
+          HMR
+        </>
+      ),
+      es: (
+        <>
+          Edita <code>src/routes/index.tsx</code> y guarda para probar HMR
+        </>
+      ),
+    }),
+    readTheDocs: t({
+      en: "Click the logos to learn more",
+      fr: "Cliquez sur les logos pour en savoir plus",
+      es: "Haz clic en los logotipos para saber más",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+JSON/ESM/CJS variants work the same as in your original doc.
+
+> TSX content? Don’t forget `import React from "react"` if your setup needs it.
+
+---
+
+## Step 5: Wrap TanStack Start with Intlayer
+
+With TanStack Start, your **root route** is the right place to set providers.
+
+```tsx fileName="src/routes/__root.tsx"
+import {
+  Outlet,
+  createRootRoute,
+  Link as RouterLink,
+} from "@tanstack/react-router";
+import { IntlayerProvider, useIntlayer } from "react-intlayer";
+
+function AppShell() {
+  // Example of using a dictionary at the top level:
+  const content = useIntlayer("app");
+
+  return (
+    <div>
+      <nav className="flex gap-3 p-3">
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
+      </nav>
+      <main className="p-6">
+        <h1>{content.title}</h1>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <IntlayerProvider>
+      <AppShell />
+    </IntlayerProvider>
+  ),
+});
+```
+
+Then use your content in pages:
+
+```tsx fileName="src/routes/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import { useIntlayer } from "react-intlayer";
+import reactLogo from "../assets/react.svg";
+
+export const Route = createFileRoute("/")({
+  component: () => {
+    const content = useIntlayer("app");
+    return (
+      <>
+        <button>{content.count}0</button>
+        <p>{content.edit}</p>
+        <img
+          src={reactLogo}
+          alt={content.reactLogo.value}
+          width={48}
+          height={48}
+        />
+        <p className="opacity-70">{content.readTheDocs}</p>
+      </>
+    );
+  },
+});
+```
+
+> String attributes (`alt`, `title`, `aria-label`, …) need `.value`:
+>
+> ```jsx
+> <img alt={c.reactLogo.value} />
+> ```
+
+---
+
+## (Optional) Step 6: Locale Switching (Client)
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export function LocaleSwitcher() {
+  const { setLocale } = useLocale();
+  return (
+    <div className="flex gap-2">
+      <button onClick={() => setLocale(Locales.ENGLISH)}>English</button>
+      <button onClick={() => setLocale(Locales.FRENCH)}>Français</button>
+      <button onClick={() => setLocale(Locales.SPANISH)}>Español</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (Optional) Step 7: Localized Routing (SEO-friendly URLs)
+
+You have **two good patterns** with TanStack Start. Pick one.
+
+Create a dynamic segment folder `src/routes/$locale/` so your URLs are `/:locale/...`. In the `$locale` layout, validate the `params.locale`, set `<IntlayerProvider locale=...>`, and render an `<Outlet />`. This approach is straightforward, but you’ll mount the rest of your routes beneath `$locale`, and you’ll need an extra non-prefixed tree if you _don’t_ want the default locale prefixed.
+
+---
+
+## (Optional) Step 8: Update the URL when switching locale
+
+With Pattern A (basepath), switching locales means **navigating to a different basepath**:
+
+```tsx fileName="src/components/LocaleSwitcherNavigate.tsx"
+import { useRouter } from "@tanstack/react-router";
+import { Locales, getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export function LocaleSwitcherNavigate() {
+  const router = useRouter();
+  const { locale, setLocale } = useLocale();
+
+  const change = async (next: Locales) => {
+    if (next === locale) return;
+    const nextPath = getLocalizedUrl(
+      window.location.pathname + window.location.search,
+      next
+    );
+    await router.navigate({ to: nextPath }); // preserves history
+    setLocale(next);
+  };
+
+  return (
+    <div className="flex gap-2">
+      <button onClick={() => change(Locales.ENGLISH)}>English</button>
+      <button onClick={() => change(Locales.FRENCH)}>Français</button>
+      <button onClick={() => change(Locales.SPANISH)}>Español</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (Optional) Step 9: `<html lang>` and `dir` (TanStack Start Document)
+
+TanStack Start exposes a **Document** (root HTML shell) you can customize. Set `lang` and `dir` for accessibility/SEO:
+
+```tsx fileName="src/routes/__root.tsx" {4,15}
+import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+import Header from "../components/Header";
+
+import { IntlayerProvider } from "react-intlayer";
+import appCss from "../styles.css?url";
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      {
+        title: "TanStack Start Starter",
+      },
+    ],
+    links: [
+      {
+        rel: "stylesheet",
+        href: appCss,
+      },
+    ],
+  }),
+
+  shellComponent: RootDocument,
+});
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <IntlayerProvider>
+      <html lang="en">
+        <head>
+          <HeadContent />
+        </head>
+        <body>
+          <Header />
+          {children}
+          <TanStackRouterDevtools />
+          <Scripts />
+        </body>
+      </html>
+    </IntlayerProvider>
+  );
+}
+```
+
+For client-side correction, you can also keep your small hook:
+
+```tsx fileName="src/hooks/useI18nHTMLAttributes.ts"
+import { useEffect } from "react";
+import { useLocale } from "react-intlayer";
+import { getHTMLTextDir } from "intlayer";
+
+export const useI18nHTMLAttributes = () => {
+  const { locale } = useLocale();
+  useEffect(() => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = getHTMLTextDir(locale);
+  }, [locale]);
+};
+```
+
+---
+
+## (Optional) Step 10: Localized Link component
+
+TanStack Router provides a `<Link/>`, but if you ever need a plain `<a>` that auto-prefixes internal URLs:
+
+```tsx fileName="src/components/Link.tsx"
+import { getLocalizedUrl } from "intlayer";
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type DetailedHTMLProps,
+} from "react";
+import { useLocale } from "react-intlayer";
+
+export interface LinkProps
+  extends DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {}
+
+const isExternal = (href?: string) => /^https?:\/\//.test(href ?? "");
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
+    const { locale } = useLocale();
+    const hrefI18n =
+      href && !isExternal(href) ? getLocalizedUrl(href, locale) : href;
+    return (
+      <a href={hrefI18n} ref={ref} {...props}>
+        {children}
+      </a>
+    );
+  }
+);
+Link.displayName = "Link";
+```
+
+> If you use Pattern A (basepath), TanStack’s `<Link to="/about" />` already resolves to `/fr/about` via `basepath`, so a custom link is optional.
+
+---
+
+## TypeScript
+
+Include Intlayer’s generated types:
+
+```json5 fileName="tsconfig.json"
+{
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+---
+
+## Git
+
+Ignore Intlayer’s generated artifacts:
+
+```gitignore
+.intlayer
+```
+
+---
+
+## VS Code Extension
+
+- **Intlayer VS Code Extension** → autocompletion, errors, inline previews, quick actions.
+  Marketplace: `intlayer.intlayer-vs-code-extension`
+
+---
+
+## Go Further
+
+- Visual Editor
+- CMS mode
+- Locale detection on the edge / adapters
+
+---
+
+## Doc History
+
+| Version | Date       | Changes                         |
+| ------- | ---------- | ------------------------------- |
+| 1.0.0   | 2025-08-11 | TanStack Start adaptation added |

package/docs/en/packages/next-intlayer/index.md

@@ -279,7 +279,6 @@ The `next-intlayer` package also provides some functions to help you to internat
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/useIntlayerAsync.md)
 
 ## Doc History
 

package/docs/en/packages/react-intlayer/index.md

@@ -273,7 +273,6 @@ The `react-intlayer` package also provides some functions to help you to interna
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayerAsync.md)
 
 ## Doc History
 

package/docs/en-GB/CI_CD.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-05-20
-updatedAt: 2025-06-29
+updatedAt: 2025-08-13
 title: CI/CD Integration
 description: Learn how to integrate Intlayer into your CI/CD pipeline for automated content management and deployment.
 keywords:
@@ -8,7 +8,7 @@ keywords:
   - Continuous Integration
   - Continuous Deployment
   - Automation
-  - Internationalization
+  - Internationalisation
   - Documentation
   - Intlayer
 slugs:
@@ -64,7 +64,7 @@ You can integrate translation generation into your local Git workflow using [Hus
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
-  internationalization: {
+  internationalisation: {
     locales: [Locales.ENGLISH, Locales.SPANISH, Locales.FRENCH],
     requiredLocales: [Locales.ENGLISH], // Optional locales are handled remotely
     defaultLocale: Locales.ENGLISH,
@@ -109,64 +109,90 @@ Intlayer provides a CLI command to autofill and review dictionary content. This
 
 ```yaml fileName=".github/workflows/intlayer-translate.yml"
 name: Intlayer Auto-Fill
+# Trigger conditions for this workflow
 on:
-  push:
-    branches: [ main ]
-    paths:
-      - 'src/**'
   pull_request:
-    branches: [ main ]
-    paths:
-      - 'src/**'
-  workflow_dispatch: {}
+    branches:
+      - "main"
+
+permissions:
+  contents: write
+  pull-requests: write
 
 concurrency:
-  group: 'autofill-${{ github.ref }}'
+  group: "autofill-${{ github.ref }}"
   cancel-in-progress: true
 
 jobs:
   autofill:
     runs-on: ubuntu-latest
     env:
-      INTLAYER_CLIENT_ID: ${{ secrets.INTLAYER_CLIENT_ID }}
-      INTLAYER_CLIENT_SECRET: ${{ secrets.INTLAYER_CLIENT_SECRET }}
-      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      # OpenAI
+      AI_MODEL: openai
+      AI_PROVIDER: gpt-5-mini
+      AI_API_KEY: ${{ secrets.AI_API_KEY }}
 
     steps:
+      # Step 1: Get the latest code from the repository
       - name: ⬇️ Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
-          persist-credentials: true
+          persist-credentials: true # Keep credentials for creating PRs
+          fetch-depth: 0 # Get full git history for diff analysis
 
+      # Step 2: Set up Node.js environment
       - name: 🟢 Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20 # Use Node.js 20 LTS for stability
 
+      # Step 3: Install project dependencies
       - name: 📦 Install dependencies
-        run: npm ci
+        run: npm install
+
+      # Step 4: Install Intlayer CLI globally for translation management
+      - name: 📦 Install Intlayer
+        run: npm install -g intlayer-cli
 
+      # Step 5: Build the Intlayer project to generate translation files
       - name: ⚙️ Build Intlayer project
         run: npx intlayer build
 
+      # Step 6: Use AI to automatically fill missing translations
       - name: 🤖 Auto-fill missing translations
-        run: npx intlayer fill --git-diff --mode fill
-
-      - name: 📤 Create or update translation PR
-        uses: peter-evans/create-pull-request@v4
-        with:
-          commit-message: chore: auto-fill missing translations [skip ci]
-          branch: auto-translations
-          title: chore: update missing translations
-          labels: translation, automated
+        run: npx intlayer fill --git-diff --mode fill --provider $AI_PROVIDER --model $AI_MODEL --api-key $AI_API_KEY
+
+      # Step 7: Check if there are changes and commit them
+      - name: � Check for changes
+        id: check-changes
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "has-changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+          fi
+
+      # Step 8: Commit and push changes if any exist
+      - name: 📤 Commit and push changes
+        if: steps.check-changes.outputs.has-changes == 'true'
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "chore: auto-fill missing translations [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
 ```
 
-> Same as for Husky, in the case of a monorepo, you can use the `--base-dir` argument to sequentially treat each app.
+To set up the environment variables, go to GitHub → Settings → Secrets and variables → Actions and add the secret .
+
+> Same as for Husky, in the case of a monorepo, you can use the `--base-dir` argument to sequentially process each app.
 
-> By default, the `--git-diff` argument filters dictionaries that include changes from base (default `origin/main`) to current branch (default: `HEAD`).
+> By default, the `--git-diff` argument filters dictionaries that include changes from the base (default `origin/main`) to the current branch (default: `HEAD`).
 
 > For more information about Intlayer CLI commands and their usage, refer to the [CLI documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_cli.md).
 
 ## Doc History
 
-- 5.5.10 - 2025-06-29: Init history
+| Version | Date       | Changes         |
+| ------- | ---------- | --------------- |
+| 5.5.10  | 2025-06-29 | Initial history |