(baseLocale, locales, ...detectors)
41 |
--------------------------------------------------------------------------------
/src/i18n/it/index.ts:
--------------------------------------------------------------------------------
1 | import type { Translation } from '../i18n-types'
2 |
3 | const it = {
4 | title: 'typesafe-i18n - Svelte Summit Autunno {year}',
5 | welcome: 'Benvenuti al Svelte Summit Autunno {year}',
6 | spectators: '{0} {{spettatore|spettatori}} in diretta',
7 | summit: {
8 | schedule: '{0|simpleDate}',
9 | },
10 | log: `Questa protocollazione è stata chiamata da '{fileName}'`,
11 | } satisfies Translation
12 |
13 | export default it
14 |
--------------------------------------------------------------------------------
/src/lib/HeadHrefLangs.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | {#each locales as l}
8 |
9 | {/each}
10 |
11 |
--------------------------------------------------------------------------------
/src/lib/Header.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
14 |
--------------------------------------------------------------------------------
/src/lib/LocaleSwitcher.svelte:
--------------------------------------------------------------------------------
1 |
42 |
43 |
44 |
45 |
46 | {#each locales as l}
47 | -
48 |
49 | {l}
50 |
51 |
52 | {/each}
53 |
54 |
--------------------------------------------------------------------------------
/src/params/lang.ts:
--------------------------------------------------------------------------------
1 | import type { ParamMatcher } from '@sveltejs/kit'
2 | import { isLocale } from '$i18n/i18n-util'
3 |
4 | // only accept valid languages as a segment in the URL
5 | export const match: ParamMatcher = (param) => {
6 | return isLocale(param)
7 | }
8 |
--------------------------------------------------------------------------------
/src/routes/+layout.server.ts:
--------------------------------------------------------------------------------
1 | import type { LayoutServerLoad } from './$types'
2 |
3 | export const load: LayoutServerLoad = ({ locals: { locale, LL } }) => {
4 | console.info(LL.log({ fileName: '+layout.server.ts' }))
5 |
6 | // pass locale information from "server-context" to "shared server + client context"
7 | return { locale }
8 | }
9 |
--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | {$page.data.title || 'typesafe-i18n'}
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | import type { LayoutLoad } from './$types'
2 | import type { Locales } from '$i18n/i18n-types'
3 | import { loadLocaleAsync } from '$i18n/i18n-util.async'
4 | import { i18nObject } from '$i18n/i18n-util.js'
5 |
6 | export const load: LayoutLoad<{ locale: Locales }> = async ({ data: { locale } }) => {
7 | // load dictionary into memory
8 | await loadLocaleAsync(locale)
9 | // if you need to output a localized string in a `load` function,
10 | // you always need to create a new `i18nObject` instance in each `load` function
11 | // to not run into shared server state issues
12 | const LL = i18nObject(locale)
13 |
14 | console.info(LL.log({ fileName: '+layout.ts' }))
15 |
16 | // pass locale to the "rendering context"
17 | return { locale }
18 | }
19 |
--------------------------------------------------------------------------------
/src/routes/[lang=lang]/+page.server.ts:
--------------------------------------------------------------------------------
1 | import type { PageServerLoad } from './$types'
2 |
3 | export const load: PageServerLoad = ({ locals: { LL } }) => {
4 | console.info(LL.log({ fileName: '+page.server.ts' }))
5 | }
6 |
--------------------------------------------------------------------------------
/src/routes/[lang=lang]/+page.svelte:
--------------------------------------------------------------------------------
1 |
25 |
26 |
27 | {$LL.welcome({ year: 2021 })}
28 |
29 |
30 |
31 | {$LL.summit.schedule(day)}
32 |
33 |
34 |
35 | {$LL.spectators(spectators)}
36 |
37 |
--------------------------------------------------------------------------------
/src/routes/[lang=lang]/+page.ts:
--------------------------------------------------------------------------------
1 | import type { PageLoad } from './$types'
2 | import { i18nObject } from '$i18n/i18n-util.js'
3 |
4 | export const load: PageLoad = async ({ parent }) => {
5 | // wait for `+layout.ts` to load dictionary and pass locale information
6 | const { locale } = await parent()
7 | // if you need to output a localized string in a `load` function,
8 | // you always need to create a new `i18nObject` instance in each `load` function
9 | // to not run into shared server state issues
10 | const LL = i18nObject(locale)
11 |
12 | console.info(LL.log({ fileName: '+page.ts' }))
13 |
14 | return {
15 | title: LL.title({ year: 2021 }),
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/routes/api/spectators/+server.ts:
--------------------------------------------------------------------------------
1 | import { json } from '@sveltejs/kit'
2 | import type { RequestHandler } from './$types'
3 |
4 | export const GET: RequestHandler = async ({ url, locals: { LL } }) => {
5 | // no real data, just a simulation ;)
6 | const oldSpectators = Number(url.searchParams.get('oldSpectators') ?? '0')
7 | let spectators = oldSpectators * 2 + 1
8 | if (spectators > 100_000) {
9 | spectators = 0
10 | }
11 |
12 | console.info(LL.log({ fileName: 'api/+server.ts' }))
13 |
14 | return json({ spectators })
15 | }
16 |
--------------------------------------------------------------------------------
/src/styles/global.scss:
--------------------------------------------------------------------------------
1 | :root[lang='ar'] {
2 | direction: rtl;
3 | }
4 |
5 | * {
6 | box-sizing: border-box;
7 | }
8 |
9 | body {
10 | margin: 0;
11 | padding: 0;
12 | font-family: Arial, Helvetica, sans-serif;
13 | background-color: #ff3e001a;
14 | overscroll-behavior: none;
15 | }
16 |
17 | header {
18 | background-color: white;
19 | height: 100px;
20 | display: flex;
21 | justify-content: space-between;
22 | align-items: center;
23 | padding: 1rem 2rem;
24 | font-family: monospace;
25 |
26 | >a {
27 | text-decoration: none;
28 | }
29 |
30 | ul {
31 | list-style-type: none;
32 | display: flex;
33 | gap: 0.5rem;
34 |
35 | li>a {
36 | all: initial;
37 | cursor: pointer;
38 | padding: 0.5rem;
39 | color: #444;
40 |
41 | &.active {
42 | color: #ff3e00;
43 | border-bottom: 1px solid;
44 | }
45 | }
46 | }
47 | }
48 |
49 | h1 {
50 | color: #ff3e00;
51 | }
52 |
53 | h2 {
54 | margin: 5rem;
55 | text-align: center;
56 | }
57 |
58 | h3 {
59 | margin: 5rem;
60 | text-align: center;
61 | }
62 |
63 | main {
64 | padding: 1rem 2rem;
65 | overflow: hidden;
66 | color: #444;
67 | }
68 |
69 | nav {
70 | display: flex;
71 | justify-content: space-between;
72 | align-items: center;
73 | position: absolute;
74 | bottom: 0;
75 | left: 0;
76 | right: 0;
77 | padding: 1rem;
78 | }
79 |
80 | .spectators {
81 | text-align: center;
82 | }
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | // Replaces the locale slug in a URL.
2 | //
3 | // If the `full` argument is set to `true`, the full URL is returned as a string.
4 | // e.g. https://mywebsite.com/en/blog/article-1 => https://mywebsite.com/de/blog/article-1
5 | //
6 | // Otherwise (default) the URL relative to the base is returned.
7 |
8 | import { base } from '$app/paths'
9 |
10 | // e.g. https://mywebsite.com/en/blog/article-1 => /de/blog/article-1
11 | export const replaceLocaleInUrl = (url: URL, locale: string, full = false): string => {
12 | const [, , ...rest] = getPathnameWithoutBase(url).split('/')
13 | const new_pathname = `/${[locale, ...rest].join('/')}`
14 | if (!full) {
15 | return `${new_pathname}${url.search}`
16 | }
17 | const newUrl = new URL(url.toString())
18 | newUrl.pathname = base + new_pathname
19 | return newUrl.toString()
20 | }
21 |
22 | // ----------------------------------------------------------------------------
23 |
24 | const REGEX_START_WITH_BASE = new RegExp(`^${base}`)
25 |
26 | export const getPathnameWithoutBase = (url: URL) => url.pathname.replace(REGEX_START_WITH_BASE, '')
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivanhofer/typesafe-i18n-demo-sveltekit/202b5dd4cfbda3587b22549f3a6384f42814530a/static/favicon.png
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import { vitePreprocess } from '@sveltejs/kit/vite';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 |
10 | kit: {
11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter.
13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters.
14 | adapter: adapter(),
15 | alias: {
16 | $i18n: 'src/i18n',
17 | },
18 | }
19 | };
20 |
21 | export default config;
22 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true
12 | }
13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | //
15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | // from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 |
4 | export default defineConfig({
5 | plugins: [sveltekit()]
6 | });
7 |
--------------------------------------------------------------------------------