docs: add paraglide examples

examples/react/i18n-paraglide/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+count.txt
+.env
+.nitro
+.tanstack

examples/react/i18n-paraglide/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

examples/react/i18n-paraglide/README.md

@@ -0,0 +1,141 @@
+# TanStack Router example
+
+This example shows how to use Paraglide with TanStack Router. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router).
+
+## Getting started
+
+1. Init Paraglide JS
+
+```bash
+npx @inlang/paraglide-js@latest init
+```
+
+2. Add the vite plugin to your `vite.config.ts`:
+
+```diff
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
++import { paraglideVitePlugin } from "@inlang/paraglide-js";
+
+export default defineConfig({
+	plugins: [
+    tanstackRouter({ target: 'react', autoCodeSplitting: true }),
+    react(),
++		paraglideVitePlugin({
++			project: "./project.inlang",
++			outdir: "./app/paraglide",
++		}),
+	],
+});
+```
+
+3. Done :)
+
+Run the app and start translating. See the [basics documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/basics) for information on how to use Paraglide's messages, parameters, and locale management.
+
+## Rewrite URL
+
+If you want to handle how the URL looks when the user changes the locale, you can rewrite the URL in the router.
+
+```diff
+import { createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
++import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime.js";
+
+const router = createRouter({
+  routeTree,
++ rewrite: {
++   input: ({ url }) => deLocalizeUrl(url),
++   output: ({ url }) => localizeUrl(url),
+  },
+});
+```
+
+In `__root.tsx` add a `beforeLoad` hook to check if the user should be redirected and set the html `lang` attribute.
+
+```ts
+import { shouldRedirect } from "../paraglide/runtime";
+
+export const Route = createRootRoute({
+  beforeLoad: async () => {
+    document.documentElement.setAttribute("lang", getLocale());
+
+    const decision = await shouldRedirect({ url: window.location.href });
+
+    if (decision.redirectUrl) {
+      throw redirect({ href: decision.redirectUrl.href });
+    }
+  },
+  ...
+});
+```
+
+## Typesafe translated pathnames
+
+If you don't want to miss any translated path, you can create a `createTranslatedPathnames` function and pass it to the vite plugin.
+
+```ts
+import { Locale } from '@/paraglide/runtime'
+import { FileRoutesByTo } from '../routeTree.gen'
+
+type RoutePath = keyof FileRoutesByTo
+
+const excludedPaths = ['admin', 'docs', 'api'] as const
+
+type PublicRoutePath = Exclude<
+  RoutePath,
+  `${string}${(typeof excludedPaths)[number]}${string}`
+>
+
+type TranslatedPathname = {
+  pattern: string
+  localized: Array<[Locale, string]>
+}
+
+function toUrlPattern(path: string) {
+  return (
+    path
+      // catch-all
+      .replace(/\/\$$/, '/:path(.*)?')
+      // optional parameters: {-$param}
+      .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ':$1?')
+      // named parameters: $param
+      .replace(/\$([a-zA-Z0-9_]+)/g, ':$1')
+      // remove trailing slash
+      .replace(/\/+$/, '')
+  )
+}
+
+function createTranslatedPathnames(
+  input: Record<PublicRoutePath, Record<Locale, string>>,
+): TranslatedPathname[] {
+  return Object.entries(input).map(([pattern, locales]) => ({
+    pattern: toUrlPattern(pattern),
+    localized: Object.entries(locales).map(
+      ([locale, path]) =>
+        [locale as Locale, `/${locale}${toUrlPattern(path)}`] satisfies [
+          Locale,
+          string,
+        ],
+    ),
+  }))
+}
+
+export const translatedPathnames = createTranslatedPathnames({
+  '/': {
+    en: '/',
+    de: '/',
+  },
+  '/about': {
+    en: '/about',
+    de: '/ueber',
+  },
+})
+```
+
+And import into the Paraglide Vite plguin.
+
+## Server side rendering
+
+For server side rerdering, check out the [TanStack Start guide](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/tanstack-start).

examples/react/i18n-paraglide/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-tsrouter-app"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Create TanStack App - i18n-paraglide</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/react/i18n-paraglide/messages/de.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "example_message": "Guten Tag {username}",
+  "hello_about": "Hallo /ueber!",
+  "home_page": "Startseite",
+  "about_page": "Über uns"
+}

examples/react/i18n-paraglide/messages/en.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "example_message": "Hello world {username}",
+  "hello_about": "Hello /about!",
+  "home_page": "Home page",
+  "about_page": "About page"
+}

examples/react/i18n-paraglide/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "tanstack-router-i18n-paraglide",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "start": "vite --port 3000",
+    "build": "vite build && tsc",
+    "serve": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-router": "^1.132.2",
+    "@tanstack/router-plugin": "^1.132.3",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^4.1.13"
+  },
+  "devDependencies": {
+    "@types/node": "^22.18.6",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.7",
+    "@inlang/paraglide-js": "^2.4.0"
+  }
+}

examples/react/i18n-paraglide/project.inlang/.gitignore

@@ -0,0 +1 @@
+cache

examples/react/i18n-paraglide/project.inlang/project_id

@@ -0,0 +1 @@
+72AJsIR0c0ewzkN33F

examples/react/i18n-paraglide/project.inlang/settings.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "baseLocale": "en",
+  "locales": ["en", "de"],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{locale}.json"
+  }
+}

examples/react/i18n-paraglide/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "TanStack App",
+  "name": "Create TanStack App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/react/i18n-paraglide/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

examples/react/i18n-paraglide/src/main.tsx

@@ -0,0 +1,40 @@
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import './styles.css'
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+import { deLocalizeUrl, localizeUrl } from './paraglide/runtime.js'
+
+// Create a new router instance
+const router = createRouter({
+  routeTree,
+  context: {},
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+
+  rewrite: {
+    input: ({ url }) => deLocalizeUrl(url),
+    output: ({ url }) => localizeUrl(url),
+  },
+})
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById('app')
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  )
+}

examples/react/i18n-paraglide/src/routeTree.gen.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as AboutRouteImport } from './routes/about'
+import { Route as IndexRouteImport } from './routes/index'
+
+const AboutRoute = AboutRouteImport.update({
+  id: '/about',
+  path: '/about',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/about'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/about'
+  id: '__root__' | '/' | '/about'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  AboutRoute: typeof AboutRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/about': {
+      id: '/about'
+      path: '/about'
+      fullPath: '/about'
+      preLoaderRoute: typeof AboutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AboutRoute: AboutRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()