implement i18n

package.json

@@ -13,14 +13,19 @@
     "@tailwindcss/forms": "^0.5.3",
     "classnames": "^2.3.1",
     "dockerode": "^3.3.4",
+    "i18next": "^21.9.1",
+    "i18next-browser-languagedetector": "^6.1.5",
+    "i18next-http-backend": "^1.4.1",
     "js-yaml": "^4.1.0",
     "json-rpc-2.0": "^1.4.1",
     "memory-cache": "^0.2.0",
     "next": "12.2.5",
     "node-os-utils": "^1.3.7",
+    "pretty-bytes": "^6.0.0",
     "raw-body": "^2.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^11.18.5",
     "react-icons": "^4.4.0",
     "rutorrent-promise": "^2.0.0",
     "swr": "^1.3.0"

public/locales/en/common.json

@@ -0,0 +1,98 @@
+{
+  "common": {
+    "bytes": "{{value, bytes}}",
+    "bits": "{{value, bytes(bits: true)}}",
+    "bbytes": "{{value, bytes(binary: true)}}",
+    "bbits": "{{value, bytes(bits: true, binary: true)}}",
+    "byterate": "{{value, bytes}}",
+    "bitrate": "{{value, bytes(bits: true)}}",
+    "percent": "{{value, percent}}",
+    "number": "{{value, number}}",
+    "ms": "{{value, number}}"
+  },
+  "widget": {
+    "missing_type": "Missing Widget Type: {{type}}",
+    "api_error": "API Error",
+    "status": "Status"
+  },
+  "search": {
+    "placeholder": "Search..."
+  },
+  "resources": {
+    "total": "Total",
+    "free": "Free",
+    "used": "Used"
+  },
+  "docker": {
+    "rx": "RX",
+    "tx": "TX",
+    "mem": "MEM",
+    "cpu": "CPU",
+    "offline": "Offline"
+  },
+  "emby": {
+    "playing": "Playing",
+    "transcoding": "Transcoding",
+    "bitrate": "Bitrate"
+  },
+  "tautulli": {
+    "playing": "Playing",
+    "transcoding": "Transcoding",
+    "bitrate": "Bitrate"
+  },
+  "nzbget": {
+    "rate": "Rate",
+    "remaining": "Remaining",
+    "downloaded": "Downloaded"
+  },
+  "rutorrent": {
+    "active": "Active",
+    "upload": "Upload",
+    "download": "Download"
+  },
+  "sonarr": {
+    "wanted": "Wanted",
+    "queued": "Queued",
+    "series": "Series"
+  },
+  "radarr": {
+    "wanted": "Wanted",
+    "queued": "Queued",
+    "movies": "Movies"
+  },
+  "ombi": {
+    "pending": "Pending",
+    "approved": "Approved",
+    "available": "Available"
+  },
+  "jellyseerr": {
+    "pending": "Pending",
+    "approved": "Approved",
+    "available": "Available"
+  },
+  "pihole": {
+    "queries": "Queries",
+    "blocked": "Blocked",
+    "gravity": "Gravity"
+  },
+  "speedtest": {
+    "upload": "Upload",
+    "download": "Download",
+    "ping": "Ping"
+  },
+  "portainer": {
+    "running": "Running",
+    "stopped": "Stopped",
+    "total": "Total"
+  },
+  "traefik": {
+    "routers": "Routers",
+    "services": "Services",
+    "middleware": "Middleware"
+  },
+  "npm": {
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "total": "Total"
+  }
+}

src/components/services/widget.jsx

@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+
 import Sonarr from "./widgets/service/sonarr";
 import Radarr from "./widgets/service/radarr";
 import Ombi from "./widgets/service/ombi";
@@ -33,6 +35,8 @@ const widgetMappings = {
 };
 
 export default function Widget({ service }) {
+  const { t } = useTranslation("common");
+
   const ServiceWidget = widgetMappings[service.widget.type];
 
   if (ServiceWidget) {
@@ -41,9 +45,7 @@ export default function Widget({ service }) {
 
   return (
     <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
-      <div className="font-thin text-sm">
-        Missing Widget Type: <strong>{service.widget.type}</strong>
-      </div>
+      <div className="font-thin text-sm">{t("widget.missing_type", { type: service.widget.type })}</div>
     </div>
   );
 }

src/components/services/widgets/service/docker.jsx

@@ -1,11 +1,14 @@
 import useSWR from "swr";
+import { useTranslation } from "react-i18next";
 
 import Widget from "../widget";
 import Block from "../block";
 
-import { calculateCPUPercent, formatBytes } from "utils/stats-helpers";
+import { calculateCPUPercent } from "utils/stats-helpers";
 
 export default function Docker({ service }) {
+  const { t } = useTranslation();
+
   const config = service.widget;
 
   const { data: statusData, error: statusError } = useSWR(
@@ -23,36 +26,36 @@ export default function Docker({ service }) {
   );
 
   if (statsError || statusError) {
-    return <Widget error="Error Fetching Data" />;
+    return <Widget error={t("docker.api_error")} />;
   }
 
   if (statusData && statusData.status !== "running") {
     return (
       <Widget>
-        <Block label="Status" value="Offline" />
+        <Block label={t("widget.status")} value={t("docker.offline")} />
       </Widget>
     );
   }
 
   if (!statsData || !statusData) {
     return (
       <Widget>
-        <Block label="CPU" />
-        <Block label="MEM" />
-        <Block label="RX" />
-        <Block label="TX" />
+        <Block label={t("docker.cpu")} />
+        <Block label={t("docker.mem")} />
+        <Block label={t("docker.rx")} />
+        <Block label={t("docker.tx")} />
       </Widget>
     );
   }
 
   return (
     <Widget>
-      <Block label="CPU" value={`${calculateCPUPercent(statsData.stats)}%`} />
-      <Block label="MEM" value={formatBytes(statsData.stats.memory_stats.usage, 0)} />
+      <Block label={t("docker.cpu")} value={t("common.percent", { value: calculateCPUPercent(statsData.stats) })} />
+      <Block label={t("docker.mem")} value={t("common.bytes", { value: statsData.stats.memory_stats.usage })} />
       {statsData.stats.networks && (
         <>
-          <Block label="RX" value={formatBytes(statsData.stats.networks.eth0.rx_bytes, 0)} />
-          <Block label="TX" value={formatBytes(statsData.stats.networks.eth0.tx_bytes, 0)} />
+          <Block label={t("docker.rx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.rx_bytes })} />
+          <Block label={t("docker.tx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.tx_bytes })} />
         </>
       )}
     </Widget>