Added i18n routes to default template demonstrating alternate pages

Author: pzerelles

packages/create-svelte/templates/default/i18n.config.js

@@ -0,0 +1,37 @@
+import locales from './src/locales.js';
+
+export const defaultLocale = locales[0];
+
+/** @typedef {{
+ *   content: string;
+ *   dynamic: boolean;
+ *   spread: boolean;
+ * }} Part */
+
+/**
+ * Create localized routes prefixed with locale
+ * @param {Part[][]} segments
+ * @param {'page' | 'endpoint'} type
+ * @returns {Part[][][]}
+ */
+export function localizeRoutes(segments, type) {
+	if (type === 'endpoint') return [segments];
+	return locales.map((locale) =>
+		locale === defaultLocale
+			? segments
+			: [
+					[{ content: locale, dynamic: false, spread: false }],
+					...segments.map((segment) => segment.map((part) => translate(part)))
+			  ]
+	);
+}
+
+/**
+ * Translate part of a route segment
+ * @param {Part} part
+ * @returns {Part}
+ */
+function translate(part) {
+	if (part.content === 'about') return { ...part, content: 'ueber' };
+	return part;
+}

packages/create-svelte/templates/default/src/lib/header/Header.svelte

@@ -1,8 +1,21 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import logo from './svelte-logo.svg';
+	import { l, localizedPaths, locale as currentLocale, defaultLocale } from '$lib/i18n';
+
+	$: alternatePaths = $localizedPaths($page.url.pathname);
+	$: defaultPath = alternatePaths[defaultLocale];
 </script>
 
+<svelte:head>
+	{#if defaultPath}
+		<link rel="alternate" hreflang="x-default" href={defaultPath} />
+	{/if}
+	{#each Object.entries(alternatePaths) as [locale, path]}
+		<link rel="alternate" hreflang={locale} href={path} />
+	{/each}
+</svelte:head>
+
 <header>
 	<div class="corner">
 		<a href="https://kit.svelte.dev">
@@ -15,12 +28,14 @@
 			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 		</svg>
 		<ul>
-			<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-			<li class:active={$page.url.pathname === '/about'}>
-				<a sveltekit:prefetch href="/about">About</a>
+			<li class:active={$page.url.pathname === $l('/')}>
+				<a sveltekit:prefetch href={$l('/')}>Home</a>
+			</li>
+			<li class:active={$page.url.pathname === $l('/about')}>
+				<a sveltekit:prefetch href={$l('/about')}>About</a>
 			</li>
-			<li class:active={$page.url.pathname === '/todos'}>
-				<a sveltekit:prefetch href="/todos">Todos</a>
+			<li class:active={$page.url.pathname === $l('/todos')}>
+				<a sveltekit:prefetch href={$l('/todos')}>Todos</a>
 			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
@@ -30,6 +45,11 @@
 
 	<div class="corner">
 		<!-- TODO put something else here? github link? -->
+		<nav>
+			{#each Object.entries(alternatePaths) as [locale, path]}
+				<a class:active={$currentLocale === locale} href={path}>{locale}</a>
+			{/each}
+		</nav>
 	</div>
 </header>
 
@@ -40,7 +60,7 @@
 	}
 
 	.corner {
-		width: 3em;
+		display: flex;
 		height: 3em;
 	}
 
@@ -50,6 +70,23 @@
 		justify-content: center;
 		width: 100%;
 		height: 100%;
+		text-transform: uppercase;
+	}
+
+	.corner nav a {
+		position: relative;
+	}
+
+	.corner a.active::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 0;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--accent-color);
 	}
 
 	.corner img {

packages/create-svelte/templates/default/src/lib/i18n.ts

@@ -0,0 +1,29 @@
+import { derived, readable } from 'svelte/store';
+import { page } from '$app/stores';
+import { alternates } from '$app/navigation';
+
+import locales from '../locales';
+
+export const defaultLocale = locales[0];
+
+export const locale = derived(
+	page,
+	(page) => page.url.pathname.match(/^\/([a-z]{2})(\/|$)/)?.[1] || defaultLocale
+);
+
+export const localizedPaths = readable(
+	(path: string): Record<string, string> =>
+		alternates(path)?.reduce((result, alt) => {
+			result[alt.match(/^\/([a-z]{2})(\/|$)/)?.[1] || defaultLocale] = alt;
+			return result;
+		}, {})
+);
+
+export const l = derived(
+	[localizedPaths, locale],
+	([localizedPaths, locale]) =>
+		(path: string): string =>
+			localizedPaths(path)?.[locale] || path
+);
+
+export { l as localize };

packages/create-svelte/templates/default/src/locales.js

@@ -0,0 +1 @@
+export default ['en', 'de'];

packages/create-svelte/templates/default/svelte.config.js

@@ -1,5 +1,6 @@
 import adapter from '@sveltejs/adapter-auto';
 import preprocess from 'svelte-preprocess';
+import { localizeRoutes } from './i18n.config.js';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -16,7 +17,9 @@ const config = {
 		// Override http methods in the Todo forms
 		methodOverride: {
 			allowed: ['PATCH', 'DELETE']
-		}
+		},
+
+		alternateRoutes: localizeRoutes
 	}
 };
 

packages/kit/src/core/create_manifest_data/index.spec.js

@@ -225,6 +225,7 @@ test('disallows rest parameters inside segments', () => {
 
 	assert.equal(routes, [
 		{
+			id: '2',
 			type: 'page',
 			segments: [
 				{