Added Tautulli service to ToC

This reverts commit a2dfffab68.

.github/workflows/docs.yml

@@ -0,0 +1,16 @@
+name: docs 
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-python@v3
+        with:
+          python-version: '3.x'
+          cache: 'pip'
+      - run: pip install -r requirements.txt
+      - run: mkdocs gh-deploy --force

.gitignore

@@ -23,4 +23,10 @@ yarn-error.log*
 # App configuration
 config.yml
 
-.drone.yml
+.drone.yml
+
+# Python venv
+venv
+
+# MkDocs
+site

README.md

@@ -2,7 +2,7 @@
  <img
   width="180"
   alt="Homer's donut"
-  src="https://raw.githubusercontent.com//bastienwirtz/homer/main/public/logo.png">
+  src="public/logo.png">
     <br/>
     Homer
 </h1>
@@ -36,18 +36,18 @@
 </p>
 
 <p align="center">
- <img src="https://raw.github.com/bastienwirtz/homer/main/docs/screenshot.png" width="100%">
+ <img src="docs/images/screenshot.png" width="100%">
 </p>
 
 ## Table of Contents
 
 - [Features](#features)
 - [Getting started](#getting-started)
-- [Configuration](docs/configuration.md)
-- [Custom services](docs/customservices.md)
-- [Tips & tricks](docs/tips-and-tricks.md)
-- [Development](docs/development.md)
-- [Troubleshooting](docs/troubleshooting.md)
+- [Configuration](https://bastienwirtz.github.io/homer/configuration)
+- [Custom services](https://bastienwirtz.github.io/homer/custom_services)
+- [Tips & tricks](https://bastienwirtz.github.io/homer/tips_and_tricks)
+- [Development](https://bastienwirtz.github.io/homer/development)
+- [Troubleshooting](https://bastienwirtz.github.io/homer/troubleshooting)
 
 ## Features
 
@@ -65,34 +65,58 @@
 
 ## Getting started
 
-Homer is a full static html/js dashboard, generated from the source in `/src` using webpack. It's meant to be served by an HTTP server, **it will not work if you open dist/index.html directly over file:// protocol**.
+### Using Docker
 
-See [documentation](docs/configuration.md) for information about the configuration (`assets/config.yml`) options.
+The fastest and recommended way to get your Homer instance up and running is
+with Docker. The Docker image comes with a web server built-in so that all you
+need to worry about is your config file.
 
-### Using docker
+Internally, the Docker image looks for the assets in the `/www/assets` directory
+so you can bind a volume from your host machine to that directory in order to
+modify and persist the configuration files. The web server serves the dashboard
+on port 8080, but using a port binding will let you expose that to whatever
+external port you like.
+
+#### docker
 
 To launch container:
 
 ```sh
 docker run -d \
   -p 8080:8080 \
-  -v </your/local/assets/>:/www/assets \
+  -v </your/local/assets>:/www/assets \
   --restart=always \
   b4bz/homer:latest
 ```
 
-Default assets will be automatically installed in the `/www/assets` directory. Use `UID` and/or `GID` env var to change the assets owner (`docker run -e "UID=1000" -e "GID=1000" [...]`).
+Use `UID` and/or `GID` env var to change the assets owner:
 
-### Using docker-compose
+```sh
+docker run -d \
+  -p 8080:8080 \
+  -v </your/local/assets>:/www/assets \
+  -e "UID=1000" -e "GID=1000" \
+  --restart=always \
+  b4bz/homer:latest
+```
 
-The `docker-compose.yml` file must be edited to match your needs.
-Set the port and volume (equivalent to `-p` and `-v` arguments):
+#### docker-compose
+
+It is recommended to use docker-compose to manage your Docker containers, and
+below you can find a simple compose yaml file. Copy the contents into a
+`docker-compose.yaml` and modify the volume binding to your desired directory to
+get started:
 
 ```yaml
-volumes:
-  - /your/local/assets/:/www/assets
-ports:
-  - 8080:8080
+version: '3.3'
+services:
+  homer:
+    restart: always
+    volumes:
+      - /your/local/assets:/www/assets
+    ports:
+      - 8080:8080
+    image: b4bz/homer
 ```
 
 To launch container:
@@ -102,17 +126,31 @@ cd /path/to/docker-compose.yml
 docker-compose up -d
 ```
 
-Default assets will be automatically installed in the `/www/assets` directory. Use `UID` and/or `GID` env var to change the assets owner, also in `docker-compose.yml`:
+Use `UID` and/or `GID` env var to change the assets owner:
 
 ```yaml
-environment:
-  - UID=1000
-  - GID=1000
+version: '3.3'
+services:
+  homer:
+    restart: always
+    volumes:
+      - /your/local/assets:/www/assets
+    ports:
+      - 8080:8080
+    environment:
+      - UID=1000
+      - GID=1000
+    image: b4bz/homer
 ```
 
-### Using the release tarball (prebuilt, ready to use)
+### Shipping your own web server
 
-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.
+#### Prebuilt release tarball
+
+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
@@ -122,7 +160,7 @@ cp assets/config.yml.dist assets/config.yml
 npx serve # or python -m http.server 8010 or apache, nginx ...
 ```
 
-### Build manually
+#### Building from source
 
 ```sh
 # Using yarn (recommended)

docs/README.md

@@ -0,0 +1,25 @@
+# Homer docs
+
+Live on github pages: [https://bastienwirtz.github.io/homer/](https://bastienwirtz.github.io/homer/)
+
+## Local development
+
+### Install Python dependencies
+
+Homer's documentation is built using [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/). To get started, you'll need Python 3 installed on your machine and set up your local environment.
+
+```sh
+python -m venv venv
+source venv/bin/activate
+pip install -r requirements.txt
+```
+
+### Preview local copy
+
+MkDocs comes with a command-line utility for building and serving the static documentation site every time you save a file. To launch it, run the `serve` command.
+
+```sh
+mkdocs serve
+```
+
+Your local version of the docs site will now be available at http://localhost:8000/.

docs/configuration.md

@@ -1,6 +1,8 @@
 # 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.
+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.
 
 ```yaml
 ---
@@ -13,40 +15,57 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
 
 title: "App dashboard"
 subtitle: "Homer"
-# documentTitle: "Welcome" # Customize the browser tab text
+# Customize the browser tab text
+# documentTitle: "Welcome"
 logo: "assets/logo.png"
-# Alternatively a fa icon can be provided:
+# Alternatively a Font Awesome icon can be provided
 # icon: "fas fa-skull-crossbones"
 
-header: true # Set to false to hide the header
-# Optional: Different hotkey for search, defaults to "/"
+# Set to false to hide the header
+header: true
+# Set to false to hide the footer
+footer: >
+  <p>Created with <span class="has-text-danger">❤️</span> with
+  <a href="https://bulma.io/">bulma</a>,
+  <a href="https://vuejs.org/">vuejs</a>, &
+  <a href="https://fontawesome.com/">font awesome</a>
+  // Fork me on <a href="https://github.com/bastienwirtz/homer">
+  <i class="fab fa-github-alt"></i></a></p>
+
+# Use "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
+columns: "3"
+# Whether you want to display a message when the apps are not accessible
+# anymore (VPN disconnected for example)
+connectivityCheck: true
+
+# Optional: Set a different hotkey for search, defaults to "/"
 # hotkey:
 #   search: "Shift"
-footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
-
-columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
-connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example)
 
 # 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. 
+  # Send cookies & authorization headers when fetching service specific data.
+  # Set to `true` if you use an authentication proxy. Can be overrided on
+  # service level.
+  useCredentials: false
 
 # Set the default layout and color scheme
 defaults:
   layout: columns # Either 'columns', or 'list'
   colorTheme: auto # One of 'auto', 'light', or 'dark'
 
-# Optional theming
-theme: default # 'default' or one of the themes available in 'src/assets/themes'.
+# Optional theming: 'default' or one of the themes available in
+# 'src/assets/themes'.
+theme: default
 
 # Optional custom stylesheet
 # Will load custom CSS files. Especially useful for custom icon sets.
 # stylesheet:
 #   - "assets/custom.css"
 
-# Here is the exhaustive list of customization parameters
-# However all value are optional and will fallback to default if not set.
-# if you want to change only some of the colors, feel free to remove all unused key.
+# Here is the exhaustive list of customization parameters, however all values
+# are optional and will fallback to default if not set. If you want to change
+# only some of the colors, feel free to remove all unused keys.
 colors:
   light:
     highlight-primary: "#3367d6"
@@ -79,25 +98,30 @@ colors:
 
 # Optional message
 message:
-  # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
-  # mapping: # allows to map fields from the remote format to the one expected by Homer
-  #   title: 'id' # use value from field 'id' as title
-  #   content: 'value' # value from field 'value' as content
-  # refreshInterval: 10000 # Optional: time interval to refresh message
-  #
-  # Real example using chucknorris.io for showing Chuck Norris facts as messages:
-  # url: https://api.chucknorris.io/jokes/random
-  # mapping:
-  #   title: 'id'
-  #   content: 'value'
-  # refreshInterval: 10000
+  # Uses Bulma. See https://bulma.io/documentation/components/message/#colors
+  # for styling options.
   style: "is-warning"
   title: "Optional message!"
   icon: "fa fa-exclamation-triangle"
   content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 
+  # Can optionally fetch information from an endpoint to override value below.
+  # url: "https://<my-api-endpoint>"
+  # mapping: # Select the appropriate fields from the response object.
+  #   title: 'id'       # Use value from field 'id' as title
+  #   content: 'value'  # Use value from field 'value' as content
+  # refreshInterval: 10000 # Optional: time interval to refresh message
+  #
+  # Real example using chucknorris.io for showing Chuck Norris facts:
+  # url: https://api.chucknorris.io/jokes/random
+  # mapping:
+  #   title: 'id'
+  #   content: 'value'
+  # refreshInterval: 10000
+
 # Optional navbar
-# links: [] # Allows for navbar (dark mode, layout, and search) without any links
+# Specify [] for navbar (dark mode, layout, and search) without any links
+# links: [] 
 links:
   - name: "Link 1"
     icon: "fab fa-github"
@@ -106,19 +130,22 @@ links:
   - name: "link 2"
     icon: "fas fa-book"
     url: "https://github.com/bastienwirtz/homer"
-  # this will link to a second homer page that will load config from page2.yml and keep default config values as in config.yml file
-  # see url field and assets/page.yml used in this example:
+  # Urls starting with # will link to additional Homer pages. Passing "#page2"
+  # will load config from page2.yml as overrides on top of the default values
+  # set in this config.yml.
   - name: "Second Page"
     icon: "fas fa-file-alt"
     url: "#page2"
 
 # Services
-# First level array represents a group.
-# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
+# First level array represents a group. Use only an "items" key if not using
+# groups (name, icon, & tagstyle are optional; section separation will not be
+# displayed).
 services:
   - name: "Application"
     icon: "fas fa-code-branch"
-    # A path to an image can also be provided. Note that icon take precedence if both icon and logo are set.
+    # A path to an image can also be provided. Note that icon will take
+    # precedence if both icon and logo are set.
     # logo: "path/to/logo"
     items:
       - name: "Awesome app"
@@ -128,7 +155,8 @@ services:
         subtitle: "Bookmark example"
         tag: "app"
         url: "https://www.reddit.com/r/selfhosted/"
-        target: "_blank" # optional html tag target attribute
+        # Optional: HTML <a> tag target attribute
+        target: "_blank"
       - name: "Another one"
         logo: "assets/tools/sample2.png"
         subtitle: "Another application"
@@ -141,18 +169,28 @@ services:
     items:
       - name: "Pi-hole"
         logo: "assets/tools/sample.png"
-        # subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
+        # Optional: If no subtitle is defined, PiHole statistics will be shown.
+        # subtitle: "Network-wide Ad Blocking"
         tag: "other"
         url: "http://192.168.0.151/admin"
-        type: "PiHole" # optional, loads a specific component that provides extra features. MUST MATCH a file name (without file extension) available in `src/components/services`
-        target: "_blank" # optional html a tag target attribute
-        # class: "green" # optional custom CSS class for card, useful with custom stylesheet
-        # background: red # optional color for card to set color directly without custom stylesheet
+        # Optional: Loads a specific component that provides extra features.
+        # MUST MATCH a file name (without file extension) available in
+        # `src/components/services`
+        type: "PiHole" 
+        # Optional: HTML <a> tag target attribute
+        target: "_blank"
+        # Optional: Custom CSS class for card, useful with custom stylesheet
+        # class: "green"
+        # Optional: Set background color directly without custom stylesheet
+        # background: red
 ```
 
-View [Custom Services](customservices.md) for details about all available custom services (like PiHole) and how to configure them.
+View [Custom Services](custom_services.md) for details about all available
+custom services (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)):
+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#mapping-fields)):
 
 ```json
 {
@@ -162,43 +200,31 @@ 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).
+`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).
 
 ## 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/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:
 
 - `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/modifiers/syntax/)
+for other options regarding size, style, or state.
 
 ## PWA Icons
 
-In order to easily generate all required icon preset for the PWA to work, a tool like [vue-pwa-asset-generator](https://www.npmjs.com/package/vue-pwa-asset-generator) can be used:
+In order to easily generate all required icon preset for the PWA to work, a tool
+like [vue-pwa-asset-generator](https://www.npmjs.com/package/vue-pwa-asset-generator)
+can be used:
 
 ```bash
 npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder}
 ```
-
-## Supported services
-
-Currently the following services are supported for showing quick infos on the card. They can be used by setting the type to one of the following values at the item.
-
-- PiHole
-- AdGuardHome
-- PaperlessNG
-- Mealie
-
-## Additional configuration
-
-### Paperless
-
-For Paperless you need an API-Key which you have to store at the item in the field `apikey`.
-
-### 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.

docs/custom_services.md

@@ -6,7 +6,19 @@ apikey included in the configuration file is exposed to anyone who can access th
 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 custom services that are available
-within Homer.
+within Homer:
++ [PiHole](#pihole)
++ [OpenWeatherMap](#openweathermap)
++ [Medusa](#medusa)
++ [Lidarr, Prowlarr, Sonarr and Radarr](#lidarr-prowlarr-sonarr-and-radarr)
++ [PaperlessNG](#paperlessng)
++ [Ping](#ping)
++ [Prometheus](#prometheus)
++ [AdGuard Home](#adguard-home)
++ [Portainer](#portainer)
++ [Emby](#emby)
++ [Uptime Kuma](#uptime-kuma)
++ [Tautulli](#tautulli)
 
 If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
 
@@ -126,11 +138,23 @@ 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/v/ce-2.11/user/account-settings#access-tokens
 
@@ -140,4 +164,62 @@ See https://docs.portainer.io/v/ce-2.11/user/account-settings#access-tokens
   url: "http://192.168.0.151/"
   type: "Portainer"
   apikey: "MY-SUPER-SECRET-API-KEY"
+  # environments:
+  #   - "raspberry"
+  #   - "local"
+```
+
+## Emby
+
+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: "MY-SUPER-SECRET-API-KEY"
+  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: "MY-SUPER-SECRET-API-KEY"
+```
+
+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: "MY-SUPER-SECRET-API-KEY"
 ```

docs/development.md

@@ -72,3 +72,32 @@ body #app.theme-my-awesome-theme. { ... }
 ...
 @import "./themes/my-awesome-theme.scss";
 ```
+
+
+## Documentation
+
+### Install Python dependencies
+
+Homer's documentation is built using
+[Material for MkDocs](https://squidfunk.github.io/mkdocs-material/). To get
+started, you'll need Python 3 installed on your machine and set up your local
+environment.
+
+```sh
+python -m venv venv
+source venv/bin/activate
+pip install -r requirements.txt
+```
+
+### Preview local copy
+
+MkDocs comes with a command-line utility for building and serving the static
+documentation site every time you save a file. To launch it, run the `serve`
+command.
+
+```sh
+mkdocs serve
+```
+
+Your local version of the docs site will now be available at
+http://localhost:8000/.

docs/getting_started.md

@@ -0,0 +1,105 @@
+## Using Docker
+
+The fastest and recommended way to get your Homer instance up and running is
+with Docker. The Docker image comes with a web server built-in so that all you
+need to worry about is your config file.
+
+Internally, the Docker image looks for the assets in the `/www/assets` directory
+so you can bind a volume from your host machine to that directory in order to
+modify and persist the configuration files. The web server serves the dashboard
+on port 8080, but using a port binding will let you expose that to whatever
+external port you like.
+
+### docker
+
+To launch container:
+
+```sh
+docker run -d \
+  -p 8080:8080 \
+  -v </your/local/assets>:/www/assets \
+  --restart=always \
+  b4bz/homer:latest
+```
+
+Use `UID` and/or `GID` env var to change the assets owner:
+
+```sh
+docker run -d \
+  -p 8080:8080 \
+  -v </your/local/assets>:/www/assets \
+  -e "UID=1000" -e "GID=1000" \
+  --restart=always \
+  b4bz/homer:latest
+```
+
+### docker-compose
+
+It is recommended to use docker-compose to manage your Docker containers, and
+below you can find a simple compose yaml file. Copy the contents into a
+`docker-compose.yaml` and modify the volume binding to your desired directory to
+get started:
+
+```yaml
+version: '3.3'
+services:
+  homer:
+    restart: always
+    volumes:
+      - /your/local/assets:/www/assets
+    ports:
+      - 8080:8080
+    image: b4bz/homer
+```
+
+To launch container:
+
+```sh
+cd /path/to/docker-compose.yml
+docker-compose up -d
+```
+
+Use `UID` and/or `GID` env var to change the assets owner:
+
+```yaml
+version: '3.3'
+services:
+  homer:
+    restart: always
+    volumes:
+      - /your/local/assets:/www/assets
+    ports:
+      - 8080:8080
+    environment:
+      - UID=1000
+      - GID=1000
+    image: b4bz/homer
+```
+
+## Shipping your own web server
+
+### Prebuilt release tarball
+
+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
+cd homer
+cp assets/config.yml.dist assets/config.yml
+npx serve # or python -m http.server 8010 or apache, nginx ...
+```
+
+### Building from source
+
+```sh
+# Using yarn (recommended)
+yarn install
+yarn build
+
+# **OR** Using npm
+npm install
+npm run build
+```
+
+Then your dashboard is ready to use in the `/dist` directory.

docs/index.md

@@ -0,0 +1,34 @@
+<img class="hero-image" src="images/screenshot.png" draggable="false" />
+
+## High-level overview
+
+Homer is web-based dashboard that simplifies your home page management. Designed
+for home labs, corporate internal networks, and anyone looking to organize their
+web-based work. It is built with [Vue](https://vuejs.org/) and uses `yaml`
+configuration files to provide you with a home page that is dead simple to build
+and serve!
+
+## Ease of use & customizability
+
+[Get up and running](/getting_started) in seconds using Docker and customize to
+your hearts content using the long list of [configuration](/configuration)
+options available! Add links to all your relevant services and web apps,
+categorize them in groups, and in some cases,
+[get live status data](/custom_services) right there on your home page.
+Customize your home page with your own images and CSS to make it fit your style!
+
+## 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.
+
+

docs/stylesheets/styles.css

@@ -0,0 +1,71 @@
+/* Set some CSS variables for use throughout the page */
+
+:root>* {
+  --md-hue: 208; /* blue-7 hue */
+  --md-footer-bg-color: var(--md-code-bg-color);
+  --md-footer-fg-color: var(--md-code-fg-color);
+}
+
+[data-md-color-scheme="default"] {
+  --md-primary-fg-color: var(--blue-7);
+  --md-accent-fg-color: var(--violet-6);
+  --md-code-bg-color: var(--gray-2);
+  --md-default-fg-color--lightest: var(--gray-4);
+}
+
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: var(--blue-5);
+  --md-accent-fg-color: var(--violet-4);
+}
+
+/* Override some default material styles */
+
+[dir=ltr] .md-header__title,
+[dir=rtl] .md-header__title {
+  margin-inline: 0.3rem;
+}
+
+.md-nav__title {
+  display: none;
+}
+
+.md-footer__link {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding-top: 0.7rem;
+}
+
+.md-footer__link:is(:focus,:hover) {
+  opacity: unset;
+}
+
+.md-footer__title {
+  line-height: unset;
+  margin-top: 0.65rem;
+  padding-inline: 0.6rem;
+}
+
+.md-footer__direction {
+  padding-inline: 0.6rem;
+}
+
+.md-footer-meta {
+  background-color: hsla(var(--md-hue), 15%, 10%, 1);
+}
+
+html .md-footer .md-footer-meta a:focus,
+html .md-footer .md-footer-meta a:hover,
+html .md-footer a:focus,
+html .md-footer a:hover {
+  color: var(--md-accent-fg-color);
+}
+
+/* Our custom styles */
+
+.hero-image {
+  width: 65%;
+  margin-inline-start: 17.5%;
+  border-radius: var(--radius-2);
+  box-shadow: var(--shadow-3);
+}

docs/troubleshooting.md

@@ -2,18 +2,29 @@
 
 ## My custom service card doesn't work, nothing appears or offline status is displayed (pi-hole, sonarr, ping, ...)
 
-You might by 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.
-Web browsers will not allow to fetch information from a different site without explicit permissions (the targeted service
-must include a special `Access-Control-Allow-Origin: *` HTTP headers).
-If this happens your web console (`ctrl+shift+i` or `F12`) will be filled with this kind of errors:
+You might by 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. Web browsers will not allow to fetch
+information from a different site without explicit permissions (the targeted
+service must include a special `Access-Control-Allow-Origin: *` HTTP headers).
+If this happens your web console (`ctrl+shift+i` or `F12`) will be filled with
+this kind of errors:
 
 ```text
-Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
+Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has
+been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
+on the requested resource. If an opaque response serves your needs, set the
+request's mode to 'no-cors' to fetch the resource with CORS disabled.
 ```
 
 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.
+* 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.

mkdocs.yml

@@ -0,0 +1,87 @@
+# Project information
+site_name: Homer
+site_url: https://bastienwirtz.github.io/
+
+# Repository
+repo_name: bastienwirtz/homer
+repo_url: https://github.com/bastienwirtz/homer
+edit_uri: ""
+
+# Custom CSS
+extra_css:
+  - stylesheets/open-props.1.3.16.min.css
+  - stylesheets/styles.css
+
+# Theme
+theme:
+  favicon: images/logo.png
+  logo: images/logo.png
+  name: material
+  # custom_dir: docs/overrides/
+  icon:
+    repo: fontawesome/brands/github
+  language: en
+  palette:
+    - media: "(prefers-color-scheme: light)" 
+      scheme: default
+      toggle:
+        icon: fontawesome/solid/sun
+        name: Switch to dark mode
+    - media: "(prefers-color-scheme: dark)" 
+      scheme: slate
+      toggle:
+        icon: fontawesome/solid/moon
+        name: Switch to light mode
+  features:
+    - content.code.annotate
+    - navigation.indexes
+    - navigation.sections
+    - navigation.top
+    - navigation.tracking
+    - search.highlight
+    - search.share
+    - search.suggest
+    - toc.follow
+  # Don't include MkDocs' JavaScript
+  include_search_page: false
+  search_index_only: true
+
+# Copyright - name for footer text
+copyright: Homer
+
+# Socials
+extra:
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/bastienwirtz/homer
+    - icon: fontawesome/brands/gitter
+      link: https://gitter.im/homer-dashboard/community
+    - icon: fontawesome/brands/docker
+      link: https://hub.docker.com/r/b4bz/homer
+
+# Extensions
+markdown_extensions:
+  - abbr
+  - admonition
+  - attr_list
+  - def_list
+  - footnotes
+  - meta
+  - md_in_html
+  - toc:
+      permalink: true
+  - pymdownx.highlight:
+      anchor_linenums: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences
+
+# Page tree
+nav:
+  - What is Homer: index.md
+  - Getting started: getting_started.md
+  - Configuration: configuration.md
+  - Custom services: custom_services.md
+  - Tips & tricks: tips_and_tricks.md
+  - Development: development.md
+  - Troubleshooting: troubleshooting.md

requirements.txt

@@ -0,0 +1,23 @@
+bracex==2.2.1
+click==8.0.4
+ghp-import==2.0.2
+importlib-metadata==4.11.3
+Jinja2==3.0.3
+Markdown==3.3.6
+MarkupSafe==2.1.1
+mergedeep==1.3.4
+mkdocs==1.2.3
+mkdocs-awesome-pages-plugin==2.7.0
+mkdocs-material==8.2.5
+mkdocs-material-extensions==1.0.3
+packaging==21.3
+Pygments==2.11.2
+pymdown-extensions==9.3
+pyparsing==3.0.7
+python-dateutil==2.8.2
+PyYAML==6.0
+pyyaml-env-tag==0.1
+six==1.16.0
+watchdog==2.1.6
+wcmatch==8.3
+zipp==3.7.0