Multilingual URL Behavior

Multilingual URL Behavior

Techlo’s multilingual system is easy to misread because there are three different layers involved. In the Tina and Sanity editions, settings.multilingual and language.json stay in the project:

1. src/config/language.json
2. settings.multilingual in config.toml
3. helper logic in src/lib/utils/i18nUtils.ts

Language Definitions

The available languages come from:

[
  {
    "languageName": "En",
    "languageCode": "en",
    "contentDir": "english",
    "dir": "ltr",
    "ogLocale": "en_US",
    "dateLocale": "en-US",
    "weight": 1
  },
  {
    "languageName": "Fr",
    "languageCode": "fr",
    "contentDir": "french",
    "dir": "ltr",
    "ogLocale": "fr_FR",
    "dateLocale": "fr-FR",
    "weight": 2
  },
  {
    "languageName": "العربية",
    "languageCode": "ar",
    "contentDir": "arabic",
    "dir": "rtl",
    "ogLocale": "ar_SA",
    "dateLocale": "ar",
    "weight": 3
  }
]

Main Multilingual Settings

In src/config/config.toml:

[settings.multilingual]
  enable               = true
  defaultLanguage      = "en"
  disableLanguages     = [""]
  showDefaultLangInUrl = false

WhatshowDefaultLangInUrl = falseMeans

This is the setting that confuses most people.

When it is false:

• English pages use URLs like /about/
• French pages use URLs like /fr/about/
• Arabic pages use URLs like /ar/about/

When it is true:

• English pages use /en/about/
• French pages use /fr/about/
• Arabic pages use /ar/about/

How Static Paths Are Generated

Techlo uses helper functions like generatePaths() and supportedLanguages from i18nUtils.ts.

Those helpers decide whether the language param becomes:

• undefined for the default language
• or an explicit code such as fr or ar

based on showDefaultLangInUrl.

Localized URLs In Components

Links are usually generated with:

getLocaleUrlCTM("/contact/", Astro.currentLocale)

That helper also:

• keeps external links untouched
• handles mailto: and tel:
• strips .md/.mdx endings
• applies trailing slash behavior

Disabling Multilingual

If you only need one language, the steps differ by edition. In the Astro edition:

1. set settings.multilingual.enable = false in config.toml
2. run npm run toml:watch once
3. run npm run remove-multilingual to remove the extra language content files

Internationalization has the Tina and Sanity steps, and how to turn off one language with disableLanguages.

Practical Editing Advice

If links look wrong after enabling or disabling multilingual mode:

1. check language.json
2. check settings.multilingual in config.toml
3. restart dev so config-derived logic fully refreshes
4. make sure your content exists in the expected language folders (english/, french/, arabic/)