Feature: resolve relative links

docs/configuration.md

@@ -150,8 +150,20 @@ 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
+      - name: "Relative URL"
+        subtitle: An example URL that routes to a service on the same machine as Homer, by port or relative URL
+        logo: fa-explosion
+        url: "//${hostname}:8080"
 ```
 
+All generic service URLs allow a small number of tokens to aid in dashboard configuration relative to where the Homer instance is hosted:
+
+- `${origin}` : The current window.location.origin as evaluated by Javascript, e.g. `https://mysite.com:81`
+- `${protocol}` : The current window.location.protocol as evaluated by Javascript, e.g. `https:`
+- `${host}` : The current window.location.host as evaluated by Javascript, e.g. `mysite.com:81`
+- `${hostname}` : The current window.location.hostname as evaluated by Javascript, e.g. `mysite.com`
+- `${port}` : The current window.location.port as evaluated by Javascript, e.g. `81`
+
 View **[Custom Services](customservices.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)):

public/assets/config-demo.yml.dist

@@ -111,6 +111,10 @@ services:
         units: "metric"
         endpoint: "https://homer-demo-content.netlify.app/openweather/weather"
         type: "OpenWeather"
+      - name: "Relative URL example"
+        icon: fa-explosion
+        subtitle: A link hosted on the same server as Homer, but with more than one possible hostname
+        url: "${protocol}//${hostname}:8080
   - name: "interesting links"
     icon: "fas fa-solid fa-arrow-up-right-from-square"
     items:

src/components/services/Generic.vue

@@ -5,7 +5,7 @@
       :style="`background-color:${item.background};`"
       :class="item.class"
     >
-      <a :href="item.url" :target="item.target" rel="noreferrer">
+      <a :href="url" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div :class="mediaClass">
             <slot name="icon">
@@ -49,6 +49,18 @@ export default {
     mediaClass: function () {
       return { media: true, "no-subtitle": !this.item.subtitle };
     },
+    url: function () {
+      const containsTemplates = this.item.url?.indexOf('${') > -1;
+      if(!containsTemplates) {
+        return this.item.url;
+      }
+      return this.item.url
+        .replace('${origin}', window.location.origin)
+        .replace('${protocol}', window.location.protocol)
+        .replace('${host}', window.location.host)
+        .replace('${hostname}', window.location.hostname)
+        .replace('${port}', window.location.port);
+    }
   },
 };
 </script>