Index routes are not taken into account

[BuckyBuck135]

Hi there!
I'm having a bit of an issue setting up localized URLs. I read the relevant config page, but I can't get to work.

Config

//astro.config.mjs
i18n({
      defaultLocale: "fr",
      locales: ["fr", "en"],
      pages: {
        "/portfolio/[slug]": {
            fr: "/nos-realisations/[slug]",
            en: "/our-work/[slug]"
        },
        "/about": {
            fr: "/a-propos",
            en: "/about"
        },
        "/blog/[slug]": {
            fr: "/le-blog/[slug]"
        }
    },
      client: {
        data: true,
      },
    }),

Folder structure

src/routes/
------------index.astro
------------about.astro
------------portfolio/
----------------------[slug].astro
----------------------index.astro
------------blog/
----------------------[slug].astro
----------------------index.astro

navigation data

I iterate over an array to create the nav links

const navData: NavItem[] = [
  {
    key: "home",
    url: "/",
  },
  {
    key: "our-work",
    url: "/portfolio/",
    children: []
  },
  {
    key: "blog",
    url: "/blog/",
    children: []
  },
]
export default navData

Expected output: hitting /portfolio returns a localized url www.example.com/nos-realisations or www.example.com/our-work

What I get: no localization - hitting /portfolio returns www.example.com/portfolio, no matter the locale.

Thank you for your time!

[florian-lefebvre]

I think there may be an issue with how it's implemented, where I don't take index.astro into account. Could you try moving portfolio/index.astro to portfolio.astro?

[BuckyBuck135]

Thanks Florian,
That seems to have done the trick.
And I realize that the fr string in the config does not override the name of the astro file.

For example:

// the page is `about.astro`
        "/about": {
            fr: "/a-propos", // this does not localize the url
            en: "/about"
        },

If my default locale is fr, I need to rename all my astro files to have French names then?

[florian-lefebvre]

Not sure I understand that one. What are you calling and what do you get/expect?

[BuckyBuck135]

Ok, sorry, let me rephrase.

//astro.config.mjs
i18n({
      defaultLocale: "fr",
      locales: ["fr", "en"],
      pages: {
            "/about": {
                fr: "/a-propos",
                en: "/about-us"
            },
      },
    }),

The page lives in src/pages.about.astro, and the defaultLocale is fr, without a prefix.
I call /about, but I get /about, while I expect /a-propos, based on the config. 👎

Interestingly, when I call /en/about, I get /en/about-us, which is the expected result. 👍

Does that mean that the string for the default locale will never override the name of Astro file (and thus the path)?

I hope it's clearer... :)

[florian-lefebvre]

I'm not sure but I think it doesn't work like that. If your default locale is fr, you file should be named src/routes/a-propos and then you only set the equivalent in other locales:

//astro.config.mjs
i18n({
      defaultLocale: "fr",
      locales: ["fr", "en"],
      pages: {
            "/a-propos": {
                fr: "/a-propos",
            },
      },
    }),

[BuckyBuck135]

Yes, that's what I figured.
Thanks again for your help.

I think there may be an issue with how it's implemented, where I don't take index.astro into account. Could you try moving portfolio/index.astro to portfolio.astro?

Do you still consider the fact that the index page within a folder not getting properly localized is a bug? If not, we can close this if you'd like.

[florian-lefebvre]

Yeah definitely a bug, worth keeping open for other who may stumble across it