diff --git a/docs/customservices.md b/docs/customservices.md
new file mode 100644
index 0000000..d2deff4
--- /dev/null
+++ b/docs/customservices.md
@@ -0,0 +1,41 @@
+# Custom Services
+
+Here is an overview of all custom services that are available within Homer.
+
+## 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.
+
+```
+ 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
+ url: "http://192.168.0.151/admin"
+ type: "PiHole"
+```
+
+## 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 :
+```
+type: "Medusa"
+apikey: "01234deb70424befb1f4ef6a23456789"
+```
+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.
+
+
+## Sonarr/Radarr
+
+This service displays Activity (blue), Warning (orange) or Error (red) notifications bubbles from the Radarr/Sonarr application.
+Two lines are needed in the config.yml :
+```
+type: "Radarr" or "Sonarr"
+apikey: "01234deb70424befb1f4ef6a23456789"
+```
+The url must be the root url of Radarr/Sonarr application.
+The Radarr/Sonarr API key can be found in Settings > General. It is needed to access the API.
diff --git a/src/assets/app.scss b/src/assets/app.scss
index 48c60ae..6bb5068 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -211,7 +211,7 @@ body {
color: var(--highlight-secondary);
background-color: var(--highlight-secondary);
position: absolute;
- top: 1rem;
+ bottom: 1rem;
right: -0.2rem;
width: 3px;
overflow: hidden;
@@ -224,7 +224,6 @@ body {
}
.card {
- border-radius: 5px;
border: none;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
@@ -260,11 +259,13 @@ body {
}
.column div:first-of-type .card {
- border-radius: 5px 5px 0 0;
+ border-top-left-radius: 0.25rem;
+ border-top-right-radius: 0.25rem;
}
.column div:last-child .card {
- border-radius: 0 0 5px 5px;
+ border-bottom-left-radius: 0.25rem;
+ border-bottom-right-radius: 0.25rem;
}
}
@@ -348,4 +349,4 @@ body {
.group-logo {
float: left;
-}
\ No newline at end of file
+}
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 6cc649a..00ce158 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -54,7 +54,7 @@ export default {
// keep the original config value if no value is provided by the endpoint
const message = this.message;
- for (const prop of ["title", "style", "content"]) {
+ for (const prop of ["title", "style", "content", "icon"]) {
if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
message[prop] = fetchedMessage[prop];
}
diff --git a/src/components/services/Medusa.vue b/src/components/services/Medusa.vue
new file mode 100644
index 0000000..5720649
--- /dev/null
+++ b/src/components/services/Medusa.vue
@@ -0,0 +1,128 @@
+
+