feat(docs): migrate documentation site into monorepo (#5912)

apps/docs/docs/widgets/_category_.json

@@ -0,0 +1,11 @@
+{
+  "label": "Widgets",
+  "position": 3,
+  "collapsed": true,
+  "link": {
+    "type": "generated-index",
+    "title": "Widgets",
+    "description": "Widgets allow you to show data on your board or control applications. Click on one of the widgets below for further information:",
+    "image": "/img/docusaurus.png"
+  }
+}

apps/docs/docs/widgets/anchor-note/index.mdx

@@ -0,0 +1,46 @@
+---
+title: 'Anchor Note'
+description: 'Display and edit a selected note from Anchor'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { anchorNoteWidget } from '.';
+import { anchorIntegration } from '@site/docs/integrations/anchor';
+
+
+<WidgetHeader
+  widget={anchorNoteWidget}
+  categories={['Notes']}
+/>
+
+The Anchor Note widget shows a selected note from your Anchor integration. If your note permissions allow it, you can also edit the note title and content directly in Homarr.
+
+### Screenshots
+
+import anchorNoteWidgetScreenshot from './img/widget.png';
+
+<img src={anchorNoteWidgetScreenshot} alt="anchor-note-widget" width={256} height={256} />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: anchorIntegration
+}]} />
+
+### Interactions
+
+- Click **Edit** to start editing the selected note.
+- Click **Save** to persist changes to Anchor.
+- Click **Cancel** to discard unsaved changes.
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={anchorNoteWidget.configuration} />

apps/docs/docs/widgets/anchor-note/index.ts

@@ -0,0 +1,31 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconNotes } from "@tabler/icons-react";
+
+export const anchorNoteWidget: WidgetDefinition = {
+  icon: IconNotes,
+  name: "Anchor Note",
+  description: "Display and edit a selected note from Anchor",
+  path: "../../widgets/anchor-note",
+  configuration: {
+    items: [
+      {
+        name: "Note",
+        description: "Select the note from your Anchor integration to display in the widget.",
+        values: "One of the notes from your Anchor integration",
+        defaultValue: "-",
+      },
+      {
+        name: "Show title",
+        description: "Show the note title at the top of the widget.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show last updated",
+        description: "Show the relative last updated time of the note.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/app/index.mdx

@@ -0,0 +1,37 @@
+---
+title: 'App'
+description: 'Embeds an app into the board.'
+hide_title: true
+---
+
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { appWidget } from '.';
+
+
+<WidgetHeader
+  widget={appWidget}
+  categories={['Links', 'Apps']}
+/>
+
+The app widget allows you to add a link to an application or a website that you want to access quickly from your Homarr board.
+It also supports a status check to indicate whether Homarr can reach the application or website.
+
+### Screenshots
+
+import githubApp from './img/github.png';
+import jellyseerrApp from './img/jellyseerr-description-tooltip.png';
+import piHoleApp from './img/pi-hole-ping-icon.png';
+
+<div className='flex gap-1'>
+  <img src={githubApp} alt="app github with-status-check" width={128 * 1.5} height={128 * 1.5} />
+  <img src={piHoleApp} alt="app pi-hole with-status-check status-check-icon" width={128 * 1.5} height={128 * 1.5} />
+  <img src={jellyseerrApp} alt="app jellyseerr with-description-tooltip" height={128 * 1.5} />
+</div>
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={appWidget.configuration} />

apps/docs/docs/widgets/app/index.ts

@@ -0,0 +1,52 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconApps } from "@tabler/icons-react";
+
+export const appWidget: WidgetDefinition = {
+  icon: IconApps,
+  name: "App",
+  description: "Embeds an app into the board.",
+  path: "../../widgets/app",
+  configuration: {
+    items: [
+      {
+        name: "Choose app",
+        description: "Select one of your created apps.",
+        values: "App from your apps list",
+        defaultValue: "-",
+      },
+      {
+        name: "Open in new tab",
+        description: "Whether to open the link in a new tab.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show app name",
+        description: "Whether to show the name of the app on the widget.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Description display mode",
+        description: "Choose how to display the app description",
+        values: { type: "select", options: ["Within widget", "As tooltip", "Hidden"] },
+        defaultValue: "Hidden",
+      },
+      {
+        name: "Layout",
+        description: "How to arrange the app widget.",
+        values: {
+          type: "select",
+          options: ["Horizontal", "Horizontal (reversed)", "Vertical", "Vertical (reversed)"],
+        },
+        defaultValue: "Vertical",
+      },
+      {
+        name: "Enable status check",
+        description: "Whether to enable the status check for the app.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/audio-stats/index.mdx

@@ -0,0 +1,43 @@
+---
+title: 'Audio Stats'
+description: 'Displays library statistics from Navidrome or Audiobookshelf, adapting its display based on the linked integration.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { audioStatsWidget } from '.';
+import { navidromeIntegration } from '@site/docs/integrations/navidrome';
+import { audiobookshelfIntegration } from '@site/docs/integrations/audiobookshelf';
+
+
+<WidgetHeader
+  widget={audioStatsWidget}
+  categories={['Media']}
+/>
+
+This widget adapts its display based on the linked integration:
+
+- **Navidrome**: Shows artist, album, and song counts, plus a now playing section with active streams
+- **Audiobookshelf**: Shows library count, audiobook/podcast totals, listening time, and active sessions
+
+Only options relevant to your linked integration are shown in the configuration panel.
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: navidromeIntegration,
+  note: "Displays music library stats and now playing"
+}, {
+  integration: audiobookshelfIntegration,
+  note: "Displays audiobook/podcast library stats and listening time"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={audioStatsWidget.configuration} />

apps/docs/docs/widgets/audio-stats/index.ts

@@ -0,0 +1,86 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconHeadphones } from "@tabler/icons-react";
+
+export const audioStatsWidget: WidgetDefinition = {
+  icon: IconHeadphones,
+  name: "Audio Stats",
+  description:
+    "Displays library statistics from Navidrome or Audiobookshelf, adapting its display based on the linked integration.",
+  path: "../../widgets/audio-stats",
+  configuration: {
+    items: [
+      {
+        name: "Show artists",
+        description: "Displays the artist count (Navidrome only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show albums",
+        description: "Displays the album count (Navidrome only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show songs",
+        description: "Displays the song count (Navidrome only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show now playing",
+        description: "Displays currently playing tracks (Navidrome only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show now playing list",
+        description: "Displays a detailed list of now playing tracks (Navidrome only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Max now playing items",
+        description: "Maximum number of now playing tracks to display (Navidrome only)",
+        values: "Number (1-5)",
+        defaultValue: "3",
+      },
+      {
+        name: "Show library count",
+        description: "Displays the number of libraries (Audiobookshelf only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show audiobooks",
+        description: "Displays the total audiobook count (Audiobookshelf only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show podcasts",
+        description: "Displays the total podcast count (Audiobookshelf only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show listening time",
+        description: "Displays total listening time (Audiobookshelf only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show active sessions",
+        description: "Displays the number of active listening sessions (Audiobookshelf only)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Compact mode",
+        description: "Uses a more compact layout with smaller icons and tighter spacing",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/bookmarks/index.mdx

@@ -0,0 +1,44 @@
+---
+title: 'Bookmarks'
+description: 'Displays multiple app links'
+hide_title: true
+---
+
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { bookmarksWidget } from '.';
+
+
+<WidgetHeader
+  widget={bookmarksWidget}
+  categories={['Links', 'Apps']}
+/>
+
+The bookmarks widget allows you to display multiple app links in a single widget.
+You can add links to your favorite applications, websites, or any other resources you want quick access to.
+
+### Screenshots
+
+import gridIconsOnly from './img/grid-icons-only.png';
+import gridWithTitle from './img/grid-with-title.png';
+import verticalListAll from './img/vertical-list-all.png';
+import vericalListSimple from './img/vertical-list-simple.png';
+
+<div className='flex gap-1'>
+    <div className='flex flex-col gap-1'>
+        <img src={gridIconsOnly} alt="bookmarks grid icons-only" width={128} height={128} />
+        <img src={vericalListSimple} alt="bookmarks vertical-list no-domain" width={128} height={128} />
+    </div>
+
+    <img src={gridWithTitle} alt="bookmarks grid with-title" width={256 + 4} height={256 + 4} />
+    <img src={verticalListAll} alt="bookmarks vertical-list all-elements" width={128} height={256 + 4} />
+</div>
+
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={bookmarksWidget.configuration} />

apps/docs/docs/widgets/bookmarks/index.ts

@@ -0,0 +1,55 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconBookmark } from "@tabler/icons-react";
+
+export const bookmarksWidget: WidgetDefinition = {
+  icon: IconBookmark,
+  name: "Bookmarks",
+  description: "Displays multiple app links",
+  path: "../../widgets/bookmarks",
+  configuration: {
+    items: [
+      {
+        name: "Title",
+        description: "Title shown on top of the widget.",
+        values: { type: "string" },
+        defaultValue: "-",
+      },
+      {
+        name: "Layout",
+        description: "Layout in which the bookmarks are displayed.",
+        values: { type: "select", options: ["Vertical", "Horizontal", "Grid", "Grid horizontal"] },
+        defaultValue: "Vertical",
+      },
+      {
+        name: "Hide title",
+        description: "Whether to hide the title of the bookmark items.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Hide icons",
+        description: "Whether to hide the icon of the bookmark items.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Hide hostnames",
+        description: "Whether to hide the hostname of the bookmark items.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Open in new tab",
+        description: "Whether to open the bookmark items in a new tab.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Bookmarks",
+        description: "List of bookmarks to display in the widget.",
+        values: "Select of all your apps and order them as you like.",
+        defaultValue: "No bookmarks selected",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/calendar/index.mdx

@@ -0,0 +1,73 @@
+---
+title: 'Calendar'
+description: 'Display events from your integrations in a calendar view within a certain relative time period'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { calendarWidget } from '.';
+import { lidarrIntegration } from '@site/docs/integrations/lidarr';
+import { nextcloudIntegration } from '@site/docs/integrations/nextcloud';
+import { homeAssistantIntegration } from '@site/docs/integrations/home-assistant';
+import { radarrIntegration } from '@site/docs/integrations/radarr';
+import { readarrIntegration } from '@site/docs/integrations/readarr';
+import { sonarrIntegration } from '@site/docs/integrations/sonarr';
+import { icalIntegration } from '@site/docs/integrations/ical';
+
+
+<WidgetHeader
+  widget={calendarWidget}
+  categories={['Media manager', "Servarr"]}
+/>
+
+The calendar widget shows a month view of events from different integrations.
+It allows you to view calendar events or upcoming releases from your media managers.
+
+### Screenshots
+
+import popover from './img/popover.png';
+import withIntegrations from './img/with-integrations.png';
+import withoutIntegrations from './img/without-integrations.png';
+
+<div className='flex gap-1'>
+    <img src={withIntegrations} alt="calendar with-integrations big-size" width={256 + 4} height={256 + 4} />
+    <div className='flex flex-col gap-1'>
+        <img src={popover} alt="calendar popover-details the-mandalorian" width={128 * 3} height={128} />
+        <img src={withoutIntegrations} alt="calendar without-integrations small-size" width={256} height={128} />
+    </div>
+</div>
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: nextcloudIntegration,
+}, {
+  integration: lidarrIntegration,
+}, {
+  integration: radarrIntegration,
+}, {
+  integration: readarrIntegration,
+}, {
+  integration: sonarrIntegration,
+}, {
+  integration: icalIntegration
+}, {
+  integration: homeAssistantIntegration
+}]} />
+
+### Interactions
+
+- View calendar events by clicking on the marked dates.
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={calendarWidget.configuration} />

apps/docs/docs/widgets/calendar/index.ts

@@ -0,0 +1,39 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconCalendar } from "@tabler/icons-react";
+
+export const calendarWidget: WidgetDefinition = {
+  icon: IconCalendar,
+  name: "Calendar",
+  description: "Display events from your integrations in a calendar view within a certain relative time period",
+  path: "../../widgets/calendar",
+  configuration: {
+    items: [
+      {
+        name: "Radarr release type",
+        description: "Select what type of release date to see.",
+        values: "List of: 'In cinemas', 'Digital release', 'Physical release'",
+        defaultValue: "'In cinemas' and 'Digital release'",
+      },
+      {
+        name: "Start from",
+        description:
+          "Amount of months in past that Homarr should load in background. Higher number means more memory usage.",
+        values: "2-9999",
+        defaultValue: "2",
+      },
+      {
+        name: "End at",
+        description:
+          "Amount of months in future that Homarr should load in background. Higher number means more memory usage.",
+        values: "2-9999",
+        defaultValue: "2",
+      },
+      {
+        name: "Show unmonitored",
+        description: "Whether to show releases that are not monitored in the integration.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/clock/index.mdx

@@ -0,0 +1,38 @@
+---
+title: 'Date and time'
+description: 'Displays the current date and time.'
+hide_title: true
+---
+
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { clockWidget } from '.';
+
+
+<WidgetHeader
+  widget={clockWidget}
+  categories={['Time']}
+/>
+
+The clock widget displays the current date and time in a customizable format.
+
+### Screenshots
+
+import localClock from './img/local.png';
+import londonClock from './img/london-with-seconds.png';
+import tokyoClock from './img/tokyo-12-hour.png';
+
+<div className='flex gap-1'>
+    <img src={localClock} alt="clock format-24-hours timezone-local" width={128} height={128} />
+    <img src={londonClock} alt="clock format-24-hours with-seconds timezone-london" width={256} height={128} />
+    <img src={tokyoClock} alt="clock format-12-hours timezone-tokyo" width={256} height={128} />
+</div>
+
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={clockWidget.configuration} />

apps/docs/docs/widgets/clock/index.ts

@@ -0,0 +1,73 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconClock } from "@tabler/icons-react";
+
+export const clockWidget: WidgetDefinition = {
+  icon: IconClock,
+  name: "Date and time",
+  description: "Displays the current date and time.",
+  path: "../../widgets/clock",
+  configuration: {
+    items: [
+      {
+        name: "Custom Title/City display",
+        description: "Show off a custom title or the name of the city/country on top of the clock.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Title",
+        description: 'Title shown on top of the widget. Only shown if "Custom Title/City display" is enabled.',
+        values: { type: "string" },
+        defaultValue: "-",
+      },
+      {
+        name: "24-hour format",
+        description: "Use 24-hour format instead of 12-hour format.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Display seconds",
+        description: "Whether to show seconds in the clock.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Use fixed timezone",
+        description: "Select custom timezone to display instead of the client timezone.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Timezone",
+        description: 'Choose the timezone following the IANA standard. Only shown if "Use fixed timezone" is enabled.',
+        values: "Any IANA timezone, e.g. 'Europe/Berlin', 'America/New_York', 'Asia/Tokyo'",
+        defaultValue: "Europe/London",
+      },
+      {
+        name: "Show the date",
+        description: "Whether to show the date below the clock.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Date format",
+        description: "Format of the date displayed below the clock.",
+        values: "A collection of date formats, e.g. 'DD/MM/YYYY', 'MM/DD/YYYY', etc.",
+        defaultValue: "dddd, MMMM D",
+      },
+      {
+        name: "Custom time format",
+        description: "Format of the time displayed in the clock.",
+        values: 'ISO 8601 format, e.g. "HH:mm:ss", "hh:mm A", etc.',
+        defaultValue: "-",
+      },
+      {
+        name: "Custom date format",
+        description: "Format of the date displayed below the clock.",
+        values: 'ISO 8601 format, e.g. "YYYY-MM-DD", "DD/MM/YYYY", etc.',
+        defaultValue: "-",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/coolify/index.mdx

@@ -0,0 +1,47 @@
+---
+title: 'Coolify'
+description: 'Overview of your Coolify instance with servers, applications, and services.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { coolifyWidget } from '.';
+import { coolifyIntegration } from '@site/docs/integrations/coolify';
+
+<WidgetHeader
+  widget={coolifyWidget}
+  categories={['System monitoring', 'Deployment']}
+/>
+
+The Coolify widget displays a compact overview of your Coolify instance. It can show servers, applications, and services with status indicators, project and environment context, direct links to Coolify, and the installed Coolify version.
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: coolifyIntegration,
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={coolifyWidget.configuration} />
+
+### Sections
+
+| Section | Description |
+|---|---|
+| **Servers** | Lists Coolify servers, reachability status, and application/service counts per server. |
+| **Applications** | Lists applications with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links. |
+| **Services** | Lists services with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links. |
+
+### Notes
+
+- The widget supports one or more Coolify integrations. With multiple integrations, each instance is shown as a separate card.
+- The Coolify API token is team-scoped. Homarr only shows resources available to the team where the token was created.
+- Data is cached for 30 seconds and refreshed in the background.

apps/docs/docs/widgets/coolify/index.ts

@@ -0,0 +1,31 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconCloud } from "@tabler/icons-react";
+
+export const coolifyWidget: WidgetDefinition = {
+  icon: IconCloud,
+  name: "Coolify",
+  description: "Overview of your Coolify instance with servers, applications, and services.",
+  path: "../../widgets/coolify",
+  configuration: {
+    items: [
+      {
+        name: "Show servers",
+        description: "Display the servers section with reachability status and resource counts.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show applications",
+        description: "Display the applications section with status, project, environment, and links.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show services",
+        description: "Display the services section with status, project, environment, and links.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/dns-hole-controls/index.mdx

@@ -0,0 +1,57 @@
+---
+title: 'DNS Hole Controls'
+description: "Control PiHole or AdGuard from your dashboard."
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { dnsHoleControlsWidget } from '.';
+import { adguardHomeIntegration } from '@site/docs/integrations/adguard-home';
+import { piHoleIntegration } from '@site/docs/integrations/pi-hole';
+import { technitiumDnsIntegration } from '@site/docs/integrations/technitium-dns';
+
+
+<WidgetHeader
+  widget={dnsHoleControlsWidget}
+  categories={['DNS Hole']}
+/>
+
+This widget allows you to enable or disable your DNS Hole.
+
+### Screenshots
+
+import bigSize from './img/big.png';
+import smallSize from './img/small.png';
+
+
+<img src={bigSize} alt="dns-hole-controls big-size with-toggle-all-buttons" width={256} height={128} />
+<img src={smallSize} alt="dns-hole-controls small-size no-toggle-all-buttons" width={128} height={128} />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: adguardHomeIntegration,
+}, {
+  integration: piHoleIntegration,
+}, {
+  integration: technitiumDnsIntegration,
+}]} />
+
+### Interactions
+
+- Enable / Disable one dns-hole by clicking on the badge.
+- Disable one dns-hole in x seconds by clicking on the clock icon.
+- Do all of the above for all dns-holes by using the top button row.
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={dnsHoleControlsWidget.configuration} />

apps/docs/docs/widgets/dns-hole-controls/index.ts

@@ -0,0 +1,19 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconDeviceGamepad } from "@tabler/icons-react";
+
+export const dnsHoleControlsWidget: WidgetDefinition = {
+  icon: IconDeviceGamepad,
+  name: "DNS Hole Controls",
+  description: "Control PiHole or AdGuard from your dashboard",
+  path: "../../widgets/dns-hole-controls",
+  configuration: {
+    items: [
+      {
+        name: "Show Toggle All Buttons",
+        description: "Show or not the 2 buttons that may be redundant when having only one DNS-hole.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/dns-hole-summary/index.mdx

@@ -0,0 +1,56 @@
+---
+title: 'DNS Hole Summary'
+description: "Displays the summary of your DNS Hole."
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { dnsHoleSummaryWidget } from '.';
+
+
+<WidgetHeader
+  widget={dnsHoleSummaryWidget}
+  categories={['DNS Hole']}
+/>
+
+This widget allows you to display statistics about your DNS Hole like total queries, blocked queries, and more.
+
+### Screenshots
+
+import gridLayout from './img/grid.png';
+import verticalLayout from './img/vertical.png';
+import horizontalLayout from './img/horizontal.png';
+import { adguardHomeIntegration } from '@site/docs/integrations/adguard-home';
+import { piHoleIntegration } from '@site/docs/integrations/pi-hole';
+import { technitiumDnsIntegration } from '@site/docs/integrations/technitium-dns';
+
+<div className='flex gap-2'>
+  <img src={gridLayout} alt="grid-layout pi-hole-colors" width={256 + 8} height={256 + 8} />
+  <div className='flex flex-col gap-2'>
+    <img src={verticalLayout} alt="vertical-layout no-colors" width={128} height={128} />
+    <img src={horizontalLayout} alt="horizontal-layout pi-hole-colors" width={128 * 3} height={128} />
+  </div>
+</div>
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: adguardHomeIntegration,
+}, {
+  integration: piHoleIntegration,
+}, {
+  integration: technitiumDnsIntegration,
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={dnsHoleSummaryWidget.configuration} />

apps/docs/docs/widgets/dns-hole-summary/index.ts

@@ -0,0 +1,28 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconAd } from "@tabler/icons-react";
+
+export const dnsHoleSummaryWidget: WidgetDefinition = {
+  icon: IconAd,
+  name: "DNS Hole Summary",
+  description: "Displays the summary of your DNS Hole",
+  path: "../../widgets/dns-hole-summary",
+  configuration: {
+    items: [
+      {
+        name: "Layout",
+        description: "Choose the layout of the widget",
+        values: {
+          type: "select",
+          options: ["Horizontal", "Vertical", "Grid"],
+        },
+        defaultValue: "Grid",
+      },
+      {
+        name: "Use Pi-Hole colors",
+        description: "Color the tiles using the background color, that is used by default in PiHole.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/docker-containers/index.mdx

@@ -0,0 +1,51 @@
+---
+title: 'Docker stats'
+description: 'Stats of your containers'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { dockerContainersWidget } from '.';
+import { dockerIntegration } from '@site/docs/integrations/docker';
+
+
+<WidgetHeader
+  widget={dockerContainersWidget}
+  categories={['Containers']}
+/>
+
+This widget displays the resource usage of your Docker containers and allows you to manage them.
+
+:::info
+This widget can only be used with administrator privileges.
+:::
+
+### Screenshots
+
+import dockerTable from './img/table.png';
+
+<img src={dockerTable} alt="docker-stats table docker-containers" width={128 * 3} height={128 * 2} />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: dockerIntegration,
+}]} />
+
+### Interactions
+
+Each container row has an action menu (accessible via the three-dot icon) with the following options:
+- **View logs** — opens a dedicated terminal page streaming the container's logs
+- **Start** / **Stop** / **Restart** — manage the container's state
+- **Remove** — remove the container
+- **Add to Homarr** — create a bookmark app from the container
+
+### Adding the widget
+
+<AddingWidget />

apps/docs/docs/widgets/docker-containers/index.ts

@@ -0,0 +1,34 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconBrandDocker } from "@tabler/icons-react";
+
+export const dockerContainersWidget: WidgetDefinition = {
+  icon: IconBrandDocker,
+  name: "Docker stats",
+  description: "Stats of your containers",
+  path: "../../widgets/docker-containers",
+  configuration: {
+    items: [
+      {
+        name: "Enable items sorting",
+        description: "Allows to sort containers by clicking on the column headers",
+        values: { type: "boolean" },
+        defaultValue: "No",
+      },
+      {
+        name: "Column used for sorting by default",
+        description: "Select which column to use for sorting the containers when the widget is loaded",
+        values: {
+          type: "select",
+          options: ["Name", "State", "CPU usage", "Memory usage"],
+        },
+        defaultValue: "Name",
+      },
+      {
+        name: "Invert sorting",
+        description: "Invert the sorting order (ascending / descending) for the default sorting column",
+        values: { type: "boolean" },
+        defaultValue: "No",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/downloads/index.mdx

@@ -0,0 +1,71 @@
+---
+title: 'Download Client'
+description: 'Allows you to view and manage your Downloads from both Torrent and Usenet clients.'
+hide_title: true
+---
+
+import { delugeIntegration } from '@site/docs/integrations/deluge';
+import { nzbgetIntegration } from '@site/docs/integrations/nzbget';
+import { qBittorentIntegration } from '@site/docs/integrations/q-bittorent';
+import { sabnzbdIntegration } from '@site/docs/integrations/sabnzbd';
+import { transmissionIntegration } from '@site/docs/integrations/transmission';
+import { slskdIntegration } from '@site/docs/integrations/slskd';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+import { downloadsWidget } from '.';
+
+
+<WidgetHeader
+  widget={downloadsWidget}
+  categories={['Torrent client', 'Usenet client', 'Downloads']}
+/>
+
+This widget displays a list of torrents or usenet-articles that are currently being downloaded, along with their progress and other relevant information.
+
+### Screenshots
+
+import downloadsCard from './img/screenshot.png';
+
+<div>
+    <img src={downloadsCard} alt="downloads" width={128 * 4} />
+</div>
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: sabnzbdIntegration,
+  note: "Usenet client"
+}, {
+  integration: nzbgetIntegration,
+  note: "Usenet client"
+}, {
+  integration: delugeIntegration,
+  note: "Torrent client"
+}, {
+  integration: transmissionIntegration,
+  note: "Torrent client"
+}, {
+  integration: qBittorentIntegration,
+  note: "Torrent client"
+}, {
+  integration: slskdIntegration,
+  note: "Soulseek client"
+}]} />
+
+### Interactions
+
+- Pause / Resume one download by clicking on the according icon.
+- Delete one download by clicking on the trash icon. (Can also delete the files)
+- Pause / Resume all downloads by using the bottom button.
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={downloadsWidget.configuration} />

apps/docs/docs/widgets/downloads/index.ts

@@ -0,0 +1,109 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconDownload } from "@tabler/icons-react";
+
+const columnsList = [
+  "id",
+  "actions",
+  "added",
+  "category",
+  "downSpeed",
+  "index",
+  "integration",
+  "name",
+  "progress",
+  "ratio",
+  "received",
+  "sent",
+  "size",
+  "state",
+  "time",
+  "type",
+  "upSpeed",
+];
+const sortingExclusion = ["actions", "id", "state"];
+const columnsSort = columnsList.filter((column) => !sortingExclusion.some((exclusion) => exclusion === column));
+
+export const downloadsWidget: WidgetDefinition = {
+  icon: IconDownload,
+  name: "Download Client",
+  description: "Allows you to view and manage your Downloads from both Torrent and Usenet clients.",
+  path: "../../widgets/downloads",
+  configuration: {
+    items: [
+      {
+        name: "Columns to show",
+        description: "Select the columns you want to display in the widget.",
+        values: `List of columns: ${columnsList.join(", ")}`,
+        defaultValue: ["integration", "name", "progress", "time", "actions"].join(", "),
+      },
+      {
+        name: "Enable items sorting",
+        description: "Enables the sorting in the table.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Column used for sorting by default",
+        description: "By default it will sort by this column.",
+        defaultValue: "type",
+        values: `List of columns: ${columnsSort.join(", ")}`,
+      },
+      {
+        name: "Invert sorting",
+        description: "This will invert the sorting order of the table.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Show usenet entries marked as completed",
+        description: "This will show entries that have been completed in your Usenet client.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show torrent entries marked as completed",
+        description: "This will show entries that have been completed in your Torrent client.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Miscellaneous entries marked as completed",
+        description: "This will show entries that have been completed in your Miscellaneous client.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Hide completed torrent under this threshold (in kiB/s)",
+        description:
+          "This will hide completed torrent entries that have a download speed below the specified threshold.",
+        values: "Any number above 1, 0 to disable",
+        defaultValue: "0",
+      },
+      {
+        name: "Categories/names to filter",
+        description: "You can filter the items by categories or names. Use a comma to separate multiple values.",
+        values: "Comma-separated list of categories or names",
+        defaultValue: "-",
+      },
+      {
+        name: "Filter as a whitelist",
+        description:
+          "If enabled, only items that match the filter will be shown. If disabled, items that do not match the filter will be hidden.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Use filter to calculate Ratio",
+        description: "This will use the filter to calculate the ratio of items shown in the widget.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Limit items per integration",
+        description: "This will limit the number of items shown per integration, not globally",
+        values: "Any number above 1",
+        defaultValue: "50",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/firewall/index.mdx

@@ -0,0 +1,33 @@
+---
+title: 'Firewall Monitoring'
+description: 'Displays a summary of firewalls.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { firewallWidget } from '.';
+import { opnsenseIntegration } from '../../integrations/opnsense';
+
+
+<WidgetHeader
+  widget={firewallWidget}
+  categories={['Firewall']}
+/>
+
+### Screenshots
+
+![Firewall Widget](img/firewall_widget.png)
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: opnsenseIntegration,
+}]} />
+
+### Adding the widget
+
+<AddingWidget />

apps/docs/docs/widgets/firewall/index.ts

@@ -0,0 +1,12 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconWall } from "@tabler/icons-react";
+
+export const firewallWidget: WidgetDefinition = {
+  icon: IconWall,
+  name: "Firewall Monitoring",
+  description: "Displays a summary of firewalls.",
+  path: "../../widgets/firewall",
+  configuration: {
+    items: [],
+  },
+};

apps/docs/docs/widgets/health-monitoring/index.mdx

@@ -0,0 +1,61 @@
+---
+title: 'System Health Monitoring'
+description: 'Displays information showing the health and status of your system(s).'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { healthMonitoringWidget } from '.';
+import { dashDotIntegration } from '@site/docs/integrations/dash-dot';
+import { openMediaVaultIntegration } from '@site/docs/integrations/open-media-vault';
+import { proxmoxIntegration } from '@site/docs/integrations/proxmox';
+import { glancesIntegration } from '@site/docs/integrations/glances';
+
+
+<WidgetHeader
+  widget={healthMonitoringWidget}
+  categories={['Health monitoring']}
+/>
+
+This widget displays information about the health and status of your system(s), including CPU, memory, disk usage, and more.
+
+### Screenshots
+
+import systemView from './img/system-view.png';
+import clusterView from './img/cluster-view.png';
+import { truenasIntegration } from '@site/docs/integrations/truenas';
+
+<img src={systemView} alt="health-monitoring system-view" width={256} height={256} />
+<img src={clusterView} alt="health-monitoring cluster-view" width={256} height={256} />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: dashDotIntegration,
+  note: "Will display information on the system tab"
+}, {
+  integration: openMediaVaultIntegration,
+  note: "Will display information on the system tab"
+}, {
+  integration: truenasIntegration,
+  note: "Will display information on the system tab"
+}, {
+  integration: glancesIntegration,
+  note: "Will display information on the system tab"
+}, {
+  integration: proxmoxIntegration,
+  note: "Will display information on the cluster tab, only supports one integration at a time"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={healthMonitoringWidget.configuration} />

apps/docs/docs/widgets/health-monitoring/index.ts

@@ -0,0 +1,68 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconHeartRateMonitor } from "@tabler/icons-react";
+
+export const healthMonitoringWidget: WidgetDefinition = {
+  icon: IconHeartRateMonitor,
+  name: "System Health Monitoring",
+  description: "Displays information showing the health and status of your system(s).",
+  path: "../../widgets/health-monitoring",
+  configuration: {
+    items: [
+      {
+        name: "CPU Temp in Fahrenheit",
+        description: "Display the CPU temperature in Fahrenheit or Celsius",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Show CPU Info",
+        description: "Displays CPU info in the system tab",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Memory Info",
+        description: "Displays memory info in the system tab",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Uptime",
+        description: "Show uptime in the cluster tab",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Filesystem Info",
+        description: "Displays filesystem info in the system tab",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Default tab",
+        description: "Tab that should be visible by default. Only used when multiple integrations are available.",
+        values: {
+          type: "select",
+          options: ["System", "Cluster"],
+        },
+        defaultValue: "System",
+      },
+      {
+        name: "Visible cluster sections",
+        description: "Select which sections should be visible in the cluster tab",
+        values: "List of Nodes, VMs, LXCs, Storage",
+        defaultValue: "Nodes, VMs, LXCs, Storage",
+      },
+      {
+        name: "Section indicator requirement",
+        description:
+          "'All' requires that all items be online for the indicator to be green. 'Any' requires at least one item to be online.",
+        values: {
+          type: "select",
+          options: ["All", "Any"],
+        },
+        defaultValue: "All",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/iframe/index.mdx

@@ -0,0 +1,103 @@
+---
+title: 'iFrame'
+description: 'Embed any content from the internet. Some websites may restrict access.'
+hide_title: true
+---
+
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { iframeWidget } from '.';
+
+
+<WidgetHeader
+  widget={iframeWidget}
+  categories={['Embed']}
+/>
+
+If your application is not supported natively by Homarr, you can integrate it using the iframe widget.
+It uses the [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe),
+which embeds the desired page in the browser.
+This means, no traffic is routed through Homarr (and the URL must be reachable from the client).
+
+### Screenshots
+
+import wikipediaHomepage from './img/wikipedia.png';
+import youtubeStream from './img/nasa-iss-stream.png';
+
+<div>
+  <img src={wikipediaHomepage} alt="iframe wikipedia-homepage" width={128 * 3} />
+  <img src={youtubeStream} alt="iframe youtube-iss-stream" width={128 * 3} />
+</div>
+
+### Adding the widget
+
+<AddingWidget />
+
+### Limitations
+
+Although you can integrate many websites, some may not work.
+This is because the administrators of those sites disallow iframes
+for security reasons, as users could easily be tricked
+by embeding the original site on a malicious page.
+
+Some proxies disallow iframes by default for this reason.
+You can use https://iframetest.com to check, if the site is allowing iframes.
+
+If you manage all of your own applications, you can usually change that by configuring
+the appropriate headers (such as `X-Frame-Options` or `Content-Security-Policy`) to allow iframes.
+
+For example, to allow your site to be embedded in iframes from specific domains:
+
+**Apache (.htaccess or httpd.conf):**
+```apache
+Header set Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com"
+Header set X-Frame-Options "ALLOW-FROM https://trusted-domain.com"
+```
+
+**Nginx:**
+```nginx
+add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com";
+add_header X-Frame-Options "ALLOW-FROM https://trusted-domain.com";
+```
+
+### Example URLs
+
+- **Wikipedia homepage:** https://en.wikipedia.org/wiki/Main_Page
+- **Any YouTube video or stream:** https://www.youtube.com/embed/dQw4w9WgXcQ?si=MWUbbG66UNTla_Ni
+
+### Configuration
+<WidgetConfig configuration={iframeWidget.configuration} />
+
+### Transparent iframes
+
+To create a transparent iframe like below you can use the following html code and load it into your iframe:
+
+```html
+<html style="color-scheme: dark;">
+<body style="background: none; display: flex; justify-content: center; align-items: center;">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg" width="90" height="90" />
+</body>
+</html>
+```
+
+![transparent iframe](./img/transparent-iframe.png)
+
+### Third party content
+:::warning
+
+The content below is an overview of third party projects. All support requests/problems must be redirected to the appropriate repository.
+We cannot guarantee the functionality nor security of these tools.
+
+:::
+
+### homarr-iframes from Diogo Valentim
+The project [homarr-iframes](https://github.com/diogovalentte/homarr-iframes) has iframes designed to be used with Homarr, these iframes offer a minimalist view of other systems:
+
+- [Vikunja](https://github.com/go-vikunja/vikunja): overview of your tasks with links to them.
+- [Linkwarden](https://github.com/linkwarden/linkwarden): overview of your bookmarks with links to them.
+- [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (*only in Brazil*).
+
+![Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard](./img/homarr-iframes-example.webp "Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard")
+
+You can [configure the iframes appearance and behavior](https://github.com/diogovalentte/homarr-iframes?tab=readme-ov-file#adding-to-homarr) using query arguments when adding them to your dashboard, like selecting the iframe theme and limit of items to show, and other options specific to each iframe.

apps/docs/docs/widgets/iframe/index.ts

@@ -0,0 +1,67 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconBrowser } from "@tabler/icons-react";
+
+export const iframeWidget: WidgetDefinition = {
+  icon: IconBrowser,
+  name: "iFrame",
+  description: "Embed any content from the internet. Some websites may restrict access.",
+  path: "../../widgets/iframe",
+  configuration: {
+    items: [
+      {
+        name: "Embed URL",
+        description: "The URL of the content to embed in the widget.",
+        values: "Any valid URL",
+        defaultValue: "-",
+      },
+      {
+        name: "Allow full screen",
+        description: "Whether to allow the embedded content to be displayed in full screen mode.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow scrolling",
+        description: "Whether to allow the embedded content to be scrolled.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Allow payment",
+        description: "Whether to allow the embedded content to process payments.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow auto play",
+        description: "Whether to allow the embedded content to auto play media.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow microphone",
+        description: "Whether to allow the embedded content to access the microphone.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow camera",
+        description: "Whether to allow the embedded content to access the camera.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow geolocation",
+        description: "Whether to allow the embedded content to access the geolocation.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+      {
+        name: "Allow modals",
+        description: "Whether to allow the embedded content to open modal windows.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/immich-album-carousel/index.mdx

@@ -0,0 +1,40 @@
+---
+title: 'Immich Album Carousel'
+description: 'Shows a slideshow of your album pictures from Immich'
+hide_title: true
+---
+
+import { immichIntegration } from '../../integrations/immich';import {
+  AddingWidget
+} from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { immichAlbumCarouselWidget } from '.';
+
+
+<WidgetHeader
+  widget={immichAlbumCarouselWidget}
+  categories={['Photos Service']}
+/>
+
+### Screenshots
+
+import screen from './img/screen.png';
+
+<img src={screen} height={256} alt="immich album size-big" />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: immichIntegration,
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+
+### Configuration
+<WidgetConfig configuration={immichAlbumCarouselWidget.configuration} />
+

apps/docs/docs/widgets/immich-album-carousel/index.ts

@@ -0,0 +1,32 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconPhoto } from "@tabler/icons-react";
+
+export const immichAlbumCarouselWidget: WidgetDefinition = {
+  icon: IconPhoto,
+  name: "Immich Album",
+  description: "Shows a slideshow of your album pictures from Immich",
+  path: "../../widgets/immich-album-carousel",
+  configuration: {
+    items: [
+      {
+        name: "Album ID",
+        description:
+          "This is a unique ID which refers to your Immich album. You can find this id by opening an album and copying the unique string from the URL, for example 'a21aca09-9f05-47dc-b1a1-7b53c547226e'",
+        values: { type: "string" },
+        defaultValue: "",
+      },
+      {
+        name: "Interval in seconds",
+        description: "Rotate between pictures in the album every X seconds. Must be at least 1. Must be below 3600",
+        values: { type: "string" },
+        defaultValue: "",
+      },
+      {
+        name: "Show photo info",
+        description: "Display date of the picture and the current index at the bottom of the slideshow",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/immich-server-stats/index.mdx

@@ -0,0 +1,40 @@
+---
+title: 'Immich Server Stats'
+description: 'Information about your Immich instance'
+hide_title: true
+---
+
+import { immichIntegration } from '../../integrations/immich';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { immichServerStatsWidget } from '.';
+
+
+<WidgetHeader
+  widget={immichServerStatsWidget}
+  categories={['Photos server']}
+/>
+
+### Screenshots
+
+import screen from './img/screen.png';
+
+
+<img src={screen} height={256} alt="immich server stats size-big" />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: immichIntegration,
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+
+### Configuration
+<WidgetConfig configuration={immichServerStatsWidget.configuration} />
+

apps/docs/docs/widgets/immich-server-stats/index.ts

@@ -0,0 +1,37 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconGraph } from "@tabler/icons-react";
+
+export const immichServerStatsWidget: WidgetDefinition = {
+  icon: IconGraph,
+  name: "Immich Server Stats",
+  description: "Information about your Immich instance",
+  path: "../../widgets/immich-server-stats",
+  configuration: {
+    items: [
+      {
+        name: "Show users",
+        description: "Show count of users on your instance",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show photos",
+        description: "Show count of photos on your instance",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show videos",
+        description: "Show count of videos on your instance",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show storage",
+        description: "Show the total amount of storage used",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/indexer-manager/index.mdx

@@ -0,0 +1,47 @@
+---
+title: 'Indexer manager status'
+description: 'View the status of your indexers.'
+hide_title: true
+---
+
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { indexerManagerWidget } from '.';
+
+
+<WidgetHeader
+  widget={indexerManagerWidget}
+  categories={['Indexer']}
+/>
+
+### Screenshots
+
+import bigItem from './img/big.png';
+import smallItem from './img/small.png';
+import { prowlarrIntegration } from '@site/docs/integrations/prowlarr';
+
+<div className='flex gap-1'>
+  <img src={bigItem} height={256} alt="indexer-manager size-big" />
+  <img src={smallItem} height={128} alt="indexer-manager size-small" />
+</div>
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: prowlarrIntegration,
+}]} />
+
+### Interactions
+
+- Test all indexers by clicking on the test button.
+
+### Adding the widget
+
+<AddingWidget />
+
+
+### Configuration
+<WidgetConfig configuration={indexerManagerWidget.configuration} />
+

apps/docs/docs/widgets/indexer-manager/index.ts

@@ -0,0 +1,19 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconReportSearch } from "@tabler/icons-react";
+
+export const indexerManagerWidget: WidgetDefinition = {
+  icon: IconReportSearch,
+  name: "Indexer manager status",
+  description: "View the status of your indexers.",
+  path: "../../widgets/indexer-manager",
+  configuration: {
+    items: [
+      {
+        name: "Open in new tab",
+        description: "Open indexer site in new tab",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/media-releases/index.mdx

@@ -0,0 +1,49 @@
+---
+title: 'Media releases'
+description: 'Display newly added medias or upcoming releases from different integrations'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { mediaReleasesWidget } from '.';
+import { embyIntegration } from '@site/docs/integrations/emby';
+import { jellyfinIntegration } from '@site/docs/integrations/jellyfin';
+import { plexIntegration } from '@site/docs/integrations/plex';
+
+
+<WidgetHeader
+  widget={mediaReleasesWidget}
+  categories={['Releases', 'Media']}
+/>
+
+Provides a list of newly added media or upcoming releases from your media server.
+
+### Screenshots
+
+import backdrop from './img/backdrop.png';
+import poster from './img/poster.png';
+
+<div className="flex gap-1">
+  <img src={backdrop} alt="media-releases layout-backdrop" width={256} />
+  <img src={poster} alt="media-releases layout-poster" width={256} />
+</div>
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: embyIntegration,
+}, {
+  integration: jellyfinIntegration,
+}, {
+  integration: plexIntegration,
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={mediaReleasesWidget.configuration} />

apps/docs/docs/widgets/media-releases/index.ts

@@ -0,0 +1,46 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconTicket } from "@tabler/icons-react";
+
+export const mediaReleasesWidget: WidgetDefinition = {
+  icon: IconTicket,
+  name: "Media releases",
+  description: "Display newly added medias or upcoming releases from different integrations",
+  path: "../../widgets/media-releases",
+  configuration: {
+    items: [
+      {
+        name: "Layout",
+        description: "How the image should be displayed",
+        values: {
+          type: "select",
+          options: ["Backdrop", "Poster"],
+        },
+        defaultValue: "Backdrop",
+      },
+      {
+        name: "Show description tooltip",
+        description: "Show a tooltip with the description of the media when hovering over the media item",
+        values: {
+          type: "boolean",
+        },
+        defaultValue: "true",
+      },
+      {
+        name: "Show media type badge",
+        description: "Show a badge indicating the type of media (e.g., movie, series)",
+        values: {
+          type: "boolean",
+        },
+        defaultValue: "true",
+      },
+      {
+        name: "Show source integration",
+        description: "Show avatar of the source integration",
+        values: {
+          type: "boolean",
+        },
+        defaultValue: "true",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/media-request-list/index.mdx

@@ -0,0 +1,50 @@
+---
+title: 'Media Request List'
+description: 'See a list of all media requests from your integration'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { mediaRequestListWidget } from '.';
+import { jellyseerrIntegration } from '@site/docs/integrations/jellyseerr';
+import { overseerrIntegration } from '@site/docs/integrations/overseerr';
+
+
+<WidgetHeader
+  widget={mediaRequestListWidget}
+  categories={['Media requests']}
+/>
+
+Provides a list of all open and recently closed requests. It also provides the functionality to approve or reject requests.
+
+### Screenshots
+
+import mediaRequestList from './img/list.png';
+
+<img src={mediaRequestList} alt="media-request-list" width={256} height={256} />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: jellyseerrIntegration,
+}, {
+  integration: overseerrIntegration,
+}]} />
+
+### Interactions
+
+- Approve / decline a request by clicking on the thumbs up or down icon.
+- Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={mediaRequestListWidget.configuration} />

apps/docs/docs/widgets/media-request-list/index.ts

@@ -0,0 +1,19 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconZoomQuestion } from "@tabler/icons-react";
+
+export const mediaRequestListWidget: WidgetDefinition = {
+  icon: IconZoomQuestion,
+  name: "Media Request List",
+  description: "See a list of all media requests from your integration",
+  path: "../../widgets/media-request-list",
+  configuration: {
+    items: [
+      {
+        name: "Open links in new tab",
+        description: "If enabled, links will open in a new tab.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/media-request-stats/index.mdx

@@ -0,0 +1,46 @@
+---
+title: 'Media Requests Stats'
+description: 'Statistics about your media requests'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { mediaRequestStatsWidget } from '.';
+import { jellyseerrIntegration } from '@site/docs/integrations/jellyseerr';
+import { overseerrIntegration } from '@site/docs/integrations/overseerr';
+
+
+<WidgetHeader
+  widget={mediaRequestStatsWidget}
+  categories={['Media requests']}
+/>
+
+Provide a statistics overview of your media requests, such as mount of requests, open requests, approvement and rejections.
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: jellyseerrIntegration,
+}, {
+  integration: overseerrIntegration,
+}]} />
+
+### Screenshots
+
+import mediaRequestStats from './img/stats.png';
+
+<img src={mediaRequestStats} alt="media-request-stats" width={256} height={256} />
+
+### Interactions
+
+- Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
+
+### Adding the widget
+
+<AddingWidget />

apps/docs/docs/widgets/media-request-stats/index.ts

@@ -0,0 +1,12 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconChartBar } from "@tabler/icons-react";
+
+export const mediaRequestStatsWidget: WidgetDefinition = {
+  icon: IconChartBar,
+  name: "Media Requests Stats",
+  description: "Statistics about your media requests",
+  path: "../../widgets/media-request-stats",
+  configuration: {
+    items: [],
+  },
+};

apps/docs/docs/widgets/media-server/index.mdx

@@ -0,0 +1,53 @@
+---
+title: 'Media server streams'
+description: 'Show the current streams on your media servers'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { mediaServerWidget } from '.';
+import { embyIntegration } from '@site/docs/integrations/emby';
+import { jellyfinIntegration } from '@site/docs/integrations/jellyfin';
+import { plexIntegration } from '@site/docs/integrations/plex';
+
+
+<WidgetHeader
+  widget={mediaServerWidget}
+  categories={['Media server']}
+/>
+
+The media server widget enables you to watch and view current active sessions over all your media servers. 
+It also displays useful information, that you can use when providing support to users or debugging a problem.
+
+
+
+### Screenshots
+
+import mediaTable from './img/table.png';
+
+<img src={mediaTable} alt="media-server-streams" width={128 * 3 * 1.5} height={128 * 1.5} />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: embyIntegration,
+}, {
+  integration: jellyfinIntegration,
+}, {
+  integration: plexIntegration,
+  note: "Will always show only currently playing streams, not all active sessions."
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={mediaServerWidget.configuration} />
+

apps/docs/docs/widgets/media-server/index.ts

@@ -0,0 +1,19 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconVideo } from "@tabler/icons-react";
+
+export const mediaServerWidget: WidgetDefinition = {
+  icon: IconVideo,
+  name: "Media server streams",
+  description: "Show the current streams on your media servers",
+  path: "../../widgets/media-server",
+  configuration: {
+    items: [
+      {
+        name: "Show only currently playing",
+        description: "Disabling this will not work for plex.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/media-transcoding/index.mdx

@@ -0,0 +1,51 @@
+---
+title: 'Media transcoding'
+description: 'Statistics, current queue and worker status of your media transcoding'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { mediaTranscodingWidget } from '.';
+import { tdarrIntegration } from '@site/docs/integrations/tdarr';
+
+
+<WidgetHeader
+  widget={mediaTranscodingWidget}
+  categories={['Media transcoding']}
+/>
+
+The media transcoding widget provides you with an overview of your media transcoding status. 
+It shows you the current queue, worker status, and statistics about your transcoding jobs.
+
+
+
+### Screenshots
+
+import queueCard from './img/queue.png';
+import workersCard from './img/workers.png';
+import statisticsCard from './img/statistics.png';
+
+<div className="flex gap-1 flex-wrap">
+  <img src={workersCard} alt="media-transcoding workers-tab" width={128 * 3} />
+  <img src={queueCard} alt="media-transcoding  queue-tab" width={128 * 3} />
+  <img src={statisticsCard} alt="media-transcoding statistics-tab" width={128 * 3} />
+</div>
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: tdarrIntegration,
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={mediaTranscodingWidget.configuration} />

apps/docs/docs/widgets/media-transcoding/index.ts

@@ -0,0 +1,25 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconTransform } from "@tabler/icons-react";
+
+export const mediaTranscodingWidget: WidgetDefinition = {
+  icon: IconTransform,
+  name: "Media transcoding",
+  description: "Statistics, current queue and worker status of your media transcoding",
+  path: "../../widgets/media-transcoding",
+  configuration: {
+    items: [
+      {
+        name: "Default view",
+        description: "Tab that is shown by default when the widget is opened",
+        values: { type: "select", options: ["Queue", "Workers", "Statistics"] },
+        defaultValue: "Statistics",
+      },
+      {
+        name: "Queue page size",
+        description: "Number of items shown per page in the queue",
+        values: "1-30",
+        defaultValue: "10",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/minecraft-server-status/index.mdx

@@ -0,0 +1,44 @@
+---
+title: 'Minecraft Server Status'
+description: 'Displays the status of a Minecraft server.'
+hide_title: true
+---
+
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+import { minecraftServerStatusWidget } from '.';
+
+
+<WidgetHeader
+  widget={minecraftServerStatusWidget}
+  categories={['Gaming', 'Minecraft']}
+/>
+
+Shows the status and amount of players on a Minecraft server. It supports both Java and Bedrock editions, however only public servers are supported which can be reached through the used api of [api.mcsrvstat.us](https://api.mcsrvstat.us).
+
+### Screenshots
+
+import javaItem from './img/java.png';
+import bedrockItem from './img/bedrock.png';
+
+<div className='flex gap-1'>
+  <img src={javaItem} alt="minecraft-server-status java-edition" width={128 * 1.5} height={128 * 1.5} />
+  <img src={bedrockItem} alt="minecraft-server-status bedrock-editon" width={128 * 1.5} height={128 * 1.5} />
+</div>
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={minecraftServerStatusWidget.configuration} />
+
+### Data source
+
+We use the Minecraft Server Status API to fetch the server status.
+If you need to whitelist the api, please use the following URL: `hhttps://api.mcsrvstat.us`

apps/docs/docs/widgets/minecraft-server-status/index.ts

@@ -0,0 +1,31 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconBrandMinecraft } from "@tabler/icons-react";
+
+export const minecraftServerStatusWidget: WidgetDefinition = {
+  icon: IconBrandMinecraft,
+  name: "Minecraft Server Status",
+  description: "Displays the status of a Minecraft server.",
+  path: "../../widgets/minecraft-server-status",
+  configuration: {
+    items: [
+      {
+        name: "Title",
+        description: "Title to show on top. Leave empty to show server address.",
+        values: { type: "string" },
+        defaultValue: "-",
+      },
+      {
+        name: "Server address",
+        description: "Public address of the Minecraft server",
+        values: { type: "string" },
+        defaultValue: "hypixel.net",
+      },
+      {
+        name: "Bedrock server",
+        description: "Wheter the server is a Bedrock server",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/network-controller-status/index.mdx

@@ -0,0 +1,44 @@
+---
+title: 'Network Status'
+description: 'Display connected devices on a network'
+hide_title: true
+---
+
+import { unifiControllerIntegration } from '@site/docs/integrations/unifi-controller';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+import { networkControllerStatusWidget } from '.';
+
+
+<WidgetHeader
+  widget={networkControllerStatusWidget}
+  categories={['Network controller']}
+/>
+
+Shows connected users and connected guest devices on wired or wireless networks.
+
+### Screenshots
+
+import wifiCard from './img/wifi.png';
+import wiredCard from './img/wired.png';
+
+<img src={wifiCard} alt="network-controller-status wifi" width={128 * 1.5} height={128 * 1.5} />
+<img src={wiredCard} alt="network-controller-status wired" width={128 * 1.5} height={128 * 1.5} />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: unifiControllerIntegration,
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={networkControllerStatusWidget.configuration} />

apps/docs/docs/widgets/network-controller-status/index.ts

@@ -0,0 +1,22 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconTopologyFull } from "@tabler/icons-react";
+
+export const networkControllerStatusWidget: WidgetDefinition = {
+  icon: IconTopologyFull,
+  name: "Network Status",
+  description: "Display connected devices on a network",
+  path: "../../widgets/network-controller-status",
+  configuration: {
+    items: [
+      {
+        name: "Widget Content",
+        description: "Select the type to display in the widget",
+        values: {
+          type: "select",
+          options: ["Wired", "Wi-Fi"],
+        },
+        defaultValue: "Wi-Fi",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/network-controller-summary/index.mdx

@@ -0,0 +1,39 @@
+---
+title: 'Network Controller Summary'
+description: 'Displays the summary of a Network Controller'
+hide_title: true
+---
+
+import { unifiControllerIntegration } from '@site/docs/integrations/unifi-controller';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { IconAd } from "@tabler/icons-react";
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+import { networkControllerSummaryWidget } from '.';
+
+
+<WidgetHeader
+  widget={networkControllerSummaryWidget}
+  categories={['Network controller']}
+/>
+
+Shows information whether your WAN is connected, Wi-Fi is active and several other information.
+
+### Screenshots
+
+import summaryCard from './img/summary.png';
+
+<img src={summaryCard} alt="network-controller-summary" width={128 * 1.5} height={128 * 1.5} />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: unifiControllerIntegration,
+}]} />
+
+### Adding the widget
+
+<AddingWidget />

apps/docs/docs/widgets/network-controller-summary/index.ts

@@ -0,0 +1,9 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconTopologyFull } from "@tabler/icons-react";
+
+export const networkControllerSummaryWidget: WidgetDefinition = {
+  icon: IconTopologyFull,
+  name: "Network Controller Summary",
+  description: "Displays the summary of a Network Controller",
+  path: "../../widgets/network-controller-summary",
+};