-
-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5c3c09a
commit 004d323
Showing
23 changed files
with
249 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
.DS_Store | ||
node_modules | ||
build | ||
.svelte-kit | ||
package | ||
.env | ||
.env.* | ||
!.env.example |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
[![Netlify Status](https://api.netlify.com/api/v1/badges/c5bbe5c2-c9b9-4175-aa68-fd4aec778589/deploy-status)](https://app.netlify.com/sites/multi-page-example/deploys) | ||
|
||
# Multi-page app | ||
In this app, translations are loaded dynamically according to user navigation and `$locale` change. It has built-in mechanism to prevent duplicit (server and client) translation load on app enter. It's useful, when you are fetching your translations from remote API, or using other data-expensive solution. | ||
|
||
## Preview | ||
You can view this demo live on [Netlify](https://multi-page-example.netlify.app). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"extends": "./.svelte-kit/tsconfig.json" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
[build] | ||
command = "cd ../../ && npm run build && npm run build --workspace locale-param" | ||
publish = "build" | ||
[functions] | ||
node_bundler = "esbuild" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
{ | ||
"name": "locale-param", | ||
"version": "0.0.1", | ||
"scripts": { | ||
"dev": "vite dev", | ||
"build": "vite build", | ||
"package": "svelte-kit package", | ||
"preview": "vite preview", | ||
"prepare": "svelte-kit sync" | ||
}, | ||
"devDependencies": { | ||
"@sveltejs/adapter-netlify": "^2.0.7", | ||
"@sveltejs/kit": "^1.22.1", | ||
"svelte": "^4.0.5", | ||
"vite": "^4.4.2" | ||
}, | ||
"type": "module", | ||
"dependencies": { | ||
"sveltekit-i18n": "file:../../" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="description" content="" /> | ||
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
%sveltekit.head% | ||
</head> | ||
|
||
<body> | ||
<div>%sveltekit.body%</div> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"title": "O této aplikaci", | ||
"text": "<p>Toto je <a href=\"https://kit.svelte.dev\">SvelteKit</a> aplikace. Můžete si vytvořit svou vlastní vložením následujícího příkazu do příkazové řádky:</p><pre>npm init svelte@next</pre> <p> Tato stránka je čistě statické HTML, bez nutnosti klientské interakce. Díky tomu není potřeba načítat žádný JavaScript. Zkuste zobrazit drojový kód stránky, nebo otevřete vývojářské nástroje a znovu načtěte stránku.</p>" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"title": "Vítejte ve SvelteKit", | ||
"text": "Dokumentace je k přečtení na <a href=\"{{link}}\">kit.svelte.dev</a>" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"home": "Domů", | ||
"about": "O nás", | ||
"notification": "{{count:gt; 0:Máte {{count}} {{count:gte; 1:novou zprávu; 2:nové zprávy; 5:nových zpráv}}!; default:Nemáte žádné zprávy...}}" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"title": "About this app", | ||
"text": "<p>This is a <a href=\"https://kit.svelte.dev\">SvelteKit</a> app. You can make your own by typing the following into your command line and following the prompts:</p><pre>npm init svelte@next</pre> <p> The page you're looking at is purely static HTML, with no client-side interactivity needed. Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening the devtools network panel and reloading. </p>" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"title": "Welcome to SvelteKit", | ||
"text": "Visit <a href=\"{{link}}\">kit.svelte.dev</a> to read the documentation" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"home": "Home", | ||
"about": "About", | ||
"notification": "You have {{count:gt; 0:{{count}} new {{count; 1:message; default:messages}}!; default:no messages...}}" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import i18n from 'sveltekit-i18n'; | ||
import { dev } from '$app/environment'; | ||
import lang from './lang.json'; | ||
|
||
export const defaultLocale = 'en'; | ||
|
||
/** @type {import('sveltekit-i18n').Config} */ | ||
export const config = { | ||
log: { | ||
level: dev ? 'warn' : 'error', | ||
}, | ||
translations: { | ||
en: { lang }, | ||
cs: { lang }, | ||
}, | ||
loaders: [ | ||
{ | ||
locale: 'en', | ||
key: 'menu', | ||
loader: async () => (await import('./en/menu.json')).default, | ||
}, | ||
{ | ||
locale: 'en', | ||
key: 'about', | ||
routes: ['/about'], | ||
loader: async () => (await import('./en/about.json')).default, | ||
}, | ||
{ | ||
locale: 'en', | ||
key: 'home', | ||
routes: ['/'], | ||
loader: async () => (await import('./en/home.json')).default, | ||
}, | ||
{ | ||
locale: 'cs', | ||
key: 'menu', | ||
loader: async () => (await import('./cs/menu.json')).default, | ||
}, | ||
{ | ||
locale: 'cs', | ||
key: 'about', | ||
routes: ['/about'], | ||
loader: async () => (await import('./cs/about.json')).default, | ||
}, | ||
{ | ||
locale: 'cs', | ||
key: 'home', | ||
routes: ['/'], | ||
loader: async () => (await import('./cs/home.json')).default, | ||
}, | ||
], | ||
}; | ||
|
||
export const { t, loading, locales, locale, translations, loadTranslations, addTranslations, setLocale, setRoute } = new i18n(config); | ||
|
||
loading.subscribe(($loading) => $loading && console.log('Loading translations...')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"en": "English", | ||
"cs": "Česky" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { addTranslations, setLocale, setRoute } from '$lib/translations'; | ||
|
||
/** @type {import('@sveltejs/kit').Load} */ | ||
export const load = async ({ data }) => { | ||
const { i18n, translations } = data; | ||
const { locale, route } = i18n; | ||
|
||
addTranslations(translations); | ||
|
||
await setRoute(route); | ||
await setLocale(locale); | ||
|
||
return i18n; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { loadTranslations, translations, defaultLocale } from '$lib/translations'; | ||
|
||
/** @type {import('@sveltejs/kit').ServerLoad} */ | ||
export const load = async ({ url, cookies }) => { | ||
const { pathname, searchParams } = url; | ||
|
||
const initLocale = searchParams.get('lang') || cookies.get('locale') || defaultLocale; | ||
|
||
cookies.set('locale', initLocale); | ||
|
||
await loadTranslations(initLocale, pathname); // keep this just before the `return` | ||
|
||
return { | ||
i18n: { locale: initLocale, route: pathname }, | ||
translations: translations.get(), | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<script> | ||
import { page } from '$app/stores'; | ||
import { goto } from '$app/navigation'; | ||
import { t, locale, locales } from '$lib/translations'; | ||
$: count = 2; | ||
</script> | ||
|
||
<a href="/">{$t('menu.home')}</a> | ||
<a href="/about">{$t('menu.about')}</a> | ||
<br/> | ||
<br/> | ||
{$t('menu.notification', { count })}<br /> | ||
<button on:click="{() => {if (count) count -= 1;}}">–</button> | ||
<button on:click="{() => {count += 1;}}">+</button> | ||
<hr /> | ||
<slot /> | ||
<br /> | ||
<br /> | ||
<br /> | ||
<br /> | ||
<select on:change="{({ currentTarget }) => goto(new URL(`?lang=${currentTarget.value}`, `${$page.url.href}`))}" > | ||
{#each $locales as value} | ||
<option value="{value}" selected={value === $locale}>{$t(`lang.${value}`)}</option> | ||
{/each} | ||
</select> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<script> | ||
import { t } from '$lib/translations'; | ||
const link = 'https://kit.svelte.dev'; | ||
</script> | ||
|
||
<h1>{$t('home.title')}</h1> | ||
<p>{@html $t('home.text', { link })}</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<script> | ||
import { t } from '$lib/translations'; | ||
</script> | ||
|
||
<h1>{$t('about.title')}</h1> | ||
<p>{@html $t('about.text')}</p> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import adapter from '@sveltejs/adapter-netlify'; | ||
|
||
/** @type {import('@sveltejs/kit').Config} */ | ||
const config = { | ||
kit: { | ||
adapter: adapter(), | ||
}, | ||
}; | ||
|
||
export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { sveltekit } from '@sveltejs/kit/vite'; | ||
import { defineConfig } from 'vite'; | ||
|
||
export default defineConfig({ | ||
plugins: [sveltekit()], | ||
}); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.