Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

i18n gives unexpected paths in AstroJS 5 #12897

Open
1 task
teinett opened this issue Jan 5, 2025 · 1 comment
Open
1 task

i18n gives unexpected paths in AstroJS 5 #12897

teinett opened this issue Jan 5, 2025 · 1 comment
Assignees
@RohitN002
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: i18n Related to internalization (scope) good first issue Good for newcomers. If you need additional guidance, feel free to post in #dev on Discord

Comments

@teinett
Copy link

teinett commented Jan 5, 2025 •
edited
Loading

Astro Info

Astro                    v5.1.2
Node                     v20.16.0
System                   macOS (arm64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I don't understand how i18n works in AstroJS 5: built-in functions return strange paths.

I want to use these settings for locales from my src/siteConfig.ts:

export const domainMain: string = "http://www.multi-domains.astro";
export const defaultLocale: string = "pt";
export const locales: string[] = ["en", "es", "pt"];

i18n settings in astro.config.mjs:

// settings
import { domainMain, defaultLocale, locales } from './src/siteConfig';

export default defineConfig({
...

  i18n: {
    locales: locales,
    defaultLocale: defaultLocale,
    routing: {
      prefixDefaultLocale: false,
    },
  },
});

Now I want to test the website locally with language prefixes, for example:

My final goal is to use separate domain for each language version like Tripadvisor:

The problem: i18n functions getRelativeLocaleUrlList() and pathByLocale() from package "astro:i18n" give me strange results.

I use these functions in src/layouts/Layout.astro file. Layout receives locale from Astro.params, for example, src/[locale]/index.astro

---
// file: src/layouts/Layout.astro

import {
    getRelativeLocaleUrl,
    getAbsoluteLocaleUrl,
    getRelativeLocaleUrlList,
    getAbsoluteLocaleUrlList,
    getPathByLocale,
    getLocaleByPath,
    redirectToDefaultLocale,
    redirectToFallback,
    notFound,
    middleware,
    requestHasLocale,
} from "astro:i18n";

interface Props {
    lang?: string;
}

import { locales } from "@/siteConfig";

console.log("🚀 ~ file: Layout.astro:22 ~ locales:", locales);

const { lang = "en" } = Astro.props;

console.log("🚀 ~ file: Layout.astro:8 ~ lang:", lang);

const relativeLocaleUrlList = getRelativeLocaleUrlList(lang);

console.log("🚀 ~ file: Layout.astro:28 ~ relativeLocaleUrlList:", relativeLocaleUrlList);

const pathByLocale = getPathByLocale(lang);

console.log("🚀 ~ file: Layout.astro:35 ~ pathByLocale:", pathByLocale);

const currentPath = Astro.url.pathname;

// Remove the leading locale segment from the path
let restOfPath = currentPath.replace(`/${lang}`, "");

// Remove any trailing slash
restOfPath = restOfPath.replace(/\/+$/, "");
---

<!doctype html>
<html lang={lang}>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" href="/favicon.ico" sizes="32x32" />
        <title>Astro Basics</title>
    </head>
    <body>
        <header>
            <p>Locales:</p>
            <ul>
                {
                    locales.map((locale) => (
                        <li>
                            <a href={`/${locale}${restOfPath}`}>{locale}</a>
                        </li>
                    ))
                }
            </ul>
        </header>
        <nav>
            <p>
                Pages inside locale:
                <a href={`/${lang}`}>{lang} - Home</a>
                <a href={`/${lang}/about`}>{lang} - About</a>
            </p>
        </nav>
        <main>
            <slot />
        </main>
    </body>
</html>

I request URL http://localhost:4321/es/about in browser and get lines in server console:

🚀 ~ file: Layout.astro:22 ~ locales: [ 'en', 'es', 'pt' ]
🚀 ~ file: Layout.astro:8 ~ lang: es
🚀 ~ file: Layout.astro:28 ~ relativeLocaleUrlList: [ '/en/es', '/es/es', '/es' ]
🚀 ~ file: Layout.astro:35 ~ pathByLocale: es
13:37:19 [200] /es/about 6ms

The problem: why relativeLocaleUrlList and pathByLocale are so strange?

I expected smth like:

  • relativeLocaleUrlList: [ '/es/about', '/pt/about', '/en/about' ]
  • pathByLocale: es/about

I tried to use domains in astro.config.mjs since the beginning, but have failed for 3 days in row. So decided to undestand it first with locales in the path.

What's the expected result?

All the paths will be relative to locale, but I get some mix of paths.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-dy6dtb63?file=src%2Flayouts%2FLayout.astro

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Jan 5, 2025
@ematipico ematipico added - P4: important Violate documented behavior or significantly impacts performance (priority) feat: i18n Related to internalization (scope) good first issue Good for newcomers. If you need additional guidance, feel free to post in #dev on Discord and removed needs triage Issue needs to be triaged labels Jan 5, 2025
@RohitN002
Copy link

@ematipico I like to work on this could you please assign me the task .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@RohitN002 RohitN002

Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: i18n Related to internalization (scope) good first issue Good for newcomers. If you need additional guidance, feel free to post in #dev on Discord
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ematipico @teinett @RohitN002