Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yassinedoghri/astro-i18next
An astro integration of i18next + some utility components to help you translate your astro websites!
https://github.com/yassinedoghri/astro-i18next
astro i18n i18next l10n seo
Last synced: 4 months ago
JSON representation
An astro integration of i18next + some utility components to help you translate your astro websites!
- Host: GitHub
- URL: https://github.com/yassinedoghri/astro-i18next
- Owner: yassinedoghri
- License: mit
- Created: 2022-04-18T12:08:18.000Z (about 2 years ago)
- Default Branch: beta
- Last Pushed: 2024-01-23T07:06:42.000Z (5 months ago)
- Last Synced: 2024-03-17T08:58:37.254Z (4 months ago)
- Topics: astro, i18n, i18next, l10n, seo
- Language: TypeScript
- Homepage: https://astro-i18next.yassinedoghri.com
- Size: 4.49 MB
- Stars: 442
- Watchers: 4
- Forks: 32
- Open Issues: 60
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-stars - yassinedoghri/astro-i18next - An astro integration of i18next + some utility components to help you translate your astro websites! (TypeScript)
- my-awesome-astro - astro-i18next - Astro integration for [i18next](https://github.com/i18next/i18next) (What Do I Use... / If I want to add internationalization?)
README
# 🧪 astro-i18next
An [astro](https://astro.build/) integration of
[i18next](https://www.i18next.com/) + some utility components to help you
translate your astro websites!
[![npm-badge]][npm] [![build-badge]][build] [![codecov-badge]][codecov] [![license-badge]][license] [![contributions-badge]][contributions] [![semantic-release-badge]][semantic-release] [![stars-badge]][stars]
> **Note**
>
> Status - 🚧 **Beta**
>
> [👉 **Road to v1.0.0**](https://github.com/yassinedoghri/astro-i18next/issues/19)
>
> You can use it, and feedback is more than welcome! Note that some breaking
> changes may still be introduced during this phase as the goal for v1 is to get
> the best possible DX for translating your Astro pages.
## Examples
| Example | Status |
| ------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [SSG - **Basics**](examples/basics) | [![example-up-badge]](examples/basics) |
| [SSR - **Node**](examples/node) | [![example-up-badge]](examples/node) |
| [**React**](examples/react) | [![example-up-badge]](examples/react) |
| [SSR - **Netlify**](examples/netlify) | [![example-down-badge]](examples/netlify) (https://github.com/yassinedoghri/astro-i18next/issues/26) |
| SSR - **Deno** | [![example-down-badge]](examples/basics) (https://github.com/yassinedoghri/astro-i18next/issues/55) |
- [Examples](#examples)
- [🚀 Getting started](#-getting-started)
- [1. Install](#1-install)
- [2. Configure](#2-configure)
- [3. Start translating](#3-start-translating)
- [💻 CLI commands](#-cli-commands)
- [generate](#generate)
- [🔄 Translate Routes](#-translate-routes)
- [📦 Utility components](#-utility-components)
- [Trans component](#trans-component)
- [LanguageSelector component](#languageselector-component)
- [HeadHrefLangs component](#headhreflangs-component)
- [📦 Utility functions](#-utility-functions)
- [interpolate function](#interpolate-function)
- [localizePath function](#localizepath-function)
- [localizeUrl function](#localizeurl-function)
- [👀 Going further](#-going-further)
- [Namespaces](#namespaces)
- [AstroI18nextConfig Props](#astroi18nextconfig-props)
- [✨ Contributors](#-contributors)
- [❤️ Acknowledgments](#️-acknowledgments)
- [📜 License](#-license)
## 🚀 Getting started
### 1. Install
```bash
npm install astro-i18next
```
or
```bash
pnpm add astro-i18next
```
or
```bash
yarn add astro-i18next
```
### 2. Configure
1. Add `astro-i18next` to your `astro.config.mjs`:
```js
import { defineConfig } from "astro/config";
import astroI18next from "astro-i18next";
export default defineConfig({
integrations: [astroI18next()],
});
```
2. Configure `astro-i18next` in your `astro-i18next.config.mjs` file:
```js
/** @type {import('astro-i18next').AstroI18nextConfig} */
export default {
defaultLocale: "en",
locales: ["en", "fr"],
};
```
ℹ️ Your `astro-i18next` config file can be a javascript (`.js` | `.mjs` |
`.cjs`) or typescript (`.ts` | `.mts` | `.cts`) file.
ℹ️ For a more advanced configuration, see the
[AstroI18nextConfig props](#astroi18nextconfig-props).
3. By default, `astro-i18next` expects your translations to be organized inside
your
[astro's `publicDir`](https://docs.astro.build/en/reference/configuration-reference/#publicdir),
in a `locales` folder:
```bash
public
└── locales # create this folder to store your translation strings
├── en
| └── translation.json
└── fr
└── translation.json
```
ℹ️ `astro-i18next` loads your translation files both server-side and
client-side using
[i18next-fs-backend](https://github.com/i18next/i18next-fs-backend) and
[i18next-http-backend](https://github.com/i18next/i18next-http-backend)
plugins.
ℹ️ You may choose to organize your translations into multiple files instead
of a single file per locale [using namespaces](#namespaces).
### 3. Start translating
You may now start translating your pages by using
[i18next's `t` function](https://www.i18next.com/overview/api#t) or the
[Trans component](#trans-component) depending on your needs.
Here's a quick tutorial to get you going:
1. Use translation keys in your Astro pages
```astro
---
// src/pages/index.astro
import i18next, { t } from "i18next";
import { Trans, HeadHrefLangs } from "astro-i18next/components";
---
{t("site.title")}
{t("home.title")}
This is a more complex string to translate, mixed with html elements
such as a cool link!
```
```json
// public/locales/en/translation.json
{
"site": {
"title": "My awesome website!",
"description": "Here is the description of my awesome website!"
},
"home": {
"title": "Welcome to my awesome website!",
"subtitle": "This is a <0>more complex0> string to translate, mixed with <1>html elements1>, such as a <2>a cool link2>!"
}
}
```
```json
// public/locales/fr/translation.json
{
"site": {
"title": "Mon super site web !",
"description": "Voici la description de mon super site web !"
},
"home": {
"title": "Bienvenue sur mon super site web !",
"subtitle": "Ceci est une chaine de charactères <0>plus compliquée0> à traduire, il y a des <1>éléments html1>, comme <2>un super lien2> par exemple !"
}
}
```
2. Create localized pages using the [generate command](#generate)
```bash
npx astro-i18next generate
```
3. You're all set! Have fun translating and generate localized pages as you go
🚀
> **Note**
>
> For a real world example, see the [website](./website/) or check out the
> [examples](./examples/).
---
## 💻 CLI commands
### generate
```bash
npx astro-i18next generate
```
This command will generate localized pages depending on your config and set
i18next's language change on each page.
For instance, with `locales = ["en", "fr", "es"]`, and `"en"` being the default
locale and having:
```bash
src
└── pages
├── about.astro
└── index.astro
```
👇 Running `npx astro-i18next generate` will create the following pages
```bash
src
└── pages
├── es
| ├── about.astro
| └── index.astro
├── fr
| ├── about.astro
| └── index.astro
├── about.astro
└── index.astro
```
## 🔄 Translate Routes
`astro-i18next` let's you translate your pages routes for each locale!
For instance, with support for 3 locales (`en`, `fr`, `es`), `en` being the
default and the following pages:
```bash
src
└── pages
├── about.astro
├── contact-us.astro
└── index.astro
```
1. Set route mappings in your `astro-i18next` config:
```js
/** @type {import('astro-i18next').AstroI18nextConfig} */
export default {
defaultLocale: "en",
locales: ["en", "fr", "es"],
routes: {
fr: {
about: "a-propos",
"contact-us": "contactez-nous",
products: {
index: "produits",
categories: "categories",
},
},
es: {
about: "a-proposito",
"contact-us": "contactenos",
products: {
index: "productos",
categories: "categorias",
},
},
},
};
```
2. Generate your localized pages using the [generate CLI command](#generate),
they will be translated for you!
```bash
src
└── pages
├── es
| ├── productos
| | ├── categorias.astro
| | └── index.astro
| ├── a-proposito.astro
| ├── contactenos.astro
| └── index.astro
├── fr
| ├── produits
| | ├── categories.astro
| | └── index.astro
| ├── a-propos.astro
| ├── contactez-nous.astro
| └── index.astro
├── products
| ├── categories.astro
| └── index.astro
├── about.astro
├── contact-us.astro
└── index.astro
```
> **Note**
>
> The [localizePath](#localizepath-function) and
> [localizeUrl](#localizeurl-function) utility functions will retrieve the
> correct route based on your mappings.
---
## 📦 Utility components
### Trans component
A component that takes care of interpolating its children with the translation
strings. Inspired by
[react-i18next's Trans component](https://react.i18next.com/latest/trans-component).
```astro
---
import { Trans } from "astro-i18next/components";
---
An astro integration of
i18next and utility
components to help you translate your astro websites!
```
```json
// fr.json
{
"superCoolKey": "Une intégration <0>astro0> d'<1>i18next1> + quelques composants utilitaires pour vous aider à traduire vos sites astro !"
}
```
#### Trans Props
| Prop name | Type (default) | Description |
| --------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| i18nKey | ?string (undefined) | Internationalization key to interpolate to. Can contain the namespace by prepending it in the form 'ns:key' (depending on i18next.options.nsSeparator). If omitted, a key is automatically generated using the content of the element. |
| ns | ?string (undefined) | Namespace to use. May also be embedded in i18nKey but not recommended when used in combination with natural language keys. |
### LanguageSelector component
Unstyled custom select component to choose amongst supported locales.
```astro
---
import { LanguageSelector } from "astro-i18next/components";
---
```
#### LanguageSelector Props
| Prop name | Type (default) | Description |
| --------------- | --------------------- | ------------------------------------------------------------------------------------------- |
| showFlag | ?boolean (`false`) | Choose to display the language emoji before language name |
| languageMapping | ?object (`undefined`) | Rewrite language names by setting the locale as key and the wording of your choice as value |
### HeadHrefLangs component
HTML tags to include in your page's `` section to let search engines know
about its language and region variants. To know more, see
[Google's advanced localized versions](https://developers.google.com/search/docs/advanced/crawling/localized-versions#html).
```astro
---
import i18next from "i18next";
import { HeadHrefLangs } from "astro-i18next/components";
---
...
...
```
The HeadHrefLangs component will generate all of the alternate links depending
on the current url and supported locales.
For example, if you are on the `/about` page and support 3 locales (`en`, `fr`,
`es`) with `en` being the default locale, this will render:
```html
```
## 📦 Utility functions
### interpolate function
`interpolate(i18nKey: string, reference: string, namespace: string | null): string`
`astro-i18next` exposes the logic behind the Trans component, you may want to
use it directly.
```ts
import { interpolate } from "astro-i18next";
const interpolated = interpolate(
"superCoolKey",
'An astro integration of i18next and utility components to help you translate your astro websites!'
);
```
### localizePath function
`localizePath(path: string, locale: string | null = null, base: string = import.meta.env.BASE_URL): string`
Sets a path within a given locale. If the locale param is not specified, the
current locale will be used.
> **Note**
>
> This should be used instead of hard coding paths to other pages. It will take
> care of setting the right path depending on the locale you set.
```astro
---
import { localizePath } from "astro-i18next";
import i18next from "i18next";
i18next.changeLanguage("fr");
---
```
### localizeUrl function
`localizeUrl(url: string, locale: string | null = null, base: string = import.meta.env.BASE_URL): string`
Sets a url within a given locale. If the locale param is not specified, the
current locale will be used.
> **Note**
>
> This should be used instead of hard coding urls for internal links. It will
> take care of setting the right url depending on the locale you set.
```astro
---
import { localizeUrl } from "astro-i18next";
import i18next from "i18next";
i18next.changeLanguage("fr");
---
```
---
## 👀 Going further
### Namespaces
i18next allows you to organize your translation keys into
[namespaces](https://www.i18next.com/principles/namespaces).
You can have as many namespaces as you wish, have one per page and one for
common translation strings for example:
```bash
public
├-- locales
| |-- en
| | |-- about.json # "about" namespace
| | |-- common.json # "common" namespace
| | └-- home.json # "home" namespace
| └-- fr # same files in other locale folders
src
└-- pages
|-- about.astro
└-- index.astro
```
1. It can easily be setup using the `namespaces` and `defaultNamespace` keys,
like so:
```ts
/** @type {import('astro-i18next').AstroI18nextConfig} */
export default {
defaultLocale: "en",
locales: ["en", "fr"],
namespaces: ["about", "common", "home"],
defaultNamespace: "common",
};
```
2. Load the namespace globally using `i18next.setDefaultNamespace(ns: string)`
or specify it in the `t` function or the `Trans` component:
```astro
---
import { t, setDefaultNamespace } from "i18next";
import { Trans } from "astro-i18next/components";
setDefaultNamespace("home");
---
{t("myHomeTitle")}
This translation is loaded from the default home namespace!
This translation is loaded from the common namespace!
{t("common:buttonCTA")}
```
### AstroI18nextConfig Props
`astro-i18next`'s goal is to abstract most of the configuration for you so that
you don't have to think about it. Just focus on translating!
Though if you'd like to go further in customizing i18next, feel free to tweak
your config!
| Prop name | Type (default) | Description |
| -------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| defaultLocale | `string` (undefined) | The default locale for your website. |
| locales | `string[]` (undefined) | Your website's supported locales. |
| namespaces | `string` or `string[]` ('translation') | String or array of namespaces to load. |
| defaultNamespace | `string` (translation') | Default namespace used if not passed to the translation function. |
| load | `Array<"server" or "client">` (`["server"]`) | Load i18next on server side only, client side only or both. |
| resourcesBasePath | `?string` | Set base path for i18next resources. Defaults to `/locales`. |
| i18nextServer | `?InitOptions` | The i18next server side configuration. See [i18next's documentation](https://www.i18next.com/overview/configuration-options). |
| i18nextServerPlugins | `?{[key: string]: string}` (`{}`) | Set i18next server side plugins. See [available plugins](https://www.i18next.com/overview/plugins-and-utils). |
| i18nextClient | `?InitOptions` | The i18next client side configuration . See [i18next's documentation](https://www.i18next.com/overview/configuration-options). |
| i18nextClientPlugins | `?{[key: string]: string}` (`{}`) | Set i18next client side plugins. See [available plugins](https://www.i18next.com/overview/plugins-and-utils). |
| routes | `[segment: string]: string or object`(`{}`) | The translations mapping for your routes. See [translate routes](#-translate-routes). |
| showDefaultLocale | `boolean`(`false`) | Whether or not the defaultLocale should show up in the url just as other locales. |
## ✨ Contributors
Thanks goes to these wonderful people
([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Yassine Doghri
💻 📖 🤔 🎨 💡 🚧
Davide Ceschia
💻 🐛
preetamslot
🐛
Dmytro
🐛
Campbell He
🐛
MelKam
💻
L1lith
🐛 🤔
Anomander43
📖
Dominik Schöni
💻
Dalibor Hon
💻 🐛
Oleksii Lozoviahin
💻
Alessandro Talamona
🐛
Josh Kramer
💻 🐛
Alexandre Fernandez
💻 🐛
This project follows the
[all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!
## ❤️ Acknowledgments
This wouldn't have been possible without the awesome work from the
[Locize](https://locize.com/) and [Astro](https://astro.build/) teams.
Inspired by some of the greatly thought-out i18n implementations:
- [next-i18next](https://github.com/i18next/next-i18next)
- [react-i18next](https://github.com/i18next/react-i18next)
- [NextJS's Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing)
## 📜 License
Code released under the [MIT License](https://choosealicense.com/licenses/mit/).
Copyright (c) 2022-present, Yassine Doghri
([@yassinedoghri](https://twitter.com/yassinedoghri))
[npm]: https://www.npmjs.com/package/astro-i18next
[npm-badge]: https://img.shields.io/npm/v/astro-i18next
[build]:
https://github.com/yassinedoghri/astro-i18next/actions/workflows/publish.yml
[build-badge]:
https://img.shields.io/github/actions/workflow/status/yassinedoghri/astro-i18next/publish.yml
[license]:
https://github.com/yassinedoghri/astro-i18next/blob/develop/LICENSE.md
[license-badge]:
https://img.shields.io/github/license/yassinedoghri/astro-i18next?color=blue
[contributions]: https://github.com/yassinedoghri/astro-i18next/issues
[contributions-badge]:
https://img.shields.io/badge/contributions-welcome-blueviolet.svg
[semantic-release]: https://github.com/semantic-release/semantic-release
[semantic-release-badge]:
https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[stars]: https://github.com/yassinedoghri/astro-i18next/stargazers
[stars-badge]:
https://img.shields.io/github/stars/yassinedoghri/astro-i18next?style=social
[codecov]: https://codecov.io/gh/yassinedoghri/astro-i18next
[codecov-badge]:
https://codecov.io/gh/yassinedoghri/astro-i18next/branch/develop/graph/badge.svg?token=IFWNB6UJDJ
[example-up-badge]: https://img.shields.io/badge/status-up-brightgreen
[example-down-badge]: https://img.shields.io/badge/status-down-red