You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
3.9 KiB
89 lines
3.9 KiB
---
|
|
title: Translations Guide
|
|
description: Tips and tricks for translating and localizing Homepage widgets.
|
|
---
|
|
|
|
All text and numerical content in widgets should be translated and localized. English is the default language, and other languages can be added via [Crowdin](https://crowdin.com/project/gethomepage).
|
|
|
|
## Translations
|
|
|
|
Homepage uses the [next-i18next](https://github.com/i18next/next-i18next) library to handle translations. This library provides a set of hooks and utilities to help you localize your widgets, and Homepage has extended this library to support additional features.
|
|
|
|
=== "component.jsx"
|
|
|
|
```js
|
|
import { useTranslation } from "next-i18next";
|
|
|
|
import Container from "components/services/widget/container";
|
|
import Block from "components/services/widget/block";
|
|
|
|
export default function Component() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Container service={service}>
|
|
<Block label="yourwidget.key1" />
|
|
<Block label="yourwidget.key2" />
|
|
<Block label="yourwidget.key3" />
|
|
</Container>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Set up translation strings
|
|
|
|
Homepage uses translated and localized strings for **all text and numerical content** in widgets. English is the default language, and other languages can be added via [Crowdin](https://crowdin.com/project/gethomepage). To add the English translations for your widget, follow these steps:
|
|
|
|
Open the `public/locales/en/common.js` file.
|
|
|
|
Add a new object for your widget to the bottom of the list, like this:
|
|
|
|
```json
|
|
"yourwidget": {
|
|
"key1": "Value 1",
|
|
"key2": "Value 2",
|
|
"key3": "Value 3"
|
|
}
|
|
```
|
|
|
|
!!! note
|
|
|
|
Even if you natively speak another language, you should only add English translations. You can then add translations in your native language via [Crowdin](https://crowdin.com/project/gethomepage), once your widget is merged.
|
|
|
|
## Common Translations
|
|
|
|
Homepage provides a set of common translations that you can use in your widgets. These translations are used to format numerical content, dates, and other common elements.
|
|
|
|
### Numbers
|
|
|
|
| Key | Translation | Description |
|
|
| --------------------- | --------------- | -------------------------------- |
|
|
| `common.bytes` | `1,000 B` | Format a number in bytes. |
|
|
| `common.bits` | `1,000 bit` | Format a number in bits. |
|
|
| `common.bbytes` | `1 KiB` | Format a number in binary bytes. |
|
|
| `common.bbits` | `1 Kibit` | Format a number in binary bits. |
|
|
| `common.byterate` | `1,000 B/s` | Format a byte rate. |
|
|
| `common.bibyterate` | `1 KiB/s` | Format a binary byte rate. |
|
|
| `common.bitrate` | `1,000 bit/s` | Format a bit rate. |
|
|
| `common.bibitrate` | `1 Kibit/s` | Format a binary bit rate. |
|
|
| `common.percent` | `50%` | Format a percentage. |
|
|
| `common.number` | `1,000` | Format a number. |
|
|
| `common.ms` | `1,000 ms` | Format a number in milliseconds. |
|
|
| `common.date` | `2024-01-01` | Format a date. |
|
|
| `common.relativeDate` | `1 day ago` | Format a relative date. |
|
|
| `common.uptime` | `1 day, 1 hour` | Format an uptime. |
|
|
|
|
### Text
|
|
|
|
| Key | Translation | Description |
|
|
| ------------------ | ----------- | ------------------ |
|
|
| `resources.cpu` | `CPU` | CPU usage. |
|
|
| `resources.mem` | `MEM` | Memory usage. |
|
|
| `resources.total` | `Total` | Total resource. |
|
|
| `resources.free` | `Free` | Free resource. |
|
|
| `resources.used` | `Used` | Used resource. |
|
|
| `resources.load` | `Load` | Load value. |
|
|
| `resources.temp` | `TEMP` | Temperature value. |
|
|
| `resources.max` | `Max` | Maximum value. |
|
|
| `resources.uptime` | `UP` | Uptime. |
|