Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/acro5piano/astro-gettext
Fast gettext i18n in Node that supports Astro
https://github.com/acro5piano/astro-gettext
astro astrojs cli gettext i18n internationalization static-site tanslation typescript
Last synced: about 1 month ago
JSON representation
Fast gettext i18n in Node that supports Astro
- Host: GitHub
- URL: https://github.com/acro5piano/astro-gettext
- Owner: acro5piano
- License: mit
- Created: 2023-09-09T05:09:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-11T16:15:50.000Z (about 1 year ago)
- Last Synced: 2024-12-29T11:18:44.257Z (about 2 months ago)
- Topics: astro, astrojs, cli, gettext, i18n, internationalization, static-site, tanslation, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/astro-gettext
- Size: 166 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
An Astro i18n library in GNU gettext style. Inspired by [ttag](https://ttag.js.org/)
# Project Status
astro-gettext is still experimental, but covers most of use-cases for simple static websites build with Astro.
# Why
- Astro is awesome. It brings simpler syntax for the static website era.
- I'm a big fan of i18n using GNU gettext pattern.
- There's no such library to combine them. [Lingui still don't support Astro](https://github.com/lingui/js-lingui/issues/1640) (on Sep, 2023)
# Getting Started
## Install
```
npm install --save astro-gettext
```
Or if you use Yarn:
```
yarn add astro-gettext
```
## Implementation
**1. Setup translation**
By creating a translation instance, you can declare your supported languages:
```ts
// src/locale.ts
import { Trans } from 'astro-gettext'
export const trans = new Trans<'en' | 'ja'>()
```
**2. Wrap strings with `t` tag**
```astro
---
// src/pages/index.astro
import { trans } from '../locale'
// You need to implement a logic to retrieve the current language.
// `Astro.url` is a recommended way, but it depends on your environment.
const t = trans.get(Astro.url.includes('ja') ? 'ja' : 'en')
---
{t`Hello World!`}
```
**3. Setup localization**
```sh
npm run astro-gettext extract --po ja.po
```
This will create a new `ja.po` file with all appropriate translation templates for the Japanese language:
```po
# ja.po
#: src/pages/index.astro:8
msgid "Hello World!"
msgstr ""
```
Let's add your translation by filling `msgstr`:
```po
# ja.po
#: src/pages/index.astro:8
msgid "Hello World!"
msgstr "こんにちは！"
```
**4. Load translations**
Convert the `.po` into JSON file so that Astro can load them in runtime:
```sh
npm run astro-gettext po2json --po locales/ja.po --output src/ja.json --pretty
```
It will produce a json file like this:
```json
{
"charset": "utf-8",
"translations": {
"": {
"Hello World!": {
"msgid": "Hello World!",
"msgstr": ["こんにちは！"]
}
}
}
}
```
Finally, update the translation instance:
```ts
// src/locale.ts
import { Trans } from 'astro-gettext'
import ja from './ja.json' // <--- This
export const trans = new Trans<'en' | 'ja'>()
trans.addLocale('ja', ja) // <--- This
```
Well Done! Then you will see your Astro app is translated, in a manner of gettext.
# TODO
- [ ] Support i18n in the gray-matter TS code area using [ts-morph](https://github.com/dsherret/ts-morph)
- [ ] Variable support
- [ ] Context support
- [ ] `ngettext` support
- [ ] Covers `.ts` files using TypeScript compiler API - meaning this library truly become `ttag` replacement.
- [ ] Astro frontend integrations?