sveltejs · pzerelles · Apr 14, 2021 · Apr 15, 2021 · Apr 15, 2021 · Apr 15, 2021
diff --git a/documentation/docs/13-configuration.md b/documentation/docs/13-configuration.md
@@ -23,7 +23,8 @@ module.exports = {
 			lib: 'src/lib',
 			routes: 'src/routes',
 			serviceWorker: 'src/service-worker',
-			template: 'src/app.html'
+			template: 'src/app.html',
+			translations: 'src/translations'
 		},
 		host: null,
 		hostHeader: null,

diff --git a/examples/svelte-kit-i18n-demo/.gitignore b/examples/svelte-kit-i18n-demo/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules
+/build
+/.svelte
+/.vercel_build_output
+/workers-site
diff --git a/examples/svelte-kit-i18n-demo/README.md b/examples/svelte-kit-i18n-demo/README.md
@@ -0,0 +1,17 @@
+# svelte-kit-demo
+
+This is a simple app to demonstrate a few different features of SvelteKit, and to ensure that the various adapters are working correctly.
+
+## Deployments
+
+### Vercel
+
+- URL: https://kit-zeta.vercel.app/
+- Info: https://vercel.com/sveltejs/kit
+- Build command: `npm run build:vercel`
+
+### Cloudflare Workers
+
+- URL: https://svelte-kit-demo.halfnelson.workers.dev
+- Build command: `npm run build:cloudflare-workers`
+- Deploy Command: `wrangler publish`
diff --git a/examples/svelte-kit-i18n-demo/package.json b/examples/svelte-kit-i18n-demo/package.json
@@ -0,0 +1,21 @@
+{
+	"name": "svelte-kit-demo",
+	"version": "1.0.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"start": "svelte-kit start",
+		"build:vercel": "ADAPTER=@sveltejs/adapter-vercel OPTIONS={} npm run build",
+		"build:cloudflare-workers": "ADAPTER=@sveltejs/adapter-cloudflare-workers OPTIONS={} npm run build"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-node": "workspace:*",
+		"@sveltejs/adapter-static": "workspace:*",
+		"@sveltejs/adapter-vercel": "workspace:*",
+		"@sveltejs/adapter-cloudflare-workers": "workspace:*",
+		"@sveltejs/kit": "workspace:*",
+		"svelte": "^3.35.0"
+	}
+}
diff --git a/examples/svelte-kit-i18n-demo/src/app.html b/examples/svelte-kit-i18n-demo/src/app.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="%svelte.lang%">
+
+<head>
+	<meta charset="utf-8">
+	<link rel="icon" href="/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	%svelte.head%
+</head>
+
+<body>
+	<div id="svelte">%svelte.body%</div>
+</body>
+
+</html>
diff --git a/examples/svelte-kit-i18n-demo/src/hooks/index.js b/examples/svelte-kit-i18n-demo/src/hooks/index.js
diff --git a/examples/svelte-kit-i18n-demo/src/lib/Nav.svelte b/examples/svelte-kit-i18n-demo/src/lib/Nav.svelte
@@ -0,0 +1,67 @@
+<script>
+	import { page, i18n } from '$app/stores';
+	import { l } from '$app/translations';
+
+	$: path = $page.path;
+</script>
+
+<nav>
+	<div class="main">
+		<a href={$l('/')} sveltekit:prefetch class:active={path === $l('/')}>home</a>
+		<a href={$l('/about')} sveltekit:prefetch class:active={path === $l('/about')}>about</a>
+		<a
+			href={$l('/about/[123]/customer/[test]')}
+			sveltekit:prefetch
+			class:active={path === $l('/about/[123]/customer/[test]')}>param</a
+		>
+		<a href={$l('/blog')} sveltekit:prefetch class:active={path === $l('/blog')}>blog</a>
+	</div>
+	{#if $i18n.locales}
+		<div class="lang">
+			{#each $i18n.locales as { code }}
+				<a
+					href={$i18n.localizedPaths?.[code]}
+					rel="external"
+					class:active={code === $i18n.locale?.code}>{code}</a
+				>
+			{/each}
+		</div>
+	{/if}
+</nav>
+
+<style>
+	nav {
+		border-bottom: 1px solid black;
+		padding: 0 0 1em 0;
+		margin: 0 0 1em 0;
+		display: flex;
+	}
+
+	nav::after {
+		content: '';
+		display: table;
+		clear: both;
+	}
+
+	a {
+		display: block;
+		float: left;
+		color: rgba(0, 0, 0, 0.4);
+		margin: 0 1em 0 0;
+		text-decoration: none;
+	}
+
+	a + a::before {
+		content: '•';
+		color: rgba(0, 0, 0, 0.4);
+		margin: 0 1em 0 0;
+	}
+
+	.active {
+		color: rgba(0, 0, 0, 0.9);
+	}
+
+	.main {
+		flex-grow: 1;
+	}
+</style>
diff --git a/examples/svelte-kit-i18n-demo/src/routes/$layout.svelte b/examples/svelte-kit-i18n-demo/src/routes/$layout.svelte
@@ -0,0 +1,24 @@
+<script context="module">
+	export const prerender = true;
+</script>
+
+<script>
+	import Nav from '$lib/Nav.svelte';
+</script>
+
+<Nav />
+
+<main>
+	<slot />
+</main>
+
+<style>
+	:root {
+		font-family: sans-serif;
+	}
+
+	main {
+		max-width: 40em;
+		margin: 0 auto;
+	}
+</style>
diff --git a/examples/svelte-kit-i18n-demo/src/routes/about/[id]/customer/[property]/index.svelte b/examples/svelte-kit-i18n-demo/src/routes/about/[id]/customer/[property]/index.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { page } from '$app/stores';
+	const { id, property } = $page.params;
+</script>
+
+<h1>Test</h1>
+<div>ID: {id}</div>
+<div>Property: {property}</div>
diff --git a/examples/svelte-kit-i18n-demo/src/routes/about/index.svelte b/examples/svelte-kit-i18n-demo/src/routes/about/index.svelte
@@ -0,0 +1,16 @@
+<script context="module">
+	export const prerender = true;
+</script>
+
+<script>
+	import { prerendering } from '$app/env';
+	import { t } from '$app/translations';
+</script>
+
+<svelte:head>
+	<title>{$t.about}</title>
+</svelte:head>
+
+<h1>{$t.about}</h1>
+<p>this is the about page</p>
+<p>prerendering: {prerendering}</p>
diff --git a/examples/svelte-kit-i18n-demo/src/routes/blog/[slug].json.ts b/examples/svelte-kit-i18n-demo/src/routes/blog/[slug].json.ts
@@ -0,0 +1,13 @@
+import posts from './_posts';
+
+export function get({ params }) {
+	if (params.slug in posts) {
+		return {
+			body: posts[params.slug]
+		};
+	}
+
+	return {
+		status: 404
+	};
+}
diff --git a/examples/svelte-kit-i18n-demo/src/routes/blog/[slug].svelte b/examples/svelte-kit-i18n-demo/src/routes/blog/[slug].svelte
@@ -0,0 +1,25 @@
+<script context="module">
+	export const prerender = true;
+
+	export async function load({ page, fetch }) {
+		const res = await fetch(`/blog/${page.params.slug}.json`);
+		return {
+			props: {
+				post: await res.json()
+			}
+		};
+	}
+</script>
+
+<script>
+	export let post;
+</script>
+
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>
+
+<h1>{post.title}</h1>
+<div class="post">
+	{@html post.body}
+</div>
diff --git a/examples/svelte-kit-i18n-demo/src/routes/blog/_posts.ts b/examples/svelte-kit-i18n-demo/src/routes/blog/_posts.ts
@@ -0,0 +1,14 @@
+export default {
+	'first-post': {
+		title: 'First post!',
+		body: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt arcu elit, sit amet efficitur dolor bibendum quis. Ut et risus urna. Fusce eget luctus tellus. In hac habitasse platea dictumst. Sed vestibulum mauris a turpis lacinia, in elementum lectus cursus. Nulla eleifend ligula eros, id interdum ligula tincidunt ut. Curabitur ac rutrum dolor, vel commodo elit.</p>'
+	},
+	'second-post': {
+		title: 'Second post!',
+		body: '<p>Vestibulum ipsum dolor, dignissim ut sapien a, sollicitudin consequat dui. Pellentesque libero quam, euismod ac nunc nec, commodo facilisis leo. Ut pretium, metus et commodo tincidunt, urna magna scelerisque est, rhoncus dapibus velit sem id quam. Ut sed felis felis. Phasellus justo ipsum, interdum vel erat sed, rhoncus eleifend nunc. Phasellus nulla libero, interdum ac ultricies vitae, maximus nec risus. Cras hendrerit sed lectus id ullamcorper.</p>'
+	},
+	'third-post': {
+		title: 'Third post!',
+		body: '<p>Fusce vitae tincidunt libero. Pellentesque nec efficitur velit. Nunc sit amet efficitur tellus. Etiam velit dui, commodo volutpat condimentum non, venenatis consequat neque. Phasellus lacinia quis felis eu tristique. Sed et tellus mi. Aliquam congue ex vitae elit fermentum, sed elementum lectus euismod. Nam vel rhoncus dui. Nunc vulputate maximus est vitae sodales. Aenean rhoncus at nisl efficitur ultricies. Donec id lectus et leo dignissim mattis. Cras nisi quam, mattis sed felis in, tempor ullamcorper felis.</p>'
+	}
+}
diff --git a/examples/svelte-kit-i18n-demo/src/routes/blog/index.json.ts b/examples/svelte-kit-i18n-demo/src/routes/blog/index.json.ts
@@ -0,0 +1,10 @@
+import posts from './_posts';
+
+export function get() {
+	return {
+		body: Object.keys(posts).map(slug => ({
+			slug,
+			...posts[slug]
+		}))
+	};
+}
diff --git a/examples/svelte-kit-i18n-demo/src/routes/blog/index.svelte b/examples/svelte-kit-i18n-demo/src/routes/blog/index.svelte
@@ -0,0 +1,45 @@
+<script context="module">
+	export const prerender = true;
+
+	export async function load({ fetch }) {
+		const res = await fetch('/blog.json');
+		return {
+			props: {
+				posts: await res.json()
+			}
+		};
+	}
+</script>
+
+<script>
+	export let posts;
+</script>
+
+<svelte:head>
+	<title>Blog</title>
+</svelte:head>
+
+<h1>blog</h1>
+
+<ul>
+	{#each posts as post}
+		<li><a href="/blog/{post.slug}">{post.title}</a></li>
+	{/each}
+</ul>
+
+<style>
+	ul {
+		padding: 0;
+		margin: 0;
+	}
+
+	li {
+		list-style: none;
+	}
+
+	a {
+		display: block;
+		padding: 0.5em 0;
+		border-bottom: 1px solid #999;
+	}
+</style>
diff --git a/examples/svelte-kit-i18n-demo/src/routes/index.svelte b/examples/svelte-kit-i18n-demo/src/routes/index.svelte
@@ -0,0 +1,29 @@
+<script context="module">
+	export const prerender = true;
+</script>
+
+<script>
+	import { t } from '$app/translations';
+</script>
+
+<svelte:head>
+	<title>Home</title>
+</svelte:head>
+
+<h1>Home</h1>
+
+<h2>{$t.welcome('User', 1)}</h2>
+
+<p>This is an example of using Vite for SSR.</p>
+
+<img alt="Svelte logo" src="/logo.svg" />
+
+<style>
+	h1 {
+		font-size: 48px;
+	}
+
+	img {
+		width: 200px;
+	}
+</style>
diff --git a/examples/svelte-kit-i18n-demo/src/translations/de.json b/examples/svelte-kit-i18n-demo/src/translations/de.json
@@ -0,0 +1,9 @@
+{
+	"_routes": {
+		"about": "ueber"
+	},
+	"home": "start",
+	"about": "über",
+	"blog": "blog",
+	"welcome": "$1, willkommen! Du hast {{PLURAL:$2|eine neue Nachricht|$2 neue Nachrichten|12=ein Dutzend neue Nachrichten}} von $1"
+}
diff --git a/examples/svelte-kit-i18n-demo/src/translations/en.json b/examples/svelte-kit-i18n-demo/src/translations/en.json
@@ -0,0 +1,6 @@
+{
+	"home": "home",
+	"about": "about",
+	"blog": "blog",
+	"welcome": "Welcome $1, you have $2 new messages from $1."
+}
diff --git a/examples/svelte-kit-i18n-demo/static/favicon.ico b/examples/svelte-kit-i18n-demo/static/favicon.ico
diff --git a/examples/svelte-kit-i18n-demo/static/logo.svg b/examples/svelte-kit-i18n-demo/static/logo.svg
diff --git a/examples/svelte-kit-i18n-demo/static/robots.txt b/examples/svelte-kit-i18n-demo/static/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/examples/svelte-kit-i18n-demo/svelte.config.cjs b/examples/svelte-kit-i18n-demo/svelte.config.cjs
@@ -0,0 +1,23 @@
+const adapter = require(process.env.ADAPTER || '@sveltejs/adapter-node');
+const options = JSON.stringify(process.env.OPTIONS || '{}');
+
+module.exports = {
+	kit: {
+		adapter: adapter(options),
+		target: '#svelte',
+		i18n: {
+			defaultLocale: 'de',
+			fallbackLocale: 'en',
+			locales: [
+				{
+					code: 'de',
+					iso: 'de-DE'
+				},
+				{
+					code: 'en',
+					iso: 'en-GB'
+				}
+			]
+		}
+	}
+};
diff --git a/examples/svelte-kit-i18n-demo/wrangler.toml b/examples/svelte-kit-i18n-demo/wrangler.toml
@@ -0,0 +1,10 @@
+name = "svelte-kit-demo"
+type = "webpack"
+account_id = "f60df21486a4f0e5dbd85493882f1d53"
+workers_dev = true
+route = ""
+zone_id = ""
+
+[site]
+bucket = "./build"
+entry-point = "./workers-site"