Translated help page

client/public/locales/en/common.json

@@ -239,7 +239,26 @@
         "home": "Home"
     },
     "help": {
-        "help": "Help"
+        "help": "Help",
+        "resources": {
+            "filament": "Brands of filament. They have properties such as name, material, color, diameter, and more.",
+            "spool": "Individual physical spools of a specific filament.",
+            "vendor": "The companies that make the filament."
+        },
+        "description": [
+            "<title>Help</title>",
+            "<p>Here are some tips to get you started.</p>",
+            "<p>Spoolman holds 3 different types of data:</p><itemsHelp/>",
+            "<p>To enter a new spool into the database, you first need to create a <filamentCreateLink>Filament</filamentCreateLink>",
+            "object for it. Once that is done, you can then create a <spoolCreateLink>Spool</spoolCreateLink> object for that",
+            "individual spool. If you then purchase additional spools of the same filament, you can just create additional",
+            "Spool objects, and re-use the same Filament object.</p>",
+            "<p>You can optionally also create a <vendorCreateLink>Vendor</vendorCreateLink> object for the company that makes the",
+            "filament, if you want to track that information.</p>",
+            "<p>You can connect other 3D printer services to Spoolman, such as Moonraker, which can then automatically track",
+            "filament usage and update the Spool objects for you. See the <readmeLink>Spoolman README</readmeLink>",
+            "for how to do that.</p>"
+        ]
     },
     "table": {
         "actions": "Actions"

client/src/pages/help/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { Content } from "antd/es/layout/layout";
@@ -7,6 +7,7 @@ import { List, theme } from "antd";
 import Title from "antd/es/typography/Title";
 import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons";
 import { Link } from "react-router-dom";
+import { Trans } from "react-i18next";
 
 dayjs.extend(utc);
 
@@ -14,7 +15,7 @@ const { useToken } = theme;
 
 export const Help: React.FC<IResourceComponentsProps> = () => {
   const { token } = useToken();
-  // const t = useTranslate();
+  const t = useTranslate();
 
   return (
     <Content
@@ -31,53 +32,46 @@ export const Help: React.FC<IResourceComponentsProps> = () => {
         lineHeight: 1.5,
       }}
     >
-      <Title>Help</Title>
-      <p>Here are some tips to get you started.</p>
-      <p>Spoolman holds 3 different types of data:</p>
-      <List
-        itemLayout="horizontal"
-        size="large"
-        dataSource={[
-          {
-            title: "Filaments",
-            description: "Brands of filament. They have properties such as name, material, color, diameter, and more.",
-            icon: <HighlightOutlined />,
-          },
-          {
-            title: "Spools",
-            description: "Individual physical spools of a specific filament.",
-            icon: <FileOutlined />,
-          },
-          {
-            title: "Vendors",
-            description: "The companies that make the filament.",
-            icon: <UserOutlined />,
-          },
-        ]}
-        renderItem={(item) => (
-          <List.Item>
-            <List.Item.Meta avatar={item.icon} title={item.title} description={item.description} />
-          </List.Item>
-        )}
+      <Trans
+        i18nKey={"help.description"}
+        tOptions={{ joinArrays: "\n" }}
+        components={{
+          p: <p />,
+          title: <Title />,
+          filamentCreateLink: <Link to="/filament/create" />,
+          spoolCreateLink: <Link to="/spool/create" />,
+          vendorCreateLink: <Link to="/vendor/create" />,
+          readmeLink: <Link to="https://github.com/Donkie/Spoolman#integration-status" target="_blank" />,
+          itemsHelp: (
+            <List
+              itemLayout="horizontal"
+              size="large"
+              dataSource={[
+                {
+                  title: t("filament.filament"),
+                  description: t("help.resources.filament"),
+                  icon: <HighlightOutlined />,
+                },
+                {
+                  title: t("spool.spool"),
+                  description: t("help.resources.spool"),
+                  icon: <FileOutlined />,
+                },
+                {
+                  title: t("vendor.vendor"),
+                  description: t("help.resources.vendor"),
+                  icon: <UserOutlined />,
+                },
+              ]}
+              renderItem={(item) => (
+                <List.Item>
+                  <List.Item.Meta avatar={item.icon} title={item.title} description={item.description} />
+                </List.Item>
+              )}
+            />
+          ),
+        }}
       />
-      <p>
-        To enter a new spool into the database, you first need to create a <Link to="/filament/create">Filament</Link>{" "}
-        object for it. Once that is done, you can then create a <Link to="/spool/create">Spool</Link> object for that
-        individual spool. If you then purchase additional spools of the same filament, you can just create additional
-        Spool objects, and re-use the same Filament object.
-      </p>
-      <p>
-        You can optionally also create a <Link to="/vendor/create">Vendor</Link> object for the company that makes the
-        filament, if you want to track that information.
-      </p>
-      <p>
-        You can connect other 3D printer services to Spoolman, such as Moonraker, which can then automatically track
-        filament usage and update the Spool objects for you. See the{" "}
-        <a href="https://github.com/Donkie/Spoolman#integration-status" target="_blank">
-          Spoolman README
-        </a>{" "}
-        for how to do that.
-      </p>
     </Content>
   );
 };