Page translations doesn't work

[G4b0rDev]

Hello,

I need some help, I'm a bit confused how can I translate my astro pages within a json file.
I have followed the instructions from the docs/readme:

• Setup config
• I created an i18n folder (in the root and in a sub page directory) with an en.json file
• I've added my translations keys into the json file
• Imported the t function to the page
• I've added the translation function
• Runned npm run i18n:sync & reload dev server but nothing happens.

src/
├── pages/
│   ├── index.astro
│   ├── i18n/
│   │   ├── en.json
│   └── about/
│       ├── index.astro
│       └── i18n/
│           ├── en.json

en.json

{
    "welcome": "Hello World"
}

src/index.astro

---
import { t } from 'astro-i18n';
---

<h2>{ t('index.welcome') }</h2>

and

src/about/index.astro

---
import { t } from 'astro-i18n';
---

<h2>{ t('about.headline') }</h2>

I followed the instructions and example from the readme but it doesn't work for me.
All translated keys are working if I set it in the config file.

Should I register manually the translated page file into the configs?
I don't understand this section Declare your translations directly in pages, it's a bit confusing.

Thanks 🙌👏

[Alexandre-Fernandez]

Here's an example that should be working :
https://github.com/narduin/astro-i18n-test/tree/main/src/pages
This is only to demonstrate the page translations, this was a debug repo, so ignore the rest.
If you find the documentation confusing you can make a PR to make it better :).

[G4b0rDev]

Ah thanks!
It help's me a lot. 🎉

👍 Sure, I will take some improvements to the documentation.

I have a last question:

Every time I run the npm run i18n:sync command all my "raw" pages are replaced with the following code:
( With raw I mean all .astro files under the src/pages directory )

---
import Page from '../index.astro'

const { props } = Astro
---

<Page {...props} />

It only should create new directories and files that will include the code above, or not?
I use the Astro Version: 2.0.4

Thanks 🙌

[Alexandre-Fernandez]

Ah thanks! It help's me a lot. tada

+1 Sure, I will take some improvements to the documentation.

I have a last question:

Every time I run the npm run i18n:sync command all my "raw" pages are replaced with the following code: ( With raw I mean all .astro files under the src/pages directory )

---
import Page from '../index.astro'

const { props } = Astro
---

<Page {...props} />

It only should create new directories and files that will include the code above, or not?

Thanks raised_hands

These files act as a proxy to your main language file.
This way, if your main language is en and the user goes to /fr/about, the file that will be show is /en/about or /about depending on showDefaultLangCode in your config.
Without this you would need to have a copy of your page for each language.

[G4b0rDev]

Well, I understand.
But my index.astro will be replaced but it shouldn't be, the proxy should only create a new file or not?

Disabling showDefaultLangCode:

Enabling showDefaultLangCode:

The last screenshot looks for me wrong.
Or should I use MDX instead?

I mean it's no problem fo me to manualy copy the needed proxy.
But it's a bit confusing 😅

Thanks 🙌

[Alexandre-Fernandez]

make a repduction repo

[G4b0rDev]

Hello,

I've founded the "bug". It's not really a bug it was my mistake.
The defaultCode config was set to en.
I don't now why but I added the same lang code to the supportedLangCodes config. Thats why the sync command replaced the root astro pages.

Thank you very much for the support how to translate full pages from the json.

If you find the documentation confusing you can make a PR to make it better :).

I will take some changes and make a PR ;)