DanikVitek/+layout.server.ts

## +layout.server.ts
import type { AvailableLanguageTag } from '@inlang/paraglide-js/website';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = ({ cookies }) => {
    const languageTagCookie = cookies.get('languageTag') as AvailableLanguageTag;
    return { languageTagCookie };
};

## +layout.svelte
<script>
    import '../app.css';

    /** @type {import('./$types').LayoutServerData} */
    export let data;
</script>

<ParaglideJsProviderCSR languageTagCookie={data.languageTagCookie}>
    <!-- ... -->
</ParaglideJsProviderCSR>

## app.html
<!doctype html>
<html data-theme="dark" %lang%>
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        %sveltekit.head%
    </head>
    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>
    </body>
</html>

## hooks.server.ts
import {
    availableLanguageTags,
    sourceLanguageTag,
    type AvailableLanguageTag,
} from '@inlang/paraglide-js/website';
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
    const {
        cookies,
        request: { headers },
    } = event;
    let languageTagCookie = cookies.get('languageTag') as AvailableLanguageTag | undefined;
    if (languageTagCookie === undefined || !availableLanguageTags.includes(languageTagCookie)) {
        const acceptLanguageHeader = headers.get('accept-language');
        const preferredLanguageTag =
            acceptLanguageHeader !== null
                ? availableLanguageTags.find((tag) =>
                      acceptLanguageHeader.includes(tag.split('-')[0])
                  )
                : undefined;
        cookies.set('languageTag', preferredLanguageTag || sourceLanguageTag, { httpOnly: false });
        languageTagCookie = preferredLanguageTag || sourceLanguageTag;
    }
    return resolve(event, {
        transformPageChunk: ({ html }) => html.replace('%lang%', `lang="${languageTagCookie}"`),
    });
};

## ParaglideProviderCSR.svelte
<script>
    import { browser } from '$app/environment';
    import { languageTag, onSetLanguageTag, setLanguageTag } from '@inlang/paraglide-js/website';

    /** @type {import('@inlang/paraglide-js/website').AvailableLanguageTag} */
    export let languageTagCookie;

    setLanguageTag(languageTagCookie);

    // initialize a reactive language tag
    $: _languageTag = languageTag();

    // the server should not listen for language tag changes
    if (browser) {
        onSetLanguageTag((newLanguageTag) => {
            // set the reactive language tag
            _languageTag = newLanguageTag;

            document.cookie = `languageTag=${newLanguageTag}`;
            document.getElementsByTagName('html')[0].setAttribute('lang', newLanguageTag);
        });
    }
</script>

<svelte:head>
    <meta http-equiv="content-language" content={_languageTag} />
</svelte:head>

<!-- trigger a re-render if the language tag changes -->
{#key _languageTag}
    <slot />
{/key}
	import type { AvailableLanguageTag } from '@inlang/paraglide-js/website';
	import type { LayoutServerLoad } from './$types';

	export const load: LayoutServerLoad = ({ cookies }) => {
	const languageTagCookie = cookies.get('languageTag') as AvailableLanguageTag;
	return { languageTagCookie };
	};
	<script>
	import '../app.css';

	/** @type {import('./$types').LayoutServerData} */
	export let data;
	</script>

	<ParaglideJsProviderCSR languageTagCookie={data.languageTagCookie}>
	<!-- ... -->
	</ParaglideJsProviderCSR>
	<!doctype html>
	<html data-theme="dark" %lang%>
	<head>
	<meta charset="utf-8" />
	<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
	<meta name="viewport" content="width=device-width" />
	%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
	<div style="display: contents">%sveltekit.body%</div>
	</body>
	</html>
	import {
	availableLanguageTags,
	sourceLanguageTag,
	type AvailableLanguageTag,
	} from '@inlang/paraglide-js/website';
	import type { Handle } from '@sveltejs/kit';

	export const handle: Handle = async ({ event, resolve }) => {
	const {
	cookies,
	request: { headers },
	} = event;
	let languageTagCookie = cookies.get('languageTag') as AvailableLanguageTag \| undefined;
	if (languageTagCookie === undefined \|\| !availableLanguageTags.includes(languageTagCookie)) {
	const acceptLanguageHeader = headers.get('accept-language');
	const preferredLanguageTag =
	acceptLanguageHeader !== null
	? availableLanguageTags.find((tag) =>
	acceptLanguageHeader.includes(tag.split('-')[0])
	)
	: undefined;
	cookies.set('languageTag', preferredLanguageTag \|\| sourceLanguageTag, { httpOnly: false });
	languageTagCookie = preferredLanguageTag \|\| sourceLanguageTag;
	}
	return resolve(event, {
	transformPageChunk: ({ html }) => html.replace('%lang%', `lang="${languageTagCookie}"`),
	});
	};
	<script>
	import { browser } from '$app/environment';
	import { languageTag, onSetLanguageTag, setLanguageTag } from '@inlang/paraglide-js/website';

	/** @type {import('@inlang/paraglide-js/website').AvailableLanguageTag} */
	export let languageTagCookie;

	setLanguageTag(languageTagCookie);

	// initialize a reactive language tag
	$: _languageTag = languageTag();

	// the server should not listen for language tag changes
	if (browser) {
	onSetLanguageTag((newLanguageTag) => {
	// set the reactive language tag
	_languageTag = newLanguageTag;

	document.cookie = `languageTag=${newLanguageTag}`;
	document.getElementsByTagName('html')[0].setAttribute('lang', newLanguageTag);
	});
	}
	</script>

	<svelte:head>
	<meta http-equiv="content-language" content={_languageTag} />
	</svelte:head>

	<!-- trigger a re-render if the language tag changes -->
	{#key _languageTag}
	<slot />
	{/key}