Translations Guide

All text and numerical content in widgets should be translated and localized. English is the default language, and other locales are maintained directly in public/locales.

Translations

Daemun uses i18next with react-i18next to handle translations. These libraries provide hooks and utilities to help you localize your widgets.

component.tsx

import { useTranslation } from "react-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

Daemun uses translated and localized strings for all text and numerical content in widgets. To add the English translations for your widget, follow these steps:

Open the public/locales/en/common.json file.

Add a new object for your widget to the bottom of the list, like this:

"yourwidget": {
  "key1": "Value 1",
  "key2": "Value 2",
  "key3": "Value 3"
}

Note

New widget contributions should include English strings first. Translations for other locales can be added in the same pull request when you can maintain the translated values directly.

Common Translations

Daemun 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.duration	1 day, 1 hour	Format an duration.

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.