github
/
homer
mirror of https://github.com/bastienwirtz/homer
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'main' into main

pull/798/head
Matthew Dupuis 2024-11-24 12:26:27 -05:00 committed by GitHub
parent 8146ba28bc 7909bd1054
commit 3dc6bc03ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
85 changed files with 4099 additions and 2946 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.eslintrc.cjs
View File

@ -1,17 +0,0 @@
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
root: true,
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-prettier",
],
env: {
"vue/setup-compiler-macros": true,
},
rules: {
"vue/multi-word-component-names": "off",
},
};

23
.github/workflows/dockerhub.yml vendored
View File

@ -4,12 +4,11 @@ name: Dockerhub
on:
push:
tags: [v*]
branches: [ main ]
jobs:
dockerhub:
runs-on: ubuntu-latest
timeout-minutes: 20
steps:
-
name: Checkout
@ -21,11 +20,9 @@ jobs:
name: Set up Docker Buildx
id: buildx
uses: docker/setup-buildx-action@v3
with:
buildkitd-flags: --debug
-
name: Login to Docker Hub
uses: docker/login-action@v2
uses: docker/login-action@v3
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
@ -36,20 +33,14 @@ jobs:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ github.token }}
-
name: Set tag name
run: |
if [[ ${{ github.ref_type }} == "tag" ]]; then
echo "IMAGE_TAG=${{ github.ref_name }}" >> $GITHUB_ENV
else
echo "IMAGE_TAG=latest" >> $GITHUB_ENV
fi
-
name: Build and push
uses: docker/build-push-action@v5
uses: docker/build-push-action@v6
with:
push: true
tags: |
b4bz/homer:${{env.IMAGE_TAG}}
ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
b4bz/homer:latest
b4bz/homer:${{ github.ref_name }}
ghcr.io/${{ github.repository }}:latest
ghcr.io/${{ github.repository }}:${{ github.ref_name }}
platforms: linux/amd64,linux/arm/v7,linux/arm/v6,linux/arm64

16
.github/workflows/integration.yml vendored
View File

@ -11,28 +11,20 @@ on:
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
timeout-minutes: 20
steps:
-
name: Checkout
uses: actions/checkout@v4
-
name: pnpm setup
uses: pnpm/action-setup@v3
with:
version: 9
uses: pnpm/action-setup@v4
-
name: Use Node.js ${{ matrix.node-version }}
name: Node.js setup
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
node-version: 22
cache: 'pnpm'
-
name: install dependencies

9
.github/workflows/release.yml vendored
View File

@ -9,20 +9,19 @@ jobs:
build:
name: Upload Release Asset
runs-on: ubuntu-latest
timeout-minutes: 20
steps:
-
name: Checkout
uses: actions/checkout@v4
-
name: pnpm setup
uses: pnpm/action-setup@v3
with:
version: 9
uses: pnpm/action-setup@v4
-
name: Use Node.js 20
name: Node.js setup
uses: actions/setup-node@v4
with:
node-version: 20
node-version: 22
cache: 'pnpm'
-
name: Build project

22
Dockerfile
View File

@ -1,10 +1,10 @@
# build stage
FROM node:18-alpine3.19 as build-stage
FROM --platform=$BUILDPLATFORM node:22-alpine3.20 AS build-stage
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
RUN corepack use pnpm@8
RUN corepack enable && corepack use pnpm@9
WORKDIR /app
@ -15,17 +15,17 @@ COPY . .
RUN pnpm build
# production stage
FROM alpine:3.19
FROM alpine:3.20
ENV GID 1000
ENV UID 1000
ENV PORT 8080
ENV SUBFOLDER "/_"
ENV INIT_ASSETS 1
ENV IPV6_DISABLE 0
ENV GID=1000 \
UID=1000 \
PORT=8080 \
SUBFOLDER="/_" \
INIT_ASSETS=1 \
IPV6_DISABLE=0
RUN addgroup -S lighttpd -g ${GID} && adduser -D -S -u ${UID} lighttpd lighttpd && \
apk add -U --no-cache lighttpd
apk add -U --no-cache tzdata lighttpd
WORKDIR /www

116
README.md
View File

@ -10,25 +10,13 @@
<h4 align="center">
A dead simple static <strong>HOM</strong>epage for your serv<strong>ER</strong> to keep your services on hand, from a simple <code>yaml</code> configuration file.
</h4>
<p align="center">
<p align="center">
<a href="https://www.buymeacoffee.com/bastien" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" alt="Buy Me A Coffee" height="41" width="174"></a>
<p>
<p align="center">
<strong>
<a href="https://homer-demo.netlify.app">Demo</a>
•
<a href="https://gitter.im/homer-dashboard/community">Chat</a>
•
<a href="#getting-started">Getting started</a>
</strong>
</p>
<p align="center">
<a href="https://opensource.org/licenses/Apache-2.0"><img
alt="License: Apache 2"
src="https://img.shields.io/badge/License-Apache%202.0-blue.svg"></a>
<a href="https://gitter.im/homer-dashboard/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"><img
alt="Gitter chat"
src="https://badges.gitter.im/homer-dashboard/community.svg"></a>
<a href="https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip"><img
alt="Download homer static build"
src="https://img.shields.io/badge/Download-homer.zip-orange"></a>
@ -41,36 +29,43 @@
</p>
<p align="center">
<img src="https://raw.github.com/bastienwirtz/homer/main/docs/screenshot.png" width="100%">
<strong>
<a href="https://homer-demo.netlify.app">Demo</a>
•
<a href="https://hub.docker.com/r/b4bz/homer">Docker Hub</a>
•
<a href="#getting-started">Get started</a>
</strong>
</p>
## Highlights
- ⚡️ Lightweight & Fast
- 🥱 Low / No maintenance
- 📄 Simple [yaml](http://yaml.org/) file configuration
- ➕ Installable (pwa)
- 🧠 Smart cards
- 🔍️ Fuzzy search
- 📂 Multi pages & item grouping
- 🎨 Theme customization
- ⌨️ keyboard shortcuts:
- <kbd>/</kbd> Start searching.
- <kbd>Escape</kbd> Stop searching.
- <kbd>Enter</kbd> Open the first matching result (respects the bookmark's `_target` property).
- <kbd>Alt</kbd> (or <kbd>Option</kbd>) + <kbd>Enter</kbd> Open the first matching result in a new tab.
## Table of Contents
- [Features](#features)
- [Getting started](#getting-started)
- [Getting started](#get-started)
- [Kubernetes Installation](docs/kubernetes.md)
- [Configuration](docs/configuration.md)
- [Theming](docs/theming.md)
- [Custom services](docs/customservices.md)
- [Smart cards](docs/customservices.md)
- [Tips & tricks](docs/tips-and-tricks.md)
- [Development](docs/development.md)
- [Troubleshooting](docs/troubleshooting.md)
## Features
- [yaml](http://yaml.org/) file configuration
- Installable (pwa)
- Search
- Grouping
- Theme customization
- Offline health check
- keyboard shortcuts:
- `/` Start searching.
- `Escape` Stop searching.
- `Enter` Open the first matching result (respects the bookmark's `_target` property).
- `Alt`/`Option` + `Enter` Open the first matching result in a new tab.
## Getting started
## Get started
Homer is a full static html/js dashboard, based on a simple yaml configuration file. See [documentation](docs/configuration.md) for information about the configuration (`assets/config.yml`) options.
@ -78,51 +73,64 @@ It's meant to be served by an HTTP server, **it will not work if you open the in
### Using docker
The configuration directory is bind mounted to make your dashboard easy to maintain.
**Start the container with `docker run`**
```sh
# Make sure your local config directory exists
docker run -d \
--name homer \
-p 8080:8080 \
-v </your/local/assets/>:/www/assets \
--restart=always \
--mount type=bind,source="/path/to/config/dir",target=/www/assets \
--restart=unless-stopped \
b4bz/homer:latest
```
The container will run using a user uid and gid 1000. Add `--user <your-UID>:<your-GID>` to the docker command to adjust it. Make sure this match the ownership of your assets directory.
> [!NOTE]
> The container will run using a user uid and gid 1000 by default, add `--user <your-UID>:<your-GID>` to the docker command to adjust it if necessary. Make sure this match the permissions of your assets directory.
**Environment variables:**
**or `docker-compose`**
* **`INIT_ASSETS`** (default: `1`)
```yaml
services:
homer:
image: b4bz/homer
container_name: homer
volumes:
- /path/to/config/dir:/www/assets # Make sure your local config directory exists
ports:
- 8080:8080
user: 1000:1000 # default
environment:
- INIT_ASSETS=1 # default, requires the config directory to be writable for the container user (see user option)
restart: unless-stopped
```
**Environment variables:**
- **`INIT_ASSETS`** (default: `1`)
Install example configuration file & assets (favicons, ...) to help you get started.
* **`SUBFOLDER`** (default: `null`)
If you would like to host Homer in a subfolder, (ex: *http://my-domain/**homer***), set this to the subfolder path (ex `/homer`).
- **`SUBFOLDER`** (default: `null`)
If you would like to host Homer in a subfolder, (ex: *<http://my-domain/homer>*), set this to the subfolder path (ex `/homer`).
* **`PORT`** (default: `8080`)
- **`PORT`** (default: `8080`)
If you would like to change internal port of Homer from default `8080` to your port choice.
* **`IPV6_DISABLE`** (default: 0)
- **`IPV6_DISABLE`** (default: 0)
Set to `1` to disable listening on IPv6.
#### With docker-compose
A [`docker-compose.yml`](docker-compose.yml) file is available as an example. It must be edited to match your needs. You probably want to adjust the port mapping and volume binding (equivalent to `-p` and `-v` arguments).
Then launch the container:
```sh
cd /path/to/docker-compose.yml/
docker-compose up -d
```
### Using the release tarball (prebuilt, ready to use)
Download and extract the latest release (`homer.zip`) from the [release page](https://github.com/bastienwirtz/homer/releases), rename the `assets/config.yml.dist` file to `assets/config.yml`, and put it behind a web server.
```sh
wget https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip
unzip homer.zip
unzip homer.zip -d homer
cd homer
cp assets/config.yml.dist assets/config.yml
npx serve # or python -m http.server 8010 or apache, nginx ...
pnpx http-server # or python -m http.server 8010 or any web server.
```
### Build manually

15
docker-compose.yml
View File

@ -1,15 +0,0 @@
---
version: "2"
services:
homer:
image: b4bz/homer
#To build from source, comment previous line and uncomment below
#build: .
container_name: homer
volumes:
- /your/local/assets/:/www/assets
ports:
- 8080:8080
user: 1000:1000 # default
environment:
- INIT_ASSETS=1 # default

36
docs/configuration.md
View File

@ -1,11 +1,18 @@
# Configuration
Title, icons, links, colors, and services can be configured in the `config.yml` file (located in `/assets` directory once built, or in the `public/assets` directory in development mode), using [yaml](http://yaml.org/) format.
Homer rely on a single [yaml](http://yaml.org/) configuration file, located in the `/assets` directory.
`.dist` sample configuration files are available to help you get started. Alternatively, the example below can be
copied into the config file.
> [!NOTE]
> On docker installations, the sample configuration is automatically installed when no configuration is found **if**
> the configuration directory is writable to the docker user. If no configuration has been installed, check your
> container logs and your mounted configuration directory ownership & permissions
```yaml
---
# Homepage configuration
# See https://fontawesome.com/v5/search for icons options
# See https://fontawesome.com/search for icons options
# Optional: Use external configuration file.
# Using this will ignore remaining config in this file
@ -31,6 +38,10 @@ connectivityCheck: true # whether you want to display a message when the apps ar
# Optional: Proxy / hosting option
proxy:
useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level.
headers: # send custom headers when fetching service specific data. Can also be set on a service level.
Test: "Example"
Test1: "Example1"
# Set the default layout and color scheme
defaults:
@ -62,7 +73,7 @@ colors:
card-shadow: rgba(0, 0, 0, 0.1)
link: "#3273dc"
link-hover: "#363636"
background-image: "assets/your/light/bg.png"
background-image: "/assets/your/light/bg.png" # prefix with your sub subpath if any (ex: /homer/assets/...)
dark:
highlight-primary: "#3367d6"
highlight-secondary: "#4285f4"
@ -76,7 +87,7 @@ colors:
card-shadow: rgba(0, 0, 0, 0.4)
link: "#3273dc"
link-hover: "#ffdd57"
background-image: "assets/your/dark/bg.png"
background-image: "/assets/your/dark/bg.png" # prefix with your sub subpath if any (ex: /homer/assets/...)
# Optional message
message:
@ -95,6 +106,7 @@ message:
style: "is-warning"
title: "Optional message!"
icon: "fa fa-exclamation-triangle"
# The content also accepts HTML content, so you can add divs, images or whatever you want to make match your needs.
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
# Optional navbar
@ -153,7 +165,7 @@ services:
# background: red # optional color for card to set color directly without custom stylesheet
```
View **[Custom Services](customservices.md)** for details about all available custom services (like `PiHole`) and how to configure them.
View **[smart cards](customservices.md)** for details about all available cards (like `PiHole`) and how to configure them.
If you choose to fetch message information from an endpoint, the output format should be as follows (or you can [custom map fields as shown in tips-and-tricks](./tips-and-tricks.md#mapping-fields)):
@ -168,21 +180,28 @@ If you choose to fetch message information from an endpoint, the output format s
`null` value or missing keys will be ignored and value from the `config.yml` will be used if available.
Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar).
## Connectivity checks
As a webapp (PWA) the dashboard can still be displayed when your homer server is offline.
The connectivity checker periodically send a HEAD request bypassing the PWA cache to the dashbord page to make sure it's still reachable.
It can be useful when you access your dashboard through a VPN or ssh tunnel for example, to know is your conection is up. It also helps when using an authentication proxy, it will reloads the page if the authentication expires (when a redirection is send in response to the HEAD request).
## Style Options
Homer uses [bulma CSS](https://bulma.io/), which provides a [modifiers syntax](https://bulma.io/documentation/modifiers/syntax/). You'll notice in the config there is a `tagstyle` option. It can be set to any of the bulma modifiers. You'll probably want to use one of these 4 main colors:
Homer uses [bulma CSS](https://bulma.io/), which provides a [modifiers syntax](https://bulma.io/documentation/start/syntax/). You'll notice in the config there is a `tagstyle` option. It can be set to any of the bulma modifiers. You'll probably want to use one of these 4 main colors:
- `is-info` (blue)
- `is-success` (green)
- `is-warning` (yellow)
- `is-danger` (red)
You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state.
You can read the [bulma modifiers page](https://bulma.io/documentation/start/syntax/) for other options regarding size, style, or state.
## Theming & customization
See `colors` settings in the configuration example above.
Favicon et application icon (pwa) are located in the `assets/icons` directory and can be replaced by any image you want (just keep the same name & size).
Favicon and application icon (pwa) are located in the `assets/icons` directory and can be replaced by any image you want (just keep the same name & size).
The `/assets/manifest.json` can also be edited to change the app (pwa) name, description and other settings.
### Community theme
@ -191,7 +210,6 @@ The `/assets/manifest.json` can also be edited to change the app (pwa) name, des
- [Homer Theme v2](https://github.com/walkxcode/homer-theme) by [walkxcode](https://github.com/walkxcode)
- [Catppuccin theme](https://github.com/mrpbennett/catppucin-homer) by [@mrpbenett](https://github.com/mrpbennett)
## PWA Icons
See icons documentation [here](https://github.com/bastienwirtz/homer/blob/main/public/assets/icons/README.md).

736
docs/customservices.md
View File

@ -1,45 +1,60 @@
# Custom Services
# Smart cards
Some service can use a specific a component that provides some extra features by adding a `type` key to the service yaml
configuration and, where applicable, an apikey. Note that config.yml is exposed at /assets/config.yml via HTTP and any
apikey included in the configuration file is exposed to anyone who can access the homer instance. Only include an apikey
if your homer instance is secured behind some form of authentication or access restriction.
Some cards can use a specific a component that provides some extra features by adding a `type` key to the service yaml
configuration and other parameters when needed.
Available services are in `src/components/`. Here is an overview of all custom services that are available
> [!WARNING]
> Note that `config.yml` is exposed at `/assets/config.yml` via HTTP and any sensitive information, like api keys,
> included in the configuration file is exposed to anyone who can access the homer instance. Only include an api key
> if your homer instance is secured behind some form of authentication or access restriction.
Available services are in `src/components/`. Here is an overview of all smart cards that are available
within Homer:
- [Custom Services](#custom-services)
- [Common options](#common-options)
- [PiHole](#pihole)
- [OpenWeatherMap](#openweathermap)
- [Medusa](#medusa)
- [Lidarr, Prowlarr, Sonarr, Readarr and Radarr](#lidarr-prowlarr-sonarr-readarr-and-radarr)
- [PaperlessNG](#paperlessng)
- [Ping](#ping)
- [Prometheus](#prometheus)
- [AdGuard Home](#adguard-home)
- [Portainer](#portainer)
- [Emby / Jellyfin](#emby--jellyfin)
- [Uptime Kuma](#uptime-kuma)
- [Tautulli](#tautulli)
- [Mealie](#mealie)
- [Healthchecks](#healthchecks)
- [Proxmox](#proxmox)
- [rTorrent](#rtorrent)
- [qBittorrent](#qbittorrent)
- [CopyToClipboard](#copy-to-clipboard)
- [Speedtest Tracker](#SpeedtestTracker)
- [What's Up Docker](#whats-up-docker)
- [SABnzbd](#sabnzbd)
- [OctoPrint](#octoprint)
- [Tdarr](#tdarr)
- [PiAlert](#pialert)
- [Immich](#immich)
- [OpenHAB](#openhab)
- [Jellystat](#jellystat)
- [Home Assistant](#home-assistant)
- [Common options](#common-options)
- [AdGuard Home](#adguard-home)
- [CopyToClipboard](#copy-to-clipboard)
- [Emby / Jellyfin](#emby--jellyfin)
- [FreshRSS](#freshrss)
- [Gitea / Forgejo](#gitea--forgejo)
- [Glances](#glances)
- [Gotify](#gotify)
- [Healthchecks](#healthchecks)
- [Home Assistant](#home-assistant)
- [Immich](#immich)
- [Jellystat](#jellystat)
- [Lidarr, Prowlarr, Sonarr, Readarr and Radarr](#lidarr-prowlarr-sonarr-readarr-and-radarr)
- [Mealie](#mealie)
- [Medusa](#medusa)
- [Nextcloud](#nextcloud)
- [OctoPrint / Moonraker](#octoprintmoonraker)
- [OpenHAB](#openhab)
- [OpenWeatherMap](#openweathermap)
- [PaperlessNG](#paperlessng)
- [PeaNUT](#peanut)
- [PiAlert](#pialert)
- [PiHole](#pihole)
- [Ping](#ping)
- [Portainer](#portainer)
- [Prometheus](#prometheus)
- [Proxmox](#proxmox)
- [qBittorrent](#qbittorrent)
- [rTorrent](#rtorrent)
- [SABnzbd](#sabnzbd)
- [Scrutiny](#scrutiny)
- [Speedtest Tracker](#speedtesttracker)
- [Tautulli](#tautulli)
- [Tdarr](#tdarr)
- [Uptime Kuma](#uptime-kuma)
- [What's Up Docker](#whats-up-docker)
If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
> [!IMPORTANT]
> Using smart cards, which interact with other services, will require either that:
>
> - All services are exposed on the **same domain** as homer (mydomain,tld/pihole, mydomain,tld/proxmox), avoiding any cross domain request issues (CORS).
> - All services **accecpt cross site requests** (= send the necessary CORS headers, either set directly in the service configuration if possible, or using a proxy to set the headers)
>
> If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md#my-service-card-doesnt-work-nothing-appears-or-offline-status-is-displayed-pi-hole-sonarr-ping-) page.
## Common options
@ -49,9 +64,11 @@ If you experiencing any issue, please have a look to the [troubleshooting](troub
url: "http://my-service-link"
endpoint: "http://my-service-endpoint" # Optional: alternative base URL used to fetch service data is necessary.
useCredentials: false # Optional: Override global proxy.useCredentials configuration.
headers: # Optional: Override global proxy.headers configuration.
type: "<type>"
```
## SecondaryLink
The SecondaryLink service allows generic cards to have a second link added to them in the format of an icon.
@ -69,52 +86,175 @@ Like the rest of Homer, FontAwesome icons can be used for the SecondaryLinkIcon.
## PiHole
Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
## AdGuard Home
The following configuration is available for the PiHole service.
For AdGuard Home you need to set the type to AdGuard, if you have some issues as 403 responses on requests you need to provide authentication in headers for locations needed as below.
```yaml
- name: "Pi-hole"
- name: "Adguard"
logo: "assets/tools/adguardhome.png"
url: "https://adguard.exemple.com"
target: "_blank"
type: "AdGuardHome"
```
## Copy to Clipboard
This service displays the same information of a generic one, but shows an icon button on the indicator place (right side) you can click to get the content of the `clipboard` field copied to your clipboard.
You can still provide an `url` that would be open when clicked anywhere but on the icon button.
Configuration example:
```yaml
- name: "Copy me!"
logo: "assets/tools/sample.png"
# subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
url: "http://192.168.0.151/admin"
apikey: "<---insert-api-key-here--->" # optional, needed if web interface is password protected
type: "PiHole"
subtitle: "Subtitle text goes here"
url: "#"
type: "CopyToClipboard"
clipboard: "this text will be copied to your clipboard"
```
**Remarks:**
If PiHole web interface is password protected, obtain the `apikey` from Settings > API/Web interface > Show API token.
## Emby / Jellyfin
## OpenWeatherMap
Using the OpenWeatherMap service you can display weather information about a given location.
The following configuration is available for the OpenWeatherMap service:
You need to set the type to Emby, provide an api key and choose which stats to show if the subtitle is disabled.
```yaml
- name: "Weather"
location: "Amsterdam" # your location.
locationId: "2759794" # Optional: Specify OpenWeatherMap city ID for better accuracy
apikey: "<---insert-api-key-here--->" # insert your own API key here. Request one from https://openweathermap.org/api.
units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin.
background: "square" # choose which type of background you want behind the image. Can be one of: square, circle, none. Defaults to none.
type: "OpenWeather"
- name: "Emby"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151/"
type: "Emby"
apikey: "<---insert-api-key-here--->"
libraryType: "music" #Choose which stats to show. Can be one of: music, series or movies.
```
**Remarks:**
If for some reason your city can't be found by entering the name in the `location` property, you could also try to configure the OWM city ID in the `locationId` property. To retrieve your specific City ID, go to the [OWM website](https://openweathermap.org), search for your city and retrieve the ID from the URL (for example, the City ID of Amsterdam is 2759794).
## FreshRSS
## Medusa
The FreshRSS service displays unread and subscriptions counts from your FreshRSS server.
This service displays News (grey), Warning (orange) or Error (red) notifications bubbles from the Medusa application.
```yaml
- name: "FreshRSS"
type: "FreshRSS"
username: "<-- Your username -->"
password: "<-- Your password -->"
updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats
```
## Gitea / Forgejo
This service displays a version string instead of a subtitle. Example configuration:
```yaml
- name: Forgejo
type: Gitea
logo: assets/tools/sample.png
url: http://git.example.com
```
## Glances
This is a basic widget for showing cpu and ram usage using a glances server
You'll need a glances server up and running, this is a sample compose.yml
```yml
---
services:
glances:
image: nicolargo/glances:latest
container_name: glances
environment:
- TZ=Europe/Rome
- GLANCES_OPT=-w
ports:
- 61208:61208
restart: unless-stopped
```
And this is a sample homer configuration
```yml
- name: System
icon: "fa-solid fa-heart-pulse"
url: http://192.168.1.2:61208
type: Glances
stats: [cpu, mem] # Metric to display. Possible values are: load, cpu, mem, swap.
updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats
```
## Gotify
The Gotify service will show the number of currently oustanding messages
available as well as the overall health of the system.
Note that `apikey` must be a client token, not an app token.
```yaml
- name: "Gotify"
type: "Gotify"
apikey: "<api_key>" # Client token to retrieve messages
```
## Healthchecks
This service displays information about the configured status checks from the Healthchecks application.
Two lines are needed in the config.yml :
```yaml
type: "Medusa"
type: "Healthchecks"
apikey: "<---insert-api-key-here--->"
```
The url must be the root url of Medusa application.
The Medusa API key can be found in General configuration > Interface. It is needed to access Medusa API.
The url must be the root url of the Healthchecks application.
The Healthchecks API key can be found in Settings > API Access > API key (read-only). The key is needed to access Healthchecks API.
## Home Assistant
You need to set the type to HomeAssistant, provide an api key and enable cors on Home Assistant.
```yaml
- name: "HomeAssistant"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151/"
type: "HomeAssistant"
apikey: "<---insert-api-key-here--->"
items: [] # optional, which items to show (and in which order) in the subtitle. Possible values are "name", "version", "entities"
separator: " " # optional, how to separate items
```
To create an API token on HomeAssistant, follow the [official documentation here](https://developers.home-assistant.io/docs/auth_api/#long-lived-access-token).
To enable cors on HomeAssistant, edit your `configuration.yml` and add the IP of Homer to `https: cors_allowed_origins`
## Immich
The Immich service displays stats from your Immich server.
The Immich server must be running at least version 1.118.0 for the correct api endpoint to work.
```yaml
- name: "Immich"
type: "Immich"
apikey: "<--- Your api key --->" # administrator user
updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats
```
## Jellystat
The Jellystat service display the number of concurrent streams on your jellyfin server.
The Jellystat server must be running behind a reverse proxy to add some cors headers:
- Access-Control-Allow-Origin: ${your_domain}
- Access-Control-Allow-Headers: Authorization
```yaml
- name: "Jellystat"
logo: "assets/tools/jellystat.png"
url: "http://192.168.1.154:3000"
type: "Jellystat"
apikey: "<---insert-api-key-here--->"
```
You can create an API key in the dashboard of you jellystat server: settings/API Keys -> Add Key
## Lidarr, Prowlarr, Sonarr, Readarr and Radarr
@ -139,6 +279,88 @@ If you are using an older version of Radarr or Sonarr which don't support the ne
legacyApi: true
```
## Mealie
First off make sure to remove an existing `subtitle` as it will take precedence if set.
Setting `type: "Mealie"` will then show the number of recipes Mealie is keeping organized or the planned meal for today if one is planned. You will have to set an API key in the field `apikey` which can be created in your Mealie installation.
## Medusa
This service displays News (grey), Warning (orange) or Error (red) notifications bubbles from the Medusa application.
Two lines are needed in the config.yml :
```yaml
type: "Medusa"
apikey: "<---insert-api-key-here--->"
```
The url must be the root url of Medusa application.
The Medusa API key can be found in General configuration > Interface. It is needed to access Medusa API.
## Nextcloud
This service displays a version string instead of a subtitle. The indicator
shows if Nextcloud is online, offline, or in [maintenance
mode](https://docs.nextcloud.com/server/stable/admin_manual/maintenance/upgrade.html#maintenance-mode).
Example configuration:
```yaml
- name: Nextcloud
type: Nextcloud
logo: assets/tools/sample.png
url: http://nextcloud.example.com
```
## OctoPrint/Moonraker
The OctoPrint/Moonraker service only needs an `apikey` & `endpoint` and optionally a `display` or `url` option. `url` can be used when you click on the service it will launch the `url`
Moonraker's API mimmicks a few of OctoPrint's endpoints which makes these services compatible. See <https://moonraker.readthedocs.io/en/latest/web_api/#octoprint-api-emulation> for details.
```yaml
- name: "Octoprint"
logo: "https://cdn-icons-png.flaticon.com/512/3112/3112529.png"
apikey: "xxxxxxxxxxxx" # insert your own API key here.
endpoint: "http://192.168.0.151:8080"
display: "text" # 'text' or 'bar'. Default to `text`.
type: "OctoPrint"
```
## OpenHAB
You need to set the type to OpenHAB, provide an api key and enable cors on OpenHAB.
```yaml
- name: "OpenHAB"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151/"
type: "OpenHAB"
apikey: "<---insert-api-key-here--->"
things: true # true will query the things API and report total and online things count. false will skip the call
items: true # true will query the items API and report total items count. false will skip the call
```
To create an API token on OpenHAB, follow the [official documentation here](https://www.openhab.org/docs/configuration/apitokens.html).
To enable cors on OpenHAB, edit your services/runtime.cfg and uncomment or add this line: `org.openhab.cors:enable=true`
## OpenWeatherMap
Using the OpenWeatherMap service you can display weather information about a given location.
The following configuration is available for the OpenWeatherMap service:
```yaml
- name: "Weather"
location: "Amsterdam" # your location.
locationId: "2759794" # Optional: Specify OpenWeatherMap city ID for better accuracy
apikey: "<---insert-api-key-here--->" # insert your own API key here. Request one from https://openweathermap.org/api.
units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin.
background: "square" # choose which type of background you want behind the image. Can be one of: square, circle, none. Defaults to none.
type: "OpenWeather"
```
**Remarks:**
If for some reason your city can't be found by entering the name in the `location` property, you could also try to configure the OWM city ID in the `locationId` property. To retrieve your specific City ID, go to the [OWM website](https://openweathermap.org), search for your city and retrieve the ID from the URL (for example, the City ID of Amsterdam is 2759794).
## PaperlessNG
This service displays total number of documents stored. Two lines are required:
@ -150,18 +372,79 @@ This service displays total number of documents stored. Two lines are required:
API key can be generated in Settings > Administration > Auth Tokens
## PeaNUT
This service show current status of the UPS device. By default, the subtitle line shows UPS load, unless you provide the `subtitle` property
```yaml
- name: "PeaNUT"
type: PeaNUT
logo: "assets/tools/sample.png"
url: "http://192.168.0.151"
# device: "ups" # The ID of the device
```
## PiAlert
The PiAlert service displays stats from your PiAlert server.
```yaml
- name: "PiAlert"
type: "PiAlert"
updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats
```
## PiHole
Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
The following configuration is available for the PiHole service.
```yaml
- name: "Pi-hole"
logo: "assets/tools/sample.png"
# subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
url: "http://192.168.0.151/admin"
apikey: "<---insert-api-key-here--->" # optional, needed if web interface is password protected
type: "PiHole"
```
**Remarks:**
If PiHole web interface is password protected, obtain the `apikey` from Settings > API/Web interface > Show API token.
## Ping
For Ping you need to set the type to Ping and provide a url. By default the HEAD method is used but it can be configured to use GET using the optional `method` property.
This card checks if the target link is available. All you need is to set the `type` to `Ping` and provide a url. By default the HEAD method is used but it can be configured to use GET using the optional `method` property. By default, the subtitle line shows the round trip time (RTT) of the request, unless you provide the `subtitle` property. Optionnaly, use `successCodes` to define which HTTP response status codes should be considered as available status.
```yaml
- name: "Awesome app"
type: Ping
logo: "assets/tools/sample.png"
subtitle: "Bookmark example"
tag: "app"
url: "https://www.reddit.com/r/selfhosted/"
method: "head"
url: "https://www.wikipedia.org/"
# method: "head"
# successCodes: [200, 418] # optional, default to all 2xx HTTP response status codes
# timeout: 500 # in ms. default 2000
# subtitle: "Bookmark example" # By default, request round trip time is displayed when subtitle is not set.
```
## Portainer
This service displays info about the total number of containers managed by your Portainer instance.
In order to use it, you must be using Portainer version 1.11 or later. Generate an access token from the UI and pass
it to the apikey field.
By default, every connected environments will be checked. To select specific ones, add an "environments" entry which can be a simple string or an array containing all the selected environments name.
See <https://docs.portainer.io/api/access#creating-an-access-token>
```yaml
- name: "Portainer"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151/"
type: "Portainer"
apikey: "<---insert-api-key-here--->"
# environments:
# - "raspberry"
# - "local"
```
## Prometheus
@ -176,137 +459,11 @@ For Prometheus you need to set the type to Prometheus and provide a url.
# subtitle: "Monitor data server"
```
## AdGuard Home
For AdGuard Home you need to set the type to AdGuard, if you have somes issues as 403 responses on requests you need to provide authentification in headers for locations needed as below.
```yaml
- name: "Adguard"
logo: "assets/tools/adguardhome.png"
url: "https://adguard.exemple.com"
target: "_blank"
type: "AdGuardHome"
```
## Portainer
This service displays info about the total number of containers managed by your Portainer instance.
In order to use it, you must be using Portainer version 1.11 or later. Generate an access token from the UI and pass
it to the apikey field.
By default, every connected environments will be checked. To select specific ones, add an "environments" entry which can be a simple string or an array containing all the selected environments name.
See https://docs.portainer.io/api/access#creating-an-access-token
```yaml
- name: "Portainer"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151/"
type: "Portainer"
apikey: "<---insert-api-key-here--->"
# environments:
# - "raspberry"
# - "local"
```
## Emby / Jellyfin
You need to set the type to Emby, provide an api key and choose which stats to show if the subtitle is disabled.
```yaml
- name: "Emby"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151/"
type: "Emby"
apikey: "<---insert-api-key-here--->"
libraryType: "music" #Choose which stats to show. Can be one of: music, series or movies.
```
## Uptime Kuma
Using the Uptime Kuma service you can display info about your instance uptime right on your Homer dashboard.
The following configuration is available for the UptimeKuma service. Needs v1.13.1 or later because of the change in APIs due to [multiple status pages support](https://github.com/louislam/uptime-kuma/releases/tag/1.13.1).
```yaml
- name: "Uptime Kuma"
logo: "assets/tools/sample.png"
# subtitle: "A fancy self-hosted monitoring tool" # optional, if no subtitle is defined, Uptime Kuma incidents, if any, will be shown
url: "http://192.168.0.151:3001"
slug: "myCustomDashboard" # Defaults to "default" if not provided.
type: "UptimeKuma"
```
## Tautulli
The Tautulli service can allow you to show the number of currently active
streams on you Plex instance. An API key is required, and can be obtained from
the "Web Interface" section of settings on the Tautulli web UI.
```yaml
- name: "Tautulli"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151:8181"
type: "Tautulli"
apikey: "<---insert-api-key-here--->"
```
Because the service type and link don't necessarily have to match, you could
even make the service type Tautulli on your Plex card and provide a separate
endpoint pointing to Tautulli!
```yaml
- name: "Plex"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151:32400/web" # Plex
endpoint: "http://192.168.0.151:8181" # Tautulli
type: "Tautulli"
apikey: "<---insert-api-key-here--->"
```
## Mealie
First off make sure to remove an existing `subtitle` as it will take precedence if set.
Setting `type: "Mealie"` will then show the number of recipes Mealie is keeping organized or the planned meal for today if one is planned. You will have to set an API key in the field `apikey` which can be created in your Mealie installation.
## Healthchecks
This service displays information about the configured status checks from the Healthchecks application.
Two lines are needed in the config.yml :
```yaml
type: "Healthchecks"
apikey: "<---insert-api-key-here--->"
```
The url must be the root url of the Healthchecks application.
The Healthchecks API key can be found in Settings > API Access > API key (read-only). The key is needed to access Healthchecks API.
## rTorrent
This service displays the global upload and download rates, as well as the number of torrents
listed in rTorrent. The service communicates with the rTorrent XML-RPC interface which needs
to be accessible from the browser. Please consult
[the instructions](https://github.com/rakshasa/rtorrent-doc/blob/master/RPC-Setup-XMLRPC.md)
for setting up rTorrent and make sure the correct CORS-settings are applied. Examples for various
servers can be found at https://enable-cors.org/server.html.
```yaml
- name: "rTorrent"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151" # Your rTorrent web UI, f.e. ruTorrent or Flood.
xmlrpc: "http://192.168.0.151:8081" # Reverse proxy for rTorrent's XML-RPC.
type: "Rtorrent"
rateInterval: 5000 # Interval for updating the download and upload rates.
torrentInterval: 60000 # Interval for updating the torrent count.
username: "username" # Username for logging into rTorrent (if applicable).
password: "password" # Password for logging into rTorrent (if applicable).
```
## Proxmox
This service displays status information of a Proxmox node (VMs running and disk, memory and cpu used). It uses the proxmox API and [API Tokens](https://pve.proxmox.com/pve-docs/pveum-plain.html) for authorization so you need to generate one to set in the yaml config. You can set it up in Proxmox under Permissions > API Tokens. You also need to know the realm the user of the API Token is assigned to (by default pam).
The API Token (or the user asigned to that token if not separated permissions is checked) are this:
The API Token (or the user assigned to that token if not separated permissions is checked) are this:
| Path | Permission | Comments |
|--------------------|------------|-------------------------------------------------------------------|
@ -354,49 +511,25 @@ servers can be found at [enable-cors.org](https://enable-cors.org/server.html).
target: "_blank" # optional html a tag target attribute
```
## Copy to Clipboard
## rTorrent
This service displays the same information of a generic one, but shows an icon button on the indicator place (right side) you can click to get the content of the `clipboard` field copied to your clipboard.
You can still provide an `url` that would be open when clicked anywhere but on the icon button.
Configuration example:
This service displays the global upload and download rates, as well as the number of torrents
listed in rTorrent. The service communicates with the rTorrent XML-RPC interface which needs
to be accessible from the browser. Please consult
[the instructions](https://github.com/rakshasa/rtorrent-doc/blob/master/RPC-Setup-XMLRPC.md)
for setting up rTorrent and make sure the correct CORS-settings are applied. Examples for various
servers can be found at https://enable-cors.org/server.html.
```yaml
- name: "Copy me!"
- name: "rTorrent"
logo: "assets/tools/sample.png"
subtitle: "Subtitle text goes here"
url: "#"
type: "CopyToClipboard"
clipboard: "this text will be copied to your clipboard"
```
## SpeedtestTracker
This service will show the download and upload speeds in Mbit/s and the ping in ms.
To configure the service, you need to define the url of SpeedtestTracker running and an entry with type `SpeedtestTracker`.
Configuration example:
```yaml
- name: "Speedtest Tracker"
type: "SpeedtestTracker"
url: "http://192.168.0.1:8080"
target: "_blank"
```
## What's up Docker
What's up Docker allow to display info about the number of container running and the number for which an update is available on your Homer dashboard.
The following configuration is available for the WUD service.
```yaml
- name: "What's Up Docker"
logo: "assets/tools/sample.png"
subtitle: "Docker image update notifier"
url: "http://192.168.1.12:3001"
type: "WUD"
url: "http://192.168.0.151" # Your rTorrent web UI, f.e. ruTorrent or Flood.
xmlrpc: "http://192.168.0.151:8081" # Reverse proxy for rTorrent's XML-RPC.
type: "Rtorrent"
rateInterval: 5000 # Interval for updating the download and upload rates.
torrentInterval: 60000 # Interval for updating the torrent count.
username: "username" # Username for logging into rTorrent (if applicable).
password: "password" # Password for logging into rTorrent (if applicable).
```
## SABnzbd
@ -414,19 +547,57 @@ the "Config" > "General" section of the SABnzbd config in the SABnzbd web UI.
downloadInterval: 5000 # (Optional) Interval (in ms) for updating the download count
```
## OctoPrint/Moonraker
## Scrutiny
The OctoPrint/Moonraker service only needs an `apikey` & `endpoint` and optionally a `display` or `url` option. `url` can be used when you click on the service it will launch the `url`
Moonraker's API mimmicks a few of OctoPrint's endpoints which makes these services compatible. See https://moonraker.readthedocs.io/en/latest/web_api/#octoprint-api-emulation for details.
This service displays info about the total number of disk passed and failed S.M.A.R.T and scrutiny checks
```yaml
- name: "Octoprint"
logo: "https://cdn-icons-png.flaticon.com/512/3112/3112529.png"
apikey: "xxxxxxxxxxxx" # insert your own API key here.
endpoint: "http://192.168.0.151:8080"
display: "text" # 'text' or 'bar'. Default to `text`.
type: "OctoPrint"
- name: "Scrutiny"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151:8080"
type: "Scrutiny"
updateInterval: 5000 # (Optional) Interval (in ms) for updating the status
```
## SpeedtestTracker
This service will show the download and upload speeds in Mbit/s and the ping in ms.
To configure the service, you need to define the url of SpeedtestTracker running and an entry with type `SpeedtestTracker`.
Configuration example:
```yaml
- name: "Speedtest Tracker"
type: "SpeedtestTracker"
url: "http://192.168.0.1:8080"
target: "_blank"
```
## Tautulli
The Tautulli service can allow you to show the number of currently active
streams on you Plex instance. An API key is required, and can be obtained from
the "Web Interface" section of settings on the Tautulli web UI.
```yaml
- name: "Tautulli"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151:8181"
type: "Tautulli"
apikey: "<---insert-api-key-here--->"
```
Because the service type and link don't necessarily have to match, you could
even make the service type Tautulli on your Plex card and provide a separate
endpoint pointing to Tautulli!
```yaml
- name: "Plex"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151:32400/web" # Plex
endpoint: "http://192.168.0.151:8181" # Tautulli
type: "Tautulli"
apikey: "<---insert-api-key-here--->"
```
## Tdarr
@ -442,72 +613,31 @@ for transcoding on your Tdarr instance as well as the number of errored items.
checkInterval: 5000 # (Optional) Interval (in ms) for updating the queue & error counts
```
## PiAlert
## Uptime Kuma
The PiAlert service displays stats from your PiAlert server.
Using the Uptime Kuma service you can display info about your instance uptime right on your Homer dashboard.
The following configuration is available for the UptimeKuma service. Needs v1.13.1 or later because of the change in APIs due to [multiple status pages support](https://github.com/louislam/uptime-kuma/releases/tag/1.13.1).
```yaml
- name: "PiAlert"
type: "PiAlert"
updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats
```
## Immich
The Immich service displays stats from your Immich server.
The Immich server must be running at least version 1.85.0 for the correct api endpoint to work.
```yaml
- name: "Immich"
type: "Immich"
apikey: "<--- Your api key --->" # administrator user
updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats
```
## OpenHAB
You need to set the type to OpenHAB, provide an api key and enable cors on OpenHAB.
```yaml
- name: "OpenHAB"
- name: "Uptime Kuma"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151/"
type: "OpenHAB"
apikey: "<---insert-api-key-here--->"
things: true # true will query the things API and report total and online things count. false will skip the call
items: true # true will query the items API and report total items count. false will skip the call
# subtitle: "A fancy self-hosted monitoring tool" # optional, if no subtitle is defined, Uptime Kuma incidents, if any, will be shown
url: "http://192.168.0.151:3001"
slug: "myCustomDashboard" # Defaults to "default" if not provided.
type: "UptimeKuma"
```
To create an API token on OpenHAB, follow the [official documentation here](https://www.openhab.org/docs/configuration/apitokens.html).
To enable cors on OpenHAB, edit your services/runtime.cfg and uncomment or add this line: `org.openhab.cors:enable=true`
## Jellystat
## What's up Docker
The Jellystat serice display the number of concurrent streams on your jellyfin server.
The Jellystat server must be running behind a reverse proxy to add some cors headers:
- Access-Control-Allow-Origin: ${your_domain}
- Access-Control-Allow-Headers: Authorization
What's up Docker allow to display info about the number of container running and the number for which an update is available on your Homer dashboard.
The following configuration is available for the WUD service.
```yaml
- name: "Jellystat"
logo: "assets/tools/jellystat.png"
url: "http://192.168.1.154:3000"
type: "Jellystat"
apikey: "<---insert-api-key-here--->"
```
You can create an API key in the dashboard of you jellystat server: settings/API Keys -> Add Key
## Home Assistant
You need to set the type to HomeAssistant, provide an api key and enable cors on Home Assistant.
```yaml
- name: "HomeAssistant"
- name: "What's Up Docker"
logo: "assets/tools/sample.png"
url: "http://192.168.0.151/"
type: "HomeAssistant"
apikey: "<---insert-api-key-here--->"
items: [] # optional, which items to show (and in which order) in the subtitle. Possible values are "name", "version", "entities"
separator: " " # optional, how to separate items
subtitle: "Docker image update notifier"
url: "http://192.168.1.12:3001"
type: "WUD"
```
To create an API token on HomeAssistant, follow the [official documentation here](https://developers.home-assistant.io/docs/auth_api/#long-lived-access-token).
To enable cors on HomeAssistant, edit your `configuration.yml` and add the IP of Homer to `https: cors_allowed_origins`

2
docs/development.md
View File

@ -19,6 +19,7 @@ Each one is **optional**, and will display the usual information if omitted.
Each service must implement the `item` [property](https://vuejs.org/v2/guide/components-props.html) and bind it the Generic component if used.
### Skeleton
```Vue
<template>
<Generic :item="item">
@ -49,7 +50,6 @@ export default {
</script>
```
## Themes
Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).

7
docs/kubernetes.md
View File

@ -2,7 +2,6 @@
We have different solution to install Homer on Kubernetes Cluster, each solution responds to a specific need.
## Table of Contents
- [Helm Chart](#helm-chart)
@ -58,7 +57,7 @@ helm install homer bananaops/homer-k8s -f values.yaml
## Controller Annotations
To deploy Homer in Kubernetes with controller to check ingress annoation and modify homer configuration
To deploy Homer in Kubernetes with controller to check ingress annotation and modify homer configuration
Thanks to [@paulfantom](https://github.com/paulfantom) [homer-reloader](https://github.com/paulfantom/homer-reloader/tree/main/):
@ -82,7 +81,3 @@ kubectl apply -f operator.yaml
### Usage
- [usage](https://github.com/rajsinghtech/homer-operator?tab=readme-ov-file#usage)

BIN
docs/screenshot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 50 KiB

6
docs/theming.md
View File

@ -28,7 +28,7 @@ Default colors and background can be customized for each theme variant (light an
| `card-shadow` | `--card-shadow` | Service card `box-shadow` |
| `link` | `--link` | Links color (footer & message), service card icon color |
| `link-hover` | `--link-hover` | Links hover color (footer & message), service card icon hover color |
| `background-image` | `--background-image` | page background image url (when used in css, set `url(<image-url>)` insted of just the url. see exemple below)|
| `background-image` | `--background-image` | page background image url (when used in css, set `url(<image-url>)` instead of just the url. see example below)|
YAML example
@ -70,7 +70,7 @@ stylesheet:
- "assets/custom.css"
```
### Customization exemple
### Customization example
#### Max width modification
@ -80,7 +80,7 @@ body #main-section .container {
}
```
#### Background gradiant
#### Background gradient
```css
#app {

38
docs/tips-and-tricks.md
View File

@ -2,6 +2,12 @@
Here is a collection of neat tips and tricks that Homer users have come up with!
## Dashboard icons
Great source to find service icons
- <https://github.com/walkxcode/dashboard-icons>
## Use Homer as a custom "new tab" page
#### `by @vosdev`
@ -190,3 +196,35 @@ So, using [Node-Red](https://nodered.org/docs/getting-started/) and a quick flow
To get started, simply import [this flow](https://flows.nodered.org/flow/4b6406c9a684c26ace0430dd1826e95d) into your Node-Red instance and change the RSS feed in the "Get News RSS Feed" node to one of your choosing!
So far, the flow has been tested with BBC News and Sky News, however it should be easy to modify the flow to work with other RSS feeds if they don't work out of the box!
## Write HTML into the dashboard
### Show latest camera feed
#### `by @matheusvellone`
The `message.content` config entry accepts HTML code, so you can add images.
If you use Frigate, or have any `latest.jpg` URL for your camera, you can add it to your dashboard. You can also style the `div`/`img` tags to look nicer on your dashboard.
```yml
message:
title: Cameras
content: >
<div>
<a href="http://frigate.local:5000/cameras/garage">
<img src="http://frigate.local:5000/api/garage/latest.jpg?h=220"/>
</a>
<a href="http://frigate.local:5000/cameras/backyard">
<img src="http://frigate.local:5000/api/backyard/latest.jpg?h=220"/>
</a>
</div>
```
When using Frigate you can even add a live feed to your dashboard, like this:
```yml
message:
title: Cameras
content: >
<img src="http://frigate.local:5000/api/piscina"/>
```

35
docs/troubleshooting.md
View File

@ -1,6 +1,6 @@
# Troubleshooting
## My docker container refuse to start / is stuck at restarting.
## My docker container refuse to start / is stuck at restarting
You might be facing a permission issue. First of all, check your container logs (adjust the container name if necessary):
@ -12,19 +12,20 @@ Assets directory not writable. Check assets directory permissions & docker user
In this case you need to make sure your mounted assets directory have the same GID / UID the container user have (default 1000:1000), and that the read and write permission is granted for the user or the group.
You can either:
You can either:
- Update your assets directory permissions (ex: `chown -R 1000:1000 /your/assets/folder/`, `chmod -R u+rw /your/assets/folder/`)
- Change the docker user by using the `--user` arguments with docker cli or `user: 1000:1000` with docker compose.
⚠️ Notes:
- **Do not** use env var to set the GID / UID of the user running container. Use the Docker `user` option.
- **Do not** use 0:0 as a user value, it would be a security risk, and it's not guaranty to work.
> [!NOTE]
>
> - **Do not** use env var to set the GID / UID of the user running container. Use the Docker `user` option.
> - **Do not** use 0:0 as a user value, it would be a security risk, and it's not guaranty to work.
Check this [thread](https://github.com/bastienwirtz/homer/issues/459) for more information about debugging
permission issues.
## My custom service card doesn't work, nothing appears or offline status is displayed (pi-hole, sonarr, ping, ...)
## My service card doesn't work, nothing appears or offline status is displayed (pi-hole, sonarr, ping, ...)
You might be facing a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross Origin Request Sharing) issue.
It happens when the targeted service is hosted on a different domain or port.
@ -38,21 +39,23 @@ Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has
To resolve this, you can either:
* Host all your target service under the same domain & port.
* Modify the target server configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it.
* Use a cors proxy server like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.
- Host all your target service under the same domain & port.
- Modify the target server configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it.
- Use a cors proxy server like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.
## I am using an authentication proxy and homer says I am offline
This should be a configuration issue.
* Make sure the option `connectivityCheck` is set to `true` in configuration.
* Check your proxy configuration, the expected behavior is to redirect user using a 302 to the login page when user is not authenticated.
- Make sure the option `connectivityCheck` is set to `true` in configuration.
- Check your proxy configuration, the expected behavior is to redirect user using a 302 to the login page when user is not authenticated.
## I put my API key into the OpenWeather service and it still isn't working
If you have just made an OpenWeatherMap account and/or a newly-made API key, there is a high chance that you need to wait for it to be activated (often a few hours). If after waiting it still doesn't work, make sure to check the location you have provided since it may be an invalid location.
For some basic debugging steps, you can:
* Check with a large city such as Amsterdam as the specified location within your configuration.
* Make sure your web browser is running the latest version of the homer configuration after updating the location (Ctrl + Shift + R).
* Check for errors within the browser console (Ctrl + Shift + I) relating to api.openweathermap.org
For some basic debugging steps, you can:
- Check with a large city such as Amsterdam as the specified location within your configuration.
- Make sure your web browser is running the latest version of the homer configuration after updating the location (Ctrl + Shift + R).
- Check for errors within the browser console (Ctrl + Shift + I) relating to api.openweathermap.org

3
dummy-data/freshrss/api/greader.php/accounts/ClientLogin Normal file
View File

@ -0,0 +1,3 @@
SID=username/c7fef7ce380efb8c79a0df25686a3387
LSID=null
Auth=username/c7fef7ce380efb8c79a0df25686a3387

1
dummy-data/freshrss/api/greader.php/reader/api/0/subscription/list Normal file
View File

@ -0,0 +1 @@
{"subscriptions":[{"id":"feed/3","title":"Test News","categories":[{"id":"user/-/label/News","label":"News"}],"url":"https://www.reddit.com/r/testnews.rss","htmlUrl":"https://www.reddit.com/r/testnews","iconUrl":"http://192.168.10.165/f.php?b4a11f09"},{"id":"feed/17","title":"Announcements Latest Topics","categories":[{"id":"user/-/label/Technology","label":"Technology"}],"url":"https://forums.testsite.net/forums/forum/7-announcements.xml","htmlUrl":"https://forums.testsite.net/forum/7-announcements/","iconUrl":"http://192.168.10.165/f.php?70b5fd98"},{"id":"feed/16","title":"Blog","categories":[{"id":"user/-/label/Technology","label":"Technology"}],"url":"https://www.firewall.com/blog/rss.xml","htmlUrl":"https://www.firewall.com/blog","iconUrl":"http://192.168.20.165/f.php?0107d102"},{"id":"feed/2","title":"techsite","categories":[{"id":"user/-/label/Technology","label":"Technology"}],"url":"https://techsite.com/rss","htmlUrl":"https://techsite.com/","iconUrl":"http://192.168.10.100/f.php?69ad225d"},{"id":"feed/5","title":"Hackaday","categories":[{"id":"user/-/label/Technology","label":"Technology"}],"url":"https://hackaday.com/feed/","htmlUrl":"https://hackaday.com/","iconUrl":"http://192.168.10.15/f.php?7be93110"},{"id":"feed/7","title":"Self-Hosted Alternatives to Popular Services","categories":[{"id":"user/-/label/Technology","label":"Technology"}],"url":"https://www.reddit.com/r/selfhosted.rss","htmlUrl":"https://www.reddit.com/r/selfhosted","iconUrl":"http://192.168.10.100/f.php?87bdf454"},{"id":"feed/15","title":"UniFi Access Point／Switch／LTE | Releases | Ubiquiti Community","categories":[{"id":"user/-/label/Technology","label":"Technology"}],"url":"https://community.ui.com/rss/releases/UniFi-Access-Point-Switch-LTE/9fc3b2fa-9e73-449a-924f-470e79884470","htmlUrl":"https://community.ui.com/","iconUrl":"http://192.168.10.100/f.php?a8b7368a"},{"id":"feed/14","title":"UniFi Network Application | Releases | Ubiquiti Community","categories":[{"id":"user/-/label/Technology","label":"Technology"}],"url":"https://community.ui.com/rss/releases/UniFi-Network-Application/e6712595-81bb-4829-8e42-9e2630fabcfe","htmlUrl":"https://community.ui.com/","iconUrl":"http://192.168.10.100/f.php?87f0ed63"},{"id":"feed/1","title":"FreshRSS releases","categories":[{"id":"user/-/label/Uncategorized","label":"Uncategorized"}],"url":"https://github.com/FreshRSS/FreshRSS/releases.atom","htmlUrl":"https://github.com/FreshRSS/FreshRSS/","iconUrl":"http://192.168.10.100/f.php?261334e9"},{"id":"feed/10","title":"Hooked on Wood","categories":[{"id":"user/-/label/Videos","label":"Videos"}],"url":"https://www.youtube.com/feeds/videos.xml?channel_id=UCuvjeMfKGqSoYc32Xk5MLfQ","htmlUrl":"https://www.youtube.com/channel/UCuvjeMfKGqSoYc32Xk5MLfQ","iconUrl":"http://192.168.10.100/f.php?e6aff645"},{"id":"feed/11","title":"Jeff Geerling","categories":[{"id":"user/-/label/Videos","label":"Videos"}],"url":"https://www.youtube.com/feeds/videos.xml?channel_id=UCR-DXc1voovS8nhAvccRZhg","htmlUrl":"https://www.youtube.com/channel/UCR-DXc1voovS8nhAvccRZhg","iconUrl":"http://192.168.10.100/f.php?5b542c1f"},{"id":"feed/9","title":"Lawrence Systems","categories":[{"id":"user/-/label/Videos","label":"Videos"}],"url":"https://www.youtube.com/feeds/videos.xml?channel_id=UCHkYOD-3fZbuGhwsADBd9ZQ","htmlUrl":"https://www.youtube.com/channel/UCHkYOD-3fZbuGhwsADBd9ZQ","iconUrl":"http://192.168.10.100/f.php?3ab68f8e"},{"id":"feed/13","title":"Thunderf00t","categories":[{"id":"user/-/label/Videos","label":"Videos"}],"url":"https://www.youtube.com/feeds/videos.xml?channel_id=UCmb8hO2ilV9vRa8cilis88A","htmlUrl":"https://www.youtube.com/channel/UCmb8hO2ilV9vRa8cilis88A","iconUrl":"http://192.168.10.100/f.php?d87007ad"}]}

1
dummy-data/freshrss/api/greader.php/reader/api/0/unread-count Normal file
View File

@ -0,0 +1 @@
{"max":1070,"unreadcounts":[{"id":"feed/3","count":234,"newestItemTimestampUsec":"1690915225367106"},{"id":"user/-/label/News","count":234,"newestItemTimestampUsec":"1690915225367106"},{"id":"feed/17","count":48,"newestItemTimestampUsec":"1689390054724200"},{"id":"feed/16","count":17,"newestItemTimestampUsec":"1689796853964422"},{"id":"feed/2","count":219,"newestItemTimestampUsec":"1690916425408239"},{"id":"feed/5","count":199,"newestItemTimestampUsec":"1690915225367107"},{"id":"feed/7","count":211,"newestItemTimestampUsec":"1690916425408242"},{"id":"feed/15","count":22,"newestItemTimestampUsec":"1689663652972458"},{"id":"feed/14","count":21,"newestItemTimestampUsec":"1688368807781577"},{"id":"user/-/label/Technology","count":737,"newestItemTimestampUsec":"1690916425408242"},{"id":"feed/1","count":10,"newestItemTimestampUsec":"1687016967198678"},{"id":"user/-/label/Uncategorized","count":10,"newestItemTimestampUsec":"1687016967198678"},{"id":"feed/10","count":15,"newestItemTimestampUsec":"1688654406671211"},{"id":"feed/11","count":25,"newestItemTimestampUsec":"1690902033356786"},{"id":"feed/9","count":34,"newestItemTimestampUsec":"1690736426018726"},{"id":"feed/13","count":15,"newestItemTimestampUsec":"1690837226605329"},{"id":"user/-/label/Videos","count":89,"newestItemTimestampUsec":"1690902033356786"},{"id":"user/-/state/com.google/reading-list","count":1070,"newestItemTimestampUsec":"1690916425408242"}]}

1
dummy-data/glances/api/4/quicklook Normal file
View File

@ -0,0 +1 @@
{"cpu_name":"AMD Ryzen 7 3700X 8-Core Processor","cpu_hz_current":2662987562.5,"cpu_hz":3600000000.0,"cpu":3.7,"percpu":[{"key":"cpu_number","cpu_number":0,"total":5.1,"user":3.3,"system":0.6,"idle":94.9,"nice":0.0,"iowait":0.0,"irq":0.8,"softirq":0.3,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":1,"total":2.6,"user":2.0,"system":0.5,"idle":97.4,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.1,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":2,"total":1.6,"user":1.1,"system":0.3,"idle":98.4,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":3,"total":7.4,"user":6.2,"system":0.9,"idle":92.6,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":4,"total":1.3,"user":0.9,"system":0.4,"idle":98.7,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":5,"total":10.4,"user":8.9,"system":1.2,"idle":89.6,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":6,"total":3.1,"user":2.3,"system":0.6,"idle":96.9,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":7,"total":2.1,"user":1.3,"system":0.6,"idle":97.9,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":8,"total":5.8,"user":4.9,"system":0.7,"idle":94.2,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":9,"total":2.0,"user":1.3,"system":0.4,"idle":98.0,"nice":0.0,"iowait":0.2,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":10,"total":1.5,"user":0.9,"system":0.3,"idle":98.5,"nice":0.0,"iowait":0.2,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":11,"total":5.3,"user":4.6,"system":0.6,"idle":94.7,"nice":0.0,"iowait":0.1,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":12,"total":1.5,"user":1.0,"system":0.4,"idle":98.5,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":13,"total":5.7,"user":4.9,"system":0.7,"idle":94.3,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":14,"total":2.9,"user":2.0,"system":0.8,"idle":97.1,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null},{"key":"cpu_number","cpu_number":15,"total":1.7,"user":1.1,"system":0.5,"idle":98.3,"nice":0.0,"iowait":0.0,"irq":0.1,"softirq":0.0,"steal":0.0,"guest":0.0,"guest_nice":0.0,"dpc":null,"interrupt":null}],"mem":59.6,"swap":0.0,"cpu_log_core":16,"cpu_phys_core":8,"load":5.7}

30
dummy-data/peanut/v1/devices/ups Normal file
View File

@ -0,0 +1,30 @@
{
"battery.charge": 100,
"battery.voltage": 13,
"battery.voltage.high": 13,
"battery.voltage.low": 10,
"battery.voltage.nominal": 12,
"device.type": "ups",
"driver.flag.noscanlangid": "enabled",
"driver.flag.novendor": "enabled",
"driver.name": "nutdrv_qx",
"driver.parameter.langid_fix": 1000,
"driver.parameter.pollfreq": 30,
"driver.parameter.pollinterval": 2,
"driver.parameter.vendorid": 1,
"driver.version": "2.8.0",
"input.frequency": 50,
"input.frequency.nominal": "0",
"input.voltage": 228,
"input.voltage.fault": "0.0",
"input.voltage.nominal": "0",
"output.voltage": 228,
"ups.beeper.status": "disabled",
"ups.delay.shutdown": 60,
"ups.delay.start": "0",
"ups.load": 50,
"ups.productid": "0000",
"ups.status": "OL",
"ups.temperature": 30,
"ups.type": "offline / line interactive"
}

19
entrypoint.sh
View File

@ -1,17 +1,16 @@
#!/bin/sh
PERMISSION_ERROR="Check assets directory permissions & docker user or skip default assets install by setting the INIT_ASSETS env var to 0"
# Default assets & exemple configuration installation if possible.
# Default assets & example configuration installation
if [[ "${INIT_ASSETS}" == "1" ]] && [[ ! -f "/www/assets/config.yml" ]]; then
echo "No configuration found, installing default config & assets"
if [[ ! -w "/www/assets/" ]]; then echo "Assets directory not writable. $PERMISSION_ERROR" && exit 1; fi
while true; do echo n; done | cp -Ri /www/default-assets/* /www/assets/ &> /dev/null
if [[ $? -ne 0 ]]; then echo "Fail to copy default assets. $PERMISSION_ERROR" && exit 1; fi
yes n | cp -i /www/default-assets/config.yml.dist /www/assets/config.yml &> /dev/null
if [[ $? -ne 0 ]]; then echo "Fail to copy default config file. $PERMISSION_ERROR" && exit 1; fi
if [[ -w "/www/assets/" ]];
then
while true; do echo n; done | cp -Ri /www/default-assets/* /www/assets/
yes n | cp -i /www/default-assets/config.yml.dist /www/assets/config.yml
else
echo "Assets directory not writable, skipping default config install.";
echo "Check assets directory permissions & docker user or skip default assets install by setting the INIT_ASSETS env var to 0."
fi
fi
echo "Starting webserver"

21
eslint.config.js Normal file
View File

@ -0,0 +1,21 @@
import js from "@eslint/js";
import pluginVue from 'eslint-plugin-vue'
import eslintConfigPrettier from "eslint-config-prettier";
export default [
js.configs.recommended,
...pluginVue.configs['flat/recommended'],
eslintConfigPrettier,
{
files: ['**/*.{vue,js,jsx,mjs,cjs}'],
rules: {
"vue/multi-word-component-names": "off",
"vue/require-default-prop": "off",
"vue/no-v-html": "off",
},
},
{
ignores: ["**/dist/"],
}
];

31
package.json
View File

@ -1,33 +1,32 @@
{
"name": "homer",
"version": "24.05.1",
"version": "24.11.5",
"type": "module",
"scripts": {
"dev": "vite",
"mock": "http-server dummy-data/ --cors",
"build": "vite build",
"preview": "vite preview --port 5050",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
"lint": "eslint . --fix"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.5.2",
"bulma": "^1.0.1",
"@fortawesome/fontawesome-free": "^6.7.0",
"bulma": "^1.0.2",
"lodash.merge": "^4.6.2",
"vue": "^3.4.31",
"yaml": "^2.4.5"
"vue": "^3.5.13",
"yaml": "^2.6.1"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.8.0",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/eslint-config-prettier": "^9.0.0",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.25.0",
"@vitejs/plugin-vue": "^5.2.0",
"@vue/eslint-config-prettier": "^10.0.0",
"eslint": "^9.15.0",
"eslint-plugin-vue": "^9.31.0",
"http-server": "^14.1.1",
"prettier": "^3.2.5",
"sass": "^1.76.0",
"vite": "^5.2.10",
"vite-plugin-pwa": "^0.20.0"
"prettier": "^3.3.3",
"sass-embedded": "^1.81.0",
"vite": "^5.4.11",
"vite-plugin-pwa": "^0.21.0"
},
"license": "Apache-2.0",
"packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
"packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
}

3526
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

25
public/assets/config-demo.yml.dist
View File

@ -1,6 +1,6 @@
---
# Homepage configuration
# See https://fontawesome.com/v5/search for icons options
# See https://fontawesome.com/search for icons options
title: "Demo dashboard"
subtitle: "Homer"
@ -67,12 +67,18 @@ services:
subtitle: "Displays dynamic information or actions."
tag: "setup"
url: "https://github.com/bastienwirtz/homer/blob/main/docs/theming.md"
- name: "Dashboard icons"
icon: "fa-solid fa-icons"
subtitle: "Dashboard icons"
tag: "setup"
url: "https://github.com/walkxcode/dashboard-icons"
- name: "Buy me a coffee!"
subtitle: "Sponsor this project"
icon: "fa-solid fa-mug-hot"
url: "https://www.buymeacoffee.com/bastien"
- name: "Smart cards showcase"
icon: "fa-solid fa-brain"
class: "highlight-purple"
items:
- name: "Octoprint"
logo: "https://cdn-icons-png.flaticon.com/512/3112/3112529.png"
@ -94,6 +100,12 @@ services:
warning_value: 50
danger_value: 80
api_token: "xxxxxxxxxxxx"
- name: "PeaNUT"
logo: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/peanut.png"
url: "https://github.com/Brandawg93/PeaNUT"
endpoint: "/dummy-data/peanut"
type: "PeaNUT"
device: "ups"
- name: "Weather"
location: "Lille"
apikey: "xxxxxxxxxxxx" # insert your own API key here. Request one from https://openweathermap.org/api.
@ -102,12 +114,19 @@ services:
type: "OpenWeather"
- name: "Ressources"
icon: "fa-regular fa-bookmark"
class: highlight-inverted
items:
- name: "r/selfhosted"
icon: "fa-brands fa-reddit-alien"
subtitle: "Bookmark example"
tag: "reddit"
subtitle: "selfhosted community on Reddit"
tag: "community"
url: "https://www.reddit.com/r/selfhosted/"
target: "_blank"
- name: "c/selfhosted"
logo: "https://icons.iconarchive.com/icons/simpleicons-team/simple/256/lemmy-icon.png"
subtitle: "selfhosted community on Lemmy"
tag: "community"
url: "https://lemmy.world/c/selfhosted"
target: "_blank"
- name: "Awesome selfhosted"
icon: "fa-solid fa-star"

39
public/assets/config.yml.dist
View File

@ -1,6 +1,6 @@
---
# Homepage configuration
# See https://fontawesome.com/v6/search for icons options
# See https://fontawesome.com/search for icons options
title: "Demo dashboard"
subtitle: "Homer"
@ -74,15 +74,28 @@ services:
- name: "Applications"
icon: "fas fa-cloud"
items:
- name: "Awesome app"
logo: "assets/tools/sample.png"
subtitle: "Bookmark example"
tag: "app"
keywords: "self hosted reddit"
url: "https://www.reddit.com/r/selfhosted/"
target: "_blank" # optional html a tag target attribute
- name: "Another one"
logo: "assets/tools/sample2.png"
subtitle: "Another application"
tag: "app"
url: "#"
- name: "Get started"
icon: "fa-solid fa-download"
subtitle: "Start using Homer in a few minutes"
tag: "setup"
url: "https://github.com/bastienwirtz/homer?tab=readme-ov-file#getting-started"
- name: "Configuration"
icon: "fa-solid fa-sliders"
subtitle: "Configuration options documentation"
tag: "setup"
url: "https://github.com/bastienwirtz/homer/blob/main/docs/configuration.md"
- name: "Theming"
icon: "fa-solid fa-palette"
subtitle: "Customize Homer appearance"
tag: "theming"
url: "https://github.com/bastienwirtz/homer/blob/main/docs/theming.md"
- name: "Smart cards"
icon: "fa-solid fa-palette"
subtitle: "Displays dynamic information or actions."
tag: "setup"
url: "https://github.com/bastienwirtz/homer/blob/main/docs/theming.md"
- name: "Dashboard icons"
icon: "fa-solid fa-icons"
subtitle: "Dashboard icons"
tag: "setup"
url: "https://github.com/walkxcode/dashboard-icons"

18
src/App.vue
View File

@ -1,7 +1,7 @@
<template>
<div
id="app"
v-if="config"
id="app"
:class="[
`theme-${config.theme}`,
`page-${currentPage}`,
@ -32,16 +32,16 @@
@navbar-toggle="showMenu = !showMenu"
>
<DarkMode
:default-value="config.defaults.colorTheme"
@updated="isDark = $event"
:defaultValue="this.config.defaults.colorTheme"
/>
<SettingToggle
@updated="vlayout = $event"
name="vlayout"
icon="fa-list"
iconAlt="fa-columns"
:defaultValue="this.config.defaults.layout == 'columns'"
icon-alt="fa-columns"
:default-value="config.defaults.layout == 'columns'"
@updated="vlayout = $event"
/>
<SearchInput
@ -73,9 +73,9 @@
<template v-for="(group, groupIndex) in services">
<h2
v-if="group.name"
:key="`header-${groupIndex}`"
class="column is-full group-title"
:class="group.class"
:key="`header-${groupIndex}`"
>
<i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
<div v-else-if="group.logo" class="group-logo media-left">
@ -105,9 +105,9 @@
class="columns is-multiline layout-vertical"
>
<div
:class="['column', `is-${12 / config.columns}`]"
v-for="(group, groupIndex) in services"
:key="groupIndex"
:class="['column', `is-${12 / config.columns}`]"
>
<h2 v-if="group.name" class="group-title" :class="group.class">
<i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
@ -134,8 +134,8 @@
<footer class="footer">
<div class="container">
<div
class="content has-text-centered"
v-if="config.footer"
class="content has-text-centered"
v-html="config.footer"
></div>
</div>
@ -275,7 +275,7 @@ export default {
try {
const service = this.services[0].items[0];
window.open(service.url, target || service.target || "_self");
} catch (error) {
} catch {
console.warn("fail to open service");
}
},

640
src/assets/components/base.scss
View File

@ -2,171 +2,205 @@
@import url("@/assets/components/status.scss") layer(base);
@import url("@/assets/webfonts/webfonts.scss") layer(base);
@mixin ellipsis() {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@layer base {
html,
body,
body #app-mount,
body #app {
height: 100%;
background-color: var(--background);
}
@layer base {
html, body, body #app-mount, body #app {
height: 100%;
background-color: var(--background);
body {
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
#app {
height: auto;
min-height: 100%;
background-image: var(--background-image);
background-size: cover;
background-position: center;
color: var(--text);
transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
a {
color: var(--link);
&:hover {
color: var(--link-hover);
}
}
.title {
font-weight: 500;
color: var(--text-title);
}
.subtitle {
color: var(--text-subtitle);
}
.card {
background-color: var(--card-background);
box-shadow: 0 2px 15px 0 var(--card-shadow);
&:hover {
background-color: var(--card-background);
}
}
.message {
.message-body {
color: var(--text);
background-color: var(--card-background);
}
}
.footer {
background-color: var(--card-background);
box-shadow: 0 2px 15px 0 var(--card-shadow);
}
}
body {
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
#app {
height: auto;
min-height: 100%;
background-image: var(--background-image);
background-size: cover;
background-position: center;
color: var(--text);
transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
a {
color: var(--link);
&:hover {
color: var(--link-hover);
}
}
.title {
font-weight: 500;
color: var(--text-title);
}
.subtitle {
color: var(--text-subtitle);
}
.card {
background-color: var(--card-background);
box-shadow: 0 2px 15px 0 var(--card-shadow);
&:hover {
background-color: var(--card-background);
}
}
.message {
.message-body {
color: var(--text);
background-color: var(--card-background);
}
}
.footer {
background-color: var(--card-background);
box-shadow: 0 2px 15px 0 var(--card-shadow);
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.3rem;
margin-top: 1.2rem;
margin-bottom: 0.5rem;
.fas,
.fab,
.far {
font-size: 1.4rem;
margin-right: 10px;
}
h1 {
font-size: 2rem;
span {
font-weight: bold;
color: var(--highlight-secondary);
}
h2 {
font-size: 1.3rem;
margin-top: 1.2rem;
margin-bottom: 0.5rem;
.fas,
.fab,
.far {
font-size: 1.4rem;
margin-right: 10px;
}
span {
font-weight: bold;
color: var(--highlight-secondary);
}
}
[v-cloak] {
display: none;
}
#bighead {
color: var(--text-header);
.dashboard-title {
padding-top: 6px;
}
[v-cloak] {
display: none;
}
#bighead {
color: var(--text-header);
.dashboard-title {
padding-top: 6px;
.first-line {
min-height: 100px;
vertical-align: center;
background-color: var(--highlight-primary);
h1 {
margin-top: -12px;
font-size: 2rem;
}
.first-line {
min-height: 100px;
vertical-align: center;
background-color: var(--highlight-primary);
h1 {
margin-top: -12px;
font-size: 2rem;
}
.headline {
margin-top: 5px;
font-size: 0.9rem;
}
.container {
min-height: 80px;
padding: 10px 0;
}
.logo {
float: left;
i {
vertical-align: top;
padding: 8px 15px;
font-size: 50px;
}
img {
padding: 10px;
max-height: 70px;
max-width: 70px;
}
}
.headline {
margin-top: 5px;
font-size: 0.9rem;
}
.navbar {
background-color: var(--highlight-secondary);
a {
color: var(--text-header);
padding: 8px 12px;
&:hover,
&:focus {
color: var(--text-header);
background-color: var(--highlight-hover);
}
}
.navbar-menu {
background-color: inherit;
}
.container {
min-height: 80px;
padding: 10px 0;
}
.navbar-end {
text-align: right;
}
}
#main-section {
padding: 0 0 2.5rem 0;
h2 {
padding-bottom: 0px;
@include ellipsis();
.logo {
float: left;
i {
color: var(--highlight-primary);
vertical-align: top;
padding: 8px 15px;
font-size: 50px;
}
img {
padding: 10px;
max-height: 70px;
max-width: 70px;
}
}
.media.no-subtitle {
}
.navbar {
background-color: var(--highlight-secondary);
a {
color: var(--text-header);
padding: 8px 12px;
&:hover,
&:focus {
color: var(--text-header);
background-color: var(--highlight-hover);
}
}
.navbar-menu {
background-color: inherit;
}
}
.navbar-end {
text-align: right;
}
}
#main-section {
padding: 0 0 2.5rem 0;
h2 {
padding-bottom: 0px;
@include ellipsis();
i {
color: var(--highlight-primary);
}
}
.title {
font-size: 1.1em;
line-height: 1.2em;
font-weight: 500;
margin-bottom: 4px;
@include ellipsis();
}
.subtitle {
font-size: 0.9em;
font-weight: 300;
@include ellipsis();
}
.container {
padding: 1.2rem 0.75rem;
}
.message {
margin-top: 45px;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
.message-header {
font-weight: bold;
}
.message-body {
border: none;
}
}
.media.no-subtitle {
display: flex;
align-items: center;
}
@ -174,15 +208,14 @@
.media-left {
margin-inline-end: 0.5rem;
}
.media-content {
overflow: hidden;
text-overflow: inherit;
}
.tag {
color: var(--highlight-secondary);
background-color: var(--highlight-secondary);
color: #ffffff;
position: absolute;
bottom: 1rem;
right: -0.2rem;
@ -190,43 +223,46 @@
overflow: hidden;
transition: all 0.2s ease-out;
padding: 0;
&:not([class*="is-"]) {
background-color: var(--highlight-secondary);
}
.tag-text {
display: none;
}
}
.card {
border: 1px solid transparent;
border: none;
border-radius: 0.75rem;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
overflow: visible;
a {
outline: none;
}
}
.card:hover {
transform: translate(0, -3px);
.tag {
width: auto;
color: #ffffff;
padding: 0 0.75em;
.tag-text {
display: block;
}
}
}
.card-content {
height: 84px;
padding: 1.1rem;
height: 85px;
padding: 1.3rem;
}
.layout-vertical {
h2.group-title {
padding-bottom: 0.75rem;
@ -235,212 +271,98 @@
.card {
border-radius: 0;
}
.column div:first-of-type .card {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.column div:last-child .card {
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
}
}
.title {
font-size: 1.1em;
line-height: 1.2em;
font-weight: 500;
margin-bottom: 4px;
@include ellipsis();
}
.subtitle {
font-size: 0.9em;
font-weight: 300;
@include ellipsis();
}
.container {
padding: 1.2rem 0.75rem;
}
.message {
margin-top: 45px;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
.message-header {
font-weight: bold;
}
.message-body {
border: none;
}
}
}
.media.no-subtitle {
display: flex;
align-items: center;
}
.media-content {
overflow: hidden;
text-overflow: inherit;
}
.tag {
color: var(--highlight-secondary);
background-color: var(--highlight-secondary);
position: absolute;
bottom: 1rem;
right: -0.2rem;
width: 3px;
overflow: hidden;
transition: all 0.2s ease-out;
padding: 0;
.tag-text {
display: none;
}
}
.card {
border: none;
border-radius: 0.75rem;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
overflow: visible;
a {
outline: none;
}
}
.card:hover {
transform: translate(0, -3px);
.tag {
width: auto;
color: #ffffff;
padding: 0 0.75em;
.tag-text {
display: block;
}
}
}
.card-content {
height: 85px;
padding: 1.3rem;
}
.layout-vertical {
h2.group-title {
padding-bottom: 0.75rem;
}
.card {
border-radius: 0;
}
.column div:first-of-type .card {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.column div:last-child .card {
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
}
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 0.5rem;
text-align: left;
color: #676767;
font-size: 0.85rem;
transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
}
.no-footer {
#main-section {
padding-bottom: 0;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 0.5rem;
text-align: left;
color: #676767;
font-size: 0.85rem;
transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
}
.no-footer {
#main-section {
padding-bottom: 0;
}
.footer {
display: none;
}
}
.search-bar {
position: relative;
display: inline-block;
input {
border: none;
background-color: var(--highlight-hover);
border-radius: 5px;
margin-top: 2px;
padding: 2px 12px 2px 30px;
transition: all 100ms linear;
color: #ffffff;
height: 30px;
width: 100px;
&:focus {
color: #000000;
width: 250px;
background-color: #ffffff;
}
}
.search-label::before {
font-family: "Font Awesome 6 Free";
position: absolute;
top: 14px;
left: 16px;
content: "\f002";
font-weight: 900;
width: 20px;
height: 20px;
color: #ffffff;
}
&:focus-within .search-label::before {
color: #6e6e6e;
}
}
.offline-message {
text-align: center;
margin: 35px 0;
i {
font-size: 2rem;
}
i.fa-redo-alt {
font-size: 1.3rem;
line-height: 1rem;
vertical-align: middle;
cursor: pointer;
color: #3273dc;
}
display: none;
}
}
.group-subtitle {
.search-bar {
position: relative;
display: inline-block;
input {
border: none;
background-color: var(--highlight-hover);
border-radius: 5px;
margin-top: 2px;
padding: 2px 12px 2px 30px;
transition: all 100ms linear;
color: #ffffff;
height: 30px;
width: 100px;
&:focus {
color: #000000;
width: 250px;
background-color: #ffffff;
}
}
.search-label::before {
font-family: "Font Awesome 6 Free";
position: absolute;
top: 14px;
left: 16px;
content: "\f002";
font-weight: 900;
width: 20px;
height: 20px;
color: #ffffff;
}
&:focus-within .search-label::before {
color: #6e6e6e;
}
}
.group-logo {
float: left;
.offline-message {
text-align: center;
margin: 35px 0;
i {
font-size: 2rem;
}
i.fa-redo-alt {
font-size: 1.3rem;
line-height: 1rem;
vertical-align: middle;
cursor: pointer;
color: #3273dc;
}
}
}
.group-logo {
float: left;
}
}

27
src/assets/components/highlights.scss
View File

@ -1,37 +1,38 @@
.highlight-primary {
--highlight-color: var(--highlight-primary);
--highlight-color: var(--highlight-primary);
}
.highlight-green {
--highlight-color: var(--highlight-green);
--highlight-color: var(--highlight-green);
}
.highlight-orange {
--highlight-color: var(--highlight-orange);
--highlight-color: var(--highlight-orange);
}
.highlight-pink {
--highlight-color: var(--highlight-pink);
--highlight-color: var(--highlight-pink);
}
.highlight-purple {
--highlight-color: var(--highlight-purple);
--highlight-color: var(--highlight-purple);
}
.highlight-red {
--highlight-color: var(--highlight-red);
--highlight-color: var(--highlight-red);
}
.highlight-blue {
--highlight-color: var(--highlight-blue);
--highlight-color: var(--highlight-blue);
}
.highlight-inverted {
--highlight-color: var(--highlight-variant-inverted);
--highlight-color: var(--highlight-variant-inverted);
}
*[class^="highlight-"], *[class*=" highlight-"] {
i {
color: var(--highlight-color);
}
}
*[class^="highlight-"],
*[class*=" highlight-"] {
i {
color: var(--highlight-color);
}
}

2
src/assets/components/layers.scss
View File

@ -1 +1 @@
@layer framework, base, theme;
@layer framework, base, theme;

92
src/assets/components/status.scss
View File

@ -1,48 +1,52 @@
.status {
font-size: 0.8rem;
color: var(--text-title);
font-size: 0.8rem;
color: var(--text-title);
&.offline:before, &.error:before {
background-color: #d65c68;
box-shadow: 0 0 5px 1px #d65c68;
color: #d65c68;
&.offline:before,
&.error:before {
background-color: #d65c68;
box-shadow: 0 0 5px 1px #d65c68;
color: #d65c68;
}
&.pending:before {
background-color: #e8bb7d;
box-shadow: 0 0 5px 1px #e8bb7d;
}
&.online:before,
&.ready:before {
background-color: #94e185;
box-shadow: 0 0 5px 1px #94e185;
}
&.in-progress:before {
background-color: #8fe87d;
box-shadow: 0 0 5px 1px #8fe87d;
animation: pulse 1s alternate infinite;
}
@keyframes pulse {
0% {
background: rgba(255, 255, 255, 0.2);
box-shadow:
inset 0px 0px 10px 2px rgba(0, 255, 182, 0.3),
0px 0px 5px 2px rgba(0, 255, 135, 0.2);
}
&.pending:before {
background-color: #e8bb7d;
box-shadow: 0 0 5px 1px #e8bb7d;
100% {
background: rgba(255, 255, 255, 1);
box-shadow:
inset 0px 0px 10px 2px rgba(0, 255, 182, 0.5),
0px 0px 15px 2px rgba(0, 255, 135, 1);
}
&.online:before, &.ready:before {
background-color: #94e185;
box-shadow: 0 0 5px 1px #94e185;
}
&.in-progress:before {
background-color: #8fe87d;
box-shadow: 0 0 5px 1px #8fe87d;
animation: pulse 1s alternate infinite;
}
@keyframes pulse {
0% {
background: rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.3),
0px 0px 5px 2px rgba(0, 255, 135, 0.2);
}
100% {
background: rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.5),
0px 0px 15px 2px rgba(0, 255, 135, 1);
}
}
&:before {
content: " ";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 10px;
border-radius: 8px;
}
}
}
&:before {
content: " ";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 10px;
border-radius: 8px;
}
}

69
src/assets/themes/classic.scss
View File

@ -1,46 +1,45 @@
// Theme colors
.light {
--highlight-primary: #3367d6;
--highlight-secondary: #4285f4;
--highlight-hover: #5a95f5;
--background: #f5f5f5;
--card-background: #ffffff;
--text: #363636;
--text-header: #ffffff;
--text-title: #303030;
--text-subtitle: #424242;
--card-shadow: rgba(0, 0, 0, 0.1);
--link: #3273dc;
--link-hover: #363636;
--background-image: none;
--highlight-primary: #3367d6;
--highlight-secondary: #4285f4;
--highlight-hover: #5a95f5;
--background: #f5f5f5;
--card-background: #ffffff;
--text: #363636;
--text-header: #ffffff;
--text-title: #303030;
--text-subtitle: #424242;
--card-shadow: rgba(0, 0, 0, 0.1);
--link: #3273dc;
--link-hover: #363636;
--background-image: none;
--highlight-variant-inverted: #363636;
--highlight-variant-inverted: #363636;
}
.dark {
--highlight-primary: #3367d6;
--highlight-secondary: #4285f4;
--highlight-hover: #5a95f5;
--background: #131313;
--card-background: #282828;
--text: #eaeaea;
--text-header: #ffffff;
--text-title: #fafafa;
--text-subtitle: #b6b6b6;
--card-shadow: rgba(0, 0, 0, 0.4);
--link: #3273dc;
--link-hover: #144aa2;
--background-image: none;
--highlight-primary: #3367d6;
--highlight-secondary: #4285f4;
--highlight-hover: #5a95f5;
--background: #131313;
--card-background: #282828;
--text: #eaeaea;
--text-header: #ffffff;
--text-title: #fafafa;
--text-subtitle: #b6b6b6;
--card-shadow: rgba(0, 0, 0, 0.4);
--link: #3273dc;
--link-hover: #144aa2;
--background-image: none;
--highlight-variant-inverted: #f5f5f5;
--highlight-variant-inverted: #f5f5f5;
}
#app {
--highlight-blue: #444B6E;
--highlight-red: #C83E4D;
--highlight-pink: #FF6392;
--highlight-orange: #FF8A08;
--highlight-green: #22A699;
--highlight-purple: #711DB0;
--highlight-blue: #444b6e;
--highlight-red: #c83e4d;
--highlight-pink: #ff6392;
--highlight-orange: #ff8a08;
--highlight-green: #22a699;
--highlight-purple: #711db0;
}

183
src/assets/themes/neon.scss
View File

@ -1,114 +1,113 @@
// Theme colors
.theme-neon.light {
--highlight-primary: #B5FF57;
--highlight-secondary: #B5FF57;
--highlight-hover: #e7e4e4;
--background: #ffffff;
--card-background: #ffffff;
--text: #363636;
--text-header: #1F2229;
--text-title: #303030;
--text-subtitle: #424242;
--card-shadow: rgba(46, 39, 39, 0.1);
--link: #B5FF57;
--link-hover: #8cce36;
--background-image: none;
--highlight-primary: #b5ff57;
--highlight-secondary: #b5ff57;
--highlight-hover: #e7e4e4;
--background: #ffffff;
--card-background: #ffffff;
--text: #363636;
--text-header: #1f2229;
--text-title: #303030;
--text-subtitle: #424242;
--card-shadow: rgba(46, 39, 39, 0.1);
--link: #b5ff57;
--link-hover: #8cce36;
--background-image: none;
}
.theme-neon.dark {
--highlight-primary: #B5FF57;
--highlight-secondary: #B5FF57;
--highlight-hover: #1F2229;
--background: #14161A;
--card-background: #14161A;
--text: #eaeaea;
--text-header: #ffffff;
--text-title: #fafafa;
--text-subtitle: #768198;
--card-shadow: rgba(46, 39, 39, 0.1);
--link: #B5FF57;
--link-hover: #aeff45;
--background-image: none;
--highlight-primary: #b5ff57;
--highlight-secondary: #b5ff57;
--highlight-hover: #1f2229;
--background: #14161a;
--card-background: #14161a;
--text: #eaeaea;
--text-header: #ffffff;
--text-title: #fafafa;
--text-subtitle: #768198;
--card-shadow: rgba(46, 39, 39, 0.1);
--link: #b5ff57;
--link-hover: #aeff45;
--background-image: none;
}
// theme
// theme
.theme-neon {
--subtitle-color: #768198;
--border-radius: 0.75em;
--subtitle-color: #768198;
--border-radius: 0.75em;
.first-line {
padding-top: 25px;
margin-bottom: 5px;
background-color: transparent;
.first-line {
padding-top: 25px;
margin-bottom: 5px;
background-color: transparent;
.headline {
color: var(--subtitle-color);
font-size: 1em;
}
h1 {
font-size: 2.5em;
font-weight: bold;
}
.dashboard-title::after {
content: "";
position: absolute;
bottom: -4px;
width: 4em;
height: .25rem;
background-color: var(--highlight-primary);
border-radius: 2px;
}
.headline {
color: var(--subtitle-color);
font-size: 1em;
}
.navbar {
background-color: transparent;
h1 {
font-size: 2.5em;
font-weight: bold;
}
#bighead {
.logo {
display: none;
}
.navbar a {
color: var(--text);
&:hover {
color: var(--text-header);
border-radius: var(--border-radius);
background-color: transparent;
}
}
.dashboard-title::after {
content: "";
position: absolute;
bottom: -4px;
width: 4em;
height: 0.25rem;
background-color: var(--highlight-primary);
border-radius: 2px;
}
}
*[class^="highlight-"], *[class*=" highlight-"] {
.card:hover {
border: 1px solid var(--highlight-color);
}
.navbar {
background-color: transparent;
}
#bighead {
.logo {
display: none;
}
.navbar a {
color: var(--text);
.tag {
color: var(--highlight-variant-inverted);
}
.card {
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
border: 1px solid hsl(221,14%,24%);
&:hover {
color: var(--text-header);
border-radius: var(--border-radius);
.message {
border: 1px solid hsl(221,14%,24%);
border-radius: var(--border-radius);
}
}
.layout-vertical .card {
margin-bottom: 0.75em;
}
.message-body {
background-color: transparent;
}
}
}
}
*[class^="highlight-"],
*[class*=" highlight-"] {
.card:hover {
border: 1px solid var(--highlight-color);
}
}
.tag {
color: var(--highlight-variant-inverted);
}
.card {
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
border: 1px solid hsl(221, 14%, 24%);
border-radius: var(--border-radius);
.message {
border: 1px solid hsl(221, 14%, 24%);
border-radius: var(--border-radius);
}
}
.layout-vertical .card {
margin-bottom: 0.75em;
}
.message-body {
background-color: transparent;
}
}

134
src/assets/themes/walkxcode.scss
View File

@ -1,83 +1,85 @@
// Theme colors
.theme-walkxcode.light {
--highlight-primary: #111111;
--highlight-secondary: #fff5f2;
--highlight-hover: #bebebe;
--background: #fff5f2;
--card-background: rgba(255, 245, 242, 0.8);
--text: #000000;
--text-header: #000000;
--text-title: #000000;
--text-subtitle: #111111;
--card-shadow: rgba(0, 0, 0, 0.5)
--link: #3273dc;
--link-hover: #2e4053;
--background-image: url("assets/themes/walkxcode/wallpaper-light.webp");
--highlight-primary: #111111;
--highlight-secondary: #fff5f2;
--highlight-hover: #bebebe;
--background: #fff5f2;
--card-background: rgba(255, 245, 242, 0.8);
--text: #000000;
--text-header: #000000;
--text-title: #000000;
--text-subtitle: #111111;
--card-shadow: rgba(0, 0, 0, 0.5);
--link: #3273dc;
--link-hover: #2e4053;
--background-image: url("assets/themes/walkxcode/wallpaper-light.webp");
}
.theme-walkxcode.dark {
--highlight-primary: #3367d6;
--highlight-secondary: #4285f4;
--highlight-hover: #1F2347;
--background: #12152B;
--card-background: rgba(24, 28, 58, 0.8);
--text: #eaeaea;
--text-header: #fafafa;
--text-title: #fafafa;
--text-subtitle: #8B8D9C;
--card-shadow: rgba(0, 0, 0, 0.5);
--link: #ffffff;
--link-hover: #fafafa;
--background-image: url("assets/themes/walkxcode/wallpaper.webp");
--highlight-primary: #3367d6;
--highlight-secondary: #4285f4;
--highlight-hover: #1f2347;
--background: #12152b;
--card-background: rgba(24, 28, 58, 0.8);
--text: #eaeaea;
--text-header: #fafafa;
--text-title: #fafafa;
--text-subtitle: #8b8d9c;
--card-shadow: rgba(0, 0, 0, 0.5);
--link: #ffffff;
--link-hover: #fafafa;
--background-image: url("assets/themes/walkxcode/wallpaper.webp");
}
// theme
// theme
.theme-walkxcode {
--border-radius: 1rem;
--border-radius: 1rem;
#bighead {
.first-line, .navbar, .navbar a:focus, .navbar a:hover {
background-color: rgba(0, 0, 0, 0);
}
.search-bar input {
opacity: 20%;
}
#bighead {
.first-line,
.navbar,
.navbar a:focus,
.navbar a:hover {
background-color: rgba(0, 0, 0, 0);
}
.search-bar input {
opacity: 20%;
}
}
.group-title {
font-weight: 800;
}
.titles {
font-weight: 700;
}
.subtitle {
font-weight: 500;
}
.group-title {
font-weight: 800;
}
.titles {
font-weight: 700;
}
.subtitle {
font-weight: 500;
}
.card {
border-radius: var(--border-radius);
}
.layout-vertical {
.card {
border-radius: var(--border-radius);
border-radius: 0;
}
.layout-vertical {
.card {
border-radius: 0;
}
.column div:first-of-type .card {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.column div:last-child .card {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.column div:first-of-type .card {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.tag {
color: var(--highlight-variant-inverted);
.column div:last-child .card {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
}
}
.tag {
color: var(--highlight-variant-inverted);
}
}

9
src/components/ConnectivityChecker.vue
View File

@ -1,10 +1,13 @@
<template>
<div v-if="offline" class="offline-message">
<i class="far fa-dizzy"></i>
<div v-if="offline" class="offline-message mb-4">
<i class="fa-solid fa-triangle-exclamation"></i>
<h1>
You're offline, friend.
Network unreachable
<span @click="checkOffline"> <i class="fas fa-redo-alt"></i></span>
</h1>
<p>
<a href="https://github.com/bastienwirtz/homer/blob/main/docs/configuration.md#connectivity-checks">More information →</a>
</p>
</div>
</template>

3
src/components/DarkMode.vue
View File

@ -1,8 +1,8 @@
<template>
<a
@click="toggleTheme()"
aria-label="Toggle dark mode"
class="navbar-item is-inline-block-mobile"
@click="toggleTheme()"
>
<i
:class="`${faClasses[mode]}`"
@ -18,6 +18,7 @@ export default {
props: {
defaultValue: String,
},
emits: ['updated'],
data: function () {
return {
isDark: null,

12
src/components/GetStarted.vue
View File

@ -1,15 +1,15 @@
<template>
<article>
<div class="m-6 has-text-centered py-6">
<p class="is-size-5 mb-0">No configured service found!</p>
<p>Check out the documentation to start building your Homer dashboard.</p>
<div class="m-6 has-text-centered py-6 title">
<p class="is-size-5 mb-2">No configuration found!</p>
<p>Check out the documentation to start building your dashboard.</p>
<p>
<a
class="button is-primary mt-5 has-text-weight-bold"
href="https://github.com/bastienwirtz/homer/blob/main/docs/configuration.md#configuration"
target="_blank"
>
Get started
Get started →
</a>
</p>
</div>
@ -23,10 +23,6 @@ export default {
</script>
<style lang="scss" scoped>
p {
color: #4a4a4a;
}
body #app a {
font-weight: 900;
color: #ffffff;

22
src/components/Message.vue
View File

@ -25,11 +25,6 @@ export default {
message: {},
};
},
created: async function () {
// Look for a new message if an endpoint is provided.
this.message = Object.assign({}, this.item);
await this.getMessage();
},
computed: {
show: function () {
return this.message.title || this.message.content;
@ -40,6 +35,11 @@ export default {
this.message = Object.assign({}, item);
},
},
created: async function () {
// Look for a new message if an endpoint is provided.
this.message = Object.assign({}, this.item);
await this.getMessage();
},
methods: {
getMessage: async function () {
if (!this.item) {
@ -67,12 +67,14 @@ export default {
},
downloadMessage: function (url) {
return fetch(url).then(function (response) {
if (response.status != 200) {
return;
return fetch(url, { headers: { Accept: "application/json" } }).then(
function (response) {
if (response.status != 200) {
return;
}
return response.json();
}
return response.json();
});
);
},
mapRemoteMessage: function (message) {

7
src/components/Navbar.vue
View File

@ -9,7 +9,7 @@
aria-expanded="false"
class="navbar-burger"
:class="{ 'is-active': showMenu }"
v-on:click="$emit('navbar-toggle')"
@click="$emit('navbar-toggle')"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
@ -19,10 +19,10 @@
<div class="navbar-menu" :class="{ 'is-active': showMenu }">
<div class="navbar-start">
<a
class="navbar-item"
rel="noreferrer"
v-for="(link, key) in links"
:key="key"
class="navbar-item"
rel="noreferrer"
:href="link.url"
:target="link.target"
>
@ -52,6 +52,7 @@ export default {
},
links: Array,
},
emits: ['navbar-toggle'],
computed: {
showMenu: function () {
return this.open && this.isSmallScreen();

9
src/components/SearchInput.vue
View File

@ -4,9 +4,9 @@
<label for="search" class="search-label"></label>
<input
id="search"
ref="search"
name="search"
type="search"
ref="search"
:value="value"
@input.stop="search($event.target.value)"
@keydown.enter.exact.prevent="open()"
@ -26,6 +26,7 @@ export default {
default: "/",
},
},
emits: ["search-open", "search-focus", "search-cancel", "input"],
mounted() {
this._keyListener = function (event) {
if (event.key === this.hotkey) {
@ -46,6 +47,9 @@ export default {
this.focus();
}
},
beforeUnmount() {
document.removeEventListener("keydown", this._keyListener);
},
methods: {
open: function (target = null) {
if (!this.$refs.search.value) {
@ -79,9 +83,6 @@ export default {
this.$emit("input", value.toLowerCase());
},
},
beforeUnmount() {
document.removeEventListener("keydown", this._keyListener);
},
};
</script>

3
src/components/SettingToggle.vue
View File

@ -1,7 +1,7 @@
<template>
<a
@click.prevent="toggleSetting()"
class="navbar-item is-inline-block-mobile"
@click.prevent="toggleSetting()"
>
<span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span>
<slot></slot>
@ -17,6 +17,7 @@ export default {
iconAlt: String,
defaultValue: Boolean,
},
emits: ["updated"],
data: function () {
return {
secondaryIcon: null,

6
src/components/services/AdGuardHome.vue
View File

@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
export default {
name: "AdGuardHome",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
status: null,

6
src/components/services/CopyToClipboard.vue
View File

@ -19,13 +19,13 @@ import Generic from "./Generic.vue";
export default {
name: "CopyToClipboard",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
animate: false,
}),

6
src/components/services/Emby.vue
View File

@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
export default {
name: "Emby",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
status: "",
albumCount: 0,

107
src/components/services/FreshRSS.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<Generic :item="item">
<template #indicator>
<div class="notifs">
<strong v-if="subscriptions > 0" class="notif subscriptions" title="Subscriptions">
{{ subscriptions }}
</strong>
<strong v-if="unread > 0" class="notif unread" title="Unread">
{{ unread }}
</strong>
<strong
v-if="serverError" class="notif errors"
title="Connection error to the FreshRSS API, check url username and password in config.yml">?</strong>
</div>
</template>
</Generic>
</template>
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "FreshRSS",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
data: () => {
return {
subscriptions: 0,
unread: 0,
serverError: false,
};
},
created: function () {
const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
if (updateInterval > 0)
setInterval(() => this.fetchConfig(), updateInterval);
this.fetchConfig();
},
methods: {
fetchConfig: async function () {
if (!this.auth) {
const match = await this.fetch(`/api/greader.php/accounts/ClientLogin?Email=${this.item.username}&Passwd=${this.item.password}`, { method: 'GET', cache: "no-cache" }, false)
.then(response => { return response.text(); })
.then(body => { return body.match(/Auth=(([([a-z0-9]+)\/([([a-z0-9]+))/i); });
if (match !== null)
this.auth = match[1];
}
const headers = {
"Authorization": `GoogleLogin auth=${this.auth}`,
};
this.fetch(`/api/greader.php/reader/api/0/subscription/list?output=json`, { headers })
.then((subscription) => {
this.subscriptions = subscription.subscriptions.length;
})
.catch((e) => {
console.error(e);
this.serverError = true;
});
this.fetch(`/api/greader.php/reader/api/0/unread-count?output=json`, { headers })
.then((unreadcount) => {
this.unread = unreadcount.max;
})
.catch((e) => {
console.error(e);
this.serverError = true;
});
},
},
};
</script>
<style scoped lang="scss">
.notifs {
position: absolute;
color: white;
font-family: sans-serif;
top: 0.3em;
right: 0.5em;
.notif {
display: inline-block;
padding: 0.2em 0.35em;
border-radius: 0.25em;
position: relative;
margin-left: 0.3em;
font-size: 0.8em;
&.subscriptions {
background-color: #4fb5d6;
}
&.unread {
background-color: #d08d2e;
}
}
}
</style>

4
src/components/services/Generic.vue
View File

@ -19,14 +19,14 @@
<div class="media-content">
<slot name="content">
<p class="title">{{ item.name }}</p>
<p class="subtitle" v-if="item.subtitle">
<p v-if="item.subtitle" class="subtitle">
{{ item.subtitle }}
</p>
</slot>
</div>
<slot name="indicator" class="indicator"></slot>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<div v-if="item.tag" class="tag" :class="item.tagstyle">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>

89
src/components/services/Gitea.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<Generic :item="item">
<template #content>
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="versionstring">
Version {{ versionstring }}
</template>
</p>
</template>
<template #indicator>
<div v-if="status" class="status" :class="status">
{{ status }}
</div>
</template>
</Generic>
</template>
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Gitea",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
data: () => ({
fetchOk: null,
versionstring: null,
}),
computed: {
status: function () {
return this.fetchOk ? "online" : "offline";
},
},
created() {
this.fetchStatus();
},
methods: {
fetchStatus: async function () {
this.fetch("/swagger.v1.json")
.then((response) => {
this.fetchOk = true;
this.versionstring = response.info.version;
})
.catch((e) => {
this.fetchOk = false;
console.log(e);
});
},
},
};
</script>
<style scoped lang="scss">
.status {
font-size: 0.8rem;
color: var(--text-title);
white-space: nowrap;
margin-left: 0.25rem;
&.online:before {
background-color: #94e185;
border-color: #78d965;
box-shadow: 0 0 5px 1px #94e185;
}
&.offline:before {
background-color: #c9404d;
border-color: #c42c3b;
box-shadow: 0 0 5px 1px #c9404d;
}
&:before {
content: " ";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 10px;
border: 1px solid #000;
border-radius: 7px;
}
}
</style>

78
src/components/services/Glances.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<Generic :item="item">
<template #content>
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-for="(statItem, index) in item.stats" :key="statItem">
<span v-if="stats[statItem]" :title="stats[statItem].label">
<i :class="stats[statItem].icon"></i> {{ stats[statItem].value }} {{ stats[statItem].unit }}
<span v-if="index != item.stats.length-1"> / </span>
</span>
</template>
</p>
</template>
</Generic>
</template>
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Glances",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
data: () => ({
stats: [],
error: null,
}),
created() {
const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
if (updateInterval > 0) {
setInterval(() => this.fetchStat(), updateInterval);
}
this.fetchStat();
},
methods: {
fetchStat: async function () {
this.fetch(`/api/4/quicklook`)
.then((response) => {
this.stats["load"] = {
value: response.load,
label: "System load",
icon: "fa-solid fa-bolt",
unit: "%",
}
this.stats["cpu"] = {
value: response.cpu,
label: `CPU usage (${response.cpu_name})`,
icon: "fa-solid fa-microchip",
unit: "%",
}
this.stats["mem"] = {
value: response.mem,
label: `RAM usage`,
icon: "fa-solid fa-memory",
unit: "%",
}
this.stats["swap"] = {
value: response.swap,
label: `Swap usage`,
icon: "fa-solid fa-file-arrow-down",
unit: "%",
}
})
.catch((e) => {
console.log(e);
this.error = "Unable to get metrics";
});
},
},
};
</script>

105
src/components/services/Gotify.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<Generic :item="item">
<template #content>
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="messages > 0">
<template v-if="messages > 100">100+</template>
<template v-else>{{ messages }}</template>
<template v-if="messages === 1"> message</template>
<template v-else> messages</template>
</template>
</p>
</template>
<template #indicator>
<div v-if="status" class="status" :class="status"></div>
</template>
</Generic>
</template>
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Gotify",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
data: () => ({
health: {},
messages: 0,
}),
computed: {
status: function () {
const statuses = [this.health.health, this.health.database];
if (statuses.includes("red")) {
return "red";
} else if (statuses.includes("orange")) {
return "orange";
}
return "green";
}
},
created() {
this.fetchStatus();
this.fetchMessages();
},
methods: {
fetchStatus: async function () {
await this.fetch(`/health`)
.catch((e) => console.log(e))
.then((resp) => this.health = resp);
},
fetchMessages: async function () {
const headers = {
"X-Gotify-Key": this.item.apikey,
};
await this.fetch(`/message?limit=100`, { headers })
.catch((e) => console.log(e))
.then((resp) => this.messages = resp.messages.length);
},
},
};
</script>
<style scoped lang="scss">
.status {
font-size: 0.8rem;
color: var(--text-title);
&.green:before {
background-color: #94e185;
border-color: #78d965;
box-shadow: 0 0 5px 1px #94e185;
}
&.orange:before {
background-color: #ee863e;
border-color: #e77322;
box-shadow: 0 0 5px 1px #ee863e;
}
&.red:before {
background-color: #c9404d;
border-color: #c42c3b;
box-shadow: 0 0 5px 1px #c9404d;
}
&:before {
content: " ";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 10px;
border: 1px solid #000;
border-radius: 7px;
}
}
</style>

6
src/components/services/Healthchecks.vue
View File

@ -22,13 +22,13 @@ import Generic from "./Generic.vue";
export default {
name: "Healthchecks",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
api: null,
}),

6
src/components/services/HomeAssistant.vue
View File

@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
export default {
name: "HomeAssistant",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
status: "",
version: "",

22
src/components/services/Immich.vue
View File

@ -31,13 +31,13 @@ import Generic from "./Generic.vue";
export default {
name: "Immich",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
users: null,
@ -47,13 +47,6 @@ export default {
serverError: false,
};
},
created: function () {
const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
if (updateInterval > 0) {
setInterval(() => this.fetchConfig(), updateInterval);
}
this.fetchConfig();
},
computed: {
humanizeSize: function () {
let bytes = this.usage;
@ -72,13 +65,20 @@ export default {
return bytes.toFixed(2) + " " + units[u];
},
},
created: function () {
const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
if (updateInterval > 0) {
setInterval(() => this.fetchConfig(), updateInterval);
}
this.fetchConfig();
},
methods: {
fetchConfig: function () {
const headers = {
"x-api-key": this.item.apikey,
};
this.fetch(`/api/server-info/statistics`, { headers })
this.fetch(`/api/server/statistics`, { headers })
.then((stats) => {
this.photos = stats.photos;
this.videos = stats.videos;

6
src/components/services/Jellystat.vue
View File

@ -24,13 +24,13 @@ import Generic from "./Generic.vue";
export default {
name: "Jellyfin",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
stats: null,
error: false,

6
src/components/services/Lidarr.vue
View File

@ -31,13 +31,13 @@ import Generic from "./Generic.vue";
export default {
name: "Lidarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
activity: null,

32
src/components/services/Mealie.vue
View File

@ -6,9 +6,11 @@
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else-if="meal"> Today: {{ meal.name }} </template>
<template v-else-if="stats">
happily keeping {{ stats.totalRecipes }} recipes organized
<template v-else-if="mealtext">
{{ mealtext }}
</template>
<template v-else-if="statsText">
{{ statsText }}
</template>
</p>
</template>
@ -21,17 +23,31 @@ import Generic from "./Generic.vue";
export default {
name: "Mealie",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
stats: null,
meal: null,
}),
computed: {
mealtext: function () {
if (this.meal && this.meal.length > 0) {
return `Today: ${this.meal[0].recipe.name}`;
}
return null;
},
statsText: function () {
if (this.stats) {
return `Happily keeping ${this.stats.totalRecipes} recipes organized`;
}
return null;
}
},
created() {
this.fetchStatus();
},
@ -44,10 +60,10 @@ export default {
if (this.item.subtitle != null) return;
this.meal = await this.fetch("/api/meal-plans/today/", { headers }).catch(
this.meal = await this.fetch("/api/groups/mealplans/today", { headers }).catch(
(e) => console.log(e),
);
this.stats = await this.fetch("/api/debug/statistics/", {
this.stats = await this.fetch("/api/admin/about/statistics", {
headers,
}).catch((e) => console.log(e));
},

6
src/components/services/Medusa.vue
View File

@ -37,13 +37,13 @@ import Generic from "./Generic.vue";
export default {
name: "Medusa",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
config: null,

6
src/components/services/Mylar.vue
View File

@ -26,13 +26,13 @@ import Generic from "./Generic.vue";
export default {
name: "Mylar",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
upcoming: null,

100
src/components/services/Nextcloud.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<Generic :item="item">
<template #content>
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="versionstring">
Version {{ versionstring }}
</template>
</p>
</template>
<template #indicator>
<div v-if="status" class="status" :class="status">
{{ status }}
</div>
</template>
</Generic>
</template>
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Nextcloud",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
data: () => ({
fetchOk: null,
versionstring: null,
maintenance: null,
}),
computed: {
status: function () {
if (!this.fetchOk) {
return "offline";
}
return this.maintenance ? "maintenance" : "online";
},
},
created() {
this.fetchStatus();
},
methods: {
fetchStatus: async function () {
this.fetch("/status.php")
.then((response) => {
this.fetchOk = true;
this.versionstring = response.versionstring;
this.maintenance = response.maintenance;
})
.catch((e) => {
this.fetchOk = false;
console.log(e);
});
},
},
};
</script>
<style scoped lang="scss">
.status {
font-size: 0.8rem;
color: var(--text-title);
white-space: nowrap;
margin-left: 0.25rem;
&.online:before {
background-color: #94e185;
border-color: #78d965;
box-shadow: 0 0 5px 1px #94e185;
}
&.maintenance:before {
background-color: #f8a306;
border-color: #e1b35e;
box-shadow: 0 0 5px 1px #f8a306;
}
&.offline:before {
background-color: #c9404d;
border-color: #c42c3b;
box-shadow: 0 0 5px 1px #c9404d;
}
&:before {
content: " ";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 10px;
border: 1px solid #000;
border-radius: 7px;
}
}
</style>

39
src/components/services/OctoPrint.vue
View File

@ -12,9 +12,9 @@
<i class="fa-solid fa-gear mr-1"></i>
<b v-if="completion">{{ completion.toFixed() }}%</b>
<span class="separator mx-1"> | </span>
<span v-if="printTime" :title="`${toTime(printTimeLeft)} left`">
<span v-if="printTime" :title="`${formatTime(printTimeLeft)} left`">
<i class="fa-solid fa-stopwatch mr-1"></i>
{{ toTime(printTime) }}
{{ formatTime(printTime) }}
</span>
</template>
<template v-if="!error && display == 'text' && statusClass == 'ready'">
@ -33,8 +33,8 @@
class="progress is-primary"
:value="completion"
max="100"
:title="`${state} - ${completion.toFixed()}%, ${toTime(
printTimeLeft,
:title="`${state} - ${completion.toFixed()}%, ${formatTime(
printTimeLeft
)} left`"
>
{{ completion }}%
@ -55,13 +55,13 @@ import Generic from "./Generic.vue";
export default {
name: "OctoPrint",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
printTime: null,
printTimeLeft: null,
@ -115,9 +115,28 @@ export default {
console.error(e);
}
},
toTime: function (timastamp) {
return new Date(timastamp * 1000).toTimeString().substring(0, 5);
},
formatTime: function (seconds) {
const days = Math.floor(seconds / 86400);
let remainingSeconds = seconds % 86400;
const hours = Math.floor(remainingSeconds / 3600);
remainingSeconds %= 3600;
const minutes = Math.floor(remainingSeconds / 60);
const secs = remainingSeconds % 60;
const formattedHrs = hours.toString().padStart(2, '0')
const formattedMins = minutes.toString().padStart(2, '0')
const formattedSecs = secs.toString().padStart(2, '0')
if (days > 0) {
return `${days}d ${formattedHrs}h ${formattedMins}m`;
} else if (hours > 0) {
return `${formattedHrs}h ${formattedMins}m ${formattedSecs}s`;
} else if (minutes > 0) {
return `${formattedMins}m ${formattedSecs}s`;
} else {
return `${secs} seconds`;
}
}
},
};
</script>

6
src/components/services/OpenHAB.vue
View File

@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
export default {
name: "OpenHAB",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
status: "",
things: {

2
src/components/services/OpenWeather.vue
View File

@ -32,7 +32,7 @@
</div>
</div>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<div v-if="item.tag" class="tag" :class="item.tagstyle">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>

6
src/components/services/PaperlessNG.vue
View File

@ -20,13 +20,13 @@ import Generic from "./Generic.vue";
export default {
name: "Paperless",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
api: null,
}),

87
src/components/services/PeaNUT.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<Generic :item="item">
<template #content>
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else-if="load">
{{ load }}&percnt; UPS Load
</template>
</p>
</template>
<template #indicator>
<div v-if="ups_status" class="status" :class="status_class">
{{ status_text }}
</div>
</template>
</Generic>
</template>
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "PeaNUT",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
data: () => ({
ups_status: "",
ups_load: 0,
}),
computed: {
status_text: function () {
switch (this.ups_status) {
case "OL":
return "online";
case "OB":
return "on battery"
case "LB":
return "low battery";
default:
return "unknown";
}
},
status_class: function () {
switch (this.ups_status) {
case "OL":
return "online";
case "OB": // On battery
return "pending"
case "LB": // Low battery
return "offline";
default:
return "unknown";
}
},
load: function () {
if (this.ups_load) {
return this.ups_load.toFixed(1);
}
return "";
},
},
created() {
this.fetchStatus();
},
methods: {
fetchStatus: async function () {
const device = this.item.device || '';
const result = await this.fetch(`/api/v1/devices/${device}`).catch((e) =>
console.log(e),
);
this.ups_status = result["ups.status"] || "";
this.ups_load = result["ups.load"] || 0;
},
},
};
</script>

6
src/components/services/PiAlert.vue
View File

@ -31,13 +31,13 @@ import Generic from "./Generic.vue";
export default {
name: "PiAlert",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
total: 0,

6
src/components/services/PiHole.vue
View File

@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
export default {
name: "PiHole",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
status: "",
ads_percentage_today: 0,

40
src/components/services/Ping.vue
View File

@ -5,6 +5,17 @@
{{ status }}
</div>
</template>
<template #content>
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else>
{{ rttLabel }}
</template>
</p>
</template>
</Generic>
</template>
@ -14,16 +25,25 @@ import Generic from "./Generic.vue";
export default {
name: "Ping",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
status: null,
rtt: null,
}),
computed: {
rttLabel: function () {
if (this.status === 'online') {
return `${this.rtt}ms`;
}
return "unavailable";
}
},
created() {
this.fetchStatus();
},
@ -39,12 +59,23 @@ export default {
return;
}
this.fetch("/", { method, cache: "no-cache" }, false)
const startTime = performance.now();
const timeout = parseInt(this.item.timeout, 10) || 2000;
const params = {
method,
cache: "no-cache",
signal: AbortSignal.timeout(timeout)
};
this.fetch("/", params, false)
.then(() => {
this.status = "online";
const endTime = performance.now();
this.rtt = Math.round(endTime - startTime);
})
.catch(() => {
this.status = "offline";
this.rtt = null; // Reset rtt on failure
});
},
},
@ -81,3 +112,4 @@ export default {
}
}
</style>

6
src/components/services/Portainer.vue
View File

@ -26,13 +26,13 @@ import Generic from "./Generic.vue";
export default {
name: "Portainer",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
endpoints: null,
containers: null,

6
src/components/services/Prometheus.vue
View File

@ -29,13 +29,13 @@ const AlertsStatus = Object.freeze({
export default {
name: "Prometheus",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
api: {
status: "",

6
src/components/services/Prowlarr.vue
View File

@ -26,13 +26,13 @@ import Generic from "./Generic.vue";
export default {
name: "Prowlarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
warnings: null,

6
src/components/services/Proxmox.vue
View File

@ -80,13 +80,13 @@ import Generic from "./Generic.vue";
export default {
name: "Proxmox",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
vms: {
total: 0,

38
src/components/services/Radarr.vue
View File

@ -34,13 +34,13 @@ const LEGACY_API = "/api";
export default {
name: "Radarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
activity: null,
@ -50,14 +50,14 @@ export default {
serverError: false,
};
},
created: function () {
this.fetchConfig();
},
computed: {
apiPath() {
return this.item.legacyApi ? LEGACY_API : V3_API;
},
},
created: function () {
this.fetchConfig();
},
methods: {
fetchConfig: function () {
const handleError = (e) => {
@ -77,6 +77,19 @@ export default {
}
})
.catch(handleError);
if (!this.item.legacyApi) {
this.fetch(`${this.apiPath}/queue/details?apikey=${this.item.apikey}`)
.then((queue) => {
for (var i = 0; i < queue.length; i++) {
if (queue[i].trackedDownloadStatus == "warning") {
this.warnings++;
} else if (queue[i].trackedDownloadStaus == "error") {
this.errors++;
}
}
})
.catch(handleError);
}
this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
.then((queue) => {
this.activity = 0;
@ -93,11 +106,14 @@ export default {
})
.catch(handleError);
if (!this.item.legacyApi) {
this.fetch(`${this.apiPath}/movie?apikey=${this.item.apikey}`)
.then((movies) => {
this.missing = movies.filter(
(m) => m.monitored && !m.hasFile
).length;
this.fetch(`${this.apiPath}/wanted/missing?pageSize=1&apikey=${this.item.apikey}`)
.then((overview) => {
this.fetch(`${this.apiPath}/wanted/missing?pageSize=${overview.totalRecords}&apikey=${this.item.apikey}`)
.then((movies) => {
this.missing = movies.records.filter(
(m) => m.monitored && m.isAvailable && !m.hasFile
).length;
})
})
.catch(handleError);
}

6
src/components/services/Readarr.vue
View File

@ -33,13 +33,13 @@ const API = "/api/v1";
export default {
name: "Readarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
activity: null,

4
src/components/services/Rtorrent.vue
View File

@ -47,9 +47,9 @@ const displayRate = (rate) => {
};
export default {
name: "rTorrent",
props: { item: Object },
name: "RTorrent",
components: { Generic },
props: { item: Object },
// Properties for download, upload, torrent count and errors.
data: () => ({ dl: null, ul: null, count: null, error: null }),
// Computed properties for the rate labels.

6
src/components/services/SABnzbd.vue
View File

@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
export default {
name: "SABnzbd",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
stats: null,
error: false,

98
src/components/services/Scrutiny.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<Generic :item="item">
<template #indicator>
<div class="notifs">
<strong v-if="passed > 0" class="notif passed" title="Passed">
{{ passed }}
</strong>
<strong v-if="failed > 0" class="notif failed" title="Failed">
{{ failed }}
</strong>
<strong v-if="unknown > 0" class="notif unknown" title="Unknown">
{{ unknown }}
</strong>
<strong
v-if="serverError"
class="notif errors"
title="Connection error to Scrutiny API, check your url in config.yml"
>?</strong
>
</div>
</template>
</Generic>
</template>
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Scrutiny",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
data: () => {
return {
passed: null,
failed: null,
unknown: null,
serverError: false,
};
},
created: function () {
const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
if (updateInterval > 0) {
setInterval(() => this.fetchSummary(), updateInterval);
}
this.fetchSummary();
},
methods: {
fetchSummary: function () {
this.fetch(`/api/summary`)
.then((scrutinyData) => {
const devices = Object.values(scrutinyData.data.summary);
this.passed = devices.filter(device => device.device.device_status === 0)?.length || 0;
this.failed = devices.filter(device => device.device.device_status > 0 && device.device.device_status <= 3)?.length || 0;
this.unknown = devices.length - (this.passed + this.failed) || 0;
})
.catch((e) => {
console.error(e);
this.serverError = true;
});
},
},
};
</script>
<style scoped lang="scss">
.notifs {
position: absolute;
color: white;
font-family: sans-serif;
top: 0.3em;
right: 0.5em;
.notif {
display: inline-block;
padding: 0.2em 0.35em;
border-radius: 0.25em;
position: relative;
margin-left: 0.3em;
font-size: 0.8em;
&.passed {
background-color: green;
}
&.failed {
background-color: #e51111;
}
&.unknown {
background-color: #d08d2e;
}
}
}
</style>

16
src/components/services/Sonarr.vue
View File

@ -35,17 +35,12 @@ const LEGACY_API = "/api";
export default {
name: "Sonarr",
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
computed: {
apiPath() {
return this.item.legacyApi ? LEGACY_API : V3_API;
},
mixins: [service],
props: {
item: Object,
},
data: () => {
return {
@ -56,6 +51,11 @@ export default {
serverError: false,
};
},
computed: {
apiPath() {
return this.item.legacyApi ? LEGACY_API : V3_API;
},
},
created: function () {
this.fetchConfig();
},

6
src/components/services/SpeedtestTracker.vue
View File

@ -19,13 +19,13 @@ import Generic from "./Generic.vue";
export default {
name: "SpeedtestTracker",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
speedtest: null,
}),

6
src/components/services/Tautulli.vue
View File

@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
export default {
name: "Tautulli",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
stats: null,
error: false,

6
src/components/services/Tdarr.vue
View File

@ -32,13 +32,13 @@ import Generic from "./Generic.vue";
export default {
name: "Tdarr",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
stats: null,
error: false,

6
src/components/services/ThemeChooser.vue
View File

@ -27,12 +27,12 @@ const app = document.getElementById("app");
export default {
name: "ThemeChooser",
props: {
item: Object,
},
components: {
Generic,
},
props: {
item: Object,
},
data: () => {
return {
theme: null,

6
src/components/services/UptimeKuma.vue
View File

@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
export default {
name: "UptimeKuma",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => ({
incident: null,
heartbeat: null,

6
src/components/services/WUD.vue
View File

@ -26,13 +26,13 @@ import Generic from "./Generic.vue";
export default {
name: "WUD",
components: {
Generic,
},
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
running: null,

4
src/components/services/qBittorrent.vue
View File

@ -49,10 +49,10 @@ const displayRate = (rate) => {
};
export default {
name: "qBittorrent",
name: "QBittorrent",
components: { Generic },
mixins: [service],
props: { item: Object },
components: { Generic },
data: () => ({ dl: null, ul: null, count: null, error: null }),
computed: {
downRate: function () {

18
src/mixins/service.js
View File

@ -19,12 +19,21 @@ export default {
options.credentials = "include";
}
if (this.proxy?.headers && !!this.proxy.headers) {
options.headers = this.proxy.headers;
}
// Each item can override the credential settings
if (this.item.useCredentials !== undefined) {
options.credentials =
this.item.useCredentials === true ? "include" : "omit";
}
// Each item can have their own headers
if (this.item.headers !== undefined && !!this.item.headers) {
options.headers = this.item.headers;
}
options = Object.assign(options, init);
if (path.startsWith("/")) {
@ -38,8 +47,13 @@ export default {
}
return fetch(url, options).then((response) => {
if (!response.ok) {
throw new Error("Not 2xx response");
let success = response.ok;
if (Array.isArray(this.item.successCodes)) {
success = this.item.successCodes.includes(response.status);
}
if (!success) {
throw new Error(`Ping: target not available (${response.status} error)`);
}
return json ? response.json() : response;

7
vite.config.js
View File

@ -47,4 +47,11 @@ export default defineConfig({
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
css: {
preprocessorOptions: {
scss: {
api: "modern-compiler",
},
},
},
});