From 45c5ffff229a4af58c6d3f706411e4d8ec936004 Mon Sep 17 00:00:00 2001
From: NKay <n.klipp@nkay.info>
Date: Sat, 22 Jun 2024 23:42:47 +0200
Subject: [PATCH 1/3] Add GenericWithPort

---
 src/components/services/GenericWithPort.vue | 85 +++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/components/services/GenericWithPort.vue

diff --git a/src/components/services/GenericWithPort.vue b/src/components/services/GenericWithPort.vue
new file mode 100644
index 000000000..7d60bf4b7
--- /dev/null
+++ b/src/components/services/GenericWithPort.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="is-multiline layout-vertical">
+    <div
+      class="card"
+      :style="`background-color:${item.background};`"
+      :class="item.class"
+    >
+      <a :href="item.url" :target="item.target" rel="noreferrer">
+        <div class="card-content">
+          <div :class="mediaClass">
+            <slot name="icon">
+              <div v-if="item.logo" class="media-left">
+                <figure class="image is-48x48">
+                  <img :src="item.logo" :alt="`${item.name} logo`" />
+                </figure>
+              </div>
+              <div v-if="item.icon" class="media-left">
+                <figure class="image is-48x48">
+                  <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
+                </figure>
+              </div>
+            </slot>
+            <div class="media-content">
+              <slot name="content">
+                <p class="title is-4">{{ item.name }}</p>
+                <p class="subtitle is-6" v-if="item.subtitle">
+                  {{ item.subtitle }}
+                </p>
+              </slot>
+            </div>
+            <slot name="indicator" class="indicator"></slot>
+          </div>
+          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+            <strong class="tag-text">#{{ item.tag }}</strong>
+          </div>
+        </div>
+      </a>
+      <footer class="card-footer" v-if="item.port">
+        <a
+          href="/" :target="item.target"
+          @click="onClickPort"
+          @mouseover="onMouseoverPort"
+          rel="noreferrer"
+          class="card-footer-item"
+        >:{{ item.port }}</a>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GenericWithPort",
+  props: {
+    item: Object,
+  },
+  computed: {
+    mediaClass: function () {
+      return { media: true, "no-subtitle": !this.item.subtitle };
+    },
+  },
+  methods: {
+    onMouseoverPort: function(event){
+      event.target.port = this.item.port;
+    },
+    onClickPort: function(event){
+      event.target.port = this.item.port;
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.media-left {
+  .image {
+    display: flex;
+    align-items: center;
+  }
+
+  img {
+    max-height: 100%;
+    object-fit: contain;
+  }
+}
+</style>

From 8145b3936962b60767c601d1f30909e071a397cd Mon Sep 17 00:00:00 2001
From: nkay08 <n.klipp@nkay.info>
Date: Mon, 1 Jul 2024 10:08:19 +0200
Subject: [PATCH 2/3] Add GenericWithPort to documentation

---
 docs/customservices.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index cc089a57b..ed175937b 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -10,6 +10,7 @@ within Homer:
 
 - [Custom Services](#custom-services)
   - [Common options](#common-options)
+  - [GenericWithPort](#gemericwithport)
   - [PiHole](#pihole)
   - [OpenWeatherMap](#openweathermap)
   - [Medusa](#medusa)
@@ -51,6 +52,17 @@ If you experiencing any issue, please have a look to the [troubleshooting](troub
   type: "<type>"
 ```
 
+## GenericWithPort
+Is shown as a generic service, but you can specify an additional port where the service is running, in case there is no DNS for the domain or reverse proxy for this service.
+A link to access this service via port is added to which the browser is redirected based on the base url where the user accessed homer.
+```yaml
+- name: "My Service"
+  logo: "assets/tools/sample.png"
+  url: "http://my-service.domain"
+  port: <my-port>
+  type: "GenericWithPort"
+```
+
 ## PiHole
 
 Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
@@ -479,4 +491,4 @@ You need to set the type to HomeAssistant, provide an api key and enable cors on
   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`
\ No newline at end of file
+To enable cors on HomeAssistant, edit your `configuration.yml` and add the IP of Homer to `https: cors_allowed_origins`

From e298dd22bcce844e08e5179c84b46ed66a3d49d3 Mon Sep 17 00:00:00 2001
From: nkay08 <n.klipp@nkay.info>
Date: Mon, 1 Jul 2024 10:10:02 +0200
Subject: [PATCH 3/3] Fix typo in anchor

---
 docs/customservices.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index ed175937b..3fab6a6dd 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -10,7 +10,7 @@ within Homer:
 
 - [Custom Services](#custom-services)
   - [Common options](#common-options)
-  - [GenericWithPort](#gemericwithport)
+  - [GenericWithPort](#genericwithport)
   - [PiHole](#pihole)
   - [OpenWeatherMap](#openweathermap)
   - [Medusa](#medusa)