Multilanguage URI is possible?

[rigu]

Hello, There is a way to have different URL for the same page, something like URI alias? Will be useful for multi language site

[jakobrosenberg]

I have toyed with the idea of adding aliases to layouts and pages, but nothing has materialized yet.

I've thought about this pattern in the past, but it would fall short in a language context.

<!-- routify:options alias=["kontakt", "contatto"] -->

---

This feels better, but it's still missing something.

<!-- routify:options alias={"da": "kontakt", "it": "contatto"} -->

---

Rewriting urls at runtime could also be an option

<script>
  import { Router } from '@sveltech/routify'
  import { routes } from '@sveltech/routify/tmp/routes'

/** Danish library example.
  * You would probably want to fetch the dictionary based on browser setting,
  * basepath or a root parameter (`/[lang]/some/page.svelte`) */
  const dictionary = { 
    '/about': '/om',  //this would translate `/about` => `/om` and `/store/about` => `/store/om`
    '/news': '/nyheder', 
    '/contact': '/kontakt',
    '/store/news': '/butik/nyt' //translate based on context
  }

  const re = new regExp(Object.keys(dictionary).join('|'), 'g')

  routes = routes.map(route => ({
    ...route,
    regex: route.regex.replace(re, match => dictionary[match])
  }))
</script>

<Router {routes} />

[alesvaupotic]

We discussed this yesterday on discord and I have just now found this discussion. Should have been more thorough in my research before asking there. I am not opening another issue, rather support the ideas presented here. Integration with svelte-i18n seems straightforward.

[ghostdevv]

Updates on this? @jakobrosenberg

[jakobrosenberg]

If we move it to discussions. Aliases is definitely something we should support, one way or another.

The new $components helper can be helpful here as well. I Might see if I can create an example that uses $components.

[ulvidamirli]

Any news on this? @jakobrosenberg

[jakobrosenberg]

Not yet, @ulvidamirli .

[manutheblacker]

Any news on this?

[jakobrosenberg]

My best suggestion is to run npx stackmix and select the i18n example for multilanguage URI. The example uses the urlTransform option for localization.

The runtime example above can also be used. Here's a small modification of it that allows regex in the dictionary

<script>
import { Router } from '@roxiness/routify'
import { routes } from '../.routify/routes'

/** Danish dictionary example.
* You would probably want to fetch the dictionary based on browser setting,
* basepath or a root parameter (`/[lang]/some/page.svelte`) */
const dictionary = {
  "^/about$": "/om", //this would translate `/about` => `/om` but not `/store/about`
  "/news": "/nyheder",
  "/contact": "/kontakt",
  "/store/news": "/butik/nyt", //translate based on context
};

const reDict = Object.entries(dictionary).map(([source, target]) => ({
  regex: new RegExp(source, "g"),
  target,
}));

const translateRegex = route => 
  reDict.forEach(({regex, target}) => (route.regex = route.regex.replace(regex, target)))

routes.forEach(translateRegex)
</script>

<Router {routes} />