ivanhofer/typesafe-i18n-demo-sveltekit

Suggestion for additional example

Closed this issue · 6 comments

beeb commented

Hey, thanks a lot for this! I was able to implement typesafe-i18n really quickly for my latest SvelteKit project.

One thing I didn't find in this example repo is how to handle the HTML <head><title/></head> tag.

In my +layout.svelte I do the following:

<script lang="ts">
import { page } from '$app/stores'
</script>

<svelte:head>
	<title>{$page.data.title}</title>
</svelte:head>

Which gets populated in my [lang]/+page.ts:

import type { PageLoad } from './$types'
import LL, { setLocale } from '$i18n/i18n-svelte'
import { get } from 'svelte/store'

export const load: PageLoad = async ({ parent }) => {
	const { locale } = await parent()
	setLocale(locale)
	const $LL = get(LL)
	return {
		title: $LL.title()
	}
}

But it only gets updated on full page reload. It would be nice if the title could update during the navigation through <LocaleSwitcher /> and I don't know how to implement it.

Thanks!

ivanhofer commented

Hi @beeb,
indeed this would be a nice addition. Would you like to create a PR and add some page titles?

Regarding the title not updating, this sounds related to this issue: sveltejs/kit#8157

  • 👍1
beeb commented

Yep I'll try to find some time tomorrow to submit a PR. If it's an upstream bug in kit then nothing to do here I guess! Thanks

beeb commented

I have been playing a bit with typesafe-i18n and I think I can change a few things in this example. Do you want a separate PR for each modification or can I batch everything into one?

ivanhofer commented

I would prefer separate PRs. Thanks!

ivanhofer commented

Thanks for all the PRs!

beeb commented

No worries, least I can do since I'm using your awesome library!

  • ❤️1