reroute-js 0.45.12-beta.1 → 0.46.0

package/README.md

@@ -22,6 +22,12 @@ Reroute is a feature-rich file-based routing framework for building fullstack Re
   - [Environment Files](#environment-files)
   - [Security](#security)
   - [TypeScript Support](#typescript-support)
+- [🌍 Internationalization (i18n)](#-internationalization-i18n)
+  - [Enable](#enable)
+  - [URL Rules](#url-rules)
+  - [UI Strings](#ui-strings)
+  - [SEO & Feeds](#seo--feeds)
+  - [Config](#config)
 - [📝 Markdown Routes](#-markdown-routes)
   - [Installation](#installation)
   - [Creating Markdown Routes](#creating-markdown-routes)
@@ -74,6 +80,7 @@ Reroute is a feature-rich file-based routing framework for building fullstack Re
 
 ### 📄 Content Management
 - 📚 **Content Collections** - Organize content by collections (blog posts, docs, etc.)
+- 🌍 **Internationalization** - Opt-in, collection-scoped i18n via `locales/` + `content/{locale}/`
 - 🔍 **Content Discovery** - Automatic scanning and indexing of content files
 - 🏷️ **Metadata Extraction** - Support for content metadata
 - 📑 **Content Registry** - Pre-generated content index for fast lookups
@@ -116,8 +123,11 @@ Reroute is a feature-rich file-based routing framework for building fullstack Re
   - `useLlms()` - Discover LLM-friendly content URLs for current route
   - `useSearch()` - Client-side content search with debouncing
   - `useToc()` - Auto-extract table of contents from markdown headings
+- 🌍 **i18n**:
+  - `t(key, values?)` - Plain translator (ICU MessageFormat); not a hook
+  - `useLocale()` - Active locale, available locales, and `setLocale()`
 - 🧩 **Components**:
-  - `<Link>` - Client-side navigation with automatic prefetching
+  - `<Link>` - Client-side navigation with automatic prefetching (localizes content hrefs)
   - `<Image>` - Optimized images with automatic format negotiation and lazy loading
   - `<Outlet>` - Render nested route components
   - `<ContentRoute>` - Dynamic content rendering with metadata injection
@@ -208,6 +218,7 @@ Reroute is a feature-rich file-based routing framework for building fullstack Re
 ### 🗺️ Sitemap Generation
 - 🔍 **Auto-Discovery** - Automatically discovers static routes, content collections, and ssr.data routes
 - 📄 **XML Generation** - Standards-compliant sitemap.xml following Google's specifications
+- 🌍 **i18n Alternates** - `xhtml:link` hreflang entries for localized content
 - 💾 **Smart Caching** - Generated on first request and cached according to maxAge
 - 📊 **Auto-Pagination** - Automatically splits into multiple files for sites with 50k+ URLs
 - 🎨 **Custom Extractors** - Content-agnostic URL and date extraction via configuration
@@ -225,6 +236,7 @@ Reroute is a feature-rich file-based routing framework for building fullstack Re
 - 🔍 **Auto-Discovery** - Discovers content collections, route ssr.data, and layout ssr.data
 - 📄 **RSS & Atom Support** - Standards-compliant RSS 2.0 and Atom 1.0 formats
 - 📚 **Per-Collection Feeds** - Each collection gets its own feed (e.g., /blog/feed.xml)
+- 🌍 **Locale Filter** - `?lang=` filters feed items by content locale
 - 💾 **Smart Caching** - Generated on first request and cached according to maxAge
 - 🎨 **Custom Extractors** - Content-agnostic extraction for title, description, author, pubDate
 
@@ -623,6 +635,92 @@ interface ImportMeta {
 }
 ```
 
+## 🌍 Internationalization (i18n)
+
+Opt-in and **collection-scoped** — not site-wide locale prefixes. Enabled only when a `locales/` directory exists at the app root.
+
+### Enable
+
+```
+locales/
+  en-US.json          # default locale catalog
+  pt-BR.json
+src/client/routes/blog/content/
+  hello-world.tsx     # default locale (unprefixed URL)
+  pt-BR/
+    hello-world.tsx   # /blog/pt-BR/hello-world
+```
+
+```json
+// locales/en-US.json
+{
+  "nav": { "home": "Home" },
+  "blog": {
+    "postsCount": "{count, plural, =0 {No posts} one {# post} other {# posts}}"
+  }
+}
+```
+
+### URL Rules
+
+| Locale | URL |
+|--------|-----|
+| Default (`en-US`) | `/blog/hello-world` |
+| Other | `/blog/pt-BR/hello-world` |
+| Non-content routes | unchanged (`/about`, `/`) |
+
+- Flat files under `content/` are the default locale; nest under `content/{locale}/` for translations
+- Collections without locale folders behave as before
+- Default-locale prefix (`/blog/en-US/...`) 302s to the unprefixed URL
+- Optional negotiate: `Accept-Language` / cookie can 302 default content URLs to a localized path (`i18n.redirectContentOnNegotiate`, default `true`)
+
+### UI Strings
+
+```tsx
+import { t, useLocale, Link } from 'reroute-js/react';
+
+function Nav() {
+  const { locale, locales, setLocale } = useLocale();
+  return (
+    <>
+      <Link to="/">{t('nav.home')}</Link>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {locales.map((l) => (
+          <option key={l} value={l}>{l}</option>
+        ))}
+      </select>
+      <footer>{t('blog.postsCount', { count: 5 })}</footer>
+    </>
+  );
+}
+```
+
+- `t(key, values?)` — plain function (not a hook); ICU MessageFormat supported
+- `useLocale()` — `{ locale, locales, defaultLocale, enabled, setLocale }`
+- `Link` auto-localizes content hrefs; cookie (`reroute-locale`) + `Accept-Language` resolve UI locale
+
+### SEO & Feeds
+
+- `hreflang` + `og:locale` on content pages
+- Sitemap includes `xhtml:link` alternates
+- RSS / search accept `?lang=` to filter by locale
+
+### Config
+
+```tsx
+// reroute.config.ts
+export default defineConfig({
+  i18n: {
+    defaultLocale: 'en-US',              // unprefixed content URLs
+    localesDir: 'locales',               // catalog directory
+    cookie: 'reroute-locale',
+    redirectContentOnNegotiate: true,   // 302 default content → localized URL
+  },
+});
+```
+
+Feature still requires a `locales/` directory — config only overrides defaults.
+
 ## 📝 Markdown Routes
 
 Reroute supports native markdown and MDX files as routes with frontmatter support and syntax highlighting.
@@ -1693,7 +1791,7 @@ Built-in tracing for debugging SSR, 404s, and cache behavior. Automatically trac
 
 - [Examples](./examples) - Example projects to get started
 - [Packages](./packages) - Reroute entrypoints
-- [GitHub](https://github.com/stewones/reroute) - Source code and issues
+- [GitHub](https://github.com/Intenseloop/reroute) - Source code and issues
 
 ## 🏗️ Build & Deployment
 

package/_/blog/src/client/routes/blog/[layout].tsx

@@ -1,5 +1,5 @@
-import { Link, Outlet, useData } from 'reroute-js/react';
 import type { SSR } from 'reroute-js/core';
+import { Link, Outlet, t, useData, useLocale } from 'reroute-js/react';
 
 // Layout data type
 type LayoutData = {
@@ -16,13 +16,17 @@ export const ssr: SSR<LayoutData> = {
 		// Get last updated timestamp from package.json mtime
 		let lastUpdated: string | undefined;
 		try {
-			const pkgPath = await import('node:path').then(p => p.join(process.cwd(), 'package.json'));
-			const stats = await import('node:fs/promises').then(fs => fs.stat(pkgPath));
+			const pkgPath = await import('node:path').then((p) =>
+				p.join(process.cwd(), 'package.json'),
+			);
+			const stats = await import('node:fs/promises').then((fs) =>
+				fs.stat(pkgPath),
+			);
 			lastUpdated = stats.mtime.toISOString();
 		} catch {
 			lastUpdated = new Date().toISOString();
 		}
-		
+
 		return {
 			siteTitle: 'Reroute Blog',
 			tagline: 'Fast, Modern, File-Based Routing',
@@ -39,11 +43,11 @@ export const meta = {
 };
 
 export default function BlogLayout() {
-	// Access layout data - it just works!
 	const data = useData<LayoutData>();
+	const { locale, locales, setLocale, enabled } = useLocale();
+
 	return (
 		<div style={{ minHeight: '100vh', background: '#f9f9f9' }}>
-			{/* Blog Header */}
 			<header
 				style={{
 					background: '#fff',
@@ -57,6 +61,8 @@ export default function BlogLayout() {
 							display: 'flex',
 							alignItems: 'center',
 							justifyContent: 'space-between',
+							gap: '1rem',
+							flexWrap: 'wrap',
 						}}
 					>
 						<Link
@@ -68,7 +74,7 @@ export default function BlogLayout() {
 								color: '#333',
 							}}
 						>
-							📝 {data?.siteTitle || 'Blog'}
+							📝 {t('blog.title')}
 						</Link>
 						<div
 							style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}
@@ -81,7 +87,7 @@ export default function BlogLayout() {
 									fontSize: '0.875rem',
 								}}
 							>
-								Home
+								{t('nav.home')}
 							</Link>
 							<Link
 								to='/about'
@@ -91,21 +97,43 @@ export default function BlogLayout() {
 									fontSize: '0.875rem',
 								}}
 							>
-								About
+								{t('nav.about')}
 							</Link>
+							{enabled && locales.length > 1 && (
+								<label
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+										gap: '0.35rem',
+										fontSize: '0.875rem',
+										color: '#666',
+									}}
+								>
+									{t('blog.language')}
+									<select
+										value={locale}
+										onChange={(e) => setLocale(e.target.value)}
+										style={{ fontSize: '0.875rem' }}
+									>
+										{locales.map((loc) => (
+											<option key={loc} value={loc}>
+												{loc}
+											</option>
+										))}
+									</select>
+								</label>
+							)}
 						</div>
 					</nav>
 				</div>
 			</header>
 
-			{/* Blog Content */}
 			<main>
 				<div style={{ maxWidth: '800px', margin: '0 auto' }}>
 					<Outlet />
 				</div>
 			</main>
 
-			{/* Blog Footer */}
 			<footer
 				style={{
 					marginTop: '4rem',
@@ -117,10 +145,14 @@ export default function BlogLayout() {
 					background: '#fff',
 				}}
 			>
-				<p>© {new Date().getFullYear()} Reroute Blog. Built with Bun, Elysia, and React.</p>
+				<p>
+					© {new Date().getFullYear()} {t('blog.title')}. Built with Bun,
+					Elysia, and React.
+				</p>
 				{data?.totalPosts && (
 					<p style={{ marginTop: '0.5rem', fontSize: '0.75rem' }}>
-						{data.totalPosts} posts • Last updated: {new Date(data.lastUpdated).toLocaleString()}
+						{t('blog.postsCount', { count: data.totalPosts })} • Last updated:{' '}
+						{new Date(data.lastUpdated).toLocaleString(locale)}
 					</p>
 				)}
 			</footer>

package/_/blog/src/client/routes/blog/content/pt-BR/1-hello-world.tsx

@@ -0,0 +1,27 @@
+// Page metadata and optional SSR extras. Reroute SSR will use these
+// to generate <title>, <meta name="description"> and append any custom head.
+const meta = {
+	title: 'Olá Mundo',
+	description: 'Este é o primeiro post usando Reroute 🎉',
+	excerpt: 'Este é um ótimo post',
+	date: '2025-10-20',
+};
+
+const ssr = {
+	head: [
+		'<meta property="og:type" content="article" />',
+		'<meta name="twitter:card" content="summary_large_image" />',
+	],
+};
+
+function BlogPost() {
+	return (
+		<div>
+			<h1>Olá Mundo</h1>
+			<p>Bem-vindo ao meu blog!!!</p>
+		</div>
+	);
+}
+
+export { meta, ssr };
+export default BlogPost;

package/_/blog/src/client/routes/index.tsx

@@ -1,10 +1,10 @@
-import { Link } from 'reroute-js/react';
+import { Link, t } from 'reroute-js/react';
 
 export default function HomePage() {
 	return (
 		<main style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
 			<h1>🏠 Welcome to Reroute!</h1>
-			<p>This is the home page of your custom file-based routing system.</p>
+			<p>{t('home.headline')}</p>
 
 			<section style={{ marginTop: '2rem' }}>
 				<h2>Navigation</h2>
@@ -25,7 +25,7 @@ export default function HomePage() {
 							borderRadius: '4px',
 						}}
 					>
-						About
+						{t('nav.about')}
 					</Link>
 					<Link
 						to='/blog'
@@ -36,7 +36,7 @@ export default function HomePage() {
 							borderRadius: '4px',
 						}}
 					>
-						Blog
+						{t('home.cta')}
 					</Link>
 					<Link
 						to='/docs'

package/_/search/src/client/routes/docs/content/content-collections.md

@@ -35,6 +35,24 @@ src/client/routes/
         └── post-3.tsx
 ```
 
+### Multilingual content (opt-in)
+
+Add a `locales/` folder at the app root with JSON catalogs (e.g. `en-US.json`, `pt-BR.json`) to enable i18n. Then nest translations under `content/{locale}/`:
+
+```
+locales/
+  en-US.json
+  pt-BR.json
+src/client/routes/blog/content/
+  en-US/post-1.md          # or keep flat files as the default locale
+  pt-BR/post-1.md
+```
+
+- Default locale URLs stay unprefixed: `/blog/post-1`
+- Other locales: `/blog/pt-BR/post-1`
+- Collections without locale folders are unchanged
+- Use `t('nav.home')` for UI strings (ICU MessageFormat supported)
+
 ### Content Files
 
 #### Markdown Files

package/cli/bin.d.ts

@@ -1,9 +1,9 @@
 /**
- * reroute-js v0.45.11
+ * reroute-js v0.46.0
  *
  * @license MIT
  * @copyright 2026 stewones <hi@stewan.io>
- * @see https://github.com/stewones/reroute
+ * @see https://github.com/Intenseloop/reroute
  *
  * Built with Bun <3
  */