Update README.md

README.md

@@ -1,14 +1,22 @@
 ![ntfy](server/static/img/ntfy.png)
 
-# ntfy - simple HTTP-based pub-sub
+# 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.
 
 I run a free version of it at **[ntfy.sh](https://ntfy.sh)**, and there's an [Android app](https://play.google.com/store/apps/details?id=io.heckel.ntfy)
 too.
 
+<p>
+  <img src="server/static/img/screenshot-curl.png" height="180">
+  <img src="server/static/img/screenshot-web-detail.png" height="180">
+  <img src="server/static/img/screenshot-phone-main.jpg" height="180">
+  <img src="server/static/img/screenshot-phone-detail.jpg" height="180">
+  <img src="server/static/img/screenshot-phone-notification.jpg" height="180">
+</p>
+
 ## Usage
 
 ### Publishing messages
@@ -129,13 +137,13 @@ sudo apt install ntfy
 **Debian/Ubuntu** (*manual install*)**:**
 ```bash
 sudo apt install tmux
-wget https://github.com/binwiederhier/ntfy/releases/download/v1.2.0/ntfy_1.2.0_amd64.deb
-dpkg -i ntfy_1.2.0_amd64.deb
+wget https://github.com/binwiederhier/ntfy/releases/download/v1.3.0/ntfy_1.3.0_amd64.deb
+dpkg -i ntfy_1.3.0_amd64.deb
 ```
 
 **Fedora/RHEL/CentOS:**
 ```bash
-rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.2.0/ntfy_1.2.0_amd64.rpm
+rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.3.0/ntfy_1.3.0_amd64.rpm
 ```
 
 **Docker:**
@@ -150,8 +158,8 @@ go get -u heckel.io/ntfy
 
 **Manual install** (*any x86_64-based Linux*)**:**
 ```bash
-wget https://github.com/binwiederhier/ntfy/releases/download/v1.2.0/ntfy_1.2.0_linux_x86_64.tar.gz
-sudo tar -C /usr/bin -zxf ntfy_1.2.0_linux_x86_64.tar.gz ntfy
+wget https://github.com/binwiederhier/ntfy/releases/download/v1.3.0/ntfy_1.3.0_linux_x86_64.tar.gz
+sudo tar -C /usr/bin -zxf ntfy_1.3.0_linux_x86_64.tar.gz ntfy
 ./ntfy
 ```
 
@@ -183,3 +191,4 @@ Third party libraries and resources:
 * [GoReleaser](https://goreleaser.com/) (MIT) is used to create releases
 * [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) 

cmd/app.go

@@ -22,8 +22,13 @@ func New() *cli.App {
 		altsrc.NewStringFlag(&cli.StringFlag{Name: "firebase-key-file", Aliases: []string{"F"}, EnvVars: []string{"NTFY_FIREBASE_KEY_FILE"}, Usage: "Firebase credentials file; if set additionally publish to FCM topic"}),
 		altsrc.NewStringFlag(&cli.StringFlag{Name: "cache-file", Aliases: []string{"C"}, EnvVars: []string{"NTFY_CACHE_FILE"}, Usage: "cache file used for message caching"}),
 		altsrc.NewDurationFlag(&cli.DurationFlag{Name: "cache-duration", Aliases: []string{"b"}, EnvVars: []string{"NTFY_CACHE_DURATION"}, Value: config.DefaultCacheDuration, Usage: "buffer messages for this time to allow `since` requests"}),
-		altsrc.NewDurationFlag(&cli.DurationFlag{Name: "keepalive-interval", Aliases: []string{"k"}, EnvVars: []string{"NTFY_KEEPALIVE_INTERVAL"}, Value: config.DefaultKeepaliveInterval, Usage: "default interval of keepalive messages"}),
-		altsrc.NewDurationFlag(&cli.DurationFlag{Name: "manager-interval", Aliases: []string{"m"}, EnvVars: []string{"NTFY_MANAGER_INTERVAL"}, Value: config.DefaultManagerInterval, Usage: "default interval of for message pruning and stats printing"}),
+		altsrc.NewDurationFlag(&cli.DurationFlag{Name: "keepalive-interval", Aliases: []string{"k"}, EnvVars: []string{"NTFY_KEEPALIVE_INTERVAL"}, Value: config.DefaultKeepaliveInterval, Usage: "interval of keepalive messages"}),
+		altsrc.NewDurationFlag(&cli.DurationFlag{Name: "manager-interval", Aliases: []string{"m"}, EnvVars: []string{"NTFY_MANAGER_INTERVAL"}, Value: config.DefaultManagerInterval, Usage: "interval of for message pruning and stats printing"}),
+		altsrc.NewIntFlag(&cli.IntFlag{Name: "global-topic-limit", Aliases: []string{"T"}, EnvVars: []string{"NTFY_GLOBAL_TOPIC_LIMIT"}, Value: config.DefaultGlobalTopicLimit, Usage: "total number of topics allowed"}),
+		altsrc.NewIntFlag(&cli.IntFlag{Name: "visitor-subscription-limit", Aliases: []string{"V"}, EnvVars: []string{"NTFY_VISITOR_SUBSCRIPTION_LIMIT"}, Value: config.DefaultVisitorSubscriptionLimit, Usage: "number of subscriptions per visitor"}),
+		altsrc.NewIntFlag(&cli.IntFlag{Name: "visitor-request-limit-burst", Aliases: []string{"B"}, EnvVars: []string{"NTFY_VISITOR_REQUEST_LIMIT_BURST"}, Value: config.DefaultVisitorRequestLimitBurst, Usage: "initial limit of requests per visitor"}),
+		altsrc.NewDurationFlag(&cli.DurationFlag{Name: "visitor-request-limit-replenish", Aliases: []string{"R"}, EnvVars: []string{"NTFY_VISITOR_REQUEST_LIMIT_REPLENISH"}, Value: config.DefaultVisitorRequestLimitReplenish, Usage: "interval at which burst limit is replenished (one per x)"}),
+		altsrc.NewBoolFlag(&cli.BoolFlag{Name: "behind-proxy", Aliases: []string{"P"}, EnvVars: []string{"NTFY_BEHIND_PROXY"}, Value: false, Usage: "if set, use X-Forwarded-For header to determine visitor IP address (for rate limiting)"}),
 	}
 	return &cli.App{
 		Name:                   "ntfy",
@@ -50,6 +55,11 @@ func execRun(c *cli.Context) error {
 	cacheDuration := c.Duration("cache-duration")
 	keepaliveInterval := c.Duration("keepalive-interval")
 	managerInterval := c.Duration("manager-interval")
+	globalTopicLimit := c.Int("global-topic-limit")
+	visitorSubscriptionLimit := c.Int("visitor-subscription-limit")
+	visitorRequestLimitBurst := c.Int("visitor-request-limit-burst")
+	visitorRequestLimitReplenish := c.Duration("visitor-request-limit-replenish")
+	behindProxy := c.Bool("behind-proxy")
 
 	// Check values
 	if firebaseKeyFile != "" && !util.FileExists(firebaseKeyFile) {
@@ -69,6 +79,11 @@ func execRun(c *cli.Context) error {
 	conf.CacheDuration = cacheDuration
 	conf.KeepaliveInterval = keepaliveInterval
 	conf.ManagerInterval = managerInterval
+	conf.GlobalTopicLimit = globalTopicLimit
+	conf.VisitorSubscriptionLimit = visitorSubscriptionLimit
+	conf.VisitorRequestLimitBurst = visitorRequestLimitBurst
+	conf.VisitorRequestLimitReplenish = visitorRequestLimitReplenish
+	conf.BehindProxy = behindProxy
 	s, err := server.New(conf)
 	if err != nil {
 		log.Fatalln(err)

config/config.go

@@ -2,7 +2,6 @@
 package config
 
 import (
-	"golang.org/x/time/rate"
 	"time"
 )
 
@@ -15,42 +14,44 @@ const (
 )
 
 // Defines all the limits
-// - request limit: max number of PUT/GET/.. requests (here: 50 requests bucket, replenished at a rate of one per 10 seconds)
 // - global topic limit: max number of topics overall
-// - subscription limit: max number of subscriptions (active HTTP connections) per per-visitor/IP
-var (
-	defaultGlobalTopicLimit         = 5000
-	defaultVisitorRequestLimit      = rate.Every(10 * time.Second)
-	defaultVisitorRequestLimitBurst = 50
-	defaultVisitorSubscriptionLimit = 30
+// - per visistor request limit: max number of PUT/GET/.. requests (here: 60 requests bucket, replenished at a rate of one per 10 seconds)
+// - per visistor subscription limit: max number of subscriptions (active HTTP connections) per per-visitor/IP
+const (
+	DefaultGlobalTopicLimit             = 5000
+	DefaultVisitorRequestLimitBurst     = 60
+	DefaultVisitorRequestLimitReplenish = 10 * time.Second
+	DefaultVisitorSubscriptionLimit     = 30
 )
 
 // Config is the main config struct for the application. Use New to instantiate a default config struct.
 type Config struct {
-	ListenHTTP               string
-	FirebaseKeyFile          string
-	CacheFile                string
-	CacheDuration            time.Duration
-	KeepaliveInterval        time.Duration
-	ManagerInterval          time.Duration
-	GlobalTopicLimit         int
-	VisitorRequestLimit      rate.Limit
-	VisitorRequestLimitBurst int
-	VisitorSubscriptionLimit int
+	ListenHTTP                   string
+	FirebaseKeyFile              string
+	CacheFile                    string
+	CacheDuration                time.Duration
+	KeepaliveInterval            time.Duration
+	ManagerInterval              time.Duration
+	GlobalTopicLimit             int
+	VisitorRequestLimitBurst     int
+	VisitorRequestLimitReplenish time.Duration
+	VisitorSubscriptionLimit     int
+	BehindProxy                  bool
 }
 
 // New instantiates a default new config
 func New(listenHTTP string) *Config {
 	return &Config{
-		ListenHTTP:               listenHTTP,
-		FirebaseKeyFile:          "",
-		CacheFile:                "",
-		CacheDuration:            DefaultCacheDuration,
-		KeepaliveInterval:        DefaultKeepaliveInterval,
-		ManagerInterval:          DefaultManagerInterval,
-		GlobalTopicLimit:         defaultGlobalTopicLimit,
-		VisitorRequestLimit:      defaultVisitorRequestLimit,
-		VisitorRequestLimitBurst: defaultVisitorRequestLimitBurst,
-		VisitorSubscriptionLimit: defaultVisitorSubscriptionLimit,
+		ListenHTTP:                   listenHTTP,
+		FirebaseKeyFile:              "",
+		CacheFile:                    "",
+		CacheDuration:                DefaultCacheDuration,
+		KeepaliveInterval:            DefaultKeepaliveInterval,
+		ManagerInterval:              DefaultManagerInterval,
+		GlobalTopicLimit:             DefaultGlobalTopicLimit,
+		VisitorRequestLimitBurst:     DefaultVisitorRequestLimitBurst,
+		VisitorRequestLimitReplenish: DefaultVisitorRequestLimitReplenish,
+		VisitorSubscriptionLimit:     DefaultVisitorSubscriptionLimit,
+		BehindProxy:                  false,
 	}
 }

config/config.yml

@@ -25,6 +25,30 @@
 #
 # keepalive-interval: 30s
 
-# Interval in which the manager prunes old messages, deletes topics and prints the stats.
+# Interval in which the manager prunes old messages, deletes topics
+# and prints the stats.
 #
 # manager-interval: 1m
+
+# Rate limiting: Total number of topics before the server rejects new topics.
+#
+# global-topic-limit: 5000
+
+# Rate limiting: Number of subscriptions per visitor (IP address)
+#
+# visitor-subscription-limit: 30
+
+# Rate limiting: Allowed GET/PUT/POST requests per second, per visitor:
+# - visitor-request-limit-burst is the initial bucket of requests each visitor has
+# - visitor-request-limit-replenish is the rate at which the bucket is refilled
+#
+# visitor-request-limit-burst: 60
+# visitor-request-limit-replenish: 10s
+
+# If set, the X-Forwarded-For header is used to determine the visitor IP address
+# instead of the remote address of the connection.
+#
+# WARNING: If you are behind a proxy, you must set this, otherwise all visitors are rate limited
+#          as if they are one.
+#
+# behind-proxy: false

examples/ssh-login-alert/ntfy-ssh-login.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+# This is a PAM script hook that shows how to notify you when
+# somebody logs into your server. Place at /usr/local/bin/ntfy-ssh-login.sh (with chmod +x!).
+
+if [ "${PAM_TYPE}" = "open_session" ]; then
+  echo -en "\u26A0\uFE0F SSH login to $(hostname): ${PAM_USER} from ${PAM_RHOST}" | curl -T- ntfy.sh/alerts
+fi

examples/ssh-login-alert/pam_sshd

@@ -0,0 +1,8 @@
+# PAM config file snippet
+#
+# Put this snippet AT THE END of the file /etc/pam.d/sshd
+# See https://geekthis.net/post/run-scripts-after-ssh-authentication/ for details.
+
+# (lots of stuff here ...)
+
+session optional pam_exec.so /usr/local/bin/ntfy-ssh-login.sh

server/cache.go

@@ -7,7 +7,7 @@ import (
 
 type cache interface {
 	AddMessage(m *message) error
-	Messages(topic string, since time.Time) ([]*message, error)
+	Messages(topic string, since sinceTime) ([]*message, error)
 	MessageCount(topic string) (int, error)
 	Topics() (map[string]*topic, error)
 	Prune(keep time.Duration) error

server/cache_mem.go

@@ -29,7 +29,7 @@ func (s *memCache) AddMessage(m *message) error {
 	return nil
 }
 
-func (s *memCache) Messages(topic string, since time.Time) ([]*message, error) {
+func (s *memCache) Messages(topic string, since sinceTime) ([]*message, error) {
 	s.mu.Lock()
 	defer s.mu.Unlock()
 	if _, ok := s.messages[topic]; !ok {
@@ -38,7 +38,7 @@ func (s *memCache) Messages(topic string, since time.Time) ([]*message, error) {
 	messages := make([]*message, 0) // copy!
 	for _, m := range s.messages[topic] {
 		msgTime := time.Unix(m.Time, 0)
-		if msgTime == since || msgTime.After(since) {
+		if msgTime == since.Time() || msgTime.After(since.Time()) {
 			messages = append(messages, m)
 		}
 	}

server/cache_sqlite.go

@@ -55,8 +55,8 @@ func (c *sqliteCache) AddMessage(m *message) error {
 	return err
 }
 
-func (c *sqliteCache) Messages(topic string, since time.Time) ([]*message, error) {
-	rows, err := c.db.Query(selectMessagesSinceTimeQuery, topic, since.Unix())
+func (c *sqliteCache) Messages(topic string, since sinceTime) ([]*message, error) {
+	rows, err := c.db.Query(selectMessagesSinceTimeQuery, topic, since.Time().Unix())
 	if err != nil {
 		return nil, err
 	}

server/index.gohtml

@@ -1,3 +1,4 @@
+{{- /*gotype: heckel.io/ntfy/server.indexPage*/ -}}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -27,16 +28,35 @@
     <meta property="og:description" content="ntfy is a simple HTTP-based pub-sub notification service. It allows you to send desktop notifications via scripts from any computer, entirely without signup or cost. Made with ❤ by Philipp C. Heckel, Apache License 2.0, source at https://heckel.io/ntfy." />
     <meta property="og:image" content="/static/img/ntfy.png" />
     <meta property="og:url" content="https://ntfy.sh" />
+{{if .Topic}}
+    <!-- Never index topic page -->
+    <meta name="robots" content="noindex, nofollow" />
+{{end}}
 </head>
 <body>
-<div id="main">
-    <h1><img src="static/img/ntfy.png" alt="ntfy"/><br/>ntfy.sh - simple HTTP-based pub-sub</h1>
+<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>
     <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 <b>notifications to your phone or desktop via scripts from any computer</b>, 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 <a href="https://play.google.com/store/apps/details?id=io.heckel.ntfy">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.
+    </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>
+        <span class="nowrap">
+            <a href="static/img/screenshot-phone-main.jpg"><img src="static/img/screenshot-phone-main.jpg"/></a>
+            <a href="static/img/screenshot-phone-detail.jpg"><img src="static/img/screenshot-phone-detail.jpg"/></a>
+            <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 (a backup, a long rsync job, ...),
+        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="https://github.com/binwiederhier/ntfy/tree/main/examples">example on GitHub</a>!
     </p>
-    <p id="error"></p>
 
     <h2>Publishing messages</h2>
     <p>
@@ -65,23 +85,26 @@
         <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">EventSource</a>, a JSON feed, or raw feed.
     </p>
 
-    <h3>Subscribe via web</h3>
-    <p>
-        If you subscribe to a topic via this web UI in the field below, messages published to any subscribed topic
-        will show up as <b>desktop notification</b>.
-    </p>
-    <form id="subscribeForm">
+    <div id="subscribeBox">
+        <h3>Subscribe in this Web UI</h3>
+        <p id="error"></p>
         <p>
-            <label for="topicField">Subscribe to topic:</label>
-            <input type="text" id="topicField" placeholder="Letters, numbers, _ and -"  pattern="[-_A-Za-z]{1,64}" />
-            <input type="submit" id="subscribeButton" value="Subscribe" />
+            Subscribe to topics here and receive messages as <b>desktop notification</b>. Topics are not password-protected,
+            so choose a name that's not easy to guess. Once subscribed, you can publish messages via PUT/POST.
         </p>
-    </form>
-    <p id="topicsHeader">Topics:</p>
-    <ul id="topicsList"></ul>
-    <audio id="notifySound" src="static/sound/mixkit-message-pop-alert-2354.mp3"></audio>
+        <form id="subscribeForm">
+            <p>
+                <b>Topic:</b><br/>
+                <input type="text" id="topicField" autocomplete="off" placeholder="Topic name, e.g. phil_alerts" maxlength="64" pattern="[-_A-Za-z0-9]{1,64}" />
+                <button id="subscribeButton">Subscribe</button>
+            </p>
+            <p id="topicsHeader"><b>Subscribed topics:</b></p>
+            <ul id="topicsList"></ul>
+        </form>
+        <audio id="notifySound" src="static/sound/mixkit-message-pop-alert-2354.mp3"></audio>
+    </div>
 
-    <h3>Subscribe via phone</h3>
+    <h3>Subscribe via Android App</h3>
     <p>
         You can use the <a href="https://play.google.com/store/apps/details?id=io.heckel.ntfy">Ntfy Android App</a>
         to receive notifications directly on your phone. Just like the server, this app is also <a href="https://github.com/binwiederhier/ntfy-android">open source</a>.
@@ -128,6 +151,14 @@
         <br/>
         This is a notification
     </code>
+    <p class="smallMarginBottom">
+        Here's an example of how to use this endpoint to send desktop notifications for every incoming message:
+    </p>
+    <code>
+        while read msg; do<br/>
+        &nbsp;&nbsp;[ -n "$msg" ] && notify-send "$msg"<br/>
+        done < <(stdbuf -i0 -o0 curl -s ntfy.sh/mytopic/raw)
+    </code>
 
     <h3>Message buffering and polling</h3>
     <p class="smallMarginBottom">
@@ -177,8 +208,7 @@
         In addition to caching messages locally and delivering them to long-polling subscribers, all messages are also
         published to Firebase Cloud Messaging (FCM) (if <tt>FirebaseKeyFile</tt> is set, which it is on ntfy.sh). This
         is to facilitate instant notifications on Android. I tried really, really hard to avoid using FCM, but newer
-        versions of Android made it impossible to implement <a href="https://developer.android.com/guide/background">background services</a>>.
-        I'm sorry.
+        versions of Android made it impossible to implement <a href="https://developer.android.com/guide/background">background services</a>.
     </p>
 
     <h2>Privacy policy</h2>
@@ -188,7 +218,6 @@
         is the Firebase Cloud Messaging (FCM) service, which is required to provide instant Android notifications (see
         FAQ for details).
     </p>
-
     <p>
         The web server does not log or otherwise store request paths, remote IP addresses or even topics or messages,
         aside from a short on-disk cache (up to a day) to support service restarts.
@@ -196,6 +225,32 @@
 
     <center id="ironicCenterTagDontFreakOut"><i>Made with ❤️ by <a href="https://heckel.io">Philipp C. Heckel</a></i></center>
 </div>
+<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>
+        <p class="smallMarginBottom">
+            <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>
+        </code>
+        <p id="detailNotificationsDisallowed">
+            If you'd like to receive desktop notifications when new messages arrive on this topic, you have
+            <a href="#" onclick="return requestPermission()">grant the browser permission</a> to show notifications.
+            Click the link to do so.
+        </p>
+        <p class="smallMarginBottom">
+            <b>Recent notifications</b> (cached for {{.CacheDuration}}):
+        </p>
+        <p id="detailNoNotifications">
+            <i>You haven't received any notifications for this topic yet.</i>
+        </p>
+        <div id="detailEventsList"></div>
+    </div>
+</div>
+<div id="lightbox" class="lightbox"></div>
 <script src="static/js/app.js"></script>
 </body>
 </html>

server/server.go

@@ -11,6 +11,8 @@ import (
 	"fmt"
 	"google.golang.org/api/option"
 	"heckel.io/ntfy/config"
+	"heckel.io/ntfy/util"
+	"html/template"
 	"io"
 	"log"
 	"net"
@@ -46,20 +48,45 @@ func (e errHTTP) Error() string {
 	return fmt.Sprintf("http: %s", e.Status)
 }
 
+type indexPage struct {
+	Topic         string
+	CacheDuration string
+}
+
+type sinceTime time.Time
+
+func (t sinceTime) IsAll() bool {
+	return t == sinceAllMessages
+}
+
+func (t sinceTime) IsNone() bool {
+	return t == sinceNoMessages
+}
+
+func (t sinceTime) Time() time.Time {
+	return time.Time(t)
+}
+
+var (
+	sinceAllMessages = sinceTime(time.Unix(0, 0))
+	sinceNoMessages  = sinceTime(time.Unix(1, 0))
+)
+
 const (
 	messageLimit = 512
 )
 
 var (
-	topicRegex = regexp.MustCompile(`^/[^/]+$`)
-	jsonRegex  = regexp.MustCompile(`^/[^/]+/json$`)
-	sseRegex   = regexp.MustCompile(`^/[^/]+/sse$`)
-	rawRegex   = regexp.MustCompile(`^/[^/]+/raw$`)
+	topicRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}$`) // Regex must match JS & Android app!
+	jsonRegex  = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}/json$`)
+	sseRegex   = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}/sse$`)
+	rawRegex   = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}/raw$`)
 
 	staticRegex = regexp.MustCompile(`^/static/.+`)
 
-	//go:embed "index.html"
-	indexSource string
+	//go:embed "index.gohtml"
+	indexSource   string
+	indexTemplate = template.Must(template.New("index").Parse(indexSource))
 
 	//go:embed static
 	webStaticFs embed.FS
@@ -159,31 +186,35 @@ func (s *Server) handle(w http.ResponseWriter, r *http.Request) {
 }
 
 func (s *Server) handleInternal(w http.ResponseWriter, r *http.Request) error {
-	v := s.visitor(r.RemoteAddr)
-	if err := v.RequestAllowed(); err != nil {
-		return err
-	}
-	if r.Method == http.MethodGet && r.URL.Path == "/" {
+	if r.Method == http.MethodGet && (r.URL.Path == "/" || topicRegex.MatchString(r.URL.Path)) {
 		return s.handleHome(w, r)
+	} else if r.Method == http.MethodHead && r.URL.Path == "/" {
+		return s.handleEmpty(w, r)
 	} else if r.Method == http.MethodGet && staticRegex.MatchString(r.URL.Path) {
 		return s.handleStatic(w, r)
-	} else if (r.Method == http.MethodPut || r.Method == http.MethodPost) && topicRegex.MatchString(r.URL.Path) {
-		return s.handlePublish(w, r, v)
-	} else if r.Method == http.MethodGet && jsonRegex.MatchString(r.URL.Path) {
-		return s.handleSubscribeJSON(w, r, v)
-	} else if r.Method == http.MethodGet && sseRegex.MatchString(r.URL.Path) {
-		return s.handleSubscribeSSE(w, r, v)
-	} else if r.Method == http.MethodGet && rawRegex.MatchString(r.URL.Path) {
-		return s.handleSubscribeRaw(w, r, v)
 	} else if r.Method == http.MethodOptions {
 		return s.handleOptions(w, r)
+	} else if (r.Method == http.MethodPut || r.Method == http.MethodPost) && topicRegex.MatchString(r.URL.Path) {
+		return s.withRateLimit(w, r, s.handlePublish)
+	} else if r.Method == http.MethodGet && jsonRegex.MatchString(r.URL.Path) {
+		return s.withRateLimit(w, r, s.handleSubscribeJSON)
+	} else if r.Method == http.MethodGet && sseRegex.MatchString(r.URL.Path) {
+		return s.withRateLimit(w, r, s.handleSubscribeSSE)
+	} else if r.Method == http.MethodGet && rawRegex.MatchString(r.URL.Path) {
+		return s.withRateLimit(w, r, s.handleSubscribeRaw)
 	}
 	return errHTTPNotFound
 }
 
 func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) error {
-	_, err := io.WriteString(w, indexSource)
-	return err
+	return indexTemplate.Execute(w, &indexPage{
+		Topic:         r.URL.Path[1:],
+		CacheDuration: util.DurationToHuman(s.config.CacheDuration),
+	})
+}
+
+func (s *Server) handleEmpty(w http.ResponseWriter, r *http.Request) error {
+	return nil
 }
 
 func (s *Server) handleStatic(w http.ResponseWriter, r *http.Request) error {
@@ -226,7 +257,7 @@ func (s *Server) handleSubscribeJSON(w http.ResponseWriter, r *http.Request, v *
 		}
 		return buf.String(), nil
 	}
-	return s.handleSubscribe(w, r, v, "json", "application/stream+json", encoder)
+	return s.handleSubscribe(w, r, v, "json", "application/x-ndjson", encoder)
 }
 
 func (s *Server) handleSubscribeSSE(w http.ResponseWriter, r *http.Request, v *visitor) error {
@@ -280,8 +311,8 @@ func (s *Server) handleSubscribe(w http.ResponseWriter, r *http.Request, v *visi
 		}
 		return nil
 	}
-	w.Header().Set("Access-Control-Allow-Origin", "*") // CORS, allow cross-origin requests
-	w.Header().Set("Content-Type", contentType)
+	w.Header().Set("Access-Control-Allow-Origin", "*")            // CORS, allow cross-origin requests
+	w.Header().Set("Content-Type", contentType+"; charset=utf-8") // Android/Volley client needs charset!
 	if poll {
 		return s.sendOldMessages(t, since, sub)
 	}
@@ -306,8 +337,8 @@ func (s *Server) handleSubscribe(w http.ResponseWriter, r *http.Request, v *visi
 	}
 }
 
-func (s *Server) sendOldMessages(t *topic, since time.Time, sub subscriber) error {
-	if since.IsZero() {
+func (s *Server) sendOldMessages(t *topic, since sinceTime, sub subscriber) error {
+	if since.IsNone() {
 		return nil
 	}
 	messages, err := s.cache.Messages(t.id, since)
@@ -322,17 +353,27 @@ func (s *Server) sendOldMessages(t *topic, since time.Time, sub subscriber) erro
 	return nil
 }
 
-func parseSince(r *http.Request) (time.Time, error) {
+// parseSince returns a timestamp identifying the time span from which cached messages should be received.
+//
+// Values in the "since=..." parameter can be either a unix timestamp or a duration (e.g. 12h), or
+// "all" for all messages.
+func parseSince(r *http.Request) (sinceTime, error) {
 	if !r.URL.Query().Has("since") {
-		return time.Time{}, nil
+		if r.URL.Query().Has("poll") {
+			return sinceAllMessages, nil
+		}
+		return sinceNoMessages, nil
 	}
-	if since, err := strconv.ParseInt(r.URL.Query().Get("since"), 10, 64); err == nil {
-		return time.Unix(since, 0), nil
+	if r.URL.Query().Get("since") == "all" {
+		return sinceAllMessages, nil
+	}
+	if s, err := strconv.ParseInt(r.URL.Query().Get("since"), 10, 64); err == nil {
+		return sinceTime(time.Unix(s, 0)), nil
 	}
 	if d, err := time.ParseDuration(r.URL.Query().Get("since")); err == nil {
-		return time.Now().Add(-1 * d), nil
+		return sinceTime(time.Now().Add(-1 * d)), nil
 	}
-	return time.Time{}, errHTTPBadRequest
+	return sinceNoMessages, errHTTPBadRequest
 }
 
 func (s *Server) handleOptions(w http.ResponseWriter, r *http.Request) error {
@@ -394,15 +435,27 @@ func (s *Server) updateStatsAndExpire() {
 		s.messages, len(s.topics), subscribers, messages, len(s.visitors))
 }
 
+func (s *Server) withRateLimit(w http.ResponseWriter, r *http.Request, handler func(w http.ResponseWriter, r *http.Request, v *visitor) error) error {
+	v := s.visitor(r)
+	if err := v.RequestAllowed(); err != nil {
+		return err
+	}
+	return handler(w, r, v)
+}
+
 // visitor creates or retrieves a rate.Limiter for the given visitor.
 // This function was taken from https://www.alexedwards.net/blog/how-to-rate-limit-http-requests (MIT).
-func (s *Server) visitor(remoteAddr string) *visitor {
+func (s *Server) visitor(r *http.Request) *visitor {
 	s.mu.Lock()
 	defer s.mu.Unlock()
+	remoteAddr := r.RemoteAddr
 	ip, _, err := net.SplitHostPort(remoteAddr)
 	if err != nil {
 		ip = remoteAddr // This should not happen in real life; only in tests.
 	}
+	if s.config.BehindProxy && r.Header.Get("X-Forwarded-For") != "" {
+		ip = r.Header.Get("X-Forwarded-For")
+	}
 	v, exists := s.visitors[ip]
 	if !exists {
 		s.visitors[ip] = newVisitor(s.config)

server/static/css/app.css

@@ -6,6 +6,12 @@ html, body {
     font-size: 1.1em;
 }
 
+html {
+    /* prevent scrollbar from repositioning website:
+     * https://www.w3docs.com/snippets/css/how-to-prevent-scrollbar-from-repositioning-web-page.html */
+    overflow-y: scroll;
+}
+
 a, a:visited {
     color: #3a9784;
 }
@@ -58,6 +64,7 @@ code {
     border-radius: 3px;
     margin-top: 10px;
     margin-bottom: 20px;
+    overflow-x: auto;
 }
 
 /* Lato font (OFL), https://fonts.google.com/specimen/Lato#about,
@@ -87,3 +94,298 @@ code {
 #ironicCenterTagDontFreakOut {
     color: #666;
 }
+
+/* Screenshots */
+
+#screenshots {
+    text-align: center;
+}
+
+#screenshots img {
+    height: 190px;
+    margin: 3px;
+    border-radius: 5px;
+    filter: drop-shadow(2px 2px 2px #ddd);
+}
+
+#screenshots .nowrap {
+    white-space: nowrap;
+}
+
+/* Lightbox; thanks to https://yossiabramov.com/blog/vanilla-js-lightbox */
+
+.lightbox {
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    left:0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease-in;
+}
+
+.lightbox.show {
+    background-color: rgba(0,0,0, 0.75);
+    opacity: 1;
+    visibility: visible;
+    z-index: 1000;
+}
+
+.lightbox img {
+    max-width: 90%;
+    max-height: 90%;
+    filter: drop-shadow(5px 5px 10px #222);
+    border-radius: 5px;
+}
+
+.lightbox .close-lightbox {
+    cursor: pointer;
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    width: 20px;
+    height: 20px;
+}
+
+.lightbox .close-lightbox::after,
+.lightbox .close-lightbox::before {
+    content: '';
+    width: 3px;
+    height: 20px;
+    background-color: #ddd;
+    position: absolute;
+    border-radius: 5px;
+    transform: rotate(45deg);
+}
+
+.lightbox .close-lightbox::before {
+    transform: rotate(-45deg);
+}
+
+.lightbox .close-lightbox:hover::after,
+.lightbox .close-lightbox:hover::before {
+    background-color: #fff;
+}
+
+/* Subscribe box */
+
+button {
+    background: #3a9784;
+    border: none;
+    border-radius: 3px;
+    padding: 3px 5px;
+    color: white;
+    cursor: pointer;
+}
+
+button:hover {
+    background: #317f6f;
+    padding: 5px;
+}
+
+ul {
+    padding-left: 1em;
+    list-style-type: circle;
+    padding-bottom: 0;
+    margin: 0;
+}
+
+li {
+    padding: 4px 0;
+    margin: 4px 0;
+    font-size: 0.9em;
+}
+
+/* Subscribe box SMALL SCREEN */
+@media only screen and (max-width: 1599px) {
+    #subscribeBox #subscribeForm {
+        border-left: 4px solid #3a9784;
+        padding: 10px;
+    }
+
+    #subscribeBox #topicsHeader {
+        margin-bottom: 0;
+    }
+
+    #subscribeBox input {
+        height: 24px;
+        min-width: 200px;
+        max-width: 300px;
+        border-radius: 3px;
+        border: none;
+        border-bottom: 1px solid #aaa;
+        font-size: 0.8em;
+    }
+
+    #subscribeBox input:focus {
+        border-bottom: 2px solid #3a9784;
+        outline: none;
+    }
+
+    #subscribeBox ul {
+        margin: 0;
+    }
+
+    #subscribeBox li {
+        margin: 3px 0;
+        padding: 0;
+    }
+
+    #subscribeBox li img {
+        width: 15px;
+        height: 15px;
+        vertical-align: bottom;
+    }
+
+    #subscribeBox li a {
+        padding: 0 5px 0 0;
+    }
+
+    #subscribeBox button {
+        font-size: 0.8em;
+        background: #3a9784;
+        border-radius: 3px;
+        padding: 5px;
+        color: white;
+        cursor: pointer;
+    }
+
+    #subscribeBox button:hover {
+        background: #317f6f;
+    }
+}
+
+/* Subscribe box BIG SCREEN */
+@media only screen and (min-width: 1600px) {
+    #subscribeBox {
+        position: fixed;
+        top: 170px;
+        right: 10px;
+        width: 300px;
+        border-left: 4px solid #3a9784;
+        padding: 10px;
+    }
+
+    #subscribeBox h3 {
+        margin-top: 0;
+        margin-bottom: 5px;
+        font-size: 1.1em;
+    }
+
+    #subscribeBox #topicsHeader {
+        margin-bottom: 0;
+    }
+
+    #subscribeBox p {
+        font-size: 0.9em;
+        margin-bottom: 10px;
+    }
+
+    #subscribeBox ul {
+        margin: 0;
+    }
+
+    #subscribeBox input {
+        height: 18px;
+        border-radius: 3px;
+        border: none;
+        border-bottom: 1px solid #aaa;
+    }
+
+    #subscribeBox input:focus {
+        border-bottom: 2px solid #3a9784;
+        outline: none;
+    }
+
+    #subscribeBox li {
+        margin: 3px 0;
+        padding: 0;
+    }
+
+    #subscribeBox li img {
+        width: 15px;
+        height: 15px;
+        vertical-align: bottom;
+    }
+
+    #subscribeBox li a {
+        padding: 0 5px 0 0;
+    }
+
+    #subscribeBox button {
+        font-size: 0.7em;
+        background: #3a9784;
+        border-radius: 3px;
+        padding: 5px;
+        color: white;
+        cursor: pointer;
+    }
+
+    #subscribeBox button:hover {
+        background: #317f6f;
+    }
+}
+
+/** Detail view */
+#detail {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    left: 8px;
+    right: 8px;
+    top: 0;
+    bottom: 0;
+    background: white;
+}
+
+#detail .detailDate {
+    color: #888;
+    font-size: 0.9em;
+}
+
+#detail .detailMessage {
+    margin-bottom: 20px;
+    font-size: 1.1em;
+}
+
+#detail #detailMain {
+    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 */
+}
+
+#detail #detailCloseButton {
+    background: #eee;
+    border-radius: 5px;
+    border: none;
+    padding: 5px;
+    position: absolute;
+    right: 0;
+    top: 10px;
+    display: block;
+}
+
+#detail #detailCloseButton:hover {
+    padding: 5px;
+    background: #ccc;
+}
+
+#detail #detailCloseButton img {
+    display: block; /* get rid of the weird bottom border */
+}
+
+#detail #detailNotificationsDisallowed {
+    display: none;
+    color: darkred;
+}
+
+#detail #events {
+    max-width: 900px;
+    margin: 0 auto 50px auto;
+}

server/static/img/clear_black_24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>

server/static/img/close_black_24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>

server/static/img/send_black_24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>

server/static/js/app.js

@@ -10,37 +10,53 @@
 /* All the things */
 
 let topics = {};
+let currentTopic = "";
+let currentTopicUnsubscribeOnClose = false;
 
+/* Main view */
+const main = document.getElementById("main");
 const topicsHeader = document.getElementById("topicsHeader");
 const topicsList = document.getElementById("topicsList");
 const topicField = document.getElementById("topicField");
 const notifySound = document.getElementById("notifySound");
 const subscribeButton = document.getElementById("subscribeButton");
-const subscribeForm = document.getElementById("subscribeForm");
 const errorField = document.getElementById("error");
+const originalTitle = document.title;
+
+/* Detail view */
+const detailView = document.getElementById("detail");
+const detailTitle = document.getElementById("detailTitle");
+const detailEventsList = document.getElementById("detailEventsList");
+const detailTopicUrl = document.getElementById("detailTopicUrl");
+const detailNoNotifications = document.getElementById("detailNoNotifications");
+const detailCloseButton = document.getElementById("detailCloseButton");
+const detailNotificationsDisallowed = document.getElementById("detailNotificationsDisallowed");
+
+/* Screenshots */
+const lightbox = document.getElementById("lightbox");
 
 const subscribe = (topic) => {
     if (Notification.permission !== "granted") {
         Notification.requestPermission().then((permission) => {
             if (permission === "granted") {
-                subscribeInternal(topic, 0);
+                subscribeInternal(topic, true, 0);
             } else {
                 showNotificationDeniedError();
             }
         });
     } else {
-        subscribeInternal(topic, 0);
+        subscribeInternal(topic, true,0);
     }
 };
 
-const subscribeInternal = (topic, delaySec) => {
+const subscribeInternal = (topic, persist, delaySec) => {
     setTimeout(() => {
         // Render list entry
         let topicEntry = document.getElementById(`topic-${topic}`);
         if (!topicEntry) {
             topicEntry = document.createElement('li');
             topicEntry.id = `topic-${topic}`;
-            topicEntry.innerHTML = `${topic} <button onclick="test('${topic}')">Test</button> <button onclick="unsubscribe('${topic}')">Unsubscribe</button>`;
+            topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <button onclick="test('${topic}'); return false;"> <img src="static/img/send_black_24dp.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/clear_black_24dp.svg"> Unsubscribe</button>`;
             topicsList.appendChild(topicEntry);
         }
         topicsHeader.style.display = '';
@@ -48,30 +64,47 @@ const subscribeInternal = (topic, delaySec) => {
         // Open event source
         let eventSource = new EventSource(`${topic}/sse`);
         eventSource.onopen = () => {
-            topicEntry.innerHTML = `${topic} <button onclick="test('${topic}')">Test</button> <button onclick="unsubscribe('${topic}')">Unsubscribe</button>`;
+            topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <button onclick="test('${topic}'); return false;"> <img src="static/img/send_black_24dp.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/clear_black_24dp.svg"> Unsubscribe</button>`;
             delaySec = 0; // Reset on successful connection
         };
         eventSource.onerror = (e) => {
+            topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <i>(Reconnecting)</i> <button disabled="disabled">Test</button> <button onclick="unsubscribe('${topic}'); return false;">Unsubscribe</button>`;
+            eventSource.close();
             const newDelaySec = (delaySec + 5 <= 15) ? delaySec + 5 : 15;
-            topicEntry.innerHTML = `${topic} <i>(Reconnecting in ${newDelaySec}s ...)</i> <button disabled="disabled">Test</button> <button onclick="unsubscribe('${topic}')">Unsubscribe</button>`;
-            eventSource.close()
-            subscribeInternal(topic, newDelaySec);
+            subscribeInternal(topic, persist, newDelaySec);
         };
         eventSource.onmessage = (e) => {
             const event = JSON.parse(e.data);
-            notifySound.play();
-            new Notification(`${location.host}/${topic}`, {
-                body: event.message,
-                icon: '/static/img/favicon.png'
-            });
+            topics[topic]['messages'].push(event);
+            topics[topic]['messages'].sort((a, b) => { return a.time < b.time ? 1 : -1; }); // Newest first
+            if (currentTopic === topic) {
+                rerenderDetailView();
+            }
+            if (Notification.permission === "granted") {
+                notifySound.play();
+                new Notification(`${location.host}/${topic}`, {
+                    body: event.message,
+                    icon: '/static/img/favicon.png'
+                });
+            }
         };
-        topics[topic] = eventSource;
-        localStorage.setItem('topics', JSON.stringify(Object.keys(topics)));
+        topics[topic] = {
+            'eventSource': eventSource,
+            'messages': [],
+            'persist': persist
+        };
+        fetchCachedMessages(topic).then(() => {
+            if (currentTopic === topic) {
+                rerenderDetailView();
+            }
+        })
+        let persistedTopicKeys = Object.keys(topics).filter(t => topics[t].persist);
+        localStorage.setItem('topics', JSON.stringify(persistedTopicKeys));
     }, delaySec * 1000);
 };
 
 const unsubscribe = (topic) => {
-    topics[topic].close();
+    topics[topic]['eventSource'].close();
     delete topics[topic];
     localStorage.setItem('topics', JSON.stringify(Object.keys(topics)));
     document.getElementById(`topic-${topic}`).remove();
@@ -83,8 +116,80 @@ const unsubscribe = (topic) => {
 const test = (topic) => {
     fetch(`/${topic}`, {
         method: 'PUT',
-        body: `This is a test notification`
+        body: `This is a test notification sent by the ntfy.sh Web UI at ${new Date().toString()}.`
+    });
+};
+
+const fetchCachedMessages = async (topic) => {
+    const topicJsonUrl = `/${topic}/json?poll=1`; // Poll!
+    for await (let line of makeTextFileLineIterator(topicJsonUrl)) {
+        const message = JSON.parse(line);
+        topics[topic]['messages'].push(message);
+    }
+    topics[topic]['messages'].sort((a, b) => { return a.time < b.time ? 1 : -1; }); // Newest first
+};
+
+const showDetail = (topic) => {
+    currentTopic = topic;
+    history.replaceState(topic, `ntfy.sh/${topic}`, `/${topic}`);
+    window.scrollTo(0, 0);
+    rerenderDetailView();
+    return false;
+};
+
+const rerenderDetailView = () => {
+    detailTitle.innerHTML = `ntfy.sh/${currentTopic}`; // document.location.replaceAll(..)
+    detailTopicUrl.innerHTML = `ntfy.sh/${currentTopic}`;
+    while (detailEventsList.firstChild) {
+        detailEventsList.removeChild(detailEventsList.firstChild);
+    }
+    topics[currentTopic]['messages'].forEach(m => {
+        let dateDiv = document.createElement('div');
+        let messageDiv = document.createElement('div');
+        let eventDiv = document.createElement('div');
+        dateDiv.classList.add('detailDate');
+        dateDiv.innerHTML = new Date(m.time * 1000).toLocaleString();
+        messageDiv.classList.add('detailMessage');
+        messageDiv.innerText = m.message;
+        eventDiv.appendChild(dateDiv);
+        eventDiv.appendChild(messageDiv);
+        detailEventsList.appendChild(eventDiv);
     })
+    if (topics[currentTopic]['messages'].length === 0) {
+        detailNoNotifications.style.display = '';
+    } else {
+        detailNoNotifications.style.display = 'none';
+    }
+    if (Notification.permission === "granted") {
+        detailNotificationsDisallowed.style.display = 'none';
+    } else {
+        detailNotificationsDisallowed.style.display = 'block';
+    }
+    detailView.style.display = 'block';
+    main.style.display = 'none';
+};
+
+const hideDetailView = () => {
+    if (currentTopicUnsubscribeOnClose) {
+        unsubscribe(currentTopic);
+        currentTopicUnsubscribeOnClose = false;
+    }
+    currentTopic = "";
+    history.replaceState('', originalTitle, '/');
+    detailView.style.display = 'none';
+    main.style.display = '';
+    return false;
+};
+
+const requestPermission = () => {
+    if (Notification.permission !== "granted") {
+        Notification.requestPermission().then((permission) => {
+            if (permission === "granted") {
+                detailNotificationsDisallowed.style.display = 'none';
+            }
+        });
+    }
+    return false;
 };
 
 const showError = (msg) => {
@@ -101,7 +206,87 @@ const showNotificationDeniedError = () => {
     showError("You have blocked desktop notifications for this website. Please unblock them and refresh to use the web-based desktop notifications.");
 };
 
-subscribeForm.onsubmit = function () {
+const showScreenshotOverlay = (e, el, index) => {
+    lightbox.classList.add('show');
+    document.addEventListener('keydown', nextScreenshotKeyboardListener);
+    return showScreenshot(e, index);
+};
+
+const showScreenshot = (e, index) => {
+    const actualIndex = resolveScreenshotIndex(index);
+    lightbox.innerHTML = '<div class="close-lightbox"></div>' + screenshots[actualIndex].innerHTML;
+    lightbox.querySelector('img').onclick = (e) => { return showScreenshot(e,actualIndex+1); };
+    currentScreenshotIndex = actualIndex;
+    e.stopPropagation();
+    return false;
+};
+
+const nextScreenshot = (e) => {
+    return showScreenshot(e, currentScreenshotIndex+1);
+};
+
+const previousScreenshot = (e) => {
+    return showScreenshot(e, currentScreenshotIndex-1);
+};
+
+const resolveScreenshotIndex = (index) => {
+    if (index < 0) {
+        return screenshots.length - 1;
+    } else if (index > screenshots.length - 1) {
+        return 0;
+    }
+    return index;
+};
+
+const hideScreenshotOverlay = (e) => {
+    lightbox.classList.remove('show');
+    document.removeEventListener('keydown', nextScreenshotKeyboardListener);
+};
+
+const nextScreenshotKeyboardListener = (e) => {
+    switch (e.keyCode) {
+        case 37:
+            previousScreenshot(e);
+            break;
+        case 39:
+            nextScreenshot(e);
+            break;
+    }
+};
+
+// From: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
+async function* makeTextFileLineIterator(fileURL) {
+    const utf8Decoder = new TextDecoder('utf-8');
+    const response = await fetch(fileURL);
+    const reader = response.body.getReader();
+    let { value: chunk, done: readerDone } = await reader.read();
+    chunk = chunk ? utf8Decoder.decode(chunk) : '';
+
+    const re = /\n|\r|\r\n/gm;
+    let startIndex = 0;
+    let result;
+
+    for (;;) {
+        let result = re.exec(chunk);
+        if (!result) {
+            if (readerDone) {
+                break;
+            }
+            let remainder = chunk.substr(startIndex);
+            ({ value: chunk, done: readerDone } = await reader.read());
+            chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : '');
+            startIndex = re.lastIndex = 0;
+            continue;
+        }
+        yield chunk.substring(startIndex, result.index);
+        startIndex = re.lastIndex;
+    }
+    if (startIndex < chunk.length) {
+        yield chunk.substr(startIndex); // last line didn't end in a newline char
+    }
+}
+
+subscribeButton.onclick = () => {
     if (!topicField.value) {
         return false;
     }
@@ -110,6 +295,18 @@ subscribeForm.onsubmit = function () {
     return false;
 };
 
+detailCloseButton.onclick = () => {
+    hideDetailView();
+};
+
+let currentScreenshotIndex = 0;
+const screenshots = [...document.querySelectorAll("#screenshots a")];
+screenshots.forEach((el, index) => {
+    el.onclick = (e) => { return showScreenshotOverlay(e, el, index); };
+});
+
+lightbox.onclick = hideScreenshotOverlay;
+
 // Disable Web UI if notifications of EventSource are not available
 if (!window["Notification"] || !window["EventSource"]) {
     showBrowserIncompatibleError();
@@ -121,13 +318,22 @@ if (!window["Notification"] || !window["EventSource"]) {
 topicField.value = "";
 
 // Restore topics
-const storedTopics = localStorage.getItem('topics');
-if (storedTopics && Notification.permission === "granted") {
-    const storedTopicsArray = JSON.parse(storedTopics)
-    storedTopicsArray.forEach((topic) => { subscribeInternal(topic, 0); });
-    if (storedTopicsArray.length === 0) {
+const storedTopics = JSON.parse(localStorage.getItem('topics') || "[]");
+if (storedTopics) {
+    storedTopics.forEach((topic) => { subscribeInternal(topic, true, 0); });
+    if (storedTopics.length === 0) {
         topicsHeader.style.display = 'none';
     }
 } else {
     topicsHeader.style.display = 'none';
 }
+
+// (Temporarily) subscribe topic if we navigated to /sometopic URL
+const match = location.pathname.match(/^\/([-_a-zA-Z0-9]{1,64})$/) // Regex must match Go & Android app!
+if (match) {
+    currentTopic = match[1];
+    if (!storedTopics.includes(currentTopic)) {
+        subscribeInternal(currentTopic, false,0);
+        currentTopicUnsubscribeOnClose = true;
+    }
+}

server/visitor.go

@@ -24,7 +24,7 @@ type visitor struct {
 func newVisitor(conf *config.Config) *visitor {
 	return &visitor{
 		config:        conf,
-		limiter:       rate.NewLimiter(conf.VisitorRequestLimit, conf.VisitorRequestLimitBurst),
+		limiter:       rate.NewLimiter(rate.Every(conf.VisitorRequestLimitReplenish), conf.VisitorRequestLimitBurst),
 		subscriptions: util.NewLimiter(int64(conf.VisitorSubscriptionLimit)),
 		seen:          time.Now(),
 	}

util/util.go

@@ -1,6 +1,7 @@
 package util
 
 import (
+	"fmt"
 	"math/rand"
 	"os"
 	"time"
@@ -27,3 +28,35 @@ func RandomString(length int) string {
 	}
 	return string(b)
 }
+
+// DurationToHuman converts a duration to a human readable format
+func DurationToHuman(d time.Duration) (str string) {
+	if d == 0 {
+		return "0"
+	}
+
+	d = d.Round(time.Second)
+	days := d / time.Hour / 24
+	if days > 0 {
+		str += fmt.Sprintf("%dd", days)
+	}
+	d -= days * time.Hour * 24
+
+	hours := d / time.Hour
+	if hours > 0 {
+		str += fmt.Sprintf("%dh", hours)
+	}
+	d -= hours * time.Hour
+
+	minutes := d / time.Minute
+	if minutes > 0 {
+		str += fmt.Sprintf("%dm", minutes)
+	}
+	d -= minutes * time.Minute
+
+	seconds := d / time.Second
+	if seconds > 0 {
+		str += fmt.Sprintf("%ds", seconds)
+	}
+	return
+}