Homer: Design, Links & Favicon (#481)

Co-authored-by: Michael Grote <michael.grote@posteo.de>
Reviewed-on: #481

docker-compose/homer/assets/catppuccin-frappe.css

@@ -0,0 +1,174 @@
+@charset "UTF-8";
+
+
+/* Catppuccin theme for Homer */
+
+#app.theme-default.is-dark {
+  --catppuccin-base: #303446;
+  --catppuccin-surface0: #414559;
+  --catppuccin-text: #c6d0f5;
+  --catppuccin-surface2: #626880;
+  --catppuccin-teal: #81c8be;
+  --catppuccin-green: #a6d189;
+  --catppuccin-peach: #ef9f76;
+  --catppuccin-pink: #f4b8e4;
+  --catppuccin-mauve: #ca9ee6;
+  --catppuccin-red: #e78284;
+  --catppuccin-yellow: #e5c890;
+
+  --highlight-primary: transparent;
+  --highlight-secondary: var(--catppuccin-surface0);
+  --highlight-hover: var(--catppuccin-surface0);
+  --background: var(--catppuccin-base);
+  --highlight-hover: var(--catppuccin-surface0);
+  --card-background: var(--catppuccin-surface0);
+  --text: var(--catppuccin-text);
+  --text-header: var(--catppuccin-text);
+  --text-title: var(--catppuccin-text);
+  --text-subtitle: var(--catppuccin-teal);
+  --link: var(--catppuccin-green);
+  --link-hover: var(--catppuccin-green);
+}
+
+/* Header */
+
+/* Comment the following section out if you want no header image. Also, set --highlight-primary to var(--catppuccin-surface0). */
+
+#app.theme-default.is-dark #bighead {
+  background-image: url('../assets/images/romb.png');
+  background-size: cover;
+  background-position: center;
+}
+
+#app.theme-default.is-dark .logo {
+  color: var(--catppuccin-mauve);
+}
+
+#app.theme-default.is-dark .first-line .headline {
+  color: var(--catppuccin-yellow);
+}
+
+#app.theme-default.is-dark .navbar-start i {
+  color: var(--catppuccin-teal);
+}
+
+#app.theme-default.is-dark [title='Auto-switch'] {
+  color: var(--catppuccin-mauve);
+}
+
+#app.theme-default.is-dark [title='Dark theme'] {
+  color: var(--catppuccin-peach);
+}
+
+#app.theme-default.is-dark .navbar-item .fa-columns {
+  color: var(--catppuccin-green);
+}
+
+#app.theme-default.is-dark .navbar-item .fa-list {
+  color: var(--catppuccin-teal);
+}
+
+#app.theme-default.is-dark .search-bar .search-label:before {
+  color: var(--catppuccin-yellow);
+}
+
+#app.theme-default.is-dark .search-bar input {
+  background-color: var(--catppuccin-base);
+}
+
+#app.theme-default.is-dark .search-bar > input:nth-child(2) {
+  color: var(--catppuccin-text);
+}
+
+#app.theme-default.is-dark .search-bar input:focus-visible {
+  outline: none;
+}
+
+/* Message */
+
+#app.theme-default.is-dark .message-header {
+  color: var(--catppuccin-text);
+  background-color: var(--catppuccin-surface0);
+  border-style: none none solid none;
+  border-width: thin;
+}
+
+#app.theme-default.is-dark .is-info .message-header {
+  border-color: var(--catppuccin-teal);
+}
+
+#app.theme-default.is-dark .is-info .message-header i {
+  color: var(--catppuccin-teal);
+}
+
+#app.theme-default.is-dark .is-success .message-header {
+  border-color: var(--catppuccin-green);
+}
+
+#app.theme-default.is-dark .is-success .message-header i {
+  color: var(--catppuccin-green);
+}
+
+#app.theme-default.is-dark .is-warning .message-header {
+  border-color: var(--catppuccin-peach);
+}
+
+#app.theme-default.is-dark .is-warning .message-header i {
+  color: var(--catppuccin-peach);
+}
+
+#app.theme-default.is-dark .is-danger .message-header {
+  border-color: var(--catppuccin-red);
+}
+
+#app.theme-default.is-dark .is-danger .message-header i {
+  color: var(--catppuccin-red);
+}
+
+/* Cards */
+
+#app.theme-default.is-dark .tag {
+  background-color: var(--catppuccin-pink);
+  color: var(--catppuccin-text);
+}
+
+#app.theme-default.is-dark .status.unknown::before {
+  background-color: var(--catppuccin-yellow);
+  border-color: var(--catppuccin-yellow);
+  box-shadow: 0 0 5px 1px var(--catppuccin-yellow);
+}
+
+#app.theme-default.is-dark .status.bad::before {
+  background-color: var(--catppuccin-red);
+  border-color: var(--catppuccin-red);
+  box-shadow: 0 0 5px 1px var(--catppuccin-red);
+}
+
+#app.theme-default.is-dark .status.running::before {
+  background-color: var(--catppuccin-green);
+  border-color: var(--catppuccin-green);
+  box-shadow: 0 0 5px 1px var(--catppuccin-green);
+}
+
+body #app .card:hover {
+  background-color: #51576d; /* Surface1 */
+}
+
+/* Footer */
+#app.theme-default.is-dark .footer {
+  color: var(--catppuccin-text);
+}
+
+/* Adds spacing to the bottom of cards */
+body #app .card-content {
+  margin-bottom: 0.55rem;
+}
+
+/* Custom font using Fira Code */
+body #bighead .navbar a {
+  font-family: 'Fira Code', monospace;
+}
+
+body #app .title {
+  font-family: 'Fira Code', monospace;
+}

docker-compose/homer/assets/config.yml

@@ -1,41 +1,21 @@
 ---
 # https://github.com/bastienwirtz/homer/blob/main/docs/configuration.md
 title: "Homer"
-logo: "assets/icons/homer.png"
 
 header: false
 footer: false
 
 columns: "4"
 
+# Set the default layout and color scheme
+defaults:
+  layout: columns # Either 'columns', or 'list'
+  colorTheme: dark # One of 'auto', 'light', or 'dark'
+
+stylesheet:
+  - 'assets/catppuccin-frappe.css'
 
 
-theme: default
-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-hover: "#363636"
-  dark:
-    highlight-primary: "#3367d6"
-    highlight-secondary: "#4285f4"
-    highlight-hover: "#5a95f5"
-    background: "#131313"
-    card-background: "#2b2b2b"
-    text: "#eaeaea"
-    text-header: "#ffffff"
-    text-title: "#fafafa"
-    text-subtitle: "#f5f5f5"
-    card-shadow: rgba(0, 0, 0, 0.4)
-    link-hover: "#ffdd57"
 
 
 
@@ -47,69 +27,28 @@ links:
   - name: "Management"
     icon: "fas fa-code-branch"
     url: "#mgmt"
-  - name: "Extern"
-    icon: "fas fa-file-alt"
-    url: "#papa"
-  - name: "Test"
-    icon: "fas fa-globe"
-    url: "#test"
 
 # wetter
 
 # https://github.com/bastienwirtz/homer/pull/181
 services:
-  - name: "Wetter"
-    icon: "fas fa-cloud"
-    items:
-      - name: "Weather"
-        location: "Burg" # your location.
-        locationId: "2941501" # OpenWeatherMap city ID.
-        apiKey: "c1ec4c040abfa80b991c72d48b49d4a0" # 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: "none" # choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none.
-        type: "OpenWeather"
-      - name: "Weather"
-        location: "Magdeburg"
-        locationId: "2874545"
-        apiKey: "c1ec4c040abfa80b991c72d48b49d4a0"
-        units: "metric"
-        background: "none"
-        type: "OpenWeather"
-
-
-  - name: "Help"
-    icon: "fas fa-cloud"
-    items:
-      - name: "Crontab Guru"
-        logo: "assets/icons/healthchecks.png"
-        url: "https://crontab.guru"
-        target: "_blank"
-      - name: "Epoch Converter"
-        logo: "assets/icons/epochconverter.png"
-        url: "https://www.epochconverter.com"
-        target: "_blank"
-      - name: "fstab Generator"
-        logo: "assets/icons/sabnzbd.png"
-        url: "https://epistel.no/fstab/"
-        target: "_blank"
-      - name: "chmod Calculator"
-        logo: "assets/icons/redis.png"
-        url: "https://chmod-calculator.com"
-        target: "_blank"
-      - name: "composerizer"
-        logo: "assets/icons/docker.png"
-        url: "https://www.composerize.com"
-        target: "_blank"
-        subtitle: "docker-run to docker-compose"
-      - name: "Umrechner Bytes"
-        logo: "assets/icons/bytes.png"
-        url: "https://www.fischerclan.de/byte_umrechner.html"
-        target: "_blank"
-      - name: "git revert..."
-        logo: "assets/icons/netatmo.png"
-        url: "https://sethrobertson.github.io/GitFixUm/fixup.html"
-        target: "_blank"
-
+#  - name: "Wetter"
+#    icon: "fas fa-cloud"
+#    items:
+#      - name: "Weather"
+#        location: "Burg" # your location.
+#        locationId: "2941501" # OpenWeatherMap city ID.
+#        apiKey: "c1ec4c040abfa80b991c72d48b49d4a0" # insert your own API key here. Request one from https://o#penweathermap.org/api. # key deactiviert
+#        units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin.
+#        background: "none" # choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none.
+#        type: "OpenWeather"
+#      - name: "Weather"
+#        location: "Magdeburg"
+#        locationId: "2874545"
+#        apiKey: "c1ec4c040abfa80b991c72d48b49d4a0"
+#        units: "metric"
+#        background: "none"
+#        type: "OpenWeather"
 
   - name: "Dienste"
     icon: "fas fa-cloud"
@@ -139,7 +78,7 @@ services:
         url: "http://docker10.grote.lan:3001"
         target: "_blank"
         subtitle: "Facebook/Instagram-to-rss"
-      - name: "Navidrome - mg"
+      - name: "Navidrome"
         logo: "assets/icons/navidrome.png"
         url: "https://audio.mgrote.net/mg"
         target: "_blank"
@@ -150,8 +89,6 @@ services:
         target: "_blank"
         subtitle: "Website2rss"
 
-
-
   - name: "Web"
     icon: "fas fa-cloud"
     items:
@@ -184,14 +121,30 @@ services:
         url: "https://hub.docker.com/r/quotengrote"
         target: "_blank"
 
+  - name: "Help"
+    icon: "fas fa-cloud"
+    items:
+      - name: "Crontab Guru"
+        logo: "assets/icons/healthchecks.png"
+        url: "https://crontab.guru"
+        target: "_blank"
+      - name: "chmod Calculator"
+        logo: "assets/icons/redis.png"
+        url: "https://chmod-calculator.com"
+        target: "_blank"
+      - name: "composerizer"
+        logo: "assets/icons/docker.png"
+        url: "https://www.composerize.com"
+        target: "_blank"
+        subtitle: "docker-run to docker-compose"
+      - name: "git revert..."
+        logo: "assets/icons/netatmo.png"
+        url: "https://sethrobertson.github.io/GitFixUm/fixup.html"
+        target: "_blank"
 
   - name: "Diabetes"
     icon: "fas fa-cloud"
     items:
-      - name: "LibreView"
-        logo: "assets/icons/freestyle.png"
-        url: "https://www.libreview.com/glucosereports"
-        target: "_blank"
       - name: "DexCom Clarity"
         logo: "assets/icons/dexcom.png"
         url: "https://clarity.dexcom.eu/#/overview"
@@ -201,18 +154,6 @@ services:
         url: "https://de-fr.my.glooko.com"
         target: "_blank"
 
-
-
-  - name: "Spiele"
-    icon: "fas fa-cloud"
-    items:
-      - name: "Gravity Simulator"
-        logo: "assets/icons/freshrss.png"
-        url: "https://testtubegames.com/gravity.html"
-        target: "_blank"
-
-
-
   - name: "Finanzen"
     icon: "fas fa-cloud"
     items:
@@ -225,16 +166,6 @@ services:
         url: "https://sparen.leaseplanbank.de"
         target: "_blank"
 
-
-  - name: "Dataport"
-    icon: "fas fa-cloud"
-    items:
-      - name: "Outlook"
-        logo: "assets/icons/dataport.png"
-        url: "https://webmail.ondataport.de"
-        target: "_blank"
-        subtitle: "Webmail"
-
   - name: "Solar"
     icon: "fas fa-cloud"
     items:

docker-compose/homer/assets/icons/README.md

@@ -0,0 +1,12 @@
+# PWA Icons / Images 
+
+We suggest you to create a svg or png icon (if it is a png icon, with the maximum resolution possible) for your application and use it to generate a favicon package in [Favicon Generator](https://realfavicongenerator.net/).
+
+Once generated, download the ZIP and use android-* icons for pwa-*:
+
+- use `android-chrome-192x192.png` for `pwa-192x192.png`
+- use `android-chrome-512x512.png` for `pwa-512x512.png`
+- `apple-touch-icon.png` is `apple-touch-icon.png`
+- `favicon.ico` is `favicon.ico`
+
+`

docker-compose/homer/assets/icons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

docker-compose/homer/assets/icons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

docker-compose/homer/assets/mgmt.yml

@@ -18,12 +18,6 @@ links:
   - name: "Management"
     icon: "fas fa-code-branch"
     url: "#mgmt"
-  - name: "Extern"
-    icon: "fas fa-file-alt"
-    url: "#papa"
-  - name: "Test"
-    icon: "fas fa-globe"
-    url: "#test"
 
 services:
   - name: "Hardware"
@@ -42,11 +36,6 @@ services:
   - name: "Infra"
     icon: "fas fa-cloud"
     items:
-      - name: "ProxMox Virtual Environment"
-        logo: "assets/icons/pve.png"
-        url: "https://pve5.grote.lan:8006"
-        target: "_blank"
-        subtitle: "Selbstbau"
       - name: "Apt-Cacher-NG"
         logo: "assets/icons/acng.jpg"
         url: "http://acng2.grote.lan:9999/acng-report.html"
@@ -78,8 +67,19 @@ services:
         target: "_blank"
         subtitle: "Package-Registry"
 
-
-
+  - name: "Infra"
+    icon: "fas fa-cloud"
+    items:
+      - name: "ProxMox Virtual Environment - Production"
+        logo: "assets/icons/pve.png"
+        url: "https://pve5.grote.lan:8006"
+        target: "_blank"
+        subtitle: "Selbstbau"
+      - name: "ProxMox Virtual Environment - Test"
+        logo: "assets/icons/pve.png"
+        url: "https://pve5-test.grote.lan:8006"
+        target: "_blank"
+        subtitle: "Test"
 
   - name: "Monitoring"
     icon: "fas fa-cloud"
@@ -98,23 +98,33 @@ services:
   - name: "Internet-MGMT"
     icon: "fas fa-cloud"
     items:
-      - name: "IONOS"
-        logo: "assets/icons/1und1.jpg"
-        url: "https://login.ionos.de/#/servers/F872D83983D453EA40074C5C59AFB7DD"
-        target: "_blank"
-        subtitle: "tor1.mgrote.net"
       - name: "Scaleway"
         logo: "assets/icons/scaleway.png"
         url: "https://console.scaleway.com/object-storage/buckets"
         target: "_blank"
         subtitle: "Scaleway S3"
-      - name: "gl.inet - Cloud"
-        logo: "assets/icons/gl-cloud.png"
-        url: "https://www.goodcloud.xyz/#/login"
-        target: "_blank"
-        subtitle: "Mango MGMT"
       - name: "Strato - DNS"
         logo: "assets/icons/strato.jpg"
         url: "https://www.strato.de/apps/CustomerService#/skl"
         target: "_blank"
         subtitle: "Domainverwaltung"
+
+  - name: "Extern - NAS"
+    icon: "fas fa-cloud"
+    items:
+      - name: "QNAP TS-251+"
+        logo: "assets/icons/qnap.png"
+        url: "http://192.168.3.108:8080"
+        target: "_blank"
+
+  - name: "Extern - Network"
+    icon: "fas fa-cloud"
+    items:
+      - name: "Speedport Smart 3"
+        logo: "assets/icons/speedport.png"
+        url: "http://192.168.3.1"
+        target: "_blank"
+      - name: "Netgear GS308E"
+        logo: "assets/icons/switch.png"
+        url: "http://192.168.3.147"
+        target: "_blank"

docker-compose/homer/assets/papa.yml

@@ -1,46 +0,0 @@
----
-# Additionnal page configuration
-
-# Additionnal configurations are loaded using its file name, minus the extension, as an anchor (https://<mydashboad>#<config>).
-# `config.yml` is still used as a base configuration, and all values here will overwrite it, so you don't have to re-defined everything
-
-
-subtitle: "Papa's Dienste"
-
-# This overwrites message config. Setting it to empty to remove message from this page and keep it only in the main one:
-message: "Nur per VPN erreichbar, @home über den Router als s2s-Tunnel umgesetzt."
-
-# as we want to include a differente link here (so we can get back to home page), we need to replicate all links or they will be revome when overwriting the links field:
-links:
-  - name: "Homepage"
-    icon: "fas fa-heartbeat"
-    url: "http://docker10.grote.lan:333"
-  - name: "Management"
-    icon: "fas fa-code-branch"
-    url: "#mgmt"
-  - name: "Extern"
-    icon: "fas fa-file-alt"
-    url: "#papa"
-  - name: "Test"
-    icon: "fas fa-globe"
-    url: "#test"
-
-services:
-  - name: "Storage"
-    icon: "fas fa-cloud"
-    items:
-      - name: "QNAP TS-251+"
-        logo: "assets/icons/qnap.png"
-        url: "http://192.168.3.108:8080"
-        target: "_blank"
-  - name: "Network"
-    icon: "fas fa-cloud"
-    items:
-      - name: "Speedport Smart 3"
-        logo: "assets/icons/speedport.png"
-        url: "http://192.168.3.1"
-        target: "_blank"
-      - name: "Netgear GS308E"
-        logo: "assets/icons/switch.png"
-        url: "http://192.168.3.147"
-        target: "_blank"

docker-compose/homer/assets/test.yml

@@ -1,36 +0,0 @@
----
-# Additionnal page configuration
-
-# Additionnal configurations are loaded using its file name, minus the extension, as an anchor (https://<mydashboad>#<config>).
-# `config.yml` is still used as a base configuration, and all values here will overwrite it, so you don't have to re-defined everything
-
-
-subtitle: "Test/Staging"
-
-# This overwrites message config. Setting it to empty to remove message from this page and keep it only in the main one:
-# message: ~
-
-# as we want to include a differente link here (so we can get back to home page), we need to replicate all links or they will be revome when overwriting the links field:
-links:
-  - name: "Homepage"
-    icon: "fas fa-heartbeat"
-    url: "http://docker10.grote.lan:333"
-  - name: "Management"
-    icon: "fas fa-code-branch"
-    url: "#mgmt"
-  - name: "Extern"
-    icon: "fas fa-file-alt"
-    url: "#papa"
-  - name: "Test"
-    icon: "fas fa-globe"
-    url: "#test"
-
-services:
-  - name: "Infra"
-    icon: "fas fa-cloud"
-    items:
-      - name: "ProxMox Virtual Environment"
-        logo: "assets/icons/pve.png"
-        url: "https://pve5-test.grote.lan:8006"
-        target: "_blank"
-        subtitle: "VM"