Modular Homelab Dashboard

{ "Available Plugins": { "entries": { "Docker": { "id": "Available-Plugins/Docker", "title": "Docker", "order": 0, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"Docker-Plugin\" tabindex=\"-1\">Docker Plugin</h1>\nThe docker plugin allows you to monitor your Docker containers and images directly from the dashboard. It fetches data such as container status, resource usage, and image information using the Docker API.\nThis requires access to the Docker socket, which can be provided by mounting the Docker socket file into the dashboard container:\n<pre><code class=\"language-yaml\">mounts:\n - /var/run/docker.sock:/var/run/docker.sock\n</code></pre>\n<h2 id=\"Data-Points\" tabindex=\"-1\">Data Points</h2>\n<ul>\n<li>\n<code>containers</code> - List of all Docker containers with their details\n</li>\n<li>\n<code>containers.count</code> - Total number of containers\n</li>\n<li>\n<code>images</code> - List of all Docker images with their details\n</li>\n<li>\n<code>images.count</code> - Total number of images\n</li>\n<li>\n<code>images.size</code> - Total size of all images\n</li>\n</ul>\n<h2 id=\"Example-Configuration\" tabindex=\"-1\">Example Configuration</h2>\n<pre><code class=\"language-yaml\">widgets:\n # List all containers with their status\n - type: datawidget\n subtype: list\n title: Containers\n datasource: docker\n datapoint: containers\n width: 2\n height: 3\n\n # List all images and their sizes\n - type: datawidget\n subtype: list\n title: Docker Images\n datasource: docker\n datapoint: images\n width: 2\n height: 2\n\n # Show total number of images\n - type: datawidget\n subtype: number\n title: Total Images\n datasource: docker\n datapoint: images.count\n width: 1\n height: 1\n</code></pre>\n", "textContent": "Docker Plugin\r\n\r\nThe docker plugin allows you to monitor your Docker containers and images directly from the dashboard. It fetches data such as container status, resource usage, and image information using the Docker API.\r\n\r\nThis requires access to the Docker socket, which can be provided by mounting the Docker socket file into the dashboard container:\r\n\r\n`yaml\r\nmounts:\r\n /var/run/docker.sock:/var/run/docker.sock\r\n`\r\nData Points\r\n\r\ncontainers - List of all Docker containers with their details\r\ncontainers.count - Total number of containers\r\n\r\nimages - List of all Docker images with their details\r\nimages.count - Total number of images\r\nimages.size - Total size of all images\r\nExample Configuration\r\n\r\n`yaml\r\nwidgets:\r\nList all containers with their status\r\n type: datawidget\r\n subtype: list\r\n title: Containers\r\n datasource: docker\r\n datapoint: containers\r\n width: 2\r\n height: 3\r\nList all images and their sizes\r\n type: datawidget\r\n subtype: list\r\n title: Docker Images\r\n datasource: docker\r\n datapoint: images\r\n width: 2\r\n height: 2\r\nShow total number of images\r\n type: datawidget\r\n subtype: number\r\n title: Total Images\r\n datasource: docker\r\n datapoint: images.count\r\n width: 1\r\n height: 1\r\n`\r\n", "wordCount": 166, "readingTime": 1, "isPage": true }, "Gitea": { "id": "Available-Plugins/Gitea", "title": "Gitea", "order": 0, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"Gitea-Plugin\" tabindex=\"-1\">Gitea Plugin</h1>\nThe gitea plugin allows you to monitor your Gitea repositories directly from the dashboard. It fetches data such as repository number, busy actions runners, and user heatmap data.\nThis requires access to the Gitea API, which can be provided by setting the the gitea url in the config.yaml file:\n<pre><code class=\"language-yaml\">plugins:\n gitea:\n url: https://your-gitea-instance.com\n</code></pre>\nAdditionally, you need to provide a PAT (Personal Access Token) with the necessary permissions to access the API. This token should be set as an environment variable <code>GITEA_TOKEN</code>:\n<pre><code class=\"language-yaml\">environment:\n - GITEA_TOKEN=${GITEA_TOKEN}\n</code></pre>\n<h2 id=\"Data-Points\" tabindex=\"-1\">Data Points</h2>\n<ul>\n<li><code>version</code> - Gitea version information</li>\n<li><code>admin.runners.busy</code> - List of all busy Gitea runners</li>\n<li><code>repos.count</code> - Total number of git repositories</li>\n<li><code>users.heatmap</code> - Heatmap data for user contributions</li>\n</ul>\n<h2 id=\"Example-Configuration\" tabindex=\"-1\">Example Configuration</h2>\n<pre><code class=\"language-yaml\">widgets:\n # Show number of busy gitea runners\n - type: datawidget\n subtype: statushistory\n title: Git Runners\n datasource: gitea\n datapoint: admin.runners.busy\n width: 1\n\n # Show total number of git repos\n - type: datawidget\n subtype: text\n title: Git Repos\n datasource: gitea\n datapoint: repos.count\n width: 1\n\n # Show the user heatmap for a specific user as a barchart\n - type: datawidget\n icon: https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/gitea.png\n subtype: bar\n title: Gitea\n datasource: gitea\n datapoint: users.heatmap\n datafilters:\n username: MyGiteaUserName\n width: 2\n</code></pre>\n", "textContent": "Gitea Plugin\r\n\r\nThe gitea plugin allows you to monitor your Gitea repositories directly from the dashboard. It fetches data such as repository number, busy actions runners, and user heatmap data.\r\n\r\nThis requires access to the Gitea API, which can be provided by setting the the gitea url in the config.yaml file:\r\n\r\n`yaml\r\nplugins:\r\n gitea:\r\n url: https://your-gitea-instance.com\r\n`\r\n\r\nAdditionally, you need to provide a PAT (Personal Access Token) with the necessary permissions to access the API. This token should be set as an environment variable GITEA_TOKEN:\r\n\r\n`yaml\r\nenvironment:\r\n GITEA_TOKEN=${GITEA_TOKEN}\r\n`\r\nData Points\r\n\r\nversion - Gitea version information\r\nadmin.runners.busy - List of all busy Gitea runners\r\nrepos.count - Total number of git repositories\r\nusers.heatmap - Heatmap data for user contributions\r\nExample Configuration\r\n\r\n`yaml\r\nwidgets:\r\nShow number of busy gitea runners\r\n type: datawidget\r\n subtype: statushistory\r\n title: Git Runners\r\n datasource: gitea\r\n datapoint: admin.runners.busy\r\n width: 1\r\nShow total number of git repos\r\n type: datawidget\r\n subtype: text\r\n title: Git Repos\r\n datasource: gitea\r\n datapoint: repos.count\r\n width: 1\r\nShow the user heatmap for a specific user as a barchart\r\n type: datawidget\r\n icon: https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/gitea.png\r\n subtype: bar\r\n title: Gitea\r\n datasource: gitea\r\n datapoint: users.heatmap\r\n datafilters:\r\n username: MyGiteaUserName\r\n width: 2\r\n`\r\n", "wordCount": 189, "readingTime": 1, "isPage": true }, "Gotify": { "id": "Available-Plugins/Gotify", "title": "Gotify", "order": 0, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"Gotify-Plugin\" tabindex=\"-1\">Gotify Plugin</h1>\nThe Gotify plugin allows you to monitor your Gotify notifications directly from the dashboard. It fetches basic data such as notification count.\nThis requires access to the Gotify API, which can be provided by setting the the gotify url in the config.yaml file:\n<pre><code class=\"language-yaml\">plugins:\n gotify:\n url: https://your-gotify-instance.com\n</code></pre>\nAdditionally, you need to provide a Gotify Client token to access the API. You can create such a token in Gotify directly, by navigating to <code>Clients</code> and clicking <code>Create Client</code>. This token should be set as an environment variable <code>GOTIFY_CLIENT_TOKEN </code>:\n<pre><code class=\"language-yaml\">environment:\n - GOTIFY_CLIENT_TOKEN = Gotify-Client-Token\n</code></pre>\n<h2 id=\"Data-Points\" tabindex=\"-1\">Data Points</h2>\n<ul>\n<li><code>applications.count</code> - Total number of gotify applications</li>\n<li><code>clients.count</code> - Total number of gotify clients</li>\n<li><code>messages.count</code> - Total number of gotify messages</li>\n<li><code>messages.new</code> - History of new gotify messages</li>\n</ul>\n<h2 id=\"Example-Configuration\" tabindex=\"-1\">Example Configuration</h2>\n<pre><code class=\"language-yaml\">widgets:\n # Show number of gotify applications\n - type: datawidget\n subtype: statushistory\n title: Gotify Applications\n datasource: gotify\n datapoint: applications.count\n width: 1\n\n # Show total number of gotify clients\n - type: datawidget\n subtype: text\n title: Gotify Clients\n datasource: gotify\n datapoint: clients.count\n width: 1\n\n # Show total number of gotify messages\n - type: datawidget\n subtype: number\n title: Total Messages\n datasource: gotify\n datapoint: messages.count\n</code></pre>\n", "textContent": "Gotify Plugin\r\n\r\nThe Gotify plugin allows you to monitor your Gotify notifications directly from the dashboard. It fetches basic data such as notification count.\r\n\r\nThis requires access to the Gotify API, which can be provided by setting the the gotify url in the config.yaml file:\r\n\r\n`yaml\r\nplugins:\r\n gotify:\r\n url: https://your-gotify-instance.com\r\n`\r\n\r\nAdditionally, you need to provide a Gotify Client token to access the API. You can create such a token in Gotify directly, by navigating to Clients and clicking Create Client. This token should be set as an environment variable GOTIFY_CLIENT_TOKEN :\r\n\r\n`yaml\r\nenvironment:\r\n GOTIFY_CLIENT_TOKEN = Gotify-Client-Token\r\n`\r\nData Points\r\n\r\napplications.count - Total number of gotify applications\r\nclients.count - Total number of gotify clients\r\nmessages.count - Total number of gotify messages\r\nmessages.new - History of new gotify messages\r\nExample Configuration\r\n\r\n`yaml\r\nwidgets:\r\nShow number of gotify applications\r\n type: datawidget\r\n subtype: statushistory\r\n title: Gotify Applications\r\n datasource: gotify\r\n datapoint: applications.count\r\n width: 1\r\nShow total number of gotify clients\r\n type: datawidget\r\n subtype: text\r\n title: Gotify Clients\r\n datasource: gotify\r\n datapoint: clients.count\r\n width: 1\r\nShow total number of gotify messages\r\n type: datawidget\r\n subtype: number\r\n title: Total Messages\r\n datasource: gotify\r\n datapoint: messages.count\r\n`\r\n", "wordCount": 187, "readingTime": 1, "isPage": true }, "Home Assistant": { "id": "Available-Plugins/Home-Assistant", "title": "Home Assistant", "order": 0, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"Home-Assistant-Plugin\" tabindex=\"-1\">Home Assistant Plugin</h1>\nThe Home Assistant plugin allows you to monitor your Home Assistant entities directly from the dashboard. It fetches basic data such as entity state.\nThis requires access to the Home Assistant API, which can be provided by setting the the home assistant url in the config.yaml file:\n<pre><code class=\"language-yaml\">plugins:\n homeassistant:\n url: https://your-home-assistant-instance.com\n</code></pre>\nAdditionally, you need to provide a Home Assistant token to access the API. You can create such a token in Home Assistant directly, by navigating to <code>User Avatar</code> > <code>Configuration</code> > <code>Users</code> > <code>Your User</code> > <code>Long-Lived Access Tokens</code>. This token should be set as an environment variable <code>HOME_ASSISTANT_TOKEN </code>:\n<pre><code class=\"language-yaml\">environment:\n - HOME_ASSISTANT_TOKEN = Home Assistant-Long-Lived-Access-Token\n</code></pre>\n<h2 id=\"Data-Points\" tabindex=\"-1\">Data Points</h2>\n<ul>\n<li><code>summary</code> - Return a summary of the Home Assistant instance, including number of devices and entities</li>\n<li><code>state</code> - Return the current state of an entity</li>\n</ul>\n<h2 id=\"Example-Configuration\" tabindex=\"-1\">Example Configuration</h2>\n<pre><code class=\"language-yaml\">widgets:\n # Show number of devices and entities in Home Assistant\n - type: datawidget\n subtype: text\n title: Home Assistant\n datasource: homeassistant\n datapoint: summary\n\n # Show current TV power consumption\n - type: datawidget\n subtype: bar\n title: TV Power Consumption\n datasource: homeassistant\n datapoint: state\n datafilters:\n entity_id: sensor.tv_power_consumption # Home Assistant entity ID (required)\n width: 2\n\n # Show current TV state\n - type: datawidget\n subtype: bar\n title: Staubsauger Steckdose\n datasource: homeassistant\n datapoint: state\n datafilters:\n entity_id: binary_sensor.tv_power_state # Home Assistant entity ID (required)\n width: 2\n</code></pre>\n", "textContent": "Home Assistant Plugin\r\n\r\nThe Home Assistant plugin allows you to monitor your Home Assistant entities directly from the dashboard. It fetches basic data such as entity state.\r\n\r\nThis requires access to the Home Assistant API, which can be provided by setting the the home assistant url in the config.yaml file:\r\n\r\n`yaml\r\nplugins:\r\n homeassistant:\r\n url: https://your-home-assistant-instance.com\r\n`\r\n\r\nAdditionally, you need to provide a Home Assistant token to access the API. You can create such a token in Home Assistant directly, by navigating to User Avatar > Configuration > Users > Your User > Long-Lived Access Tokens. This token should be set as an environment variable HOME_ASSISTANT_TOKEN :\r\n\r\n`yaml\r\nenvironment:\r\n HOME_ASSISTANT_TOKEN = Home Assistant-Long-Lived-Access-Token\r\n`\r\nData Points\r\n\r\nsummary - Return a summary of the Home Assistant instance, including number of devices and entities\r\nstate - Return the current state of an entity\r\nExample Configuration\r\n\r\n`yaml\r\nwidgets:\r\nShow number of devices and entities in Home Assistant\r\n type: datawidget\r\n subtype: text\r\n title: Home Assistant\r\n datasource: homeassistant\r\n datapoint: summary\r\nShow current TV power consumption\r\n type: datawidget\r\n subtype: bar\r\n title: TV Power Consumption\r\n datasource: homeassistant\r\n datapoint: state\r\n datafilters:\r\n entity_id: sensor.tv_power_consumption # Home Assistant entity ID (required)\r\n width: 2\r\nShow current TV state\r\n type: datawidget\r\n subtype: bar\r\n title: Staubsauger Steckdose\r\n datasource: homeassistant\r\n datapoint: state\r\n datafilters:\r\n entity_id: binary_sensor.tv_power_state # Home Assistant entity ID (required)\r\n width: 2\r\n`\r\n", "wordCount": 219, "readingTime": 1, "isPage": true }, "n8n": { "id": "Available-Plugins/n8n", "title": "n8n", "order": 0, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"n8n-Plugin\" tabindex=\"-1\">n8n Plugin</h1>\nThe n8n plugin allows you to monitor your n8n workflows directly from the dashboard. It fetches basic data such as workflow execution count.\nThis requires access to the n8n API, which can be provided by setting the the n8n url in the config.yaml file:\n<pre><code class=\"language-yaml\">plugins:\n n8n:\n url: https://your-n8n-instance.com\n</code></pre>\nAdditionally, you need to provide a n8n API key to access the API. You can create such a key in n8n directly, by navigating to <code>Settings</code> and clicking <code>n8n API</code>. This key should be set as an environment variable <code>N8N_API_KEY</code>:\n<pre><code class=\"language-yaml\">environment:\n - N8N_API_KEY = n8n-API-Key\n</code></pre>\n<h2 id=\"Data-Points\" tabindex=\"-1\">Data Points</h2>\n<ul>\n<li><code>executions</code> - Overview over n8n workflow executions, grouped by day</li>\n</ul>\n<h2 id=\"Example-Configuration\" tabindex=\"-1\">Example Configuration</h2>\n<pre><code class=\"language-yaml\">widgets:\n # Show number of n8n workflow executions\n - type: datawidget\n subtype: bar\n title: Workflow Executions\n datasource: n8n\n datapoint: executions\n width: 1\n</code></pre>\n", "textContent": "n8n Plugin\r\n\r\nThe n8n plugin allows you to monitor your n8n workflows directly from the dashboard. It fetches basic data such as workflow execution count.\r\n\r\nThis requires access to the n8n API, which can be provided by setting the the n8n url in the config.yaml file:\r\n\r\n`yaml\r\nplugins:\r\n n8n:\r\n url: https://your-n8n-instance.com\r\n`\r\n\r\nAdditionally, you need to provide a n8n API key to access the API. You can create such a key in n8n directly, by navigating to Settings and clicking n8n API. This key should be set as an environment variable N8N_API_KEY:\r\n\r\n`yaml\r\nenvironment:\r\n N8N_API_KEY = n8n-API-Key\r\n`\r\nData Points\r\n\r\nexecutions - Overview over n8n workflow executions, grouped by day\r\nExample Configuration\r\n\r\n`yaml\r\nwidgets:\r\nShow number of n8n workflow executions\r\n type: datawidget\r\n subtype: bar\r\n title: Workflow Executions\r\n datasource: n8n\r\n datapoint: executions\r\n width: 1\r\n`\r\n", "wordCount": 134, "readingTime": 1, "isPage": true }, "Pi-hole": { "id": "Available-Plugins/Pi-hole", "title": "Pi-hole", "order": 0, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"Pi-hole-Plugin\" tabindex=\"-1\">Pi-hole Plugin</h1>\nThe Pi-hole plugin allows you to monitor your Pi-hole instance directly from the dashboard. It fetches data such as query count, blocked queries, and other statistics.\nThis requires access to the Pi-hole API, which can be provided by setting the the Pi-hole url in the config.yaml file:\n<pre><code class=\"language-yaml\">plugins:\n pihole:\n url: https://your-pihole-instance.com\n</code></pre>\nAdditionally, you need to provide a Pi-hole app or user password. This token should be set as an environment variable <code>PIHOLE_PASSWORD</code>:\n<pre><code class=\"language-yaml\">environment:\n - PIHOLE_PASSWORD=${PIHOLE_PASSWORD}\n</code></pre>\n<h2 id=\"Data-Points\" tabindex=\"-1\">Data Points</h2>\n<ul>\n<li><code>blocked</code> - The number of blocked DNS queries</li>\n<li><code>blocked.percentage</code> - The percentage of DNS queries that were blocked</li>\n<li><code>cached</code> - The number of cached DNS queries</li>\n<li><code>clients.active</code> - The number of active clients using Pi-hole</li>\n<li><code>forwarded</code> - The number of DNS queries forwarded to upstream DNS servers</li>\n<li><code>totalQueries</code> - The total number of DNS queries processed by Pi-hole</li>\n<li><code>sessions.count</code> - The number of active Pi-hole admin UI/API sessions</li>\n</ul>\n<h2 id=\"Example-Configuration\" tabindex=\"-1\">Example Configuration</h2>\n<pre><code class=\"language-yaml\">widgets:\n # Show number of blocked DNS queries as a bar chart\n - type: datawidget\n subtype: bar\n title: Pi-hole Blocked\n datasource: pihole\n datapoint: blocked\n width: 2\n\n # Show total number of Pi-hole sessions as a bar chart\n - type: datawidget\n subtype: bar\n title: Pi-hole Sessions\n datasource: pihole\n datapoint: sessions.count\n width: 1\n</code></pre>\n", "textContent": "Pi-hole Plugin\r\n\r\nThe Pi-hole plugin allows you to monitor your Pi-hole instance directly from the dashboard. It fetches data such as query count, blocked queries, and other statistics.\r\n\r\nThis requires access to the Pi-hole API, which can be provided by setting the the Pi-hole url in the config.yaml file:\r\n\r\n`yaml\r\nplugins:\r\n pihole:\r\n url: https://your-pihole-instance.com\r\n`\r\n\r\nAdditionally, you need to provide a Pi-hole app or user password. This token should be set as an environment variable PIHOLE_PASSWORD:\r\n\r\n`yaml\r\nenvironment:\r\n PIHOLE_PASSWORD=${PIHOLE_PASSWORD}\r\n`\r\nData Points\r\n\r\nblocked - The number of blocked DNS queries\r\nblocked.percentage - The percentage of DNS queries that were blocked\r\ncached - The number of cached DNS queries\r\nclients.active - The number of active clients using Pi-hole\r\nforwarded - The number of DNS queries forwarded to upstream DNS servers\r\ntotalQueries - The total number of DNS queries processed by Pi-hole\r\nsessions.count - The number of active Pi-hole admin UI/API sessions\r\nExample Configuration\r\n\r\n`yaml\r\nwidgets:\r\nShow number of blocked DNS queries as a bar chart\r\n type: datawidget\r\n subtype: bar\r\n title: Pi-hole Blocked\r\n datasource: pihole\r\n datapoint: blocked\r\n width: 2\r\nShow total number of Pi-hole sessions as a bar chart\r\n type: datawidget\r\n subtype: bar\r\n title: Pi-hole Sessions\r\n datasource: pihole\r\n datapoint: sessions.count\r\n width: 1\r\n`\r\n", "wordCount": 201, "readingTime": 1, "isPage": true }, "System": { "id": "Available-Plugins/System", "title": "System", "order": 0, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"System-Plugin\" tabindex=\"-1\">System Plugin</h1>\nThe System plugin allows you to monitor your system's performance directly from the dashboard. It fetches data such as CPU usage, memory usage, disk space, and other statistics.\nIf hosted via Docker, make sure to add the below to your container configuration to allow the plugin to access system metrics:\n<pre><code class=\"language-yaml\">modular-homelab-dashboard:\n image: ghcr.io/kellojo/modular-homelab-dashboard:v1.1.4\n container_name: modular-homelab-dashboard\n restart: unless-stopped\n pid: "host" # Allows access to host system metrics\n volumes:\n - ./config.yaml:/app/dashboard.yaml:ro\n - ./background.jpg:/app/build/client/background.jpg:ro\n - /volume1/some-empty-subfolder:/volume1:ro # allows access to other volumes for disk stats\n - /volume2/some-empty-subfolder:/volume2:ro # allows access to other volumes for disk stats\n - /proc/meminfo:/proc/meminfo:ro # Allows the system plugin to read memory info\n - /proc/cpuinfo:/proc/cpuinfo:ro # Allows the system plugin to read cpu info\n - /var/run/docker.sock:/var/run/docker.sock # Allows the docker plugin to read docker stats\n</code></pre>\n<h2 id=\"Data-Points\" tabindex=\"-1\">Data Points</h2>\n<ul>\n<li><code>cpu.currentSpeed</code> - Show the current CPU speed in GHz</li>\n<li><code>cpu.load</code> - Show the CPU load percentage over time</li>\n<li><code>cpu.temperature</code> - Show the CPU temperature in °C over time</li>\n<li><code>memory</code> - Show the used memory in GB over time</li>\n<li><code>disk</code> - Show the used disk space in GB over time</li>\n<li><code>network.totalDown</code> - Show the total network download speed in Mbps over time</li>\n<li><code>network.totalUp</code> - Show the total network upload speed in Mbps over time</li>\n<li><code>network.traffic</code> - Show the total network traffic in GB over time</li>\n</ul>\n<h2 id=\"Example-Configuration\" tabindex=\"-1\">Example Configuration</h2>\n<pre><code class=\"language-yaml\">widgets:\n\n # Show the CPU load over time\n - type: datawidget\n subtype: line\n title: CPU\n datasource: system\n datapoint: cpu.load\n\n # Show the CPU temperature over time\n - type: datawidget\n subtype: line\n title: Temp.\n datasource: system\n datapoint: cpu.temperature\n\n # Show the current RAM usage as a progress bar\n - type: datawidget\n subtype: progressbar\n title: RAM\n datasource: system\n datapoint: memory\n width: 1\n\n # Show the disk usage for a specific volume\n - type: datawidget\n subtype: progressbar\n title: HDD Volume\n datasource: system\n datapoint: disk\n datafilters:\n volume: '/volume1' # optional, leave empty to show total disk usage\n width: 2\n</code></pre>\n", "textContent": "System Plugin\r\n\r\nThe System plugin allows you to monitor your system's performance directly from the dashboard. It fetches data such as CPU usage, memory usage, disk space, and other statistics.\r\n\r\nIf hosted via Docker, make sure to add the below to your container configuration to allow the plugin to access system metrics:\r\n\r\n`yaml\r\nmodular-homelab-dashboard:\r\n image: ghcr.io/kellojo/modular-homelab-dashboard:v1.1.4\r\n container_name: modular-homelab-dashboard\r\n restart: unless-stopped\r\n pid: \"host\" # Allows access to host system metrics\r\n volumes:\r\n ./config.yaml:/app/dashboard.yaml:ro\r\n ./background.jpg:/app/build/client/background.jpg:ro\r\n /volume1/some-empty-subfolder:/volume1:ro # allows access to other volumes for disk stats\r\n /volume2/some-empty-subfolder:/volume2:ro # allows access to other volumes for disk stats\r\n /proc/meminfo:/proc/meminfo:ro # Allows the system plugin to read memory info\r\n /proc/cpuinfo:/proc/cpuinfo:ro # Allows the system plugin to read cpu info\r\n /var/run/docker.sock:/var/run/docker.sock # Allows the docker plugin to read docker stats\r\n`\r\nData Points\r\n\r\ncpu.currentSpeed - Show the current CPU speed in GHz\r\ncpu.load - Show the CPU load percentage over time\r\ncpu.temperature - Show the CPU temperature in °C over time\r\nmemory - Show the used memory in GB over time\r\ndisk - Show the used disk space in GB over time\r\nnetwork.totalDown - Show the total network download speed in Mbps over time\r\nnetwork.totalUp - Show the total network upload speed in Mbps over time\r\nnetwork.traffic - Show the total network traffic in GB over time\r\nExample Configuration\r\n\r\n`yaml\r\nwidgets:\r\nShow the CPU load over time\r\n type: datawidget\r\n subtype: line\r\n title: CPU\r\n datasource: system\r\n datapoint: cpu.load\r\nShow the CPU temperature over time\r\n type: datawidget\r\n subtype: line\r\n title: Temp.\r\n datasource: system\r\n datapoint: cpu.temperature\r\nShow the current RAM usage as a progress bar\r\n type: datawidget\r\n subtype: progressbar\r\n title: RAM\r\n datasource: system\r\n datapoint: memory\r\n width: 1\r\nShow the disk usage for a specific volume\r\n type: datawidget\r\n subtype: progressbar\r\n title: HDD Volume\r\n datasource: system\r\n datapoint: disk\r\n datafilters:\r\n volume: '/volume1' # optional, leave empty to show total disk usage\r\n width: 2\r\n`\r\n", "wordCount": 300, "readingTime": 2, "isPage": true }, "Uptime Kuma": { "id": "Available-Plugins/Uptime-Kuma", "title": "Uptime Kuma", "order": 0, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"Uptime-Kuma-Plugin\" tabindex=\"-1\">Uptime Kuma Plugin</h1>\nThe Uptime Kuma plugin allows you to monitor your Uptime Kuma instance directly from the dashboard. It fetches data such as status, response time, and other statistics.\nThis requires access to the Uptime Kuma API, which can be provided by setting the the Uptime Kuma url in the config.yaml file:\n<pre><code class=\"language-yaml\">plugins:\n uptimekuma:\n url: https://your-uptime-kuma-instance.com\n statuspage: "default" # Optional: specify the status page to monitor\n</code></pre>\nThe uptime kuma plugin requires setting up a status page in Uptime Kuma itself. This allows the plugin to fetch the uptime of the specific status page, without any authentication. You can find more details on how to set up a status page in the <a href=\"https://github.com/louislam/uptime-kuma/wiki/Status-Page\">Uptime Kuma documentation</a>.\n<h2 id=\"Data-Points\" tabindex=\"-1\">Data Points</h2>\n<ul>\n<li><code>uptime</code> - Show the uptime percentage of the specified status page</li>\n</ul>\n<h2 id=\"Example-Configuration\" tabindex=\"-1\">Example Configuration</h2>\n<pre><code class=\"language-yaml\">widgets:\n # Show the uptime percentage as a status history\n - type: datawidget\n subtype: statushistory\n title: Uptime\n datasource: uptimekuma\n datapoint: uptime\n width: 1\n</code></pre>\n", "textContent": "Uptime Kuma Plugin\r\n\r\nThe Uptime Kuma plugin allows you to monitor your Uptime Kuma instance directly from the dashboard. It fetches data such as status, response time, and other statistics.\r\n\r\nThis requires access to the Uptime Kuma API, which can be provided by setting the the Uptime Kuma url in the config.yaml file:\r\n\r\n`yaml\r\nplugins:\r\n uptimekuma:\r\n url: https://your-uptime-kuma-instance.com\r\n statuspage: \"default\" # Optional: specify the status page to monitor\r\n`\r\n\r\nThe uptime kuma plugin requires setting up a status page in Uptime Kuma itself. This allows the plugin to fetch the uptime of the specific status page, without any authentication. You can find more details on how to set up a status page in the Uptime Kuma documentation.\r\nData Points\r\n\r\nuptime - Show the uptime percentage of the specified status page\r\nExample Configuration\r\n\r\n`yaml\r\nwidgets:\r\nShow the uptime percentage as a status history\r\n type: datawidget\r\n subtype: statushistory\r\n title: Uptime\r\n datasource: uptimekuma\r\n datapoint: uptime\r\n width: 1\r\n`\r\n", "wordCount": 155, "readingTime": 1, "isPage": true } }, "isPage": false, "title": "Available Plugins", "order": 3 }, "Configuration": { "entries": { "⚙️ General Configuration": { "id": "Configuration/General-Configuration", "title": "⚙️ General Configuration", "order": 1, "content": "<img src=\"cachedImage-../images/Banner-2.png\" alt=\"\">\n<h1 id=\"General-Configuration\" tabindex=\"-1\">General Configuration</h1>\nThe dashboard supports a smaller set of global configuration options that can be set in the <code>config</code> section of the <code>config.yaml</code> file.\n<pre><code class=\"language-yaml\">config:\n historyLength: 100\n refreshCron: "*/5 * * * * *"\n disableSeasonalEvents: false\n background:\n url: ./background.jpg\n blur: 0.5rem\n brightness: 0.25\n</code></pre>\n<table>\n<thead>\n<tr>\n<th>Property</th>\n<th>Required</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>historyLength</code></td>\n<td>No</td>\n<td>The number of historical data points to keep for data widgets that support history (default: 100).</td>\n</tr>\n<tr>\n<td><code>refreshCron</code></td>\n<td>No</td>\n<td>The cron expression that defines how often data widgets should refresh their data (default: "_/10 _ * * * *").</td>\n</tr>\n<tr>\n<td><code>disableSeasonalEvents</code></td>\n<td>No</td>\n<td>Disable seasonal events and decorations (default: false).</td>\n</tr>\n<tr>\n<td><code>background</code></td>\n<td>No</td>\n<td>Configuration for the dashboard background image, including URL, blur, and brightness.</td>\n</tr>\n<tr>\n<td><code>background.url</code></td>\n<td>No</td>\n<td>The URL or path to the background image.</td>\n</tr>\n<tr>\n<td><code>background.blur</code></td>\n<td>No</td>\n<td>The amount of blur to apply to the background image (e.g., "0.5rem").</td>\n</tr>\n<tr>\n<td><code>background.brightness</code></td>\n<td>No</td>\n<td>The brightness level to apply to the background image (e.g., 0.25).</td>\n</tr>\n</tbody>\n</table>\n", "textContent": "General Configuration\r\n\r\nThe dashboard supports a smaller set of global configuration options that can be set in the config section of the config.yaml file.\r\n\r\n`yaml\r\nconfig:\r\n historyLength: 100\r\n refreshCron: \"*/5 * * * * *\"\r\n disableSeasonalEvents: false\r\n background:\r\n url: ./background.jpg\r\n blur: 0.5rem\r\n brightness: 0.25\r\n`\r\n\r\n| Property | Required | Description |\r\n| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------ |\r\n| historyLength | No | The number of historical data points to keep for data widgets that support history (default: 100). |\r\n| refreshCron | No | The cron expression that defines how often data widgets should refresh their data (default: \"_/10 _ \\* \\* \\* \\*\"). |\r\n| disableSeasonalEvents | No | Disable seasonal events and decorations (default: false). |\r\n| background | No | Configuration for the dashboard background image, including URL, blur, and brightness. |\r\n| background.url | No | The URL or path to the background image. |\r\n| background.blur | No | The amount of blur to apply to the background image (e.g., \"0.5rem\"). |\r\n| background.brightness | No | The brightness level to apply to the background image (e.g., 0.25). |", "wordCount": 186, "readingTime": 1, "isPage": true }, "🌐 Layout": { "id": "Configuration/Layout", "title": "🌐 Layout", "order": 1, "content": "<img src=\"cachedImage-../images/Banner-2.png\" alt=\"\">\n<h1 id=\"Layout\" tabindex=\"-1\">Layout</h1>\nThe dashboard uses a CSS grid layout to arrange widgets in a flexible and responsive way. The grid by default has 8 columns, which can be occupied by widgets of varying widths. Each widget can specify its width and height in terms of grid units.\nThe layout is defined in the <code>config.yaml</code> file under the <code>widgets</code> section. Each widget can have the following layout properties:\n<pre><code class=\"language-yaml\">widgets:\n - type: link\n title: My Awesome Link\n url: https://example.com\n width: 2 # width in grid units (optional)\n height: 2 # height in grid units (optional)\n</code></pre>\nThe order of widgets in the configuration file determines their placement on the grid. Widgets are placed from left to right, top to bottom, filling available space based on their specified widths and heights.\nThe only exception are title widgets, which always take the full width of the dashboard:\n<pre><code class=\"language-yaml\">widgets:\n - type: title\n title: My Dashboard Title\n\n - type: link\n title: My Awesome Link\n url: https://example.com\n</code></pre>\n<h2 id=\"Responsive-Design\" tabindex=\"-1\">Responsive Design</h2>\nThe dashboard layout is responsive and adapts to different screen sizes. On smaller screens, such as on phones, the number of columns may be reduced, jumping to 6, 4 and 2 columns.\n", "textContent": "Layout\r\n\r\nThe dashboard uses a CSS grid layout to arrange widgets in a flexible and responsive way. The grid by default has 8 columns, which can be occupied by widgets of varying widths. Each widget can specify its width and height in terms of grid units.\r\n\r\nThe layout is defined in the config.yaml file under the widgets section. Each widget can have the following layout properties:\r\n\r\n`yaml\r\nwidgets:\r\n type: link\r\n title: My Awesome Link\r\n url: https://example.com\r\n width: 2 # width in grid units (optional)\r\n height: 2 # height in grid units (optional)\r\n`\r\n\r\nThe order of widgets in the configuration file determines their placement on the grid. Widgets are placed from left to right, top to bottom, filling available space based on their specified widths and heights.\r\n\r\nThe only exception are title widgets, which always take the full width of the dashboard:\r\n\r\n`yaml\r\nwidgets:\r\n type: title\r\n title: My Dashboard Title\r\n\r\n type: link\r\n title: My Awesome Link\r\n url: https://example.com\r\n`\r\nResponsive Design\r\n\r\nThe dashboard layout is responsive and adapts to different screen sizes. On smaller screens, such as on phones, the number of columns may be reduced, jumping to 6, 4 and 2 columns.", "wordCount": 193, "readingTime": 1, "isPage": true }, "📃 Text Widget": { "id": "Configuration/Text-Widget", "title": "📃 Text Widget", "order": 4, "content": "<img src=\"cachedImage-../images/widgets/link.png\" alt=\"Text Widget\">\n<h1 id=\"Text-Widget\" tabindex=\"-1\">Text Widget</h1>\nDisplays a tile that contains static text. This widget is useful for displaying information that doesn't change frequently, works similarly to the Link Widget but without the need for a URL.\n<h2 id=\"Configuration-Options\" tabindex=\"-1\">Configuration Options</h2>\n<table>\n<thead>\n<tr>\n<th>Property</th>\n<th>Required</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>title</code></td>\n<td>Yes</td>\n<td>The title to display</td>\n</tr>\n<tr>\n<td><code>url</code></td>\n<td>No</td>\n<td>The URL to navigate to when the tile is clicked.</td>\n</tr>\n<tr>\n<td><code>subtitle</code></td>\n<td>No</td>\n<td>The subtitle to display</td>\n</tr>\n<tr>\n<td><code>width</code></td>\n<td>No</td>\n<td>The width of the tile (e.g., 1, 2).</td>\n</tr>\n<tr>\n<td><code>height</code></td>\n<td>No</td>\n<td>The height of the tile (e.g., 1, 2).</td>\n</tr>\n<tr>\n<td><code>icon</code></td>\n<td>No</td>\n<td>The icon to display in the tile.</td>\n</tr>\n<tr>\n<td><code>iconify</code></td>\n<td>No</td>\n<td>The Iconify icon to display in the tile.</td>\n</tr>\n<tr>\n<td><code>iconRounded</code></td>\n<td>No</td>\n<td>Show the icon with rounded corners.</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Configuration-Example\" tabindex=\"-1\">Configuration Example</h2>\n<pre><code class=\"language-yaml\">widgets:\n - type: text\n title: My Dashboard Title\n subtitle: Click to visit example.com\n width: 2\n\n # With an iconify icon\n - type: text\n title: My Dashboard Title\n subtitle: Click to visit example.com\n iconify: mdi:home\n width: 2\n\n # With a regular icon\n - type: text\n title: My Dashboard Title\n subtitle: Click to visit example.com\n icon: https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/gitea.png\n width: 2\n</code></pre>\n", "textContent": "Text Widget\r\nText Widget\r\n\r\nDisplays a tile that contains static text. This widget is useful for displaying information that doesn't change frequently, works similarly to the Link Widget but without the need for a URL.\r\nConfiguration Options\r\n\r\n| Property | Required | Description |\r\n| ------------- | -------- | ------------------------------------------------ |\r\n| title | Yes | The title to display |\r\n| url | No | The URL to navigate to when the tile is clicked. |\r\n| subtitle | No | The subtitle to display |\r\n| width | No | The width of the tile (e.g., 1, 2). |\r\n| height | No | The height of the tile (e.g., 1, 2). |\r\n| icon | No | The icon to display in the tile. |\r\n| iconify | No | The Iconify icon to display in the tile. |\r\n| iconRounded | No | Show the icon with rounded corners. |\r\nConfiguration Example\r\n\r\n`yaml\r\nwidgets:\r\n type: text\r\n title: My Dashboard Title\r\n subtitle: Click to visit example.com\r\n width: 2\r\nWith an iconify icon\r\n type: text\r\n title: My Dashboard Title\r\n subtitle: Click to visit example.com\r\n iconify: mdi:home\r\n width: 2\r\nWith a regular icon\r\n type: text\r\n title: My Dashboard Title\r\n subtitle: Click to visit example.com\r\n icon: https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/gitea.png\r\n width: 2\r\n`", "wordCount": 210, "readingTime": 1, "isPage": true }, "📊 Data Widget": { "id": "Configuration/Data-Widget", "title": "📊 Data Widget", "order": 6, "content": "<img src=\"cachedImage-../images/widgets/datawidget.png\" alt=\"Data Widget\">\n<h1 id=\"Data-Widget\" tabindex=\"-1\">Data Widget</h1>\nDisplays a tile that contains dynamic data. This widget is useful for displaying information that should be pulled from an external source via a built-in integration/plugin. This widget requires additional configuration depending on the data source being used and the type of data being displayed.\nBy default the data will be refreshed every 10 seconds and a history of up to 100 entries will be kept for plugins that support historical data.\n<h2 id=\"Configuration-Options\" tabindex=\"-1\">Configuration Options</h2>\n<table>\n<thead>\n<tr>\n<th>Property</th>\n<th>Required</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>subtype</code></td>\n<td>Yes</td>\n<td>The subtype of the data being displayed. Can be either line, bar, statushistory, progressbar, list, fill</td>\n</tr>\n<tr>\n<td><code>datasource</code></td>\n<td>Yes</td>\n<td>The plugin to use for fetching the data (i.e. system, pihole, ...)</td>\n</tr>\n<tr>\n<td><code>datapoint</code></td>\n<td>Yes</td>\n<td>The specific data point to display (i.e.cpu.temperature, memory, ...)</td>\n</tr>\n<tr>\n<td><code>datafilters</code></td>\n<td>No</td>\n<td>The data filter to apply, some plugins might require or support a specific filter to be supplied.</td>\n</tr>\n<tr>\n<td><code>title</code></td>\n<td>Yes</td>\n<td>The title to display</td>\n</tr>\n<tr>\n<td><code>subtitle</code></td>\n<td>No</td>\n<td>The subtitle to display, in most cases this will be set by the plugin</td>\n</tr>\n<tr>\n<td><code>url</code></td>\n<td>No</td>\n<td>The URL to navigate to when the tile is clicked.</td>\n</tr>\n<tr>\n<td><code>width</code></td>\n<td>No</td>\n<td>The width of the tile (e.g., 1, 2).</td>\n</tr>\n<tr>\n<td><code>height</code></td>\n<td>No</td>\n<td>The height of the tile (e.g., 1, 2).</td>\n</tr>\n<tr>\n<td><code>icon</code></td>\n<td>No</td>\n<td>The icon to display in the tile.</td>\n</tr>\n<tr>\n<td><code>iconify</code></td>\n<td>No</td>\n<td>The Iconify icon to display in the tile.</td>\n</tr>\n<tr>\n<td><code>iconRounded</code></td>\n<td>No</td>\n<td>Show the icon with rounded corners.</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Configuration-Example\" tabindex=\"-1\">Configuration Example</h2>\n<pre><code class=\"language-yaml\">widgets:\n - type: datawidget\n subtype: progressbar\n title: RAM\n datasource: system\n datapoint: memory\n width: 1\n</code></pre>\n<h2 id=\"Supported-Subtypes\" tabindex=\"-1\">Supported Subtypes</h2>\nThe following subtypes are supported for the data widget:\n<ul>\n<li>line</li>\n<li>bar</li>\n<li>statushistory</li>\n<li>heatmap</li>\n<li>progressbar</li>\n<li>list</li>\n<li>fill</li>\n</ul>\nBelow you can see some of them in action:\n<img src=\"cachedImage-../images/widgets/overview.png\" alt=\"Widget Overview\">\nYou can find usage examples for the widgets <a href=\"https://github.com/Kellojo/Modular-Homelab-Dashboard/blob/main/dashboard.yaml\">here</a>.\n", "textContent": "Data Widget\r\nData Widget\r\n\r\nDisplays a tile that contains dynamic data. This widget is useful for displaying information that should be pulled from an external source via a built-in integration/plugin. This widget requires additional configuration depending on the data source being used and the type of data being displayed.\r\n\r\nBy default the data will be refreshed every 10 seconds and a history of up to 100 entries will be kept for plugins that support historical data.\r\nConfiguration Options\r\n\r\n| Property | Required | Description |\r\n| ------------- | -------- | -------------------------------------------------------------------------------------------------------- |\r\n| subtype | Yes | The subtype of the data being displayed. Can be either line, bar, statushistory, progressbar, list, fill |\r\n| datasource | Yes | The plugin to use for fetching the data (i.e. system, pihole, ...) |\r\n| datapoint | Yes | The specific data point to display (i.e.cpu.temperature, memory, ...) |\r\n| datafilters | No | The data filter to apply, some plugins might require or support a specific filter to be supplied. |\r\n| title | Yes | The title to display |\r\n| subtitle | No | The subtitle to display, in most cases this will be set by the plugin |\r\n| url | No | The URL to navigate to when the tile is clicked. |\r\n| width | No | The width of the tile (e.g., 1, 2). |\r\n| height | No | The height of the tile (e.g., 1, 2). |\r\n| icon | No | The icon to display in the tile. |\r\n| iconify | No | The Iconify icon to display in the tile. |\r\n| iconRounded | No | Show the icon with rounded corners. |\r\nConfiguration Example\r\n\r\n`yaml\r\nwidgets:\r\n type: datawidget\r\n subtype: progressbar\r\n title: RAM\r\n datasource: system\r\n datapoint: memory\r\n width: 1\r\n`\r\nSupported Subtypes\r\n\r\nThe following subtypes are supported for the data widget:\r\n\r\nline\r\nbar\r\nstatushistory\r\nheatmap\r\nprogressbar\r\nlist\r\nfill\r\n\r\nBelow you can see some of them in action:\r\n\r\nWidget Overview\r\n\r\nYou can find usage examples for the widgets here.", "wordCount": 338, "readingTime": 2, "isPage": true }, "📰 Widgets": { "id": "Configuration/Widgets", "title": "📰 Widgets", "order": 2, "content": "<img src=\"cachedImage-../images/Banner-2.png\" alt=\"\">\n<h1 id=\"Widget-Types\" tabindex=\"-1\">Widget Types</h1>\nThere are various widget types available to display different kinds of information on your dashboard. Each widget type displays data in a unique way.\nWidgets types are indicated by the <code>type</code> field in the configuration file:\n<pre><code class=\"language-yaml\">widgets:\n - type: title\n title: My Dashboard Title\n\n - type: link\n title: My Awesome Link\n url: https://example.com\n\n - type: datawidget\n subtype: line\n title: CPU\n datasource: system\n datapoint: cpu.load\n</code></pre>\n<h2 id=\"Available-Widget-Types\" tabindex=\"-1\">Available Widget Types</h2>\nThe following widget types are currently available:\n<table>\n<thead>\n<tr>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"#Configuration/Title-Widget\">title</a></td>\n<td>Displays a title for the dashboard or a specific section.</td>\n</tr>\n<tr>\n<td><a href=\"#Configuration/Text-Widget\">text</a></td>\n<td>Displays a text only widget for the dashboard or a specific section.</td>\n</tr>\n<tr>\n<td><a href=\"#Configuration/Link-Widget\">link</a></td>\n<td>Displays a tile that is clickable and routes the user to a specific link. Requires the url parameter to be set in addition.</td>\n</tr>\n<tr>\n<td><a href=\"#Configuration/Data-Widget\">datawidget</a></td>\n<td>Displays data that is made available from one of the plugins. The data is pulled through a backend service by specifying the datasource and datapoint properties.</td>\n</tr>\n</tbody>\n</table>\n", "textContent": "Widget Types\r\n\r\nThere are various widget types available to display different kinds of information on your dashboard. Each widget type displays data in a unique way.\r\n\r\nWidgets types are indicated by the type field in the configuration file:\r\n\r\n`yaml\r\nwidgets:\r\n type: title\r\n title: My Dashboard Title\r\n\r\n type: link\r\n title: My Awesome Link\r\n url: https://example.com\r\n\r\n type: datawidget\r\n subtype: line\r\n title: CPU\r\n datasource: system\r\n datapoint: cpu.load\r\n`\r\nAvailable Widget Types\r\n\r\nThe following widget types are currently available:\r\n\r\n| Type | Description |\r\n| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| title | Displays a title for the dashboard or a specific section. |\r\n| text | Displays a text only widget for the dashboard or a specific section. |\r\n| link | Displays a tile that is clickable and routes the user to a specific link. Requires the url parameter to be set in addition. |\r\n| datawidget | Displays data that is made available from one of the plugins. The data is pulled through a backend service by specifying the datasource and datapoint properties. |", "wordCount": 172, "readingTime": 1, "isPage": true }, "🔌 Using Plugins": { "id": "Configuration/Using-Plugins", "title": "🔌 Using Plugins", "order": 7, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"Using-Plugins\" tabindex=\"-1\">Using Plugins</h1>\nThe config.yaml file supports a <code>plugins</code> section, where you can configure various plugins to fetch data from your homelab services. Plugins allow you to securely retrieve information without exposing sensitive credentials or API keys in the frontend. The plugins section is optional; if no plugins are needed, you can omit it entirely.\nEach plugin has it's own configuration options, which are required for the plugin to work correctly. Below is an example of a few commonly used plugins:\n<pre><code class=\"language-yaml\">plugins:\n gitea:\n url: https://192.168.178.100:3000\n uptimekuma:\n url: https://192.168.178.101/\n pihole:\n url: https://192.168.178.102/\n</code></pre>\nPlease refer to the individual plugin documentation for detailed configuration options and usage instructions for each plugin.\n<h2 id=\"Plugin-Secrets\" tabindex=\"-1\">Plugin Secrets</h2>\nSecrets are required by some plugins to authenticate with the respective services. These secrets should be injected via the specified environment variables.\n", "textContent": "Using Plugins\r\n\r\nThe config.yaml file supports a plugins section, where you can configure various plugins to fetch data from your homelab services. Plugins allow you to securely retrieve information without exposing sensitive credentials or API keys in the frontend. The plugins section is optional; if no plugins are needed, you can omit it entirely.\r\n\r\nEach plugin has it's own configuration options, which are required for the plugin to work correctly. Below is an example of a few commonly used plugins:\r\n\r\n`yaml\r\nplugins:\r\n gitea:\r\n url: https://192.168.178.100:3000\r\n uptimekuma:\r\n url: https://192.168.178.101/\r\n pihole:\r\n url: https://192.168.178.102/\r\n`\r\n\r\nPlease refer to the individual plugin documentation for detailed configuration options and usage instructions for each plugin.\r\nPlugin Secrets\r\n\r\nSecrets are required by some plugins to authenticate with the respective services. These secrets should be injected via the specified environment variables.", "wordCount": 133, "readingTime": 1, "isPage": true }, "🔗 Link Widget": { "id": "Configuration/Link-Widget", "title": "🔗 Link Widget", "order": 5, "content": "<img src=\"cachedImage-../images/widgets/link.png\" alt=\"Link Widget\">\n<h1 id=\"Link-Widget\" tabindex=\"-1\">Link Widget</h1>\nDisplays a tile that is clickable and routes the user to a specific link. Requires the <code>url</code> parameter to be set in addition.\n<h2 id=\"Configuration-Options\" tabindex=\"-1\">Configuration Options</h2>\n<table>\n<thead>\n<tr>\n<th>Property</th>\n<th>Required</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>title</code></td>\n<td>Yes</td>\n<td>The title to display</td>\n</tr>\n<tr>\n<td><code>url</code></td>\n<td>No</td>\n<td>The URL to navigate to when the tile is clicked.</td>\n</tr>\n<tr>\n<td><code>subtitle</code></td>\n<td>No</td>\n<td>The subtitle to display</td>\n</tr>\n<tr>\n<td><code>width</code></td>\n<td>No</td>\n<td>The width of the tile (e.g., 1, 2).</td>\n</tr>\n<tr>\n<td><code>height</code></td>\n<td>No</td>\n<td>The height of the tile (e.g., 1, 2).</td>\n</tr>\n<tr>\n<td><code>icon</code></td>\n<td>No</td>\n<td>The icon to display in the tile.</td>\n</tr>\n<tr>\n<td><code>iconify</code></td>\n<td>No</td>\n<td>The Iconify icon to display in the tile.</td>\n</tr>\n<tr>\n<td><code>iconRounded</code></td>\n<td>No</td>\n<td>Show the icon with rounded corners.</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Configuration-Example\" tabindex=\"-1\">Configuration Example</h2>\n<pre><code class=\"language-yaml\">widgets:\n - type: link\n title: My Dashboard Title\n url: https://example.com\n subtitle: Click to visit example.com\n width: 2\n</code></pre>\n", "textContent": "Link Widget\r\nLink Widget\r\n\r\nDisplays a tile that is clickable and routes the user to a specific link. Requires the url parameter to be set in addition.\r\nConfiguration Options\r\n\r\n| Property | Required | Description |\r\n| ------------- | -------- | ------------------------------------------------ |\r\n| title | Yes | The title to display |\r\n| url | No | The URL to navigate to when the tile is clicked. |\r\n| subtitle | No | The subtitle to display |\r\n| width | No | The width of the tile (e.g., 1, 2). |\r\n| height | No | The height of the tile (e.g., 1, 2). |\r\n| icon | No | The icon to display in the tile. |\r\n| iconify | No | The Iconify icon to display in the tile. |\r\n| iconRounded | No | Show the icon with rounded corners. |\r\nConfiguration Example\r\n\r\n`yaml\r\nwidgets:\r\n type: link\r\n title: My Dashboard Title\r\n url: https://example.com\r\n subtitle: Click to visit example.com\r\n width: 2\r\n`", "wordCount": 166, "readingTime": 1, "isPage": true }, "🖼️ Background Images": { "id": "Configuration/Background-Images", "title": "🖼️ Background Images", "order": 1, "content": "<img src=\"cachedImage-../images/Banner-2.png\" alt=\"\">\n<h1 id=\"Background-Images\" tabindex=\"-1\">Background Images</h1>\nYou can set custom background images for your dashboard to enhance its visual appeal. Background images can be configured in the main configuration file under the <code>config > background</code> section.\n<pre><code class=\"language-yaml\">config:\n background:\n # Path to the background image\n url: ./background.jpg\n\n # Amount of blur to apply to the background, set to 0 for no blur\n blur: 0.5rem\n\n # Amount of brightness to apply to the background, set to 1 for no change\n brightness: 0.25\n</code></pre>\n", "textContent": "Background Images\r\n\r\nYou can set custom background images for your dashboard to enhance its visual appeal. Background images can be configured in the main configuration file under the config > background section.\r\n\r\n`yaml\r\nconfig:\r\n background:\r\nPath to the background image\r\n url: ./background.jpg\r\nAmount of blur to apply to the background, set to 0 for no blur\r\n blur: 0.5rem\r\nAmount of brightness to apply to the background, set to 1 for no change\r\n brightness: 0.25\r\n`", "wordCount": 75, "readingTime": 1, "isPage": true }, "🗂️ Title Widget": { "id": "Configuration/Title-Widget", "title": "🗂️ Title Widget", "order": 3, "content": "<img src=\"cachedImage-../images/widgets/title.png\" alt=\"Title Widget\">\n<h1 id=\"Title-Widget\" tabindex=\"-1\">Title Widget</h1>\nDisplays a title for the dashboard or a specific section, always taking the full width of the dashboard, allowing for clear separation between different sections (i.e. monitoring, media, etc.).\n<h2 id=\"Configuration-Options\" tabindex=\"-1\">Configuration Options</h2>\n<table>\n<thead>\n<tr>\n<th>Property</th>\n<th>Required</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>title</code></td>\n<td>Yes</td>\n<td>The title to display</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Configuration-Example\" tabindex=\"-1\">Configuration Example</h2>\n<pre><code class=\"language-yaml\">widgets:\n - type: title\n title: My Dashboard Title\n</code></pre>\n", "textContent": "Title Widget\r\nTitle Widget\r\n\r\nDisplays a title for the dashboard or a specific section, always taking the full width of the dashboard, allowing for clear separation between different sections (i.e. monitoring, media, etc.).\r\nConfiguration Options\r\n\r\n| Property | Required | Description |\r\n| -------- | -------- | -------------------- |\r\n| title | Yes | The title to display |\r\nConfiguration Example\r\n\r\n`yaml\r\nwidgets:\r\n type: title\r\n title: My Dashboard Title\r\n`", "wordCount": 70, "readingTime": 1, "isPage": true } }, "isPage": false, "title": "Configuration", "order": 1 }, "Contributing": { "entries": { "🌐 Creating a Plugin": { "id": "Contributing/Creating-a-Plugin", "title": "🌐 Creating a Plugin", "order": 0, "content": "Coming soon...\n", "textContent": "Coming soon...", "wordCount": 2, "readingTime": 1, "isPage": true }, "🎨 Creating a Widget": { "id": "Contributing/Creating-a-Widget", "title": "🎨 Creating a Widget", "order": 0, "content": "Coming soon...\n", "textContent": "Coming soon...\r\n", "wordCount": 2, "readingTime": 1, "isPage": true }, "🖥️ Development Setup": { "id": "Contributing/Development-Setup", "title": "🖥️ Development Setup", "order": -1, "content": "<img src=\"cachedImage-../images/Banner-1.png\" alt=\"\">\n<h1 id=\"Development-Setup\" tabindex=\"-1\">Development Setup</h1>\nTo set up a development environment for the Homelab Dashboard, please follow the steps below:\n<ol>\n<li>Clone the Repository: Start by cloning the Homelab Dashboard repository to your local machine.</li>\n<li>Install Dependencies: Navigate to the project directory and install the project dependencies using <code>npm i</code></li>\n<li>Set Up Environment Variables: Create a <code>.env</code> file in the root of the project and add any necessary environment variables/secrets required by the plugins you want to test/work on.</li>\n<li>Run the Development Server: Start the development server using <code>npm run dev</code>. This will launch the application in development mode, allowing you to make changes and see them reflected in real-time.</li>\n</ol>\n<img src=\"cachedImage-../images/local-server.png\" alt=\"Local Dev Server\">\n<h2 id=\"What-can-I-contribute\" tabindex=\"-1\">What can I contribute?</h2>\nThank you for your interest in contributing to the Homelab Dashboard! Take a look at the <a href=\"#Roadmap\">Roadmap</a> to see planned features and improvements.\nAll contributions are welcome, whether it's fixing bugs, adding new features, improving documentation, or enhancing existing functionality. If you have an idea for a new feature or improvement, feel free to open an issue to discuss it before starting work.\n", "textContent": "Development Setup\r\n\r\nTo set up a development environment for the Homelab Dashboard, please follow the steps below:\r\n\r\nClone the Repository: Start by cloning the Homelab Dashboard repository to your local machine.\r\nInstall Dependencies: Navigate to the project directory and install the project dependencies using npm i\r\nSet Up Environment Variables: Create a .env file in the root of the project and add any necessary environment variables/secrets required by the plugins you want to test/work on.\r\nRun the Development Server: Start the development server using npm run dev. This will launch the application in development mode, allowing you to make changes and see them reflected in real-time.\r\n\r\nLocal Dev Server\r\nWhat can I contribute?\r\n\r\nThank you for your interest in contributing to the Homelab Dashboard! Take a look at the Roadmap to see planned features and improvements.\r\n\r\nAll contributions are welcome, whether it's fixing bugs, adding new features, improving documentation, or enhancing existing functionality. If you have an idea for a new feature or improvement, feel free to open an issue to discuss it before starting work.", "wordCount": 176, "readingTime": 1, "isPage": true } }, "isPage": false, "title": "Contributing", "order": 4 }, "✨ Features": { "id": "Features", "title": "✨ Features", "order": 0, "content": "<img src=\"cachedImage-./images/Banner-2.png\" alt=\"\">\n<h1 id=\"Features\" tabindex=\"-1\">Features</h1>\n<ul>\n<li>Modular design: Easily add or remove widgets to customize your dashboard.</li>\n<li>Secure backend: Fetch data securely from your homelab services without exposing sensitive information.</li>\n<li>YAML configuration: Simple and intuitive configuration using a YAML file.</li>\n<li>Responsive design: Works well on various screen sizes and devices, even your phone!</li>\n<li>Provides widgets for popular homelab services like Pi-hole, Docker, Gitea and many more.</li>\n<li>Easily extendable: integrate your own services by following the integration guide.</li>\n</ul>\n", "textContent": "Features\r\n\r\nModular design: Easily add or remove widgets to customize your dashboard.\r\nSecure backend: Fetch data securely from your homelab services without exposing sensitive information.\r\nYAML configuration: Simple and intuitive configuration using a YAML file.\r\nResponsive design: Works well on various screen sizes and devices, even your phone!\r\nProvides widgets for popular homelab services like Pi-hole, Docker, Gitea and many more.\r\nEasily extendable: integrate your own services by following the integration guide.\r\n", "wordCount": 72, "readingTime": 1, "isPage": true }, "👋 Welcome": { "id": "Welcome", "title": "👋 Welcome", "order": -1, "content": "<img src=\"cachedImage-./images/Banner-2.png\" alt=\"\">\n<h1 id=\"What-is-Modular-Homelab-Dashboard\" tabindex=\"-1\">What is Modular Homelab Dashboard?</h1>\nModular Homelab Dashboard allows quickly setting up a dashboard/entry point for your homelab. It provides a customizable interface allowing you to display various metrics, system statuses, and other information from your homelab services.\nEverything is configured in a simple yaml file with a backend to securely fetch data from your homelab services, without exposing credentials/API keys to the end user.\nBest of all, it is modular: you can easily add or remove widgets to customize your dashboard to your needs!\n<img src=\"cachedImage-./images/main.png\" alt=\"Main Dashboard\">\nGet started by checking out the <a href=\"#Getting-Started\">Installation Guide</a> and available <a href=\"#Features\">Features</a>.\n", "textContent": "What is Modular Homelab Dashboard?\r\n\r\nModular Homelab Dashboard allows quickly setting up a dashboard/entry point for your homelab. It provides a customizable interface allowing you to display various metrics, system statuses, and other information from your homelab services.\r\n\r\nEverything is configured in a simple yaml file with a backend to securely fetch data from your homelab services, without exposing credentials/API keys to the end user.\r\n\r\nBest of all, it is modular: you can easily add or remove widgets to customize your dashboard to your needs!\r\n\r\nMain Dashboard\r\n\r\nGet started by checking out the Installation Guide and available Features.", "wordCount": 98, "readingTime": 1, "isPage": true }, "📅 Roadmap": { "id": "Roadmap", "title": "📅 Roadmap", "order": 0, "content": "<img src=\"cachedImage-./images/Banner-2.png\" alt=\"\">\n<h1 id=\"Roadmap\" tabindex=\"-1\">Roadmap</h1>\nThere are a few ideas an planned features, that might be implemented in the future:\n<ul>\n<li>Support for custom image imports/map into folder to allow for local storage of images/icons</li>\n<li>Sections of customizable width/height, to allow better organization of widgets</li>\n<li>Light and dark mode</li>\n<li>Multi colored bar chart widgets</li>\n</ul>\n<h2 id=\"Plugins\" tabindex=\"-1\">Plugins</h2>\n<ul>\n<li>Weather plugin/widget</li>\n<li>Time plugin/widget</li>\n<li>n8n integration</li>\n<li>Homebridge integration</li>\n<li>Extended Gitea plugin to support monitoring individual repositories, actions, and more</li>\n<li>Extended Uptime Kuma plugin to support monitoring individual services</li>\n</ul>\n", "textContent": "Roadmap\r\n\r\nThere are a few ideas an planned features, that might be implemented in the future:\r\n\r\nSupport for custom image imports/map into folder to allow for local storage of images/icons\r\nSections of customizable width/height, to allow better organization of widgets\r\nLight and dark mode\r\nMulti colored bar chart widgets\r\nPlugins\r\n\r\nWeather plugin/widget\r\nTime plugin/widget\r\nn8n integration\r\nHomebridge integration\r\nExtended Gitea plugin to support monitoring individual repositories, actions, and more\r\nExtended Uptime Kuma plugin to support monitoring individual services\r\n", "wordCount": 78, "readingTime": 1, "isPage": true }, "🚀 Getting Started": { "id": "Getting-Started", "title": "🚀 Getting Started", "order": 0, "content": "<img src=\"cachedImage-./images/Banner-2.png\" alt=\"\">\n<h1 id=\"Getting-Started\" tabindex=\"-1\">Getting Started</h1>\n<a href=\"https://docs.docker.com/compose/\">Docker Compose</a> is the recommended way to run Modular Homelab Dashboard. Make sure you have Docker and Docker Compose installed on your system. You can find all available versions on the <a href=\"https://github.com/Kellojo/Modular-Homelab-Dashboard/pkgs/container/modular-homelab-dashboard\">GitHub Container Registry</a>.\n<ol>\n<li>Add the following service to your existing <code>docker-compose.yaml</code> file:</li>\n</ol>\n<pre><code class=\"language-yaml\">services:\n modular-homelab-dashboard:\n image: ghcr.io/kellojo/modular-homelab-dashboard:latest\n container_name: modular-homelab-dashboard\n restart: unless-stopped\n pid: "host"\n volumes:\n - ./config.yaml:/app/dashboard.yaml:ro # your dashboard config\n - ./background.jpg:/app/build/client/background.jpg:ro # optional custom background\n</code></pre>\n<ol start=\"2\">\n<li>Create a <code>config.yaml</code> file and mount it to <code>/app/dashboard.yaml</code> in the container:</li>\n</ol>\n<pre><code class=\"language-yaml\">config:\n historyLength: 100\n refreshCron: "*/5 * * * * *"\n disableSeasonalEvents: false\n background:\n url: ./background.jpg\n blur: 0.5rem\n brightness: 0.25\n\nplugins:\n # See available plugins in the documentation\n\nwidgets:\n - type: title\n title: System Status\n\n - type: datawidget\n subtype: line\n title: CPU\n datasource: system\n datapoint: cpu.load\n\n - type: title\n title: Apps\n\n - type: link\n url: https://pihole.local/admin\n title: Pi-hole\n icon: https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/pi-hole.png\n width: 2\n</code></pre>\n<ol start=\"3\">\n<li>Start the container and access it on port 3000 🎉</li>\n</ol>\n<h2 id=\"Additional-Configuration\" tabindex=\"-1\">Additional Configuration</h2>\nSome plugins might require additional settings or volume mounts. For basic usage of the docker and system plugins the following configuration is needed:\n<pre><code class=\"language-yaml\">modular-homelab-dashboard:\n image: ghcr.io/kellojo/modular-homelab-dashboard:v1.1.4\n container_name: modular-homelab-dashboard\n restart: unless-stopped\n pid: "host" # Allows access to host system metrics\n volumes:\n - ./config.yaml:/app/dashboard.yaml:ro # your dashboard config\n - ./background.jpg:/app/build/client/background.jpg:ro # optional custom background\n - /volume1/some-empty-subfolder:/volume1:ro # allows access to other volumes for disk stats\n - /volume2/some-empty-subfolder:/volume2:ro # allows access to other volumes for disk stats\n - /proc/meminfo:/proc/meminfo:ro # Allows the system plugin to read memory info\n - /proc/cpuinfo:/proc/cpuinfo:ro # Allows the system plugin to read cpu info\n - /var/run/docker.sock:/var/run/docker.sock # Allows the docker plugin to read docker stats\n</code></pre>\n", "textContent": "Getting Started\r\n\r\nDocker Compose is the recommended way to run Modular Homelab Dashboard. Make sure you have Docker and Docker Compose installed on your system. You can find all available versions on the GitHub Container Registry.\r\n\r\nAdd the following service to your existing docker-compose.yaml file:\r\n\r\n`yaml\r\nservices:\r\n modular-homelab-dashboard:\r\n image: ghcr.io/kellojo/modular-homelab-dashboard:latest\r\n container_name: modular-homelab-dashboard\r\n restart: unless-stopped\r\n pid: \"host\"\r\n volumes:\r\n ./config.yaml:/app/dashboard.yaml:ro # your dashboard config\r\n ./background.jpg:/app/build/client/background.jpg:ro # optional custom background\r\n`\r\n\r\nCreate a config.yaml file and mount it to /app/dashboard.yaml in the container:\r\n\r\n`yaml\r\nconfig:\r\n historyLength: 100\r\n refreshCron: \"*/5 * * * * *\"\r\n disableSeasonalEvents: false\r\n background:\r\n url: ./background.jpg\r\n blur: 0.5rem\r\n brightness: 0.25\r\n\r\nplugins:\r\nSee available plugins in the documentation\r\n\r\nwidgets:\r\n type: title\r\n title: System Status\r\n\r\n type: datawidget\r\n subtype: line\r\n title: CPU\r\n datasource: system\r\n datapoint: cpu.load\r\n\r\n type: title\r\n title: Apps\r\n\r\n type: link\r\n url: https://pihole.local/admin\r\n title: Pi-hole\r\n icon: https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/pi-hole.png\r\n width: 2\r\n`\r\n\r\nStart the container and access it on port 3000 🎉\r\nAdditional Configuration\r\n\r\nSome plugins might require additional settings or volume mounts. For basic usage of the docker and system plugins the following configuration is needed:\r\n\r\n`yaml\r\nmodular-homelab-dashboard:\r\n image: ghcr.io/kellojo/modular-homelab-dashboard:v1.1.4\r\n container_name: modular-homelab-dashboard\r\n restart: unless-stopped\r\n pid: \"host\" # Allows access to host system metrics\r\n volumes:\r\n ./config.yaml:/app/dashboard.yaml:ro # your dashboard config\r\n ./background.jpg:/app/build/client/background.jpg:ro # optional custom background\r\n /volume1/some-empty-subfolder:/volume1:ro # allows access to other volumes for disk stats\r\n /volume2/some-empty-subfolder:/volume2:ro # allows access to other volumes for disk stats\r\n /proc/meminfo:/proc/meminfo:ro # Allows the system plugin to read memory info\r\n /proc/cpuinfo:/proc/cpuinfo:ro # Allows the system plugin to read cpu info\r\n /var/run/docker.sock:/var/run/docker.sock # Allows the docker plugin to read docker stats\r\n`\r\n", "wordCount": 252, "readingTime": 2, "isPage": true } }