Test Spanish (es) locale support

L10N.md

@@ -198,7 +198,7 @@ l10n-cage/
 4. **L10n is generated automatically** in CI/CD on the appropriate cage branch
 5. **Preview l10n results** in staging before merging
 
-**Current limitation**: While main branch is locked to en-only locale, target your pull requests to `l10-preview` or similar branches that have all locales enabled in order to have l10ns automatically captured.
+**Testing new locales**: To test a new locale before adding it to production, create a branch starting with `l10n` (e.g., `l10n-es` for Spanish). These branches automatically get `PARAGLIDE_LOCALES="all"` via `netlify.toml`, allowing you to preview all locales defined in `default-settings.js`.
 
 ### L10n Development
 
@@ -252,20 +252,75 @@ This lets you reuse expensive LLM-generated content across different feature bra
 
 ### Adding New Locales
 
-1. **Add locale to configuration**:
+#### Testing Before Production
+
+To test a new locale without affecting production:
+
+1. **Create a test branch** with a specific name like `l10n-fr`:
+
+   ```bash
+   git checkout -b l10n-fr origin/main  # For testing French
+   ```
+
+2. **Add locale to configuration**:
 
    ```javascript
    // project.inlang/default-settings.js
-   locales: ['en', 'nl', 'de', 'fr'] // Add 'fr'
+   locales: ['en', 'de', 'nl', 'fr'] // Add 'fr' to existing locales
+   ```
+
+   Note: You can temporarily remove other non-English locales during development to speed up builds.
+
+3. **Add branch context to netlify.toml**:
+
+   ```toml
+   [context.l10n-fr.environment]
+     PARAGLIDE_LOCALES = "fr"  # Just test French + English
    ```
 
-2. **Estimate work locally**:
+   Note: Netlify doesn't support wildcards in context names, so each test branch needs its own context entry. Setting just "fr" builds faster and makes the test focus clear.
+
+4. **Estimate work locally** (optional but recommended):
 
    ```bash
-   PARAGLIDE_LOCALES=en,fr pnpm l10n --dry-run --verbose
+   PARAGLIDE_LOCALES=all pnpm l10n --dry-run --verbose
    ```
 
-3. You could **perform it locally** or **through a pull request**
+   This shows what translations will be generated and estimated costs.
+
+5. **Push to trigger preview**:
+
+   ```bash
+   git add -A && git commit -m "Test French locale"
+   git push -u origin l10n-fr
+   ```
+
+   Create a draft PR to trigger Netlify's preview build with your locale enabled.
+
+6. **The l10n cage mirrors your branch**: Translations are stored in a matching `l10n-fr` branch of the paraglide repository.
+
+#### Launching to Production
+
+Once testing is complete:
+
+1. **Add the locale to main** by editing `project.inlang/default-settings.js` directly on main
+2. **Choose your translation strategy**:
+
+   **Option A: Fresh translations**
+   - Let production regenerate translations from scratch
+
+   **Option B: Preserve tested translations**
+   - First merge paraglide's `l10n-fr` branch to paraglide's main
+   - Production will use your tested and reviewed translations
+
+#### Local Testing
+
+For local testing with API key:
+
+```bash
+PARAGLIDE_LOCALES=en,fr pnpm l10n --dry-run --verbose  # Estimate work and costs
+PARAGLIDE_LOCALES=en,fr pnpm l10n                       # Generate translations
+```
 
 ## Troubleshooting
 

netlify.toml

@@ -24,3 +24,8 @@
 [dev]
   command = "pnpm dev"
   port = 37572
+
+# Spanish locale testing branch
+[context.l10n-es.environment]
+  PARAGLIDE_LOCALES = "es"
+

project.inlang/default-settings.js

@@ -7,7 +7,7 @@
 export default {
 	$schema: 'https://inlang.com/schema/project-settings',
 	baseLocale: 'en',
-	locales: ['en', 'de', 'nl'],
+	locales: ['en', 'es'],
 	modules: [
 		'https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@latest/dist/index.js',
 		'https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@latest/dist/index.js',

src/routes/header.svelte

@@ -28,7 +28,7 @@
 	<div class="logo-container">
 		<div class="compensate-min-space-between" />
 		<div class="compensate-offset" />
-		<a href="/" class="logo">
+		<a href={localizeHref('/')} class="logo">
 			<Logo animate={logo_animate} {inverted} />
 		</a>
 		<div class="min-space-between" />