reroute-js 0.45.12-beta.1 → 1.0.0-alpha.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
@@ -169,11 +179,9 @@ Reroute is a feature-rich file-based routing framework for building fullstack Re
 - ⚡ **React 19 Streaming** - Native `renderToReadableStream` for optimal performance
 
 ### 🎨 Styling & Theming
-- 🎨 **Tailwind CSS v4 Support** - Automatic detection and compilation with CSS-first configuration
+- 🎨 **Native CSS** - Author styles in `src/client/theme.css` with no CSS framework required
 - ⚡ **Live CSS Reload** - Instant style updates in development mode
-- 🎯 **Modern CSS Features** - `@theme` and `@utility` directives support
-- 🚀 **Oxide Engine** - 5x faster builds with the new Tailwind compiler
-- 🔧 **Zero Config** - Works out of the box when `@tailwindcss/cli` is installed
+- 🔧 **Zero Config** - Theme CSS is synced automatically during `reroute gen`
 
 ### 🎨 Developer Experience
 - 📁 **Project Templates** - Quick start with `basic`, `blog`, or `store` templates
@@ -208,6 +216,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 +234,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 +633,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 +1789,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/_/store/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "{{PROJECT_NAME}}",
 	"version": "0.0.0",
-	"description": "A Reroute store application with Tailwind CSS v4",
+	"description": "A Reroute store application",
 	"private": true,
 	"scripts": {
 		"types": "tsc --noEmit",
@@ -23,8 +23,6 @@
 		"@types/bun": "latest",
 		"@types/react": "^19.2.2",
 		"@types/react-dom": "^19.2.2",
-		"@tailwindcss/cli": "^4.1.16",
-		"tailwindcss": "^4.1.16",
 		"typescript": "^5"
 	}
 }

package/_/store/src/client/components/Header.tsx

@@ -2,34 +2,22 @@ import { Link } from 'reroute-js/react';
 
 export default function Header() {
 	return (
-		<header className='sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm'>
+		<header className='site-header'>
 			<div className='container-custom'>
-				<div className='flex items-center justify-between h-16'>
-					<Link
-						to='/'
-						className='flex items-center gap-2 text-2xl font-bold text-primary-600 hover:text-primary-700 transition-colors'
-					>
-						<span className='text-3xl'>🛒</span>
+				<div className='header-inner'>
+					<Link to='/' className='header-logo'>
+						<span className='header-logo-icon'>🛒</span>
 						<span>Reroute Store</span>
 					</Link>
 
-					<nav className='flex items-center gap-8'>
-						<Link
-							to='/'
-							className='link-muted font-medium hover:text-primary-600'
-						>
+					<nav className='header-nav'>
+						<Link to='/' className='nav-link'>
 							Home
 						</Link>
-						<Link
-							to='/products'
-							className='link-muted font-medium hover:text-primary-600'
-						>
+						<Link to='/products' className='nav-link'>
 							Products
 						</Link>
-						<Link
-							to='/categories'
-							className='link-muted font-medium hover:text-primary-600'
-						>
+						<Link to='/categories' className='nav-link'>
 							Categories
 						</Link>
 					</nav>

package/_/store/src/client/components/ProductCard.tsx

@@ -8,12 +8,9 @@ interface ProductCardProps {
 
 export default function ProductCard({ product }: ProductCardProps) {
 	return (
-		<div className='card card-hover group'>
-			<Link
-				to={`/products/${product.id}`}
-				className='block h-full no-underline text-inherit'
-			>
-				<div className='w-full h-60 bg-gray-50 flex items-center justify-center p-4'>
+		<div className='card card-hover product-card'>
+			<Link to={`/products/${product.id}`} className='product-card-link'>
+				<div className='product-card-image-wrap'>
 					<Image
 						src={product.image}
 						alt={product.title}
@@ -21,25 +18,21 @@ export default function ProductCard({ product }: ProductCardProps) {
 						height={180}
 						quality={75}
 						sizes='(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 180px'
-						className='max-w-full max-h-full object-contain relative z-10 bg-white'
+						className='product-card-image'
 						style={{ viewTransitionName: `product-image-${product.id}` }}
 					/>
 				</div>
 
-				<div className='p-4 flex flex-col gap-2 flex-1'>
+				<div className='product-card-body'>
 					<div className='badge-primary'>{product.category}</div>
 
-					<h3 className='text-base font-semibold text-gray-900 leading-normal line-clamp-2 min-h-[3em] group-hover:text-primary-600 transition-colors'>
-						{product.title}
-					</h3>
+					<h3 className='product-card-title'>{product.title}</h3>
 
-					<div className='flex justify-between items-center mt-auto pt-2'>
-						<span className='text-xl font-bold text-primary-600'>
-							${product.price.toFixed(2)}
-						</span>
+					<div className='product-card-footer'>
+						<span className='price'>${product.price.toFixed(2)}</span>
 
 						{product.rating && (
-							<div className='flex items-center gap-1 text-sm text-gray-600'>
+							<div className='product-rating'>
 								<span>⭐</span>
 								<span>
 									{product.rating.rate} ({product.rating.count})

package/_/store/src/client/routes/[404].tsx

@@ -6,20 +6,18 @@ export default function NotFoundPage() {
 		<>
 			<Header />
 
-			<main className='container-custom py-16'>
-				<div className='max-w-2xl mx-auto text-center'>
-					<div className='mb-8 animate-slide-up'>
-						<div className='text-9xl font-bold text-primary-600 mb-4'>404</div>
-						<h1 className='text-4xl font-bold text-gray-900 mb-4'>
-							Page Not Found
-						</h1>
-						<p className='text-xl text-gray-600 mb-8'>
+			<main className='page-main page-main-lg'>
+				<div className='not-found-content'>
+					<div className='animate-slide-up'>
+						<div className='not-found-code'>404</div>
+						<h1 className='not-found-title'>Page Not Found</h1>
+						<p className='not-found-lead'>
 							Oops! The page you're looking for doesn't exist. It might have
 							been moved or deleted.
 						</p>
 					</div>
 
-					<div className='flex flex-col sm:flex-row gap-4 justify-center mb-12 animate-in'>
+					<div className='not-found-actions animate-in'>
 						<Link to='/' className='btn-primary btn-lg'>
 							🏠 Go Home
 						</Link>
@@ -28,32 +26,23 @@ export default function NotFoundPage() {
 						</Link>
 					</div>
 
-					<div className='grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 animate-scale'>
-						<Link
-							to='/categories'
-							className='card card-hover p-6 no-underline text-gray-900'
-						>
-							<div className='text-4xl mb-3'>🏷️</div>
-							<h3 className='font-semibold mb-2'>Categories</h3>
-							<p className='text-sm text-gray-600'>Browse by category</p>
+					<div className='not-found-links animate-scale'>
+						<Link to='/categories' className='card card-hover card-padded'>
+							<div className='not-found-card-icon'>🏷️</div>
+							<h3 className='not-found-card-title'>Categories</h3>
+							<p className='not-found-card-desc'>Browse by category</p>
 						</Link>
 
-						<Link
-							to='/products'
-							className='card card-hover p-6 no-underline text-gray-900'
-						>
-							<div className='text-4xl mb-3'>📦</div>
-							<h3 className='font-semibold mb-2'>All Products</h3>
-							<p className='text-sm text-gray-600'>View our catalog</p>
+						<Link to='/products' className='card card-hover card-padded'>
+							<div className='not-found-card-icon'>📦</div>
+							<h3 className='not-found-card-title'>All Products</h3>
+							<p className='not-found-card-desc'>View our catalog</p>
 						</Link>
 
-						<Link
-							to='/'
-							className='card card-hover p-6 no-underline text-gray-900'
-						>
-							<div className='text-4xl mb-3'>⚡</div>
-							<h3 className='font-semibold mb-2'>Featured</h3>
-							<p className='text-sm text-gray-600'>See what's popular</p>
+						<Link to='/' className='card card-hover card-padded'>
+							<div className='not-found-card-icon'>⚡</div>
+							<h3 className='not-found-card-title'>Featured</h3>
+							<p className='not-found-card-desc'>See what's popular</p>
 						</Link>
 					</div>
 				</div>