astro-i18n-routes

An astro integration to sync i18n pages.

How to use

Install the package

npm install astro-i18n-routes

Add environment variable

Generate an OPENAI api key here and add it to the dotenv file.

OPENAI_KEY="..."

Update astro.config.mjs

import { defineConfig } from "astro/config";
import i18n from 'astro-i18n-routes/plugin';

export default defineConfig({
  integrations: [
    i18n({
      defaultLocale: 'en',
      locales: [
        { code: 'en', name: 'English' },
        { code: 'fr', name: 'Français' },
      ],
    }),
  ],
});

Translate paths and texts

Create the page src/routes/[locale]/index.astro.

---
import i18n from "astro-i18n-routes/instance";
import { getLocaleDataFromUrl } from "astro-i18n-routes/utils";

i18n.locale = getLocaleDataFromUrl(Astro.url);
---

<a href={i18n.path("dashboard")}>{i18n.text("Dashboard")}</a>

Translate client-side (optional)

Add the client snippet in to support i18n with client:load and client:only directives.

---
import { I18nClient } from "astro-i18n-routes/components";
---

<I18nClient url={Astro.url} />

Reference

Config options

| Property | Type | Default | Description | | ------------- | ------- | ------- | ------------------------------------------ | | defaultLocale | string | - | The locale used in i18n.text('...') | | locales | array | - | List of locales with "code" and "name" | | generate | boolean | false | Whether to regenerate and translate or not | | debug | boolean | false | Whether to display the console logs or not |