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.
homepage/docs/widgets/authoring/translations.md

81 lines
3.4 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).
The Homepage community prides itself on being multilingual, and we strongly encourage you to add translations for your widgets.
## 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>
);
}
```
=== "en.json"
```json
"yourwidget": {
"key1": "Value 1",
"key2": "Value 2",
"key3": "Value 3"
}
```
## 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. |