dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Change the way to load i18n (go throw cookie)

Browse Source
This commit is contained in:
Restray
2022-04-02 20:25:24 +02:00
parent 943300509b
commit a3241516cb
11 changed files with 142 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/hooks.ts
View File

@@ -6,6 +6,7 @@ import { getUserDetails, sentry } from '$lib/common';
import { version } from '$lib/common';
import cookie from 'cookie';
import { dev } from '$app/env';
import { locales } from '$lib/translations';
export const handle = handleSession(
{
@@ -15,6 +16,29 @@ export const handle = handleSession(
},
async function ({ event, resolve }) {
let response;
const { url, request } = event;
const { pathname } = url;
// Get defined locales
const supportedLocales = locales.get();
let locale;
if (event.locals.cookies) {
locale = supportedLocales.find(
(l) => `${l}`.toLowerCase() === `${event.locals.cookies['lang']}`.toLowerCase()
);
}
if (!locale) {
locale = `${`${request.headers.get('accept-language')}`.match(
/[a-zA-Z]+?(?=-|_|,|;)/
)}`.toLowerCase();
// Set default locale if user preferred locale does not match
if (!supportedLocales.includes(locale)) locale = 'en';
}
try {
if (event.locals.cookies) {
if (event.locals.cookies['kit.session']) {
@@ -24,7 +48,8 @@ export const handle = handleSession(
teamId,
permission,
isAdmin: permission === 'admin' || permission === 'owner',
expires: event.locals.session.data.expires
expires: event.locals.session.data.expires,
lang: locale
};
if (JSON.stringify(event.locals.session.data) !== JSON.stringify(newSession)) {
@@ -34,12 +59,14 @@ export const handle = handleSession(
}
response = await resolve(event, {
ssr: !event.url.pathname.startsWith('/webhooks/success')
ssr: !event.url.pathname.startsWith('/webhooks/success'),
transformPage: ({ html }) => html.replace(/<html.*>/, `<html lang="${locale}">`)
});
} catch (error) {
console.log(error);
response = await resolve(event, {
ssr: !event.url.pathname.startsWith('/webhooks/success')
ssr: !event.url.pathname.startsWith('/webhooks/success'),
transformPage: ({ html }) => html.replace(/<html.*>/, `<html lang="${locale}">`)
});
response.headers.append(
'Set-Cookie',
@@ -62,9 +89,18 @@ export const handle = handleSession(
expires: new Date('Thu, 01 Jan 1970 00:00:01 GMT')
})
);
} finally {
return response;
}
response.headers.append(
'Set-Cookie',
cookie.serialize('lang', locale, {
path: '/',
sameSite: 'strict',
maxAge: 30 * 24 * 60 * 60
})
);
return response;
}
);

4
src/lib/lang.json Normal file
View File

@@ -0,0 +1,4 @@
{
"fr": "Français",
"en": "English"
}

28
src/lib/translations.ts Normal file
View File

@@ -0,0 +1,28 @@
import i18n from 'sveltekit-i18n';
import lang from './lang.json';
/** @type {import('sveltekit-i18n').Config} */
const config = {
defaultLocale: 'en',
fallbackLocale: 'en',
translations: {
en: { lang },
fr: { lang }
},
loaders: [
{
locale: 'en',
key: '',
loader: async () => (await import('../../static/locales/en.json')).default
},
{
locale: 'fr',
key: '',
loader: async () => (await import('../../static/locales/fr.json')).default
}
]
};
export const { t, locale, locales, loading, loadTranslations } = new i18n(config);
loading.subscribe(($loading) => $loading && console.log('Loading translations...'));

7
src/routes/__error.svelte
View File

@@ -12,7 +12,8 @@
</script>
<script>
import { _ } from 'svelte-i18n';
import { t } from '$lib/translations';
export let status;
export let error;
</script>
@@ -21,8 +22,8 @@
<div class="pb-10 text-7xl font-bold">{status}</div>
<div class="text-3xl font-bold">Ooops you are lost! But don't be afraid!</div>
<div class="text-xl">
{$_('error.you_can_find_your_way_back')}
<a href="/" class="font-bold uppercase text-sky-400">{$_('error.here')}</a>
{$t('error.you_can_find_your_way_back')}
<a href="/" class="font-bold uppercase text-sky-400">{$t('error.here')}</a>
</div>
<div class="py-10 text-xs font-bold">
<pre

32
src/routes/__layout.svelte
View File

@@ -1,6 +1,7 @@
<script context="module" lang="ts">
import type { Load } from '@sveltejs/kit';
import { publicPaths } from '$lib/settings';
import { locale, loadTranslations } from '$lib/translations';
export const load: Load = async ({ fetch, url, session }) => {
if (!session.userId && !publicPaths.includes(url.pathname)) {
@@ -15,6 +16,12 @@
const endpoint = `/teams.json`;
const res = await fetch(endpoint);
const { pathname } = url;
const defaultLocale = session.lang;
const initLocale = locale.get() || defaultLocale;
await loadTranslations(initLocale, pathname);
if (res.ok) {
return {
props: {
@@ -23,6 +30,7 @@
}
};
}
return {};
};
</script>
@@ -38,18 +46,8 @@
import { errorNotification } from '$lib/form';
import { asyncSleep } from '$lib/components/common';
import { del, get, post } from '$lib/api';
import { register, init, _, getLocaleFromNavigator } from 'svelte-i18n';
async function setup() {
register('en', () => import('../../static/locales/en.json'));
return await Promise.allSettled([
// TODO: add some more stuff you want to init ...
init({ initialLocale: getLocaleFromNavigator(), fallbackLocale: 'en' })
]);
}
const setupResult = setup();
import { browser } from '$app/env';
import { loading, t } from '$lib/translations';
let isUpdateAvailable = false;
@@ -115,7 +113,7 @@
return window.location.reload();
} else {
await post(`/update.json`, { type: 'update', latestVersion });
toast.push(`${$_('layout.update_done')}<br><br>${$_('layout.wait_new_version_startup')}`);
toast.push(`${$t('layout.update_done')}<br><br>${$t('layout.wait_new_version_startup')}`);
let reachable = false;
let tries = 0;
do {
@@ -129,7 +127,7 @@
if (reachable) break;
tries++;
} while (!reachable || tries < 120);
toast.push($_('layout.new_version'));
toast.push($t('layout.new_version'));
updateStatus.loading = false;
updateStatus.success = true;
await asyncSleep(3000);
@@ -147,7 +145,7 @@
<title>Coolify</title>
</svelte:head>
{#await setupResult}
{#await loading}
Please wait...
{:then}
<SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} />
@@ -336,7 +334,7 @@
{#if isUpdateAvailable}
<button
disabled={updateStatus.success === false}
title={$_('layout.update_available')}
title={$t('layout.update_available')}
on:click={update}
class="icons tooltip-right bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
>
@@ -534,7 +532,7 @@
bind:value={selectedTeamId}
on:change={switchTeam}
>
<option value="" disabled selected>{$_('layout.switch_to_a_different_team')}</option>
<option value="" disabled selected>{$t('layout.switch_to_a_different_team')}</option>
{#each teams as team}
<option value={team.teamId}>{team.team.name} - {team.permission}</option>
{/each}

4
src/routes/index.svelte
View File

@@ -20,6 +20,8 @@
</script>
<script lang="ts">
import { t } from '$lib/translations';
export let applicationsCount: number;
export let sourcesCount: number;
export let destinationsCount: number;
@@ -29,7 +31,7 @@
</script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">Dashboard</div>
<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div>
</div>
<div class="mt-10 pb-12 tracking-tight sm:pb-16">