Generated translatable URLs

[pepa-linha]

It would be nice to be able to generate translated urls. Thanks to the reroute hook (in hooks.ts) we can have translated routes for different languages, but I don't see a way to generate these translated addresses with route.

Describe the solution you'd like

The third parameter of this function could be a setting where I would choose the locale for the translation and then it could theoretically work, right

<a href={route("/contact", null, { locale: "en" })}>Contact</a>

generates <a href="/en/contact">Contact</a>

but <a href={route("/contact", null, { locale: "cs" })}>Kontakt</a>

generates <a href="/cs/kontakt">Kontakt</a>

Of course it would be nice if I didn't have to pass a locale to each route call, the question is how to implement this, everyone can manage locales differently.

Additional context

https://kit.svelte.dev/docs/hooks#universal-hooks

[jycouet]

Thank you for the question, let's see how to tackle this.

First off, you need to store all raw information somewhere /contact, Contact, /kontakt, Kontakt, en, cs, and it needs to be linked somehow. (also maybe a language is "neutral" or "fallback"?). & You need some info in src/hooks.js.

I see that in your example, the locale is not displayed in the url, but in a lot of cases, it's displayed. (So probably the two use cases should be handle)

With all this, I'm not sure it should be core of vite-plugin-kit-routes, but things are possible :)

1/ Today in vite-plugin-kit-routes

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

<a href={route('/site', { lang: $page.params.lang })}>Site</a> |

I would even suggest that you do a component on your side, handling the reactivity of $page.params.lang

2/ Extend vite-plugin-kit-routes

I started to play with pseudo code to give an idea

import { route, type KIT_ROUTES } from './ROUTES.js'

// Your supported languages _(we could imagine also translation of the label here... I don't know)_
type langs = { en: string; cs: string }

// With this type, you are sure that you will not miss any translation! 
// When you add a page, it will complain that this new page is not translated. Kinda nice :)
const translatedRoutes: Record<keyof KIT_ROUTES['PAGES'], langs> = {
  '/main': {
    en: '/main',
    cs: '/main-in-cs',
  },
}

type RouteArgs = Parameters<typeof route>

export const routei18n = (lang: keyof langs, args: RouteArgs) => {
  return translatedRoutes[route(...args)][lang]
}

I didn't test it at all, don't ship this to prod 😅 It's just to give ideas, let me know if you manage something nice.

Side note: here you ship all the time everything to the browser. It's ok on a small website, but I'm not sure it's the best pratice. Should be good in a lot of cases!

3/ Proper i18n full end to end solution ?

inlang seems a very good solution for that. Disclaimer: I never used it! My Apps are ONLY in French 😅 And I'm pretty sure it's possible to couple it with vite-plugin-kit-routes 🤞

Here is a nice article about it: https://inlang.com/m/dxnzrydw/library-inlang-paraglideJsAdapterSvelteKit shared by @LorisSigrist (hope we can maybe link to each other one day)

[pepa-linha]

Thank you for answer!

I fixed the URL to include the languages - that was more of a bug (I can imagine that for the default language there won't be a language in the URL).

I will investigate later.

[jycouet]

@pepa-linha should we close the issue?