diff --git a/src/hooks.ts b/src/hooks.ts index 4a0fa2e87..53b6d07f2 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -18,6 +18,36 @@ export const handle = handleSession( }, async function ({ event, resolve }) { let response; + let locale; + + const { url, request } = event; + const { pathname } = url; + + // If this request is a route request + if (routeRegex.test(pathname)) { + // Get defined locales + const supportedLocales = locales.get(); + + // Try to get locale from `pathname`. + locale = supportedLocales.find( + (l) => `${l}`.toLowerCase() === `${pathname.match(/[^/]+?(?=\/|$)/)}`.toLowerCase() + ); + + if (!locale) { + // Get user preferred locale + locale = `${`${request.headers.get('accept-language')}`.match(/[a-zA-Z-]+?(?=_|,|;)/)}`; + + // Set default locale if user preferred locale does not match + if (!supportedLocales.includes(locale)) locale = 'en-US'; + + // 302 redirect + return new Response(undefined, { + headers: { location: `/${locale}${pathname}` }, + status: 302 + }); + } + } + try { if (event.locals.cookies) { if (event.locals.cookies['kit.session']) { @@ -40,7 +70,6 @@ export const handle = handleSession( ssr: !event.url.pathname.startsWith('/webhooks/success') }); } catch (error) { - console.log(error); response = await resolve(event, { ssr: !event.url.pathname.startsWith('/webhooks/success') }); @@ -67,40 +96,9 @@ export const handle = handleSession( ); } - const { url, request } = event; - const { pathname } = url; - - // If this request is a route request - if (routeRegex.test(pathname)) { - // Get defined locales - const supportedLocales = locales.get(); - - // Try to get locale from `pathname`. - let locale = supportedLocales.find( - (l) => `${l}`.toLowerCase() === `${pathname.match(/[^/]+?(?=\/|$)/)}`.toLowerCase() - ); - - // If route locale is not supported - if (!locale) { - // Get user preferred locale - locale = `${`${request.headers['accept-language']}`.match( - /[a-zA-Z]+?(?=-|_|,|;)/ - )}`.toLowerCase(); - - // Set default locale if user preferred locale does not match - if (!supportedLocales.includes(locale)) locale = 'en'; - - // 301 redirect - return new Response(undefined, { - headers: { location: `/${locale}${pathname}` }, - status: 301 - }); - } - - // Add html `lang` attribute + if (locale && response.headers.get('content-type') === 'text/html') { const body = await response.text(); - - return new Response(`${body}`.replace(//, ``), response); + return new Response(body.replace(//, ``), response); } return response; diff --git a/src/lib/lang.json b/src/lib/lang.json index b01c522bb..082405899 100644 --- a/src/lib/lang.json +++ b/src/lib/lang.json @@ -1,4 +1,4 @@ { - "en": "English", - "fr": "Français" + "en-US": "English", + "fr-FR": "Français" } diff --git a/src/lib/translations.ts b/src/lib/translations.ts index 299c8a75b..cfa5398ab 100644 --- a/src/lib/translations.ts +++ b/src/lib/translations.ts @@ -3,19 +3,19 @@ import lang from './lang.json'; /** @type {import('sveltekit-i18n').Config} */ export const config = { - fallbackLocale: 'en', + fallbackLocale: 'en-US', translations: { - en: { lang }, - fr: { lang } + 'en-US': { lang }, + 'fr-FR': { lang } }, loaders: [ { - locale: 'en', + locale: 'en-US', key: '', loader: async () => (await import('../../static/locales/en.json')).default }, { - locale: 'fr', + locale: 'fr-FR', key: '', loader: async () => (await import('../../static/locales/fr.json')).default } diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 1cc8f8198..abb230389 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -1,7 +1,7 @@