i18n Routes for Blog Posts

[desert ermine]

I've configured my site as per this guide and have i18n working for my pages:

https://docs.astro.build/en/recipes/i18n/

However, I've created a blog and wanted to route my EN blog pages to my FR ones. In ui.ts I tried adding a route (like in the routes section of the guide), but I get a 404. How can I route translated posts properly?

[valid kestrel]

Quiet in here?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[jaunty edge]

Hello @desert ermine I wrote the part about routing on official i18n recipe. However, it does not include support for content collections or simply sub-pages.

I wrote an article about it on my blog. This explains how this can work in your case without third-party:

https://webdesign-sopelnik.de/en/blog/translate-routes-for-astro-content-collections-or-subpages-with-trailingslash-and-base-support/

[desert ermine]

Does anything need to change in my [...slug].astro? I see a list of both EN and FR blog articles currently (I made it following the guide)

[jaunty edge]

You could use startsWith to decide which language have to be loaded. Look at this example:

DE:
https://github.com/artursopelnik/astro-translate-routes-example/blob/main/src/pages/blog/[slug].astro

EN:
https://github.com/artursopelnik/astro-translate-routes-example/blob/main/src/pages/en/blog/[slug].astro

[desert ermine]

Since I followed the guide and my EN pages aren't in an EN folder, does this affect the routing?

[jaunty edge]

sure

It doesn't matter whether English is in root or under /en/.

What is important is what your default language is and what other languages ​​are supported. You can configure this in the ui.ts.

In your case, defaultLanguage should be en

[desert ermine]

export const defaultLang = "en";

However, on my blog page I have

    <section>
      <ul>
        {
          posts.map((post) => (
            <li>
              <a href={`/${post.slug}`}>
                <h4 class="title">{post.data.title}</h4>
                <p class="date">
                  <FormattedDate date={post.data.date} />
                </p>
              </a>
            </li>
          ))
        }
      </ul>
    </section>

For blog post test.md, the link that is rendered for post.slug is: /en/test and not /test

In FR it links to /blog/fr/teste instead of /fr/blog/teste

[jaunty edge]

Could you publish this code to an repo? So I could check it directly there?