SvelteKit translated route parameters.

[oskar-gmerek]

Hi there,

What I will like to achieve:

route: [lang]/[magic=magic_slug]

/en/magic
/pl/magia
/it/magia
/nl/magie

route: [lang]/[waterfall=waterfall_slug]

/en/waterfall
/pl/wodospad
/it/cascata
/nl/waterval

Keywords magic and waterfall I would like to translate in typesafe-i18n, so the links I will create like:

<a href="/{$post.locale}/{$LL.magic}">{$LL.magic}</a>

and

<a href="/{$post.locale}/{$LL.waterfall}">{$LL.waterfall}</a>

post.locale I will get from outside API or will be hardcoded to specific languages.
keywords magic and waterfall I would like to translate in typesafe-i18n

The problem here is:

If I navigate to /xx/xxx, the route for keyword magic will always be loaded.
To avoid it, I can play with route params and do something like that:

/params/magic_slug.ts

export function match(param: string): boolean {
	
	return /(^magic$){1}|(^magia$){1}|(^magie$){1}/.test(param);
}

This will work. But is not great, not even good if the website will be large.

I would want to ask If there is a better approach for this with typesafe-i18n and SvelteKit.

The best what I came up with is an idea to map an array of translations for a specific key, and then use it in the route param.
Unfortunately, I have no idea how to do it, how to map all translations in typesafe-i18n for a specific key, and how to use that in the route params.

I will be very grateful for a solution or any hints.

Regards,
Oskar

[ivanhofer]

You can take a look at the localeTranslations object in /src/i18n/i18n-util.sync. There you have all translations as a regular JavaScript object. You can iterate over it and map it to the specific structure you need for the locale matcher function.