How to change the default language ?

[GoustiFruit]

Hi,

I'm trying to build a blog based on ScrewFast template, a blog that is meant to be only in French, so I'd like to make the French language by default AND to have URLs without /fr in the path. I searched everywhere in the files, modified a number of parameters, but I can't get rid of those /fr and make the website work.
How to do it ?

PS: BTW, there is a small glitch with the dropdown menu, the language box appears on the far-right instead of under the button. But that's secondary, as I will probably remove that button to only have a single language.

[mearashadowfax]

Hi, @GoustiFruit ! You need to modify the astro.config.mjs file located in the root directory. You can remove or comment out these lines to disable the i18n feature:

i18n: {
    defaultLocale: "en",
    locales: ["en", "fr"],
    fallback: {
      fr: "en",
    },
    routing: {
      prefixDefaultLocale: false,
    },
  },

As for the dropdown menu, I didn't notice anything strange. Indeed, they are a bit to the right, aligned with the chevron icon. Here are the screenshots for reference.

[GoustiFruit]

Here is how it looks like in my browser, I guess that it's probably because my display is wider (2560x1440) :

Thank you for you (very fast !) answer. I will come back to confirm if your suggestion is working for me.

[mearashadowfax]

Wow, yep, certainly has something to do with the resolution. Thank you for bringing this up!

[GoustiFruit]

Commenting out the block in astro.config.mjs is bringing an error : i18n Not Enabled
At best, if I modify the defaultLocale parameter in the next section…

    sitemap({
      i18n: {
        defaultLocale: "fr",
        locales: {
          en: "en", // The `defaultLocale` value must present in `locales` keys
          fr: "fr",
        },
      },

…I can see the site in French, so if I simply remove the component LanguagePicker, I should be fine; but I still have the /fr path in the URL. Is it possible to change the default language and have the default URLs ?

[mearashadowfax]

Hm, strange. I'll get back to you when I have news!

[mearashadowfax]

@GoustiFruit If I understand correctly, you want to have the whole site in French, without any other locales. So we need to swap the French and English locales, and remove the latter. In astro.config.mjs, we remove following lines:

 i18n: {
    defaultLocale: "en",
    locales: ["en", "fr"],
    fallback: {
      fr: "en",
    },
    routing: {
      prefixDefaultLocale: false,
    },
  },
...
// And from sitemap
i18n: {
        defaultLocale: "en",
        locales: {
          en: "en", 
          fr: "fr",
        },
      },
    }

In Navbar.astro the component script should look like this:

---
//Import relevant dependencies
import ThemeIcon from "../ThemeIcon.astro";
import NavLink from "../ui/links/NavLink.astro";
import Authentication from "./Authentication.astro";
import frStrings from "@/utils/fr/navigation.ts";
import BrandLogo from "../BrandLogo.astro";


// Select the correct translation based on the page's lang prop:
const strings = frStrings;
const homeUrl = "/";
---
<!-- We removed LanguagePicker, enStrings and adjusted the check of lang prop -->

Same with Footer.astro:

---
// Import the necessary dependencies
import FooterSocialLink from "../ui/links/FooterSocialLink.astro";
import EmailFooterInput from "../ui/forms/input/EmailFooterInput.astro";
import frStrings from "@/utils/fr/navigation.ts";
import Icon from "../ui/icons/Icon.astro";
import BrandLogo from "@/components/BrandLogo.astro";
import { SITE } from "@/data_files/constants";

// Select the correct translation based on the page's lang prop:
const strings =  frStrings;

// Define the variables that will be used in this component
const sectionThreeTitle: string = "Rester à jour";
const sectionThreeContent: string = "Restez informé des derniers outils et des offres exclusives.";
const crafted: string = "Fabriqué par";
---

In utils directory, you change the navigation.ts according to your site structure, without prefixing teh pages:

const navBarLinks = [
  { name: "Accueil", url: "/" },
  { name: "Produits", url: "/products" },
...

That should be it. There are probably more components where we check for locale, eg. const btnTitle = Astro.currentLocale === "fr" ? "Continuer avec Github" : "Continue with Github";, you might need to change them as well, like const btnTitle = "Continuer avec Github";

And either move all French directories up, and remove English ones, or remove French and edit English.

I will think how we can make it easier to maintain, if developers need only one default language.

Please come back to confirm if it worked for you or not.

P.S:

[GoustiFruit]

I followed all of those steps, but still can't make it work.

Don't worry, I'll try again, from fresh, tomorrow 😅

[mearashadowfax]

I've created a separate branch with a monolingual language setup. You can use this branch instead of the main one:
https://github.com/mearashadowfax/ScrewFast/tree/monolingual-site

[GoustiFruit]

I tried to install it directly from the ZIP (and also git cloning), but something was making it crash.
So I installed the main branch with astro, then overwrote the folder with the content of the monolingual-site ZIP. It seems to work now.
Thank you !