ready to preview guides

docs/stylesheets/extra.css

@@ -1,16 +1,16 @@
 [data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
   position: absolute;
-    top: .3rem;
-    right: .3rem;
+  top: 0.3rem;
+  right: 0.3rem;
   display: block;
-    padding: .1rem .4rem;
+  padding: 0.1rem 0.4rem;
   color: var(--md-default-fg-color--lighter);
   font-weight: bold;
-    font-size: .8rem;
-    border: .05rem solid var(--md-default-fg-color--lighter);
-    border-radius: .1rem;
+  font-size: 0.8rem;
+  border: 0.05rem solid var(--md-default-fg-color--lighter);
+  border-radius: 0.1rem;
   content: "/";
-  }
+}
 
 [data-md-color-scheme="default"][data-md-color-primary="black"] {
   [data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
@@ -34,3 +34,11 @@
   --carbon-bg-secondary: var(--md-default-fg-color--lightest) !important;
   --carbon-text-color: var(--md-typeset-color) !important;
 }
+
+.md-typeset__table {
+  width: 100%;
+}
+
+.md-typeset table:not([class]) {
+  display: table;
+}

docs/widgets/authoring/component.md

@@ -61,5 +61,42 @@ This hook is used to fetch data from the API. We cover this hook in more detail
 
 #### Components
 
-- `<Container>`: This component is a wrapper for the widget. It provides a consistent layout for all widgets.
-- `<Block>`: This component is used to display a key-value pair. It takes a label and value as props.
+Homepage provides a set of components to help you build your widget UI. These components are designed to provide a consistent layout, and all widgets are expected to use these components.
+
+![Component Sections](/assets/sections.png)
+
+**`<Container>`**
+
+This component is a wrapper for the widget. It provides a consistent layout for all widgets.
+
+```js
+<Container service={service}></Container>
+```
+
+`service` is a prop that is passed to the widget component. It contains information about the service that the widget is displaying.
+
+If there is an error fetching data from the API, the `error` prop can be passed to the `Container` component.
+
+```js
+<Container service={service} error={error}></Container>
+```
+
+**`<Block>`**
+
+This component is used to display a key-value pair. It takes a label and value as props.
+
+```js
+<Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
+```
+
+The `label` prop is used to look up the translation key in the translation files. The `value` prop is used to display the value of the block. To learn more about translations, please refer to the [Translations Guide](translations.md).
+
+If there is no data available, the `Block` component can be used to display a placeholder layout.
+
+```js
+<Container service={service}>
+  <Block label="yourwidget.key1" />
+  <Block label="yourwidget.key2" />
+  <Block label="yourwidget.key3" />
+</Container>
+```

docs/widgets/authoring/translations.md

@@ -2,3 +2,79 @@
 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.            |