examples: add intlayer i18n example

examples/react/start-i18n-intlayer/.gitignore

@@ -0,0 +1,15 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+count.txt
+.env
+.nitro
+.tanstack
+.output
+.vinxi
+todos.json
+
+# Intlayer
+.intlayer

examples/react/start-i18n-intlayer/eslint.config.ts

@@ -0,0 +1,14 @@
+import eslint from '@eslint/js'
+import perfectionist from 'eslint-plugin-perfectionist'
+import { defineConfig } from 'eslint/config'
+import tseslint from 'typescript-eslint'
+
+export default defineConfig(
+  {
+    ignores: ['.intlayer/**', '.tanstack/**'],
+  },
+  eslint.configs.recommended,
+  tseslint.configs.strict,
+  tseslint.configs.stylistic,
+  perfectionist.configs['recommended-alphabetical'],
+)

examples/react/start-i18n-intlayer/intlayer.config.ts

@@ -0,0 +1,49 @@
+import { Locales } from 'intlayer'
+import type { IntlayerConfig } from 'intlayer'
+
+const config: IntlayerConfig = {
+  build: {
+    importMode: 'dynamic',
+  },
+  routing: {
+    mode: 'prefix-no-default',
+  },
+  log: {
+    mode: 'verbose',
+  },
+  ai: {
+    provider: 'openai',
+    model: 'gpt-3.5-turbo',
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext: 'This is a test application',
+  },
+  editor: {
+    applicationURL: 'http://localhost:3000',
+  },
+  internationalization: {
+    defaultLocale: Locales.ENGLISH,
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Your other locales
+    ],
+    requiredLocales: [
+      // Can be different from locale list for TypeScript errors
+      Locales.ENGLISH,
+      Locales.FRENCH,
+    ],
+    strictMode: 'inclusive', // Avoid errors when more locales are included
+  },
+  // Can customize dictionary global behavior
+  // dictionary: {
+  //   locale: Locales.ENGLISH,
+  //   fill: true,
+  // },
+  // Can enable the compiler
+  // compiler: {
+  //   enabled: true,
+  // },
+}
+
+export default config

examples/react/start-i18n-intlayer/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "tanstack-start-intlayer",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "start": "node .output/server/index.mjs",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "start:editor": "npx intlayer-editor start --with 'vite dev --port 3000'",
+    "intlayer:build": "intlayer build"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.17",
+    "@tanstack/react-router": "workspace:*",
+    "@tanstack/react-start": "workspace:*",
+    "@tanstack/router-plugin": "workspace:*",
+    "intlayer": "7.4.0",
+    "nitro": "^3.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-intlayer": "7.4.0",
+    "tailwindcss": "^4.1.17",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-perfectionist": "^4.15.1",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.2",
+    "vite-intlayer": "7.4.0",
+    "intlayer-editor": "7.4.0",
+    "web-vitals": "^5.1.0"
+  }
+}

examples/react/start-i18n-intlayer/src/components/Header.tsx

@@ -0,0 +1,19 @@
+import { LocalizedLink } from '../components/localized-link'
+
+export default function Header() {
+  return (
+    <>
+      <header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
+        <h1 className="ml-4 text-xl font-semibold">
+          <LocalizedLink to="/">
+            <img
+              alt="TanStack Logo"
+              className="h-10"
+              src="/tanstack-word-logo-white.svg"
+            />
+          </LocalizedLink>
+        </h1>
+      </header>
+    </>
+  )
+}

examples/react/start-i18n-intlayer/src/components/locale-switcher.content.ts

@@ -0,0 +1,19 @@
+import { type Dictionary, insert, t } from 'intlayer';
+
+const localeSwitcherContent = {
+  content: {
+    languageListLabel: t({
+      en: 'Language list',
+      es: 'Lista de idiomas',
+      fr: 'Liste de langues',
+    }),
+    localeSwitcherLabel: insert(t({
+      en: 'Select language {{language}}',
+      es: 'Seleccionar idioma {{language}}',
+      fr: 'Sélectionner la langue {{language}}',
+    })),
+  },
+  key: 'locale-switcher',
+} satisfies Dictionary;
+
+export default localeSwitcherContent;