Merge remote-tracking branch 'origin/main' into dev

2024-06-16 09:59:08 +08:00 · 2024-06-16 09:59:08 +08:00 · 5876af0cdd
commit 5876af0cdd
parent 57f86396ab 861a3d2091
51 changed files with 1730 additions and 305 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -11,3 +11,6 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 max_line_length = 120
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -1,2 +1,3 @@
-github: [gethomepage, benphelps, shamoon]
+github: [gethomepage]
 open_collective: homepage
+patreon: gethomepage
--- a/.github/workflows/docs-publish.yml
+++ b/.github/workflows/docs-publish.yml
@ -2,15 +2,15 @@ name: Docs

 on:
  push:
-    tags: [ 'v*.*.*' ]
-    branches: ['main']
+    tags: ["v*.*.*"]
+    branches: ["main"]
    paths:
-      - 'docs/**'
-      - 'mkdocs.yml'
+      - "docs/**"
+      - "mkdocs.yml"
  pull_request:
    paths:
-      - 'docs/**'
-      - 'mkdocs.yml'
+      - "docs/**"
+      - "mkdocs.yml"
  merge_group:
  workflow_dispatch:

@ -22,16 +22,13 @@ jobs:
    name: Linting Checks
    runs-on: ubuntu-22.04
    steps:
-      -
-        name: Checkout repository
+      - name: Checkout repository
        uses: actions/checkout@v4
-      -
-        name: Install python
+      - name: Install python
        uses: actions/setup-python@v5
        with:
          python-version: 3.x
-      -
-        name: Check files
+      - name: Check files
        uses: pre-commit/action@v3.0.1

  test:
@ -54,7 +51,7 @@ jobs:
            mkdocs-material-
      - run: sudo apt-get install pngquant
      - run: pip install mike
-      - run: pip install mkdocs-material
+      - run: pip install mkdocs-material mkdocs-redirects "mkdocs-material[imaging]"
      - name: Test Docs Build
        run: MKINSIDERS=false mkdocs build
  deploy:
@ -80,6 +77,7 @@ jobs:
      - run: sudo apt-get install pngquant
      - run: pip install mike==2.0.0
      - run: pip install git+https://${GH_TOKEN}@github.com/benphelps/mkdocs-material-insiders.git
+      - run: pip install mkdocs-redirects "mkdocs-material[imaging]"
      - name: Set Git config
        run: |
          git config --global user.name "GitHub Action"
--- a/README.md
+++ b/README.md
@ -66,6 +66,10 @@ Homepage is highly customizable, with support for custom themes, custom CSS & JS

 For configuration options, examples and more, [please check out the homepage documentation](http://gethomepage.dev).

+## Security Notice 🔒
+
+Please note that when using features such as widgets, Homepage can access personal information (for example from your home automation system) and Homepage currently does not (and is not planned to) include any authentication layer itself. Thus, we recommend homepage be deployed behind a reverse proxy including authentication, SSL etc, and / or behind a VPN.
+
 ## With Docker

 Using docker compose:
--- a/docs/assets/BlossomValley.jpg
+++ b/docs/assets/BlossomValley.jpg
--- a/docs/assets/sections.png
+++ b/docs/assets/sections.png
--- a/docs/configs/index.md
+++ b/docs/configs/index.md
@ -1,6 +1,7 @@
 ---
 title: Configuration
 description: Homepage Configuration
+icon: material/cog
 ---

 Homepage uses YAML for configuration, YAML stands for "YAML Ain't Markup Language.". It's a human-readable data serialization format that's a superset of JSON. Great for config files, easy to read and write. Supports complex data types like lists and objects. **Indentation matters.** If you already use Docker Compose, you already use YAML.
--- a/docs/configs/kubernetes.md
+++ b/docs/configs/kubernetes.md
@ -98,6 +98,8 @@ When the Kubernetes cluster connection has been properly configured, this servic

 If you are using multiple instances of homepage, an `instance` annotation can be specified to limit services to a specific instance. If no instance is provided, the service will be visible on all instances.

+If you have a single service that needs to be shown on multiple specific instances of homepage (but not on all of them), the service can be annotated by multiple `instance.name` annotations, where `name` can be the names of your specific multiple homepage instances. For example, a service that is annotated with `gethomepage.dev/instance.public: ""` and `gethomepage.dev/instance.internal: ""` will be shown on `public` and `internal` homepage instances.
+
 ### Traefik IngressRoute support

 Homepage can also read ingresses defined using the Traefik IngressRoute custom resource definition. Due to the complex nature of Traefik routing rules, it is required for the `gethomepage.dev/href` annotation to be set:
--- a/docs/index.md
+++ b/docs/index.md
@ -1,5 +1,7 @@
 ---
 title: Home
+description: A modern, fully static, fast, secure, fully proxied, highly customizable application dashboard with integrations for over 100 services and translations into multiple languages.
+icon: material/home
 hide:
  - navigation
  - toc
--- a/docs/installation/index.md
+++ b/docs/installation/index.md
@ -1,12 +1,17 @@
 ---
 title: Installation
 description: Docs intro
+icon: simple/docker
 ---

 <p>
 You have a few options for deploying homepage, depending on your needs. We offer docker images for a majority of platforms. You can also install and run homepage from source if Docker is not your thing. It can even be installed on Kubernetes with Helm.
 </p>

+!!! danger
+
+    Please note that when using features such as widgets, Homepage can access personal information (for example from your home automation system) and Homepage currently does not (and is not planned to) include any authentication layer itself. Thus, we recommend homepage be deployed behind a reverse proxy including authentication, SSL etc, and / or behind a VPN.
+
 <br>

 <div class="grid cards" style="margin: 0 auto;" markdown>
--- a/docs/layouts/custom.yml
+++ b/docs/layouts/custom.yml
@ -0,0 +1,252 @@
+# Copyright (c) 2016-2024 Martin Donath <martin.donath@squidfunk.com>
+
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to
+# deal in the Software without restriction, including without limitation the
+# rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+# sell copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+# IN THE SOFTWARE.
+
+# -----------------------------------------------------------------------------
+# Configuration
+# -----------------------------------------------------------------------------
+
+# Definitions
+definitions:
+  # Background image
+  - &background_image >-
+    {{ layout.background_image | x }}
+
+  # Background color (default: indigo)
+  - &background_color >-
+    {%- if layout.background_color -%}
+      {{ layout.background_color }}
+    {%- else -%}
+      {%- set palette = config.theme.palette or {} -%}
+      {%- if not palette is mapping -%}
+        {%- set list = palette | selectattr("primary") | list + palette -%}
+        {%- set palette = list | first -%}
+      {%- endif -%}
+      {%- set primary = palette.get("primary", "indigo") -%}
+      {%- set primary = primary.replace(" ", "-") -%}
+      {{ {
+        "red":         "#ef5552",
+        "pink":        "#e92063",
+        "purple":      "#ab47bd",
+        "deep-purple": "#7e56c2",
+        "indigo":      "#4051b5",
+        "blue":        "#2094f3",
+        "light-blue":  "#02a6f2",
+        "cyan":        "#00bdd6",
+        "teal":        "#009485",
+        "green":       "#4cae4f",
+        "light-green": "#8bc34b",
+        "lime":        "#cbdc38",
+        "yellow":      "#ffec3d",
+        "amber":       "#ffc105",
+        "orange":      "#ffa724",
+        "deep-orange": "#ff6e42",
+        "brown":       "#795649",
+        "grey":        "#757575",
+        "blue-grey":   "#546d78",
+        "black":       "#000000",
+        "white":       "#ffffff"
+      }[primary] or "#4051b5" }}
+    {%- endif -%}
+
+  # Text color (default: white)
+  - &color >-
+    {%- if layout.color -%}
+      {{ layout.color }}
+    {%- else -%}
+      {%- set palette = config.theme.palette or {} -%}
+      {%- if not palette is mapping -%}
+        {%- set list = palette | selectattr("primary") | list + palette -%}
+        {%- set palette = list | first -%}
+      {%- endif -%}
+      {%- set primary = palette.get("primary", "indigo") -%}
+      {%- set primary = primary.replace(" ", "-") -%}
+      {{ {
+        "red":         "#ffffff",
+        "pink":        "#ffffff",
+        "purple":      "#ffffff",
+        "deep-purple": "#ffffff",
+        "indigo":      "#ffffff",
+        "blue":        "#ffffff",
+        "light-blue":  "#ffffff",
+        "cyan":        "#ffffff",
+        "teal":        "#ffffff",
+        "green":       "#ffffff",
+        "light-green": "#ffffff",
+        "lime":        "#000000",
+        "yellow":      "#000000",
+        "amber":       "#000000",
+        "orange":      "#000000",
+        "deep-orange": "#ffffff",
+        "brown":       "#ffffff",
+        "grey":        "#ffffff",
+        "blue-grey":   "#ffffff",
+        "black":       "#ffffff",
+        "white":       "#000000"
+      }[primary] or "#ffffff" }}
+    {%- endif -%}
+
+  # Font family (default: Roboto)
+  - &font_family >-
+    {%- if layout.font_family -%}
+      {{ layout.font_family }}
+    {%- elif config.theme.font is mapping -%}
+      {{ config.theme.font.get("text", "Roboto") }}
+    {%- else -%}
+      Roboto
+    {%- endif -%}
+
+  # Font variant
+  - &font_variant >-
+    {%- if layout.font_variant -%}
+      {{ layout.font_variant }}
+    {%- endif -%}
+
+  # Site name
+  - &site_name >-
+    {{ config.site_name }}
+
+  # Page title
+  - &page_title >-
+    {%- if layout.title -%}
+      {{ layout.title }}
+    {%- else -%}
+      {{ page.meta.get("title", page.title) }}
+    {%- endif -%}
+
+  # Page title with site name
+  - &page_title_with_site_name >-
+    {%- if not page.is_homepage -%}
+      {{ page.meta.get("title", page.title) }} - {{ config.site_name }}
+    {%- else -%}
+      {{ page.meta.get("title", page.title) }}
+    {%- endif -%}
+
+  # Page description
+  - &page_description >-
+    {%- if layout.description -%}
+      {{ layout.description }}
+    {%- else -%}
+      {{ page.meta.get("description", config.site_description) | x }}
+    {%- endif -%}
+
+  # Page icon
+  - &page_icon >-
+    {{ page.meta.icon | x }}
+
+  # Logo
+  - &logo >-
+    {%- if layout.logo -%}
+      {{ layout.logo }}
+    {%- elif config.theme.logo -%}
+      {{ config.docs_dir }}/{{ config.theme.logo }}
+    {%- endif -%}
+
+  # Logo (icon)
+  - &logo_icon >-
+    {%- if not layout.logo and config.theme.icon -%}
+      {{ config.theme.icon.logo | x }}
+    {%- endif -%}
+
+# Meta tags
+tags:
+  # Open Graph
+  og:type: website
+  og:title: *page_title_with_site_name
+  og:description: *page_description
+  og:image: "{{ image.url }}"
+  og:image:type: "{{ image.type }}"
+  og:image:width: "{{ image.width }}"
+  og:image:height: "{{ image.height }}"
+  og:url: "{{ page.canonical_url }}"
+
+  # Twitter
+  twitter:card: summary_large_image
+  twitter:title: *page_title_with_site_name
+  twitter:description: *page_description
+  twitter:image: "{{ image.url }}"
+
+# -----------------------------------------------------------------------------
+# Specification
+# -----------------------------------------------------------------------------
+
+# Card size and layers
+size: { width: 1200, height: 630 }
+layers:
+  # Background
+  - background:
+      image: *background_image
+      color: *background_color
+
+  # Page icon
+  - size: { width: 630, height: 630 }
+    offset: { x: 800, y: 0 }
+    icon:
+      value: *page_icon
+      color: "#FFFFFF20"
+
+  # Logo
+  - size: { width: 64, height: 64 }
+    offset: { x: 64, y: 64 }
+    background:
+      image: *logo
+    icon:
+      value: *logo_icon
+      color: *color
+
+  # Site name
+  - size: { width: 768, height: 42 }
+    offset: { x: 160, y: 74 }
+    typography:
+      content: *site_name
+      color: *color
+      font:
+        family: *font_family
+        variant: *font_variant
+        style: Bold
+
+  # Page title
+  - size: { width: 864, height: 256 }
+    offset: { x: 62, y: 192 }
+    typography:
+      content: *page_title
+      align: start
+      color: *color
+      line:
+        amount: 3
+        height: 1.25
+      font:
+        family: *font_family
+        variant: *font_variant
+        style: Bold
+
+  # Page description
+  - size: { width: 864, height: 64 }
+    offset: { x: 64, y: 512 }
+    typography:
+      content: *page_description
+      align: start
+      color: *color
+      line:
+        amount: 2
+        height: 1.5
+      font:
+        family: *font_family
+        variant: *font_variant
+        style: Regular
--- a/docs/more/index.md
+++ b/docs/more/index.md
@ -1,6 +1,7 @@
 ---
 title: More
 description: More homepage resources and guides.
+icon: material/information-slab-circle
 ---

 Here you'll find resources and guides for Homepage, troubleshooting tips, and more.
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@ -1,36 +1,44 @@
 [data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
-    position: absolute;
-    top: .3rem;
-    right: .3rem;
-    display: block;
-    padding: .1rem .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;
-    content: "/";
-  }
+  position: absolute;
+  top: 0.3rem;
+  right: 0.3rem;
+  display: block;
+  padding: 0.1rem 0.4rem;
+  color: var(--md-default-fg-color--lighter);
+  font-weight: bold;
+  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 {
-        color: var(--md-default-bg-color--lighter);
-        border-color: var(--md-default-bg-color--lighter);
-    }
+  [data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
+    color: var(--md-default-bg-color--lighter);
+    border-color: var(--md-default-bg-color--lighter);
+  }
 }

 #glimeRoot * {
-    font-family: var(--md-text-font) !important;
+  font-family: var(--md-text-font) !important;
 }

 #carbonads {
-    margin-top: 10px;
+  margin-top: 10px;
 }

 #carbon-responsive {
-    --carbon-padding: 1em;
-    --carbon-max-char: 20ch;
-    --carbon-bg-primary: var(--md-default-bg-color) !important;
-    --carbon-bg-secondary: var(--md-default-fg-color--lightest) !important;
-    --carbon-text-color: var(--md-typeset-color) !important;
+  --carbon-padding: 1em;
+  --carbon-max-char: 20ch;
+  --carbon-bg-primary: var(--md-default-bg-color) !important;
+  --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;
 }
--- a/docs/troubleshooting/index.md
+++ b/docs/troubleshooting/index.md
@ -1,7 +1,7 @@
 ---
 title: Troubleshooting
 description: Basic Troubleshooting
-
+icon: material/message-question
 hide:
  - navigation
 ---
--- a/docs/widgets/authoring/api.md
+++ b/docs/widgets/authoring/api.md
@ -0,0 +1,50 @@
+---
+title: API Guide
+description: Get comfortable with making API calls from inside your widget.
+---
+
+Homepage provides the `useWidgetAPI` hook to help you fetch data from an API. This hook insures that the data is fetched using a proxy, and is critical for security.
+
+Here is an example of how the `useWidgetAPI` hook looks:
+
+```js title="Fetch data from the stats endpoint"
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { data, error } = useWidgetAPI(widget, "stats");
+}
+```
+
+## `useWidgetAPI`
+
+`useWidgetAPI` takes three possible arguments:
+
+- `widget`: The widget metadata object.
+- `endpoint`: The name of the endpoint to fetch data from.
+- `params`: An optional object containing query parameters to pass to the API.
+
+### `widget`
+
+The `widget` argument is the metadata object for the widget. It contains information about the API endpoint, proxy handler, and mappings. This object is used by the `useWidgetAPI` hook to fetch data from the API. This is generally passed in as a prop from the parent component.
+
+### `endpoint`
+
+The `endpoint` argument is the name of the endpoint to fetch data from. This is [defined in the widget metadata object](metadata.md#endpoint). The `useWidgetAPI` hook uses this argument to determine which endpoint to fetch data from.
+
+If no endpoint is provided, the `useWidgetAPI` hook will call the API endpoint defined in the widget metadata object directly.
+
+### `params`
+
+The `params` argument is an optional object containing query parameters to pass to the API. This is useful for filtering data or passing additional information to the API. This object is passed directly to the API endpoint as query parameters.
+
+Here is an example of how to use the `params` argument:
+
+```js title="Fetch data from the stats endpoint with query parameters"
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { data, error } = useWidgetAPI(widget, "stats", { start: "2021-01-01", end: "2021-12-31" });
+}
+```
+
+The `params` must be [whitelisted in the widget metadata object](metadata.md#params). This is done to prevent arbitrary query parameters from being passed to the API.
--- a/docs/widgets/authoring/component.md
+++ b/docs/widgets/authoring/component.md
@ -0,0 +1,102 @@
+---
+title: Component Guide
+description: Learn more about the widget component in Homepage, and how to build your widget UI.
+---
+
+Homepage widgets are built using React components. These components are responsible for fetching data from the API and rendering the widget UI. Homepage provides a set of hooks and utilities to help you build your widget component.
+
+## A Basic Widget Component
+
+Here is an example of a basic widget component:
+
+```js
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  const { data, error } = useWidgetAPI(widget, "info");
+
+  if (error) {
+    return <Container service={service} error={error} />;
+  }
+
+  if (!data) {
+    return (
+      <Container service={service}>
+        <Block label="yourwidget.key1" />
+        <Block label="yourwidget.key2" />
+        <Block label="yourwidget.key3" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
+      <Block label="yourwidget.key2" value={t("common.number", { value: data.key2 })} />
+      <Block label="yourwidget.key3" value={t("common.number", { value: data.key3 })} />
+    </Container>
+  );
+}
+```
+
+### Breakdown
+
+We'll cover two sections of the widget component: hooks and components.
+
+#### Hooks
+
+**`useTranslation`**
+
+This hook is used to translate text and numerical content in widgets. Homepage provides a set of helpers to help you localize your widgets. You can learn more about translations in the [Translations Guide](translations.md).
+
+**`useWidgetAPI`**
+
+This hook is used to fetch data from the API. We cover this hook in more detail in the [API Guide](api.md).
+
+#### Components
+
+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>
+```
--- a/docs/widgets/authoring/index.md
+++ b/docs/widgets/authoring/index.md
@ -0,0 +1,35 @@
+---
+title: Guides & Tutorials
+description: Learn how to create and customize widgets in Homepage. Explore translations, widget components, widget metadata, proxy handlers, and making API calls.
+icon: fontawesome/solid/graduation-cap
+---
+
+Widgets are a core component of Homepage. They are used to display information about your system, services, and environment.
+
+## Overview
+
+If you are new to Homepage widgets, and are looking to create a new widget, please follow along with the guide here: [Widget Tutorial](tutorial.md).
+
+### Translations
+
+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.
+
+If you are looking to learn more about translations, please refer to the guide here: [Translations Guide](translations.md).
+
+### Widget Component
+
+The widget component is the core of the widget. It is responsible for [fetching data from the API](api.md) and rendering the widget UI. Homepage provides a set of hooks and utilities to help you build your widget component.
+
+If you are looking to learn more about widget components, please refer to the guide here: [Component Guide](component.md).
+
+### Widget Metadata
+
+Widget metadata defines the configuration of the widget. It defines the API endpoint to fetch data from, the proxy handler to use, and any data mappings.
+
+If you are looking to learn more about widget metadata, endpoint and data mapping, please refer to the guide here: [Metadata Guide](metadata.md).
+
+If you are looking to learn more about proxy handlers, please refer to the guide here: [Proxies Guide](proxies.md).
+
+If you are looking to learn more making API calls from inside your widget, please refer to the guide here: [API Guide](api.md).
--- a/docs/widgets/authoring/metadata.md
+++ b/docs/widgets/authoring/metadata.md
@ -0,0 +1,310 @@
+---
+title: Metadata Guide
+description: Explore all the metadata properties that can be used to configure a widget in Homepage.
+---
+
+Here, we will go over how to create and configure Homepage widget metadata. Metadata is a JS object that contains information about the widget, such as the API endpoint, proxy handler, and mappings. This metadata is used by Homepage to fetch data from the API and pass it to the widget.
+
+## Widgets Configuration
+
+Here are some examples of how to configure a widget's metadata object.
+
+=== "Basic Example"
+
+    ```js
+    import genericProxyHandler from "utils/proxy/handlers/generic";
+
+    const widgetExample = {
+      api: "{url}/api/{endpoint}",
+      proxyHandler: genericProxyHandler,
+
+      mappings: {
+        stats: { endpoint: "stats" }
+      },
+    };
+    ```
+
+=== "Advanced Example"
+
+    ```js
+    import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+    import { asJson, jsonArrayFilter } from "utils/proxy/api-helpers";
+
+    const widgetExample = {
+      api: "{url}/api/{endpoint}",
+      proxyHandler: credentialedProxyHandler,
+
+      mappings: {
+        stats: {
+          endpoint: "stats",
+          validate: ["total", "average"],
+          params: ["start", "end"],
+        },
+        notices: {
+          endpoint: "notices",
+          map: (data) => {
+            total: asJson(data).length;
+          },
+        },
+        warnings: {
+          endpoint: "notices",
+          map: (data) => {
+            total: jsonArrayFilter(data, (alert) => alert.type === "warning").length;
+          },
+        },
+      },
+    };
+    ```
+
+A widgets metadata is quite powerful and can be configured in many different ways.
+
+## Configuration Properties
+
+### `api`
+
+The `api` property is a string that represents the URL of the API endpoint that the widget will use to fetch data. The URL can contain placeholders that will be replaced with actual values at runtime. For example, the `{url}` placeholder will be replaced with the URL of the configured widget, and the `{endpoint}` placeholder will be replaced with the value of the `endpoint` property in the `mappings` object.
+
+```js
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+};
+```
+
+### `proxyHandler`
+
+The `proxyHandler` property is a function that will be used to make the API request. Homepage includes some built-in proxy handlers that can be used out of the box:
+
+Here is an example of the generic proxy handler that makes unauthenticated requests to the specified API endpoint.
+
+=== "widget.js"
+
+    ```js
+    const widgetExample = {
+      api: "{url}/api/{endpoint}",
+      proxyHandler: genericProxyHandler,
+    };
+    ```
+
+=== "services.yaml"
+
+    ```yaml
+    - Services:
+        - Your Widget:
+            icon: yourwidget.svg
+            href: https://example.com/
+            widget:
+              type: yourwidget
+              url: http://127.0.0.1:1337
+    ```
+
+If you are looking to learn more about proxy handlers, please refer to the guide here: [Proxies Guide](proxies.md).
+
+### `mappings`
+
+The `mappings` property is an object that contains information about the API endpoint, such as the endpoint name, validation rules, and parameter names. The `mappings` object can contain multiple endpoints, each with its own configuration.
+
+!!! note "Security Note"
+
+    The `mappings` or `allowedEndpoints` property is required for the widget to fetch data from more than a static URL. Homepage uses a whitelist approach to ensure that widgets only access allowed endpoints.
+
+```js
+import { asJson } from "utils/proxy/api-helpers";
+
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+  mappings: {
+    // `/api/stats?start=...&end=...`
+    stats: {
+      endpoint: "stats",
+      validate: ["total", "average"],
+      params: ["start", "end"],
+    },
+    // `/api/notices`
+    notices: {
+      endpoint: "notices",
+      map: (data) => {
+        total: asJson(data).length;
+      },
+    },
+  },
+};
+```
+
+#### `endpoint`
+
+The `endpoint` property is a string that represents the name of the API endpoint that the widget will use to fetch data. This value will be used to replace the `{endpoint}` placeholder in the `api` property.
+
+```js
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+  mappings: {
+    // `/api/stats`
+    stats: {
+      endpoint: "stats",
+    },
+  },
+};
+```
+
+#### `validate`
+
+The `validate` property is an array of strings that represent the keys that should be validated in the API response. If the response does not contain all of the specified keys, the widget will not render.
+
+```js
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+  mappings: {
+    // `/api/stats`
+    stats: {
+      endpoint: "stats",
+      validate: ["total", "average"],
+    },
+  },
+};
+```
+
+This configuration will ensure that the API response contains the `total` and `average` keys before the widget is rendered.
+
+#### `params`
+
+The `params` property is an array of strings that represent the keys that should be passed as parameters to the API endpoint. These keys will be replaced with the actual values at runtime.
+
+=== "widget.js"
+
+    ```js
+    const widgetExample = {
+      api: "{url}/api/{endpoint}",
+      mappings: {
+        // `/api/stats?start=...&end=...`
+        stats: {
+          endpoint: "stats",
+          params: ["start", "end"],
+        },
+      },
+    };
+    ```
+
+=== "component.jsx"
+
+      ```js
+      const { data: statsData, error: statsError } = useWidgetAPI(widget, "stats", {
+        start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+        end: new Date(),
+      });
+      ```
+
+This configuration will pass the `start` and `end` keys as parameters to the API endpoint. The values are passed as an object to the `useWidgetAPI` hook.
+
+#### `map`
+
+The `map` property is a function that will be used to transform the API response before it is passed to the widget. This function is passed the raw API response and should return the transformed data.
+
+```js
+import { asJson } from "utils/proxy/api-helpers";
+
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+  mappings: {
+    // `/api/notices`
+    notices: {
+      endpoint: "notices",
+      map: (data) => {
+        total: asJson(data).length;
+      },
+    },
+    // `/api/notices`
+    warnings: {
+      endpoint: "notices",
+      map: (data) => {
+        total: asJson(data).filter((alert) => alert.type === "warning").length;
+      },
+    },
+  },
+};
+```
+
+#### `method`
+
+The `method` property is a string that represents the HTTP method that should be used to make the API request. The default value is `GET`.
+
+```js
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+  mappings: {
+    // `/api/stats`
+    stats: {
+      endpoint: "stats",
+      method: "POST",
+    },
+  },
+};
+```
+
+#### `headers`
+
+The `headers` property is an object that contains additional headers that should be included in the API request. If your endpoint requires specific headers, you can include them here.
+
+```js
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+  mappings: {
+    // `/api/stats`
+    stats: {
+      endpoint: "stats",
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  },
+};
+```
+
+#### `body`
+
+The `body` property is an object that contains the data that should be sent in the request body. This property is only used when the `method` property is set to `POST` or `PUT`.
+
+```js
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+  mappings: {
+    // `/api/graphql`
+    stats: {
+      endpoint: "graphql",
+      method: "POST",
+      body: {
+        query: `
+          query {
+            stats {
+              total
+              average
+            }
+          }
+        `,
+      },
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  },
+};
+```
+
+### `allowedEndpoints`
+
+The `allowedEndpoints` property is a RegExp that represents the allowed endpoints that the widget can use. If the widget tries to access an endpoint that is not allowed, the request will be blocked.
+
+`allowedEndpoints` can be used when endpoint validation is simple and can be done using a regular expression, and more control is not required.
+
+!!! note "Security Note"
+
+    The `mappings` or `allowedEndpoints` property is required for the widget to fetch data from more than a static URL. Homepage uses a whitelist approach to ensure that widgets only access allowed endpoints.
+
+```js
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+  allowedEndpoints: /^stats|notices$/,
+};
+```
+
+This configuration will only allow the widget to access the `stats` and `notices` endpoints.
--- a/docs/widgets/authoring/proxies.md
+++ b/docs/widgets/authoring/proxies.md
@ -0,0 +1,178 @@
+---
+title: Proxies Guide
+description: Learn about proxy handlers in Homepage, and how to securely fetch data from an API.
+---
+
+Homepage includes a set of built-in proxy handlers that can be used to fetch data from an API. We will go over how to use these proxy handlers and briefly cover how to create your own.
+
+## Available Proxy Handlers
+
+Homepage comes with a few built-in proxy handlers that can be used to fetch data from an API. These handlers are located in the `utils/proxy/handlers` directory.
+
+### `genericProxyHandler`
+
+A proxy handler that makes generally unauthenticated requests to the specified API endpoint.
+
+```js
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widgetExample = {
+  api: "{url}/api/{endpoint}",
+  proxyHandler: genericProxyHandler,
+};
+```
+
+You can also pass API keys from the widget configuration to the proxy handler, for authenticated requests.
+
+=== "widget.js"
+
+    ```js
+    import genericProxyHandler from "utils/proxy/handlers/generic";
+
+    const widgetExample = {
+      api: "{url}/api/{endpoint}?key={key}",
+      proxyHandler: genericProxyHandler,
+    };
+    ```
+
+=== "services.yaml"
+
+    ```yaml
+    # Widget Configuration
+    - Your Widget:
+        icon: yourwidget.svg
+        href: https://example.com/
+        widget:
+          type: yourwidget
+          url: http://example.com
+          key: your-api-key
+    ```
+
+### `credentialedProxyHandler`
+
+A proxy handler that makes authenticated by setting request headers. Credentials are pulled from the widgets configuration.
+
+By default the key is passed as an `X-API-Key` header. If you need to pass the key as something else, either add a case to the credentialedProxyHandler or create a new proxy handler.
+
+=== "widget.js"
+
+    ```js
+    import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+    const widgetExample = {
+      api: "{url}/api/{endpoint}?key={key}",
+      proxyHandler: credentialedProxyHandler,
+    };
+    ```
+
+=== "services.yaml"
+
+    ```yaml
+    - Your Widget:
+        icon: yourwidget.svg
+        href: https://example.com/
+        widget:
+          type: yourwidget
+          url: http://127.0.0.1:1337
+          key: your-api-key
+    ```
+
+### `jsonrpcProxyHandler`
+
+A proxy handler that makes authenticated JSON-RPC requests to the specified API endpoint. Where the endpoint is the method to call.
+
+=== "widget.js"
+
+    ```js
+    import jsonrpcProxyHandler from "utils/proxy/handlers/jsonrpc";
+
+    const widgetExample = {
+      api: "{url}/api/jsonrpc",
+      proxyHandler: jsonrpcProxyHandler,
+
+      mappings: {
+        total: { endpoint: "total" },
+        average: { endpoint: "average" },
+      },
+    };
+    ```
+
+=== "services.yaml"
+
+    ```yaml
+    - Your Widget:
+        icon: yourwidget.svg
+        href: https://example.com/
+        widget:
+          type: yourwidget
+          url: http://127.0.0.1:1337
+          username: your-username
+          password: your-password
+    ```
+
+### `synologyProxyHandler`
+
+A proxy handler that makes authenticated requests to the specified Synology API endpoint. This is used exclusively for Synology DSM services.
+
+=== "widget.js"
+
+    ```js
+    import synologyProxyHandler from "utils/proxy/handlers/synology";
+
+    const widgetExample = {
+      api: "{url}/webapi/{cgiPath}?api={apiName}&version={maxVersion}&method={apiMethod}",
+      proxyHandler: synologyProxyHandler,
+
+      mappings: {
+        system_storage: {
+          apiName: "SYNO.Core.System",
+          apiMethod: 'info&type="storage"',
+          endpoint: "system_storage",
+        }
+      },
+    };
+    ```
+
+=== "services.yaml"
+
+    ```yaml
+    - Your Widget:
+        icon: yourwidget.svg
+        href: https://example.com/
+        widget:
+          type: yourwidget
+          url: http://127.0.0.1:1337
+          username: your-username
+          password: your-password
+    ```
+
+## Creating a Custom Proxy Handler
+
+You can create your own proxy handler to fetch data from an API. A proxy handler is a function that takes a configuration object and returns a function that makes the API request.
+
+The proxy handler function takes three arguments:
+
+- `req`: The request object.
+- `res`: The response object.
+- `map`: A function that maps the API response to the widget data.
+
+The proxy handler function should return a promise that resolves to the API response.
+
+Here is an example of a simple proxy handler that fetches data from an API and passes it to the widget:
+
+```js
+import createLogger from "utils/logger";
+import { httpProxy } from "utils/proxy/http";
+
+const logger = createLogger("customProxyHandler");
+
+export default async function customProxyHandler(req, res, map) {
+  const { url } = req.query;
+
+  const [status, contentType, data] = await httpProxy(url);
+
+  return res.status(status).send(data);
+}
+```
+
+Proxy handlers are a complex topic and require a good understanding of JavaScript and the Homepage codebase. If you are new to Homepage, we recommend using the built-in proxy handlers.
--- a/docs/widgets/authoring/translations.md
+++ b/docs/widgets/authoring/translations.md
@ -0,0 +1,80 @@
+---
+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.            |
--- a/docs/widgets/authoring/tutorial.md
+++ b/docs/widgets/authoring/tutorial.md
@ -0,0 +1,289 @@
+---
+title: Widget Tutorial
+description: Follow along with this guide to learn how to create a custom widget for Homepage. We'll cover the basic structure of a widget, how to use translations, and how to fetch data from an API.
+---
+
+In this guide, we'll walk through the process of creating a custom widget for Homepage. We'll cover the basic structure of a widget, how to use translations, and how to fetch data from an API. By the end of this guide, you'll have a solid understanding of how to build your own custom widget.
+
+**Prerequisites:**
+
+- Basic knowledge of React and JavaScript
+- Familiarity with the Homepage platform
+- Understanding of JSON and API interactions
+
+Throughout this guide, we'll use `yourwidget` as a placeholder for the unique name of your custom widget. Replace `yourwidget` with the actual name of your widget. It should contain only lowercase letters and no spaces.
+
+This guide makes use of a fake API, which would return a JSON response as such, when called with the `v1/info` endpoint:
+
+```json
+{ "key1": 123, "key2": 456, "key3": 789 }
+```
+
+## Set up the widget definition
+
+Create a new folder for your widget in the `src/widgets` directory. Name the folder `yourwidget`.
+
+Inside the `yourwidget` folder, create a new file named `widget.js`. This file will contain the metadata for your widget.
+
+Open the `widget.js` file and add the following code:
+
+```js title="src/widgets/yourwidget/widget.js"
+import genericProxyHandler from "utils/proxy/handlers/generic"; // (1)!
+
+const widget = /* (2)! */ {
+  api: "{url}/{endpoint}" /* (3)! */,
+  proxyHandler: genericProxyHandler /* (1)! */,
+
+  mappings: /* (4)! */ {
+    info: /* (5)! */ {
+      endpoint: "v1/info" /* (6)! */,
+    },
+  },
+};
+
+export default widget;
+```
+
+1. We import the `genericProxyHandler` from the `utils/proxy/handlers/generic` module. The `genericProxyHandler` is a generic handler that can be used to fetch data from an API. We then assign the `genericProxyHandler` to the `proxyHandler` property of the `widget` object. There are other handlers available that you can use depending on your requirements. You can also create custom handlers if needed.
+2. We define a `widget` object that contains the metadata for the widget.
+3. The API endpoint to fetch data from. You can use placeholders like `{url}` and `{endpoint}` to dynamically generate the API endpoint based on the widget configuration.
+4. An object that contains mappings for different endpoints. Each mapping should have an `endpoint` property that specifies the endpoint to fetch data from.
+5. A mapping named `info` that specifies the `v1/info` endpoint to fetch data from. This would be called from the component as such: `#!js useWidgetAPI(widget, "info");`
+6. The `endpoint` property of the `info` mapping specifies the endpoint to fetch data from. There are other properties you can pass to the mapping, such as `method`, `headers`, and `body`.
+
+!!! warning "Important"
+
+    All widgets that fetch data from dynamic endpoints should have either `mappings` or an `allowedEndpoints` property.
+
+## Set up translation strings
+
+Homepage uses translated and localized strings for **all text and numerical content** in widgets. English is the default language, and other languages can be added via [Crowdin](https://crowdin.com/project/gethomepage). To add the English translations for your widget, follow these steps:
+
+Open the `public/locales/en/common.js` file.
+
+Add a new object for your widget to the bottom of the list, like this:
+
+```json
+"yourwidget": {
+  "key1": "Value 1",
+  "key2": "Value 2",
+  "key3": "Value 3"
+}
+```
+
+!!! note
+
+    Even if you nativly speak another language, you should only add English translations.  You can then add translations in your native language via [Crowdin](https://crowdin.com/project/gethomepage), once your widget is merged.
+
+## Create the widget component
+
+Create a new file for your widgets component, named `component.jsx`, in the `src/widgets/yourwidget` directory. We'll build the contents of the `component.jsx` file step by step.
+
+First, we'll import the necessary dependencies:
+
+```js title="src/widgets/yourwidget/component.jsx" linenums="1"
+import { useTranslation } from "next-i18next"; // (1)!
+
+import Container from "components/services/widget/container"; // (2)!
+import Block from "components/services/widget/block"; // (3)!
+import useWidgetAPI from "utils/proxy/use-widget-api"; // (4)!
+```
+
+1. `#!js useTranslation()` is a hook provided by `next-i18next` that allows us to access the translation strings
+2. `#!jsx <Container>` and `#!jsx <Block>` are custom components that we'll use to structure our widget.
+3. `#!jsx <Container>` and `#!jsx <Block>` are custom components that we'll use to structure our widget.
+4. `#!js useWidgetAPI(widget, endpoint)` is a custom hook that we'll use to fetch data from an API.
+
+---
+
+Next, we'll define a functional component named `Component` that takes a `service` prop.
+
+```js title="src/widgets/yourwidget/component.jsx" linenums="7"
+export default function Component({ service }) {}
+```
+
+---
+
+We grab the helper functions from the `useTranslation` hook.
+
+```js title="src/widgets/yourwidget/component.jsx" linenums="8"
+const { t } = useTranslation();
+```
+
+---
+
+We destructure the `widget` object from the `service` prop. The `widget` object contains the metadata for the widget, such as the API endpoint to fetch data from.
+
+```js title="src/widgets/yourwidget/component.jsx" linenums="9"
+const { widget } = service;
+```
+
+---
+
+Now, the fun part! We use the `useWidgetAPI` hook to fetch data from an API. The `useWidgetAPI` hook takes two arguments: the `widget` object and the API endpoint to fetch data from. The `useWidgetAPI` hook returns an object with `data` and `error` properties.
+
+```js title="src/widgets/yourwidget/component.jsx" linenums="10"
+const { data, error } = useWidgetAPI(widget, "info");
+```
+
+!!! tip "API Tips"
+
+    You'll see here how part of the API url is built using the `url` and `endpoint` properties from the widget definition.
+
+    In this case, we're fetching data from the `info` endpoint.  The `info` endpoint is defined in the `mappings` object.  So the full API endpoint will be `"{url}/v1/info"`.
+
+    The mapping and endpoint are often the same, but must be defined regardless.
+
+---
+
+Next, we check if there's an error or no data.
+
+If there's an error, we return a `Container` and pass it the `service` and `error` as props. The `Container` component will handle displaying the error message.
+
+```js title="src/widgets/yourwidget/component.jsx" linenums="12"
+if (error) {
+  return <Container service={service} error={error} />;
+}
+```
+
+---
+
+If there's no data, we return a `Container` component with three `Block` components, each with a `label`.
+
+```js title="src/widgets/yourwidget/component.jsx" linenums="16"
+if (!data) {
+  return (
+    <Container service={service}>
+      <Block label="yourwidget.key1" />
+      <Block label="yourwidget.key2" />
+      <Block label="yourwidget.key3" />
+    </Container>
+  );
+}
+```
+
+This will render the widget with placeholders for the data, i.e., a skeleton view.
+
+!!! tip "Translation Tips"
+
+      The `label` prop in the `Block` component corresponds to the translation key we defined earlier in the `common.js` file.  All text and numerical content should be translated.
+
+---
+
+If there is data, we return a `Container` component with three `Block` components, each with a `label` and a `value`.
+
+Here we use the `t` function from the `useTranslation` hook to translate the data values. The `t` function takes the translation key and an object with variables to interpolate into the translation string.
+
+We're using the `common.number` translation key to format the data values as numbers. This allows for easy localization of numbers, such as using commas or periods as decimal separators.
+
+There are a large number of `common` numerical translation keys available, which you can learn more about in the [Translation Guide](translations.md).
+
+```js title="src/widgets/yourwidget/component.jsx" linenums="26"
+return (
+  <Container service={service}>
+    <Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
+    <Block label="yourwidget.key2" value={t("common.number", { value: data.key2 })} />
+    <Block label="yourwidget.key3" value={t("common.number", { value: data.key3 })} />
+  </Container>
+);
+```
+
+---
+
+Here's the complete `component.jsx` file:
+
+```js title="src/widgets/yourwidget/component.jsx" linenums="1"
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  const { data, error } = useWidgetAPI(widget, "info");
+
+  if (error) {
+    return <Container service={service} error={error} />;
+  }
+
+  if (!data) {
+    return (
+      <Container service={service}>
+        <Block label="yourwidget.key1" />
+        <Block label="yourwidget.key2" />
+        <Block label="yourwidget.key3" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="yourwidget.key1" value={t("common.number", { value: data.key1 })} />
+      <Block label="yourwidget.key2" value={t("common.number", { value: data.key2 })} />
+      <Block label="yourwidget.key3" value={t("common.number", { value: data.key3 })} />
+    </Container>
+  );
+}
+```
+
+## Add the widget to the Homepage
+
+To add your widget to the Homepage, you need to register it in the `src/widgets/widgets.js` file.
+
+Open the `src/widgets/widgets.js` file and import the `Component` from your widget's `component.jsx` file. Please keep the alphabetical order.
+
+```js
+// ...
+import yourwidget from "./yourwidget/widget";
+// ...
+```
+
+Add `yourwidget` to the `widgets` object. Please keep the alphabetical order.
+
+```js
+const widgets = {
+  // ...
+  yourwidget: yourwidget,
+  // ...
+};
+```
+
+You also need to add the widget to the `components` object in the `src/widgets/components.js` file.
+
+Open the `src/widgets/components.js` file and import the `Component` from your widget's `component.jsx` file.
+
+Please keep the alphabetical order.
+
+```js
+const components = {
+  // ...
+  yourwidget: dynamic(() => import("./yourwidget/component")),
+  // ...
+};
+```
+
+## Using the widget
+
+You can now use your custom widget in your Homepage. Open your `services.yaml` file and add a new service with the `yourwidget` widget.
+
+```yaml
+- Services:
+    - Your Widget:
+        icon: yourwidget.svg
+        href: https://example.com/
+        widget:
+          type: yourwidget
+          url: http://127.0.0.1:1337
+```
+
+!!! tip "API Tips"
+
+    You'll see here how part of the API url is built using the `url` and `endpoint` properties from the widget definition.
+
+    We defined the api endpoint as `"{url}/{endpoint}"`.  This is where the `url` is defined.  So the full API endpoint will be `http://127.0.0.1:1337/{endpoint}`.
+
+---
+
+That's it! You've successfully created a custom widget for Homepage. If you have any questions or need help, feel free to reach out to the Homepage community for assistance. Happy coding!
--- a/docs/widgets/index.md
+++ b/docs/widgets/index.md
@ -1,6 +1,7 @@
 ---
 title: Widgets
-description: Homepage info and status widgets.
+description: Find information on how to configure specific widgets in Homepage.
+icon: material/widgets
 ---

 Homepage has two types of widgets: info and service. Below we'll cover each type and how to configure them.
--- a/docs/widgets/services/mjpeg.md
+++ b/docs/widgets/services/mjpeg.md
@ -3,7 +3,7 @@ title: MJPEG
 description: MJPEG Stream Widget Configuration
 ---

-![camera-preview](https://github.com/gethomepage/homepage-docs/assets/82196/dc375ae3-0670-489f-8db6-83ff1f423d12)
+![camera-preview](https://github.com/gethomepage/homepage/assets/4887959/dbc388d7-04a6-482c-8f36-f9534689b062)

 Pass the stream URL from a service like [µStreamer](https://github.com/pikvm/ustreamer) or [camera-streamer](https://github.com/ayufan/camera-streamer).

--- a/mkdocs.yml
+++ b/mkdocs.yml
@ -1,4 +1,4 @@
-site_name: homepage
+site_name: Homepage

 # Project information
 site_url: https://gethomepage.dev/
@ -10,199 +10,212 @@ edit_uri: https://github.com/gethomepage/homepage/tree/main/docs/

 nav:
  - "Home":
-    - index.md
+      - index.md
  - "Installation":
-    - installation/index.md
-    - installation/docker.md
-    - installation/k8s.md
-    - installation/unraid.md
-    - installation/source.md
+      - installation/index.md
+      - installation/docker.md
+      - installation/k8s.md
+      - installation/unraid.md
+      - installation/source.md
  - "Configuration":
-    - configs/index.md
-    - configs/settings.md
-    - configs/bookmarks.md
-    - configs/services.md
-    - configs/service-widgets.md
-    - configs/kubernetes.md
-    - configs/docker.md
-    - configs/custom-css-js.md
+      - configs/index.md
+      - configs/settings.md
+      - configs/bookmarks.md
+      - configs/services.md
+      - configs/service-widgets.md
+      - configs/kubernetes.md
+      - configs/docker.md
+      - configs/custom-css-js.md
  - "Widgets":
-    - widgets/index.md
-    - "Service Widgets":
-      - widgets/services/index.md
-      - widgets/services/adguard-home.md
-      - widgets/services/atsumeru.md
-      - widgets/services/audiobookshelf.md
-      - widgets/services/authentik.md
-      - widgets/services/autobrr.md
-      - widgets/services/azuredevops.md
-      - widgets/services/bazarr.md
-      - widgets/services/caddy.md
-      - widgets/services/calendar.md
-      - widgets/services/calibre-web.md
-      - widgets/services/changedetectionio.md
-      - widgets/services/channelsdvrserver.md
-      - widgets/services/cloudflared.md
-      - widgets/services/coin-market-cap.md
-      - widgets/services/crowdsec.md
-      - widgets/services/customapi.md
-      - widgets/services/deluge.md
-      - widgets/services/diskstation.md
-      - widgets/services/downloadstation.md
-      - widgets/services/emby.md
-      - widgets/services/esphome.md
-      - widgets/services/evcc.md
-      - widgets/services/fileflows.md
-      - widgets/services/flood.md
-      - widgets/services/freshrss.md
-      - widgets/services/fritzbox.md
-      - widgets/services/gamedig.md
-      - widgets/services/gatus.md
-      - widgets/services/ghostfolio.md
-      - widgets/services/gitea.md
-      - widgets/services/glances.md
-      - widgets/services/gluetun.md
-      - widgets/services/gotify.md
-      - widgets/services/grafana.md
-      - widgets/services/hdhomerun.md
-      - widgets/services/healthchecks.md
-      - widgets/services/homeassistant.md
-      - widgets/services/homebox.md
-      - widgets/services/homebridge.md
-      - widgets/services/iframe.md
-      - widgets/services/immich.md
-      - widgets/services/jackett.md
-      - widgets/services/jdownloader.md
-      - widgets/services/jellyfin.md
-      - widgets/services/jellyseerr.md
-      - widgets/services/kavita.md
-      - widgets/services/komga.md
-      - widgets/services/kopia.md
-      - widgets/services/lidarr.md
-      - widgets/services/mastodon.md
-      - widgets/services/mealie.md
-      - widgets/services/medusa.md
-      - widgets/services/mikrotik.md
-      - widgets/services/minecraft.md
-      - widgets/services/miniflux.md
-      - widgets/services/mjpeg.md
-      - widgets/services/moonraker.md
-      - widgets/services/mylar.md
-      - widgets/services/navidrome.md
-      - widgets/services/netdata.md
-      - widgets/services/netalertx.md
-      - widgets/services/nextcloud.md
-      - widgets/services/nextdns.md
-      - widgets/services/nginx-proxy-manager.md
-      - widgets/services/nzbget.md
-      - widgets/services/octoprint.md
-      - widgets/services/omada.md
-      - widgets/services/ombi.md
-      - widgets/services/opendtu.md
-      - widgets/services/openmediavault.md
-      - widgets/services/opnsense.md
-      - widgets/services/openwrt.md
-      - widgets/services/overseerr.md
-      - widgets/services/paperlessngx.md
-      - widgets/services/peanut.md
-      - widgets/services/pfsense.md
-      - widgets/services/photoprism.md
-      - widgets/services/pihole.md
-      - widgets/services/plantit.md
-      - widgets/services/plex-tautulli.md
-      - widgets/services/plex.md
-      - widgets/services/portainer.md
-      - widgets/services/prometheus.md
-      - widgets/services/prowlarr.md
-      - widgets/services/proxmox.md
-      - widgets/services/proxmoxbackupserver.md
-      - widgets/services/pterodactyl.md
-      - widgets/services/pyload.md
-      - widgets/services/qbittorrent.md
-      - widgets/services/qnap.md
-      - widgets/services/radarr.md
-      - widgets/services/readarr.md
-      - widgets/services/romm.md
-      - widgets/services/rutorrent.md
-      - widgets/services/sabnzbd.md
-      - widgets/services/scrutiny.md
-      - widgets/services/sonarr.md
-      - widgets/services/speedtest-tracker.md
-      - widgets/services/stash.md
-      - widgets/services/swagdashboard.md
-      - widgets/services/syncthing-relay-server.md
-      - widgets/services/tailscale.md
-      - widgets/services/tandoor.md
-      - widgets/services/tdarr.md
-      - widgets/services/traefik.md
-      - widgets/services/transmission.md
-      - widgets/services/truenas.md
-      - widgets/services/tubearchivist.md
-      - widgets/services/unifi-controller.md
-      - widgets/services/unmanic.md
-      - widgets/services/uptime-kuma.md
-      - widgets/services/uptimerobot.md
-      - widgets/services/urbackup.md
-      - widgets/services/watchtower.md
-      - widgets/services/whatsupdocker.md
-      - widgets/services/xteve.md
-    - "Information Widgets":
-      - widgets/info/index.md
-      - widgets/info/datetime.md
-      - widgets/info/glances.md
-      - widgets/info/greeting.md
-      - widgets/info/kubernetes.md
-      - widgets/info/logo.md
-      - widgets/info/longhorn.md
-      - widgets/info/openmeteo.md
-      - widgets/info/openweathermap.md
-      - widgets/info/resources.md
-      - widgets/info/search.md
-      - widgets/info/unifi_controller.md
-      - widgets/info/weather.md
-  - more/troubleshooting.md
+      - widgets/index.md
+      - "Service Widgets":
+          - widgets/services/index.md
+          - widgets/services/adguard-home.md
+          - widgets/services/atsumeru.md
+          - widgets/services/audiobookshelf.md
+          - widgets/services/authentik.md
+          - widgets/services/autobrr.md
+          - widgets/services/azuredevops.md
+          - widgets/services/bazarr.md
+          - widgets/services/caddy.md
+          - widgets/services/calendar.md
+          - widgets/services/calibre-web.md
+          - widgets/services/changedetectionio.md
+          - widgets/services/channelsdvrserver.md
+          - widgets/services/cloudflared.md
+          - widgets/services/coin-market-cap.md
+          - widgets/services/crowdsec.md
+          - widgets/services/customapi.md
+          - widgets/services/deluge.md
+          - widgets/services/diskstation.md
+          - widgets/services/downloadstation.md
+          - widgets/services/emby.md
+          - widgets/services/esphome.md
+          - widgets/services/evcc.md
+          - widgets/services/fileflows.md
+          - widgets/services/flood.md
+          - widgets/services/freshrss.md
+          - widgets/services/fritzbox.md
+          - widgets/services/gamedig.md
+          - widgets/services/gatus.md
+          - widgets/services/ghostfolio.md
+          - widgets/services/gitea.md
+          - widgets/services/glances.md
+          - widgets/services/gluetun.md
+          - widgets/services/gotify.md
+          - widgets/services/grafana.md
+          - widgets/services/hdhomerun.md
+          - widgets/services/healthchecks.md
+          - widgets/services/homeassistant.md
+          - widgets/services/homebox.md
+          - widgets/services/homebridge.md
+          - widgets/services/iframe.md
+          - widgets/services/immich.md
+          - widgets/services/jackett.md
+          - widgets/services/jdownloader.md
+          - widgets/services/jellyfin.md
+          - widgets/services/jellyseerr.md
+          - widgets/services/kavita.md
+          - widgets/services/komga.md
+          - widgets/services/kopia.md
+          - widgets/services/lidarr.md
+          - widgets/services/mastodon.md
+          - widgets/services/mealie.md
+          - widgets/services/medusa.md
+          - widgets/services/mikrotik.md
+          - widgets/services/minecraft.md
+          - widgets/services/miniflux.md
+          - widgets/services/mjpeg.md
+          - widgets/services/moonraker.md
+          - widgets/services/mylar.md
+          - widgets/services/navidrome.md
+          - widgets/services/netdata.md
+          - widgets/services/netalertx.md
+          - widgets/services/nextcloud.md
+          - widgets/services/nextdns.md
+          - widgets/services/nginx-proxy-manager.md
+          - widgets/services/nzbget.md
+          - widgets/services/octoprint.md
+          - widgets/services/omada.md
+          - widgets/services/ombi.md
+          - widgets/services/opendtu.md
+          - widgets/services/openmediavault.md
+          - widgets/services/opnsense.md
+          - widgets/services/openwrt.md
+          - widgets/services/overseerr.md
+          - widgets/services/paperlessngx.md
+          - widgets/services/peanut.md
+          - widgets/services/pfsense.md
+          - widgets/services/photoprism.md
+          - widgets/services/pihole.md
+          - widgets/services/plantit.md
+          - widgets/services/plex-tautulli.md
+          - widgets/services/plex.md
+          - widgets/services/portainer.md
+          - widgets/services/prometheus.md
+          - widgets/services/prowlarr.md
+          - widgets/services/proxmox.md
+          - widgets/services/proxmoxbackupserver.md
+          - widgets/services/pterodactyl.md
+          - widgets/services/pyload.md
+          - widgets/services/qbittorrent.md
+          - widgets/services/qnap.md
+          - widgets/services/radarr.md
+          - widgets/services/readarr.md
+          - widgets/services/romm.md
+          - widgets/services/rutorrent.md
+          - widgets/services/sabnzbd.md
+          - widgets/services/scrutiny.md
+          - widgets/services/sonarr.md
+          - widgets/services/speedtest-tracker.md
+          - widgets/services/stash.md
+          - widgets/services/swagdashboard.md
+          - widgets/services/syncthing-relay-server.md
+          - widgets/services/tailscale.md
+          - widgets/services/tandoor.md
+          - widgets/services/tdarr.md
+          - widgets/services/traefik.md
+          - widgets/services/transmission.md
+          - widgets/services/truenas.md
+          - widgets/services/tubearchivist.md
+          - widgets/services/unifi-controller.md
+          - widgets/services/unmanic.md
+          - widgets/services/uptime-kuma.md
+          - widgets/services/uptimerobot.md
+          - widgets/services/urbackup.md
+          - widgets/services/watchtower.md
+          - widgets/services/wgeasy.md
+          - widgets/services/whatsupdocker.md
+          - widgets/services/xteve.md
+      - "Information Widgets":
+          - widgets/info/index.md
+          - widgets/info/datetime.md
+          - widgets/info/glances.md
+          - widgets/info/greeting.md
+          - widgets/info/kubernetes.md
+          - widgets/info/logo.md
+          - widgets/info/longhorn.md
+          - widgets/info/openmeteo.md
+          - widgets/info/openweathermap.md
+          - widgets/info/resources.md
+          - widgets/info/search.md
+          - widgets/info/unifi_controller.md
+          - widgets/info/weather.md
+  - "Learn":
+      - widgets/authoring/index.md
+      - "Tutorials":
+          - widgets/authoring/tutorial.md
+      - "Guides":
+          - widgets/authoring/component.md
+          - widgets/authoring/metadata.md
+          - widgets/authoring/proxies.md
+          - widgets/authoring/api.md
+          - widgets/authoring/translations.md
+  - "Troubleshooting":
+      - troubleshooting/index.md
  - "More":
-    - more/index.md
-    - more/development.md
-    - more/translations.md
-    - more/homepage-move.md
+      - more/index.md
+      - more/development.md
+      - more/translations.md
+      - more/homepage-move.md

 theme:
  name: material
  custom_dir: docs/overrides
  language: en
  palette:
-      - media: "(prefers-color-scheme)"
-        toggle:
-            icon: material/brightness-auto
-            name: Switch to light mode
-      - media: "(prefers-color-scheme: light)"
-        scheme: default
-        primary: black
-        accent: black
-        toggle:
-            icon: material/brightness-7
-            name: Switch to dark mode
-      - media: "(prefers-color-scheme: dark)"
-        scheme: slate
-        primary: black
-        accent: blue
-        toggle:
-            icon: material/brightness-4
-            name: Switch to system preference
+    - media: "(prefers-color-scheme)"
+      toggle:
+        icon: material/brightness-auto
+        name: Switch to light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      primary: black
+      accent: black
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: black
+      accent: blue
+      toggle:
+        icon: material/brightness-4
+        name: Switch to system preference
  logo: assets/light_squircle@2x.png
  favicon: assets/favicon.ico
  features:
-      - navigation.instant
-      - content.action.edit
-      - search.suggest
-      - search.share
-      - content.code.copy
-      - content.code.select
-      - navigation.tracking
-      - navigation.tabs
-      - navigation.sections
-      - navigation.indexes
+    - navigation.instant
+    - content.action.edit
+    - search.suggest
+    - search.share
+    - content.code.copy
+    - content.code.select
+    - navigation.tracking
+    - navigation.tabs
+    - navigation.sections
+    - navigation.indexes
+    - content.code.annotate

 extra_css:
  - "stylesheets/extra.css"
@ -231,6 +244,8 @@ markdown_extensions:
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences
+  - pymdownx.tabbed:
+      alternate_style: true
  - pymdownx.critic
  - pymdownx.caret
  - pymdownx.keys
@ -245,12 +260,20 @@ plugins:
  - group:
      enabled: !ENV MKINSIDERS
      plugins:
-        - optimize
        - typeset
-        - social
+        - social:
+            cards_layout_dir: docs/layouts
+            cards_layout: custom
+            cards_layout_options:
+              background_image: docs/assets/BlossomValley.jpg
+              background_color: "rgba(13, 29, 41, 128)"
+              color: "#ffffff"
  - tags
  - search:
      pipeline:
        - stemmer
        - stopWordFilter
        - trimmer
+  - redirects:
+      redirect_maps:
+        "more/troubleshooting.md": "troubleshooting/index.md"
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -140,7 +140,7 @@
        "connectionStatusPendingDisconnect": "Desconexión pendiente",
        "connectionStatusDisconnecting": "Desconectando",
        "connectionStatusDisconnected": "Desconectado",
-        "connectionStatusConnected": "Connected",
+        "connectionStatusConnected": "Conectado",
        "uptime": "Tiempo activo",
        "maxDown": "Descarga máxima",
        "maxUp": "Subida máxima",
@ -279,9 +279,9 @@
    },
    "netalertx": {
        "total": "Total",
-        "connected": "Connected",
-        "new_devices": "New Devices",
-        "down_alerts": "Down Alerts"
+        "connected": "Conectado",
+        "new_devices": "Nuevos dispositivos",
+        "down_alerts": "Alertas de caída"
    },
    "pihole": {
        "queries": "Consultas",
@ -544,7 +544,7 @@
    "hdhomerun": {
        "channels": "Canales",
        "hd": "Alta definición",
-        "tunerCount": "Tuners",
+        "tunerCount": "Sintonizadores",
        "channelNumber": "Canal",
        "channelNetwork": "Red",
        "signalStrength": "Intensidad",
@ -827,7 +827,7 @@
    },
    "romm": {
        "platforms": "Plataformas",
-        "totalRoms": "Total ROMs"
+        "totalRoms": "ROMs totales"
    },
    "netdata": {
        "warnings": "Advertencias",
@ -835,38 +835,38 @@
    },
    "plantit": {
        "events": "Eventos",
-        "plants": "Plants",
+        "plants": "Plantas",
        "photos": "Fotos",
-        "species": "Species"
+        "species": "Especies"
    },
    "gitea": {
        "notifications": "Notificaciones",
        "issues": "Números",
-        "pulls": "Pull Requests"
+        "pulls": "Solicitudes de cambios"
    },
    "stash": {
-        "scenes": "Scenes",
-        "scenesPlayed": "Scenes Played",
-        "playCount": "Total Plays",
-        "playDuration": "Time Watched",
-        "sceneSize": "Scenes Size",
-        "sceneDuration": "Scenes Duration",
+        "scenes": "Escenas",
+        "scenesPlayed": "Escenas reproducidas",
+        "playCount": "Reproducciones totales",
+        "playDuration": "Tiempo visto",
+        "sceneSize": "Tamaño de las escenas",
+        "sceneDuration": "Duración de las escenas",
        "images": "Imágenes",
        "imageSize": "Tamaño de imagen",
        "galleries": "Galerías",
-        "performers": "Performers",
-        "studios": "Studios",
+        "performers": "Intérpretes",
+        "studios": "Estudios",
        "movies": "Películas",
        "tags": "Etiquetas",
-        "oCount": "O Count"
+        "oCount": "O cuenta"
    },
    "tandoor": {
        "users": "Usuarios",
        "recipes": "Recetas",
-        "keywords": "Keywords"
+        "keywords": "Palabras clave"
    },
    "homebox": {
-        "items": "Items",
+        "items": "Objetos",
        "totalWithWarranty": "Con Garantía",
        "locations": "Ubicaciones",
        "labels": "Etiquetas",
@ -875,10 +875,10 @@
    },
    "crowdsec": {
        "alerts": "Alertas",
-        "bans": "Bans"
+        "bans": "Baneos"
    },
    "wgeasy": {
-        "connected": "Connected",
+        "connected": "Conectado",
        "enabled": "Activado",
        "disabled": "Desactivado",
        "total": "Total"
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@ -884,9 +884,9 @@
        "total": "Total"
    },
    "swagdashboard": {
-        "proxied": "Proxied",
-        "auth": "With Auth",
-        "outdated": "Outdated",
-        "banned": "Banned"
+        "proxied": "Par proxy",
+        "auth": "Avec authentification",
+        "outdated": "Obsolète",
+        "banned": "Banni"
    }
 }
--- a/public/locales/zh-Hans/common.json
+++ b/public/locales/zh-Hans/common.json
@ -234,7 +234,7 @@
    },
    "sonarr": {
        "wanted": "关注中",
-        "queued": "已加入队列",
+        "queued": "队列中",
        "series": "剧集",
        "queue": "队列",
        "unknown": "未知"
@ -242,19 +242,19 @@
    "radarr": {
        "wanted": "关注中",
        "missing": "缺失",
-        "queued": "已加入队列",
+        "queued": "队列中",
        "movies": "电影",
        "queue": "队列",
        "unknown": "未知"
    },
    "lidarr": {
        "wanted": "关注中",
-        "queued": "已加入队列",
+        "queued": "队列中",
        "artists": "艺术家"
    },
    "readarr": {
        "wanted": "关注中",
-        "queued": "已加入队列",
+        "queued": "队列中",
        "books": "书籍"
    },
    "bazarr": {
@ -375,7 +375,7 @@
    },
    "medusa": {
        "wanted": "关注中",
-        "queued": "已加入队列",
+        "queued": "队列中",
        "series": "剧集"
    },
    "minecraft": {
--- a/requirements.txt
+++ b/requirements.txt
@ -9,9 +9,9 @@ Jinja2==3.1.2
 Markdown==3.4.4
 MarkupSafe==2.1.3
 mergedeep==1.3.4
-mkdocs==1.5.3
-mkdocs-material==9.5.2
-mkdocs-material-extensions==1.3
+mkdocs==1.6
+mkdocs-material==9.5.26
+mkdocs-material-extensions==1.3.1
 packaging==23.1
 paginate==0.5.6
 pathspec==0.11.2
@ -27,3 +27,4 @@ six==1.16.0
 urllib3==2.0.5
 watchdog==3.0.0
 pre-commit==3.5.0
+mkdocs-material[imaging]==9.5.26
--- a/src/components/quicklaunch.jsx
+++ b/src/components/quicklaunch.jsx
@ -69,16 +69,18 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
  }, [close, setSearchString, setCurrentItemIndex, setSearchSuggestions]);

  function handleSearchChange(event) {
-    const rawSearchString = event.target.value.toLowerCase();
+    const rawSearchString = event.target.value;
    try {
      if (!/.+[.:].+/g.test(rawSearchString)) throw new Error(); // basic test for probably a url
      let urlString = rawSearchString;
-      if (urlString.indexOf("http") !== 0) urlString = `https://${rawSearchString}`;
+      if (urlString.toLowerCase().indexOf("http") !== 0) urlString = `https://${rawSearchString}`;
      setUrl(new URL(urlString)); // basic validation
+      setSearchString(rawSearchString);
+      return;
    } catch (e) {
      setUrl(null);
    }
-    setSearchString(rawSearchString);
+    setSearchString(rawSearchString.toLowerCase());
  }

  function handleSearchKeyDown(event) {
--- a/src/components/widgets/unifi_console/unifi_console.jsx
+++ b/src/components/widgets/unifi_console/unifi_console.jsx
@ -14,8 +14,8 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
 export default function Widget({ options }) {
  const { t } = useTranslation();

-  // eslint-disable-next-line no-param-reassign
-  options.type = "unifi_console";
+  // eslint-disable-next-line no-param-reassign, no-multi-assign
+  options.service_group = options.service_name = "unifi_console";
  const { data: statsData, error: statsError } = useWidgetAPI(options, "stat/sites", { index: options.index });

  if (statsError) {
--- a/src/pages/api/services/proxy.js
+++ b/src/pages/api/services/proxy.js
@ -2,12 +2,21 @@ import { formatApiCall } from "utils/proxy/api-helpers";
 import createLogger from "utils/logger";
 import genericProxyHandler from "utils/proxy/handlers/generic";
 import widgets from "widgets/widgets";
+import calendarProxyHandler from "widgets/calendar/proxy";
+import getServiceWidget from "utils/config/service-helpers";

 const logger = createLogger("servicesProxy");

 export default async function handler(req, res) {
  try {
-    const { type } = req.query;
+    const { service, group } = req.query;
+    const serviceWidget = await getServiceWidget(group, service);
+    let type = serviceWidget?.type;
+
+    // exceptions
+    if (type === "calendar") type = "ical";
+    else if (service === "unifi_console" && group === "unifi_console") type = "unifi_console";
+
    const widget = widgets[type];

    if (!widget) {
@ -18,8 +27,8 @@ export default async function handler(req, res) {
    const serviceProxyHandler = widget.proxyHandler || genericProxyHandler;

    if (serviceProxyHandler instanceof Function) {
-      // quick return for no endpoint services
-      if (!req.query.endpoint) {
+      // quick return for no endpoint services, calendar is an exception
+      if (!req.query.endpoint || serviceProxyHandler === calendarProxyHandler) {
        return serviceProxyHandler(req, res);
      }

@ -32,6 +41,11 @@ export default async function handler(req, res) {
        const endpoint = mapping?.endpoint;
        const endpointProxy = mapping?.proxyHandler || serviceProxyHandler;

+        if (mapping.method && mapping.method !== req.method) {
+          logger.debug("Unsupported method: %s", req.method);
+          return res.status(403).json({ error: "Unsupported method" });
+        }
+
        if (!endpoint) {
          logger.debug("Unsupported service endpoint: %s", type);
          return res.status(403).json({ error: "Unsupported service endpoint" });
@ -43,15 +57,17 @@ export default async function handler(req, res) {

        if (req.query.segments) {
          const segments = JSON.parse(req.query.segments);
-          for (const key in segments) {
+          let validSegments = true;
+          Object.keys(segments).forEach((key) => {
            if (!mapping.segments.includes(key)) {
              logger.debug("Unsupported segment: %s", key);
-              return res.status(403).json({ error: "Unsupported segment" });
-            } else if (segments[key].includes("/")) {
+              validSegments = false;
+            } else if (segments[key].includes("/") || segments[key].includes("\\") || segments[key].includes("..")) {
              logger.debug("Unsupported segment value: %s", segments[key]);
-              return res.status(403).json({ error: "Unsupported segment value" });
+              validSegments = false;
            }
-          }
+          });
+          if (!validSegments) return res.status(403).json({ error: "Unsupported segment" });
          req.query.endpoint = formatApiCall(endpoint, segments);
        }

--- a/src/pages/api/widgets/openweathermap.js
+++ b/src/pages/api/widgets/openweathermap.js
@ -1,9 +1,11 @@
 import cachedFetch from "utils/proxy/cached-fetch";
 import { getSettings } from "utils/config/config";
+import { getPrivateWidgetOptions } from "utils/config/widget-helpers";

 export default async function handler(req, res) {
-  const { latitude, longitude, units, provider, cache, lang } = req.query;
-  let { apiKey } = req.query;
+  const { latitude, longitude, units, provider, cache, lang, index } = req.query;
+  const privateWidgetOptions = await getPrivateWidgetOptions("openweathermap", index);
+  let { apiKey } = privateWidgetOptions;

  if (!apiKey && !provider) {
    return res.status(400).json({ error: "Missing API key or provider" });
--- a/src/pages/api/widgets/weather.js
+++ b/src/pages/api/widgets/weather.js
@ -1,9 +1,11 @@
 import cachedFetch from "utils/proxy/cached-fetch";
 import { getSettings } from "utils/config/config";
+import { getPrivateWidgetOptions } from "utils/config/widget-helpers";

 export default async function handler(req, res) {
-  const { latitude, longitude, provider, cache, lang } = req.query;
-  let { apiKey } = req.query;
+  const { latitude, longitude, provider, cache, lang, index } = req.query;
+  const privateWidgetOptions = await getPrivateWidgetOptions("weatherapi", index);
+  let { apiKey } = privateWidgetOptions;

  if (!apiKey && !provider) {
    return res.status(400).json({ error: "Missing API key or provider" });
--- a/src/utils/config/service-helpers.js
+++ b/src/utils/config/service-helpers.js
@ -254,7 +254,8 @@ export async function servicesFromKubernetes() {
          ingress.metadata.annotations &&
          ingress.metadata.annotations[`${ANNOTATION_BASE}/enabled`] === "true" &&
          (!ingress.metadata.annotations[`${ANNOTATION_BASE}/instance`] ||
-            ingress.metadata.annotations[`${ANNOTATION_BASE}/instance`] === instanceName),
+            ingress.metadata.annotations[`${ANNOTATION_BASE}/instance`] === instanceName ||
+            `${ANNOTATION_BASE}/instance.${instanceName}` in ingress.metadata.annotations),
      )
      .map((ingress) => {
        let constructedService = {
--- a/src/utils/config/widget-helpers.js
+++ b/src/utils/config/widget-helpers.js
@ -32,7 +32,7 @@ export async function cleanWidgetGroups(widgets) {
    const optionKeys = Object.keys(sanitizedOptions);

    // delete private options from the sanitized options
-    ["username", "password", "key"].forEach((pO) => {
+    ["username", "password", "key", "apiKey"].forEach((pO) => {
      if (optionKeys.includes(pO)) {
        delete sanitizedOptions[pO];
      }
@ -57,7 +57,7 @@ export async function getPrivateWidgetOptions(type, widgetIndex) {
  const widgets = await widgetsFromConfig();

  const privateOptions = widgets.map((widget) => {
-    const { index, url, username, password, key } = widget.options;
+    const { index, url, username, password, key, apiKey } = widget.options;

    return {
      type: widget.type,
@ -67,6 +67,7 @@ export async function getPrivateWidgetOptions(type, widgetIndex) {
        username,
        password,
        key,
+        apiKey,
      },
    };
  });
--- a/src/utils/proxy/api-helpers.js
+++ b/src/utils/proxy/api-helpers.js
@ -10,7 +10,6 @@ export function formatApiCall(url, args) {

 export function getURLSearchParams(widget, endpoint) {
  const params = new URLSearchParams({
-    type: widget.type,
    group: widget.service_group,
    service: widget.service_name,
  });
@ -53,6 +52,7 @@ export function sanitizeErrorURL(errorURL) {
  const url = new URL(errorURL);
  ["apikey", "api_key", "token", "t", "access_token", "auth"].forEach((key) => {
    if (url.searchParams.has(key)) url.searchParams.set(key, "***");
+    if (url.hash.includes(key)) url.hash = url.hash.replace(new RegExp(`${key}=[^&]+`), `${key}=***`);
  });
  return url.toString();
 }
--- a/src/utils/proxy/handlers/jsonrpc.js
+++ b/src/utils/proxy/handlers/jsonrpc.js
@ -31,6 +31,10 @@ export async function sendJsonRpcRequest(url, method, params, username, password
    if (status === 200) {
      const json = JSON.parse(data.toString());

+      if (json.id === null) {
+        json.id = 1;
+      }
+
      // in order to get access to the underlying error object in the JSON response
      // you must set `result` equal to undefined
      if (json.error && json.result === null) {
--- a/src/widgets/caddy/component.jsx
+++ b/src/widgets/caddy/component.jsx
@ -8,7 +8,7 @@ export default function Component({ service }) {
  const { t } = useTranslation();

  const { widget } = service;
-  const { data: resultData, error: resultError } = useWidgetAPI(widget, "result");
+  const { data: resultData, error: resultError } = useWidgetAPI(widget, "upstreams");

  if (resultError) {
    return <Container service={service} error={resultError} />;
--- a/src/widgets/caddy/widget.js
+++ b/src/widgets/caddy/widget.js
@ -1,8 +1,14 @@
 import genericProxyHandler from "utils/proxy/handlers/generic";

 const widget = {
-  api: "{url}/reverse_proxy/upstreams",
+  api: "{url}/{endpoint}",
  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    upstreams: {
+      endpoint: "reverse_proxy/upstreams",
+    },
+  },
 };

 export default widget;
--- a/src/widgets/coinmarketcap/component.jsx
+++ b/src/widgets/coinmarketcap/component.jsx
@ -65,7 +65,7 @@ export default function Component({ service }) {

  return (
    <Container service={service}>
-      <div className={classNames(service.description ? "-top-10" : "-top-8", "absolute right-1")}>
+      <div className={classNames(service.description ? "-top-10" : "-top-8", "absolute right-1 z-20")}>
        <Dropdown options={dateRangeOptions} value={dateRange} setValue={setDateRange} />
      </div>

--- a/src/widgets/emby/component.jsx
+++ b/src/widgets/emby/component.jsx
@ -225,7 +225,9 @@ export default function Component({ service }) {
      }),
    );
    const url = `/api/services/proxy?${params.toString()}`;
-    await fetch(url).then(() => {
+    await fetch(url, {
+      method: "POST",
+    }).then(() => {
      sessionMutate();
    });
  }
--- a/src/widgets/glances/widget.js
+++ b/src/widgets/glances/widget.js
@ -3,7 +3,7 @@ import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
 const widget = {
  api: "{url}/api/{endpoint}",
  proxyHandler: credentialedProxyHandler,
-  allowedEndpoints: /\d\/quicklook|diskio|fs|gpu|system|mem|network|processlist|sensors/,
+  allowedEndpoints: /\d\/quicklook|diskio|cpu|fs|gpu|system|mem|network|processlist|sensors/,
 };

 export default widget;
--- a/src/widgets/omada/component.jsx
+++ b/src/widgets/omada/component.jsx
@ -9,7 +9,7 @@ export default function Component({ service }) {

  const { widget } = service;

-  const { data: omadaData, error: omadaAPIError } = useWidgetAPI(widget, {
+  const { data: omadaData, error: omadaAPIError } = useWidgetAPI(widget, "info", {
    refreshInterval: 5000,
  });

--- a/src/widgets/omada/widget.js
+++ b/src/widgets/omada/widget.js
@ -2,6 +2,12 @@ import omadaProxyHandler from "./proxy";

 const widget = {
  proxyHandler: omadaProxyHandler,
+
+  mappings: {
+    info: {
+      endpoint: "api/info",
+    },
+  },
 };

 export default widget;
--- a/src/widgets/openwrt/proxy.js
+++ b/src/widgets/openwrt/proxy.js
@ -77,7 +77,7 @@ async function fetchSystem(url) {
  const systemResponse = JSON.parse(data.toString())[1];
  const response = {
    uptime: systemResponse.uptime,
-    cpuLoad: systemResponse.load[1],
+    cpuLoad: (systemResponse.load[1] / 65536.0).toFixed(2),
  };
  return [200, contentType, response];
 }
--- a/src/widgets/stash/component.jsx
+++ b/src/widgets/stash/component.jsx
@ -1,18 +1,26 @@
 import { useTranslation } from "next-i18next";
+import { useEffect, useState } from "react";

 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
-import useWidgetAPI from "utils/proxy/use-widget-api";
+import { formatProxyUrl } from "utils/proxy/api-helpers";

 export default function Component({ service }) {
  const { t } = useTranslation();

  const { widget } = service;
-  const { data: stats, error: stashError } = useWidgetAPI(widget, "stats");
+  const [stats, setStats] = useState(null);

-  if (stashError) {
-    return <Container service={service} error={stashError} />;
-  }
+  useEffect(() => {
+    async function fetchStats() {
+      const url = formatProxyUrl(widget, "stats");
+      const res = await fetch(url, { method: "POST" });
+      setStats(await res.json());
+    }
+    if (!stats) {
+      fetchStats();
+    }
+  }, [widget, stats]);

  if (!stats) {
    return (
--- a/src/widgets/unifi/proxy.js
+++ b/src/widgets/unifi/proxy.js
@ -14,13 +14,13 @@ const prefixCacheKey = `${proxyName}__prefix`;
 const logger = createLogger(proxyName);

 async function getWidget(req) {
-  const { group, service, type } = req.query;
+  const { group, service } = req.query;

  let widget = null;
-  if (type === "unifi_console") {
+  if (group === "unifi_console" && service === "unifi_console") {
    // info widget
    const index = req.query?.query ? JSON.parse(req.query.query).index : undefined;
-    widget = await getPrivateWidgetOptions(type, index);
+    widget = await getPrivateWidgetOptions("unifi_console", index);
    if (!widget) {
      logger.debug("Error retrieving settings for this Unifi widget");
      return null;
--- a/src/widgets/unmanic/component.jsx
+++ b/src/widgets/unmanic/component.jsx
@ -1,16 +1,30 @@
+import { useEffect, useState } from "react";
+
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import { formatProxyUrl } from "utils/proxy/api-helpers";

 export default function Component({ service }) {
  const { widget } = service;

  const { data: workersData, error: workersError } = useWidgetAPI(widget, "workers");
-  const { data: pendingData, error: pendingError } = useWidgetAPI(widget, "pending");

-  if (workersError || pendingError) {
-    const finalError = workersError ?? pendingError;
-    return <Container service={service} error={finalError} />;
+  const [pendingData, setPendingData] = useState(null);
+
+  useEffect(() => {
+    async function fetchPending() {
+      const url = formatProxyUrl(widget, "pending");
+      const res = await fetch(url, { method: "POST" });
+      setPendingData(await res.json());
+    }
+    if (!pendingData) {
+      fetchPending();
+    }
+  }, [widget, pendingData]);
+
+  if (workersError) {
+    return <Container service={service} error={workersError} />;
  }

  if (!workersData || !pendingData) {
--- a/src/widgets/uptimerobot/component.jsx
+++ b/src/widgets/uptimerobot/component.jsx
@ -1,18 +1,26 @@
 import { useTranslation } from "next-i18next";
+import { useEffect, useState } from "react";

 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
-import useWidgetAPI from "utils/proxy/use-widget-api";
+import { formatProxyUrl } from "utils/proxy/api-helpers";

 export default function Component({ service }) {
  const { widget } = service;
  const { t } = useTranslation();

-  const { data: uptimerobotData, error: uptimerobotError } = useWidgetAPI(widget, "getmonitors");
+  const [uptimerobotData, setUptimerobotData] = useState(null);

-  if (uptimerobotError) {
-    return <Container service={service} error={uptimerobotError} />;
-  }
+  useEffect(() => {
+    async function fetchData() {
+      const url = formatProxyUrl(widget, "getmonitors");
+      const res = await fetch(url, { method: "POST" });
+      setUptimerobotData(await res.json());
+    }
+    if (!uptimerobotData) {
+      fetchData();
+    }
+  }, [widget, uptimerobotData]);

  if (!uptimerobotData) {
    return (
--- a/src/widgets/wgeasy/component.jsx
+++ b/src/widgets/wgeasy/component.jsx
@ -28,7 +28,7 @@ export default function Component({ service }) {

  const enabled = infoData.filter((item) => item.enabled).length;
  const disabled = infoData.length - enabled;
-  const connectionThreshold = widget.threshold ?? 2 * 60 * 1000;
+  const connectionThreshold = (widget.threshold ?? 2) * 60 * 1000;
  const currentTime = new Date();
  const connected = infoData.filter(
    (item) => currentTime - new Date(item.latestHandshakeAt) < connectionThreshold,
--- a/src/widgets/wgeasy/proxy.js
+++ b/src/widgets/wgeasy/proxy.js
@ -21,14 +21,21 @@ async function login(widget, service) {
  });

  try {
-    const connectSidCookie = responseHeaders["set-cookie"]
+    let connectSidCookie = responseHeaders["set-cookie"];
+    if (!connectSidCookie) {
+      const sid = cache.get(`${sessionSIDCacheKey}.${service}`);
+      if (sid) {
+        return sid;
+      }
+    }
+    connectSidCookie = connectSidCookie
      .find((cookie) => cookie.startsWith("connect.sid="))
      .split(";")[0]
      .replace("connect.sid=", "");
    cache.put(`${sessionSIDCacheKey}.${service}`, connectSidCookie);
    return connectSidCookie;
  } catch (e) {
-    logger.error(`Error logging into wg-easy`);
+    logger.error(`Error logging into wg-easy, error: ${e}`);
    cache.del(`${sessionSIDCacheKey}.${service}`);
    return null;
  }