Readme

Use custom url for self-hosted

.goreleaser.yml

@@ -2,17 +2,42 @@ before:
   hooks:
     - go mod download
 builds:
-  - binary: ntfy
+  -
+    id: ntfy
+    binary: ntfy
     env:
       - CGO_ENABLED=1 # required for go-sqlite3
-    goos:
-      - linux
-    goarch:
-      - amd64
+    tags: [sqlite_omit_load_extension,osusergo,netgo]
+    ldflags:
+      - "-linkmode=external -extldflags=-static -s -w -X main.version={{.Version}} -X main.commit={{.Commit}} -X main.date={{.Date}}"
+    goos: [linux]
+    goarch: [amd64]
+  -
+    id: ntfy_armv7
+    binary: ntfy
+    env:
+      - CGO_ENABLED=1 # required for go-sqlite3
+      - CC=arm-linux-gnueabi-gcc # apt install gcc-arm-linux-gnueabi
+    tags: [sqlite_omit_load_extension,osusergo,netgo]
+    ldflags:
+      - "-linkmode=external -extldflags=-static -s -w -X main.version={{.Version}} -X main.commit={{.Commit}} -X main.date={{.Date}}"
+    goos: [linux]
+    goarch: [arm]
+    goarm: [7]
+  -
+    id: ntfy_arm64
+    binary: ntfy
+    env:
+      - CGO_ENABLED=1 # required for go-sqlite3
+      - CC=aarch64-linux-gnu-gcc # apt install gcc-aarch64-linux-gnu
+    tags: [sqlite_omit_load_extension,osusergo,netgo]
+    ldflags:
+      - "-linkmode=external -extldflags=-static -s -w -X main.version={{.Version}} -X main.commit={{.Commit}} -X main.date={{.Date}}"
+    goos: [linux]
+    goarch: [arm64]
 nfpms:
   -
     package_name: ntfy
-    file_name_template: "{{ .ProjectName }}_{{ .Version }}_{{ .Arch }}"
     homepage: https://heckel.io/ntfy
     maintainer: Philipp C. Heckel <philipp.heckel@gmail.com>
     description: Simple pub-sub notification service
@@ -51,10 +76,35 @@ changelog:
       - '^docs:'
       - '^test:'
 dockers:
-  - dockerfile: Dockerfile
-    ids:
-      - ntfy
+  - image_templates:
+      - &amd64_image "binwiederhier/ntfy:{{ .Tag }}-amd64"
+    use: buildx
+    dockerfile: Dockerfile
+    goarch: amd64
+    build_flag_templates:
+      - "--platform=linux/amd64"
+  - image_templates:
+      - &arm64v8_image "binwiederhier/ntfy:{{ .Tag }}-arm64v8"
+    use: buildx
+    dockerfile: Dockerfile
+    build_flag_templates:
+      - "--platform=linux/arm64/v8"
+  - image_templates:
+      - &armv7_image "binwiederhier/ntfy:{{ .Tag }}-armv7"
+    use: buildx
+    dockerfile: Dockerfile
+    goarch: arm
+    goarm: 7
+    build_flag_templates:
+      - "--platform=linux/arm/v7"
+docker_manifests:
+  - name_template: "binwiederhier/ntfy:latest"
     image_templates:
-      - "binwiederhier/ntfy:latest"
-      - "binwiederhier/ntfy:{{ .Tag }}"
-      - "binwiederhier/ntfy:v{{ .Major }}.{{ .Minor }}"
+      - *amd64_image
+      - *arm64v8_image
+      - *armv7_image
+  - name_template: "binwiederhier/ntfy:{{ .Tag }}"
+    image_templates:
+      - *amd64_image
+      - *arm64v8_image
+      - *armv7_image

Makefile

@@ -61,6 +61,7 @@ coverage-html:
 coverage-upload:
 	cd build/coverage && (curl -s https://codecov.io/bash | bash)
 
+
 # Lint/formatting targets
 
 fmt:
@@ -84,21 +85,27 @@ staticcheck: .PHONY
 	PATH="$(PWD)/build/staticcheck:$(PATH)" staticcheck ./...
 	rm -rf build/staticcheck
 
+
 # Building targets
 
-build: .PHONY
-	goreleaser build --rm-dist
+build-deps: .PHONY
+	which arm-linux-gnueabi-gcc || { echo "ERROR: ARMv6/v7 cross compiler not installed. On Ubuntu, run: apt install gcc-arm-linux-gnueabi"; exit 1; }
+	which aarch64-linux-gnu-gcc || { echo "ERROR: ARM64 cross compiler not installed. On Ubuntu, run: apt install gcc-aarch64-linux-gnu"; exit 1; }
 
-build-snapshot:
-	goreleaser build --snapshot --rm-dist
+build: build-deps
+	goreleaser build --rm-dist --debug
+
+build-snapshot: build-deps
+	goreleaser build --snapshot --rm-dist --debug
 
 build-simple: clean
 	mkdir -p dist/ntfy_linux_amd64
 	export CGO_ENABLED=1
 	$(GO) build \
 		-o dist/ntfy_linux_amd64/ntfy \
+		-tags sqlite_omit_load_extension,osusergo,netgo \
 		-ldflags \
-		"-s -w -X main.version=$(VERSION) -X main.commit=$(shell git rev-parse --short HEAD) -X main.date=$(shell date +%s)"
+		"-linkmode=external -extldflags=-static -s -w -X main.version=$(VERSION) -X main.commit=$(shell git rev-parse --short HEAD) -X main.date=$(shell date +%s)"
 
 clean: .PHONY
 	rm -rf dist build
@@ -106,11 +113,11 @@ clean: .PHONY
 
 # Releasing targets
 
-release:
-	goreleaser release --rm-dist
+release: build-deps
+	goreleaser release --rm-dist --debug
 
-release-snapshot:
-	goreleaser release --snapshot --skip-publish --rm-dist
+release-snapshot: build-deps
+	goreleaser release --snapshot --skip-publish --rm-dist --debug
 
 
 # Installing targets

README.md

@@ -2,7 +2,7 @@
 
 # ntfy.sh | simple HTTP-based pub-sub
 
-**Ntfy** (pronounce: *notify*) is a simple HTTP-based [pub-sub](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) notification service.
+**ntfy** (pronounce: *notify*) is a simple HTTP-based [pub-sub](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) notification service.
 It allows you to **send notifications to your phone or desktop via scripts** from any computer, entirely **without signup or cost**.
 It's also open source (as you can plainly see) if you want to run your own.
 
@@ -136,19 +136,29 @@ sudo apt install ntfy
 
 **Debian/Ubuntu** (*manual install*)**:**
 ```bash
-sudo apt install tmux
-wget https://github.com/binwiederhier/ntfy/releases/download/v1.4.3/ntfy_1.3.0_amd64.deb
-dpkg -i ntfy_1.4.3_amd64.deb
+wget https://github.com/binwiederhier/ntfy/releases/download/v1.4.8/ntfy_1.4.8_amd64.deb
+dpkg -i ntfy_1.4.8_amd64.deb
 ```
 
 **Fedora/RHEL/CentOS:**
 ```bash
-rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.4.3/ntfy_1.3.0_amd64.rpm
+rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.4.8/ntfy_1.4.8_amd64.rpm
 ```
 
 **Docker:**
+Without cache:
+```
+docker run -p 80:80 -it binwiederhier/ntfy
+```
+
+With cache:
 ```bash
-docker run --rm -it binwiederhier/ntfy
+docker run \
+  -v /var/cache/ntfy:/var/cache/ntfy \
+  -p 80:80 \
+  -it \
+  binwiederhier/ntfy \
+    --cache-file /var/cache/ntfy/cache.db
 ```
 
 **Go:**
@@ -156,15 +166,24 @@ docker run --rm -it binwiederhier/ntfy
 go get -u heckel.io/ntfy
 ```
 
-**Manual install** (*any x86_64-based Linux*)**:**
+**Manual install:**
 ```bash
-wget https://github.com/binwiederhier/ntfy/releases/download/v1.4.3/ntfy_1.3.0_linux_x86_64.tar.gz
-sudo tar -C /usr/bin -zxf ntfy_1.4.3_linux_x86_64.tar.gz ntfy
+# x86_64/amd64
+wget https://github.com/binwiederhier/ntfy/releases/download/v1.4.8/ntfy_1.4.8_linux_x86_64.tar.gz
+
+# armv7
+wget https://github.com/binwiederhier/ntfy/releases/download/v1.4.8/ntfy_1.4.8_linux_armv7.tar.gz
+
+# arm64/v8
+wget https://github.com/binwiederhier/ntfy/releases/download/v1.4.8/ntfy_1.4.8_linux_arm64.tar.gz
+
+# Extract and run
+sudo tar -C /usr/bin -zxf ntfy_*.tar.gz ntfy
 ./ntfy
 ```
 
 ## Building
-Building ntfy is simple. Here's how you do it:
+Building `ntfy` is simple. Here's how you do it:
 
 ```
 make build-simple
@@ -174,9 +193,6 @@ make build-simple
 To build releases, I use [GoReleaser](https://goreleaser.com/). If you have that installed, you can run `make build` or
 `make build-snapshot`.
 
-## TODO
-- add HTTPS
-
 ## Contributing
 I welcome any and all contributions. Just create a PR or an issue.
 
@@ -192,3 +208,4 @@ Third party libraries and resources:
 * [github.com/mattn/go-sqlite3](https://github.com/mattn/go-sqlite3) (MIT) is used to provide the persistent message cache
 * [Firebase Admin SDK](https://github.com/firebase/firebase-admin-go) (Apache 2.0) is used to send FCM messages
 * [Lightbox with vanilla JS](https://yossiabramov.com/blog/vanilla-js-lightbox) 
+* [Statically linking go-sqlite3](https://www.arp242.net/static-go.html)

server/index.gohtml

@@ -34,14 +34,14 @@
 {{end}}
 </head>
 <body>
+<div id="header"><div id="headerBox"><img src="static/img/ntfy.png" alt="ntfy"/></div></div>
 <div id="main"{{if .Topic}} style="display: none"{{end}}>
-    <h1><img src="static/img/ntfy.png" alt="ntfy"/><br/>ntfy.sh | simple HTTP-based pub-sub</h1>
+    <h1>ntfy.sh | simple HTTP-based pub-sub</h1>
     <p>
-        <b>Ntfy</b> (pronounce: <i>notify</i>) is a simple HTTP-based <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern">pub-sub</a> notification service.
-        It allows you to send notifications <a href="#subscribe-phone">to your phone</a> or desktop via scripts from any computer,
-        entirely <b>without signup or cost</b>. It's also <a href="https://github.com/binwiederhier/ntfy">open source</a> if you want to run your own.
+        <b>ntfy</b> (pronounce: <i>notify</i>) is a simple HTTP-based <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern">pub-sub</a> notification service.
+        It allows you to send notifications to your phone or desktop via scripts from any computer,
+        entirely <b>without signup, cost or setup</b>. It's also <a href="https://github.com/binwiederhier/ntfy">open source</a> if you want to run your own.
     </p>
-
     <div id="screenshots">
         <a href="static/img/screenshot-curl.png"><img src="static/img/screenshot-curl.png"/></a>
         <a href="static/img/screenshot-web-detail.png"><img src="static/img/screenshot-web-detail.png"/></a>
@@ -51,11 +51,9 @@
             <a href="static/img/screenshot-phone-notification.jpg"><img src="static/img/screenshot-phone-notification.jpg"/></a>
         </span>
     </div>
-
     <p>
-        There are many ways to use Ntfy. You can send yourself messages for all sorts of things: When a long process finishes or fails,
-        or to notify yourself when somebody logs into your server(s). Or you may want to use it in your own app to distribute messages to subscribed clients.
-        Endless possibilities 😀. Be sure to check out the <a href="#examples">examples below</a>.
+        There are many ways to use it: Notify yourself when a build finishes, when an rsync is done or a backup fails,
+        or know when somebody logs into your server. There are <a href="#examples">many more examples</a>, endless possibilities 😀.
     </p>
 
     <h2 id="publish" class="anchor">Publishing messages</h2>
@@ -64,22 +62,22 @@
         Because there is no sign-up, <b>the topic is essentially a password</b>, so pick something that's not easily guessable.
     </p>
     <p class="smallMarginBottom">
-        Here's an example showing how to publish a message using <tt>curl</tt> (via POST):
+        Here's an example showing how to publish a message using a POST request (via <tt>curl -d</tt>):
     </p>
     <code>
-        curl -d "Backup successful 😀" ntfy.sh/mytopic
+        curl -d "Backup successful 😀" <span class="ntfyUrl">ntfy.sh</span>/mytopic
     </code>
     <p class="smallMarginBottom">
-        And another one using PUT:
+        And another one using PUT (via <tt>curl -T</tt>):
     </p>
     <code>
-        echo -en "\u26A0\uFE0F Unauthorized login" | curl -sT- ntfy.sh/mytopic
+        echo -en "\u26A0\uFE0F Unauthorized login" | curl -T- <span class="ntfyUrl">ntfy.sh</span>/mytopic
     </code>
     <p class="smallMarginBottom">
         Here's an example in JS with <tt>fetch()</tt> (see <a href="https://github.com/binwiederhier/ntfy/tree/main/examples">full example</a>):
     </p>
     <code>
-        fetch('https://ntfy.sh/mytopic', {<br/>
+        fetch('https://<span class="ntfyUrl">ntfy.sh</span>/mytopic', {<br/>
         &nbsp;&nbsp;method: 'POST', // PUT works too<br/>
         &nbsp;&nbsp;body: 'Hello from the other side.'<br/>
         })
@@ -127,7 +125,7 @@
         notifications like this (see <a href="example.html">live example</a>):
     </p>
     <code>
-        const eventSource = new EventSource('https://ntfy.sh/mytopic/sse');<br/>
+        const eventSource = new EventSource('<span class="ntfyProtocol">https://</span><span class="ntfyUrl">ntfy.sh</span>/mytopic/sse');<br/>
         eventSource.onmessage = (e) => {<br/>
         &nbsp;&nbsp;// Do something with e.data<br/>
         };
@@ -136,7 +134,7 @@
         You can also use the same <tt>/sse</tt> endpoint via <tt>curl</tt> or any other HTTP library:
     </p>
     <code>
-        $ curl -s ntfy.sh/mytopic/sse<br/>
+        $ curl -s <span class="ntfyUrl">ntfy.sh</span>/mytopic/sse<br/>
         event: open<br/>
         data: {"id":"weSj9RtNkj","time":1635528898,"event":"open","topic":"mytopic"}<br/><br/>
 
@@ -149,7 +147,7 @@
         To consume JSON instead, use the <tt>/json</tt> endpoint, which prints one message per line:
     </p>
     <code>
-        $ curl -s ntfy.sh/mytopic/json<br/>
+        $ curl -s <span class="ntfyUrl">ntfy.sh</span>/mytopic/json<br/>
         {"id":"SLiKI64DOt","time":1635528757,"event":"open","topic":"mytopic"}<br/>
         {"id":"hwQ2YpKdmg","time":1635528741,"event":"message","topic":"mytopic","message":"Hi!"}<br/>
         {"id":"DGUDShMCsc","time":1635528787,"event":"keepalive","topic":"mytopic"}
@@ -158,7 +156,7 @@
         Or use the <tt>/raw</tt> endpoint if you need something super simple (empty lines are keepalive messages):
     </p>
     <code>
-        $ curl -s ntfy.sh/mytopic/raw<br/>
+        $ curl -s <span class="ntfyUrl">ntfy.sh</span>/mytopic/raw<br/>
         <br/>
         This is a notification<br/>
         And another one with a smiley face 😀
@@ -173,7 +171,7 @@
         cached messages).
     </p>
     <code>
-        curl -s "ntfy.sh/mytopic/json?since=10m"
+        curl -s "<span class="ntfyUrl">ntfy.sh</span>/mytopic/json?since=10m"
     </code>
 
     <h3 id="polling" class="anchor">Polling (<tt>poll=1</tt>)</h3>
@@ -183,7 +181,7 @@
         combined with <tt>since=</tt> (defaults to <tt>since=all</tt>).
     </p>
     <code>
-        curl -s "ntfy.sh/mytopic/json?poll=1"
+        curl -s "<span class="ntfyUrl">ntfy.sh</span>/mytopic/json?poll=1"
     </code>
 
     <h3 id="multiple-topics" class="anchor">Subscribing to multiple topics (<tt>topic1,topic2,...</tt>)</h3>
@@ -192,7 +190,7 @@
         comma-separated list of topics in the URL. This allows you to reduce the number of connections you have to maintain:
     </p>
     <code>
-        $ curl -s ntfy.sh/mytopic1,mytopic2/json<br/>
+        $ curl -s <span class="ntfyUrl">ntfy.sh</span>/mytopic1,mytopic2/json<br/>
         {"id":"0OkXIryH3H","time":1637182619,"event":"open","topic":"mytopic1,mytopic2,mytopic3"}<br/>
         {"id":"dzJJm7BCWs","time":1637182634,"event":"message","topic":"mytopic1","message":"for topic 1"}<br/>
         {"id":"Cm02DsxUHb","time":1637182643,"event":"message","topic":"mytopic2","message":"for topic 2"}
@@ -200,7 +198,7 @@
 
     <h2 id="examples" class="anchor">Examples</h2>
     <p>
-        There are a million ways to use Ntfy, but here are some inspirations. I try to collect
+        There are a million ways to use ntfy, but here are some inspirations. I try to collect
         <a href="https://github.com/binwiederhier/ntfy/tree/main/examples">examples on GitHub</a>, so be sure to check
         those out, too.
     </p>
@@ -214,13 +212,13 @@
     <code>
         rsync -a root@laptop /backups/laptop \<br/>
         &nbsp;&nbsp;&& zfs snapshot ... \<br/>
-        &nbsp;&nbsp;&& curl -d "Laptop backup succeeded" ntfy.sh/backups \<br/>
-        &nbsp;&nbsp;|| echo -en "\u26A0\uFE0F Laptop backup failed" | curl -sT- ntfy.sh/backups
+        &nbsp;&nbsp;&& curl -d "Laptop backup succeeded" <span class="ntfyUrl">ntfy.sh</span>/backups \<br/>
+        &nbsp;&nbsp;|| echo -en "\u26A0\uFE0F Laptop backup failed" | curl -sT- <span class="ntfyUrl">ntfy.sh</span>/backups
     </code>
 
     <h3 id="example-web" class="anchor">Example: Server-sent messages in your web app</h3>
     <p>
-        Just as you can <a href="#subscribe-web">subscribe to topics in this Web UI</a>, you can use Ntfy in your own
+        Just as you can <a href="#subscribe-web">subscribe to topics in this Web UI</a>, you can use ntfy in your own
         web application. Check out the <a href="example.html">live example</a> or just look the source of this page.
     </p>
 
@@ -242,7 +240,7 @@
     <code>
         #!/bin/bash<br/>
         if [ "${PAM_TYPE}" = "open_session" ]; then<br/>
-        &nbsp;&nbsp;echo -en "\u26A0\uFE0F SSH login: ${PAM_USER} from ${PAM_RHOST}" | curl -T- ntfy.sh/alerts<br/>
+        &nbsp;&nbsp;echo -en "\u26A0\uFE0F SSH login: ${PAM_USER} from ${PAM_RHOST}" | curl -T- <span class="ntfyUrl">ntfy.sh</span>/alerts<br/>
         fi
     </code>
 
@@ -254,7 +252,7 @@
     <code>
         while read result; do<br/>
         &nbsp;&nbsp;[ -n "$result" ] && echo "$result" >> results.csv<br/>
-        done < <(stdbuf -i0 -o0 curl -s ntfy.sh/results/raw)
+        done < <(stdbuf -i0 -o0 curl -s <span class="ntfyUrl">ntfy.sh</span>/results/raw)
     </code>
 
     <h2 id="faq" class="anchor">FAQ</h2>
@@ -302,9 +300,24 @@
         is to facilitate instant notifications on Android.
     </p>
 
+    <p>
+        <b id="battery-usage" class="anchor">How much battery does the Android app use?</b><br/>
+        If you use the ntfy.sh server and you don't use the <i>instant delivery</i> feature, the Android app uses no
+        additional battery, since Firebase Cloud Messaging (FCM) is used. If you use your own server, or you use
+        <i>instant delivery</i>, the app has to maintain a constant connection to the server, which consumes about 4% of
+        battery in 17h of use (on my phone). I use it and it makes no difference to me.
+    </p>
+
+    <p>
+        <b id="instant-delivery" class="anchor">What is instant delivery?</b><br/>
+        Instant delivery is a feature in the Android app. If turned on, the app maintains a constant connection to the
+        server and listens for incoming notifications. This consumes <a href="#battery-usage">additional battery</a>,
+        but delivers notifications instantly.
+    </p>
+
     <p>
         <b id="why-no-ios" class="anchor">Why is there no iOS app (yet)?</b><br/>
-        I don't have an iPhone or a Mac, so I didn't make an iOS app yet. I'd be awesome if
+        I don't have an iPhone or a Mac, so I didn't make an iOS app yet. It'd be awesome if
         <a href="https://github.com/binwiederhier/ntfy/issues/4">someone else could help out</a>.
     </p>
 
@@ -325,13 +338,13 @@
 <div id="detail"{{if not .Topic}} style="display: none"{{end}}>
     <div id="detailMain">
         <button id="detailCloseButton"><img src="static/img/close_black_24dp.svg"/></button>
-        <h1><img src="static/img/ntfy.png" alt="ntfy"/><br/><span id="detailTitle"></span></h1>
+        <h1><span id="detailTitle"></span></h1>
         <p class="smallMarginBottom">
-            <b>Ntfy</b> is a simple HTTP-based pub-sub notification service. This is a Ntfy topic.
+            <b>ntfy</b> is a simple HTTP-based pub-sub notification service. This is a ntfy topic.
             To send notifications to it, simply PUT or POST to the topic URL. Here's an example using <tt>curl</tt>:
         </p>
         <code>
-            curl -d "Backup failed" <span id="detailTopicUrl"></span>
+            curl -d "Backup failed" <span id="detailTopicUrl">ntfy.sh/topic</span>
         </code>
         <p id="detailNotificationsDisallowed">
             If you'd like to receive desktop notifications when new messages arrive on this topic, you have

server/static/css/app.css

@@ -4,6 +4,8 @@ html, body {
     font-family: 'Lato', sans-serif;
     color: #333;
     font-size: 1.1em;
+    margin: 0;
+    padding: 0;
 }
 
 html {
@@ -25,6 +27,8 @@ h1 {
     margin-top: 25px;
     margin-bottom: 18px;
     font-size: 2.5em;
+    word-wrap: break-word; /* For very long topics */
+    padding-right: 40px; /* For the X on the detail page */
 }
 
 h2 {
@@ -84,6 +88,7 @@ code {
 #main {
     max-width: 900px;
     margin: 0 auto 50px auto;
+    padding: 0 10px;
 }
 
 #error {
@@ -190,6 +195,23 @@ code {
     background-color: #fff;
 }
 
+/* Header */
+
+#header {
+    background: #3a9784;
+    height: 130px;
+}
+
+#header #headerBox {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 0 10px;
+}
+
+#header img {
+    margin-top: 23px;
+}
+
 /* Subscribe box */
 
 button {
@@ -352,13 +374,6 @@ li {
 /** Detail view */
 #detail {
     display: none;
-    position: absolute;
-    z-index: 1;
-    left: 8px;
-    right: 8px;
-    top: 0;
-    bottom: 0;
-    background: white;
 }
 
 #detail .detailDate {
@@ -375,7 +390,7 @@ li {
     max-width: 900px;
     margin: 0 auto;
     position: relative; /* required for close button's "position: absolute" */
-    padding-bottom: 50px; /* Chrome and Firefox behave differently regarding bottom margin */
+    padding: 0 10px 50px 10px; /* Chrome and Firefox behave differently regarding bottom margin */
 }
 
 #detail #detailCloseButton {
@@ -384,7 +399,7 @@ li {
     border: none;
     padding: 5px;
     position: absolute;
-    right: 0;
+    right: 10px;
     top: 10px;
     display: block;
 }

server/static/js/app.js

@@ -12,6 +12,10 @@
 let topics = {};
 let currentTopic = "";
 let currentTopicUnsubscribeOnClose = false;
+let currentUrl = window.location.hostname;
+if (window.location.port) {
+    currentUrl += ':' + window.location.port
+}
 
 /* Main view */
 const main = document.getElementById("main");
@@ -131,15 +135,15 @@ const fetchCachedMessages = async (topic) => {
 
 const showDetail = (topic) => {
     currentTopic = topic;
-    history.replaceState(topic, `ntfy.sh/${topic}`, `/${topic}`);
+    history.replaceState(topic, `${currentUrl}/${topic}`, `/${topic}`);
     window.scrollTo(0, 0);
     rerenderDetailView();
     return false;
 };
 
 const rerenderDetailView = () => {
-    detailTitle.innerHTML = `ntfy.sh/${currentTopic}`; // document.location.replaceAll(..)
-    detailTopicUrl.innerHTML = `ntfy.sh/${currentTopic}`;
+    detailTitle.innerHTML = `${currentUrl}/${currentTopic}`; // document.location.replaceAll(..)
+    detailTopicUrl.innerHTML = `${currentUrl}/${currentTopic}`;
     while (detailEventsList.firstChild) {
         detailEventsList.removeChild(detailEventsList.firstChild);
     }
@@ -177,7 +181,7 @@ const hideDetailView = () => {
     currentTopic = "";
     history.replaceState('', originalTitle, '/');
     detailView.style.display = 'none';
-    main.style.display = '';
+    main.style.display = 'block';
     return false;
 };
 
@@ -347,3 +351,11 @@ document.querySelectorAll('.anchor').forEach((el) => {
         el.appendChild(anchor);
     }
 });
+
+// Change ntfy.sh url and protocol to match self-hosted one
+document.querySelectorAll('.ntfyUrl').forEach((el) => {
+    el.innerHTML = currentUrl;
+});
+document.querySelectorAll('.ntfyProtocol').forEach((el) => {
+    el.innerHTML = window.location.protocol + "//";
+});