From ba2f6e08cd58579b262c4018c96709528b4b4a4a Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Wed, 17 Nov 2021 20:50:47 -0500 Subject: [PATCH] Anchors in web UI --- server/index.gohtml | 89 ++++++++++++++++++++++++--------------- server/static/css/app.css | 18 ++++++++ server/static/js/app.js | 9 ++++ 3 files changed, 82 insertions(+), 34 deletions(-) diff --git a/server/index.gohtml b/server/index.gohtml index 58e2b639..1c4ad204 100644 --- a/server/index.gohtml +++ b/server/index.gohtml @@ -58,7 +58,7 @@ Endless possibilities 😀. Be sure to check out the example on GitHub!

-

Publishing messages

+

Publishing messages

Publishing messages can be done via PUT or POST using. Topics are created on the fly by subscribing or publishing to them. Because there is no sign-up, the topic is essentially a password, so pick something that's not easily guessable. @@ -79,14 +79,14 @@ }) -

Subscribe to a topic

+

Subscribe to a topic

You can create and subscribe to a topic either in this web UI, or in your own app by subscribing to an EventSource, a JSON feed, or raw feed.

-

Subscribe in this Web UI

+

Subscribe in this Web UI

Subscribe to topics here and receive messages as desktop notification. Topics are not password-protected, @@ -104,13 +104,13 @@

-

Subscribe via Android App

+

Subscribe via Android App

You can use the Ntfy Android App to receive notifications directly on your phone. Just like the server, this app is also open source.

-

Subscribe via your app, or via the CLI

+

Subscribe via your app, or via the CLI

Using EventSource in JS, you can consume notifications like this (see full example): @@ -160,58 +160,79 @@ done < <(stdbuf -i0 -o0 curl -s ntfy.sh/mytopic/raw) -

Message buffering and polling

+

Other features

+

Fetching cached messages

- Messages are buffered in memory for a few hours to account for network interruptions of subscribers. - You can read back what you missed by using the since=... query parameter. It takes either a - duration (e.g. 10m or 30s) or a Unix timestamp (e.g. 1635528757): + Messages are cached on disk for {{.CacheDuration}} to account for network interruptions of subscribers. + You can read back what you missed by using the since= query parameter. It takes either a + duration (e.g. 10m or 30s), a Unix timestamp (e.g. 1635528757) or all (all + cached messages).

- $ curl -s "ntfy.sh/mytopic/json?since=10m"
- # Same output as above, but includes messages from up to 10 minutes ago - -

- You can also just poll for messages if you don't like the long-standing connection using the poll=1 - query parameter. The connection will end after all available messages have been read. This parameter has to be - combined with since=. -

- - $ curl -s "ntfy.sh/mytopic/json?poll=1&since=10m"
- # Returns messages from up to 10 minutes ago and ends the connection + curl -s "ntfy.sh/mytopic/json?since=10m" -

FAQ

+

Fetching cached messages

+

+ You can also just poll for messages if you don't like the long-standing connection using the poll=1 + query parameter. The connection will end after all available messages have been read. This parameter can be + combined with since= (defaults to since=all). +

+ + curl -s "ntfy.sh/mytopic/json?poll=1" + + +

Subscribing to multiple topics

+

+ It's possible to subscribe to multiple topics in one HTTP call by providing a + comma-separated list of topics in the URL. This allows you to reduce the number of connections you have to maintain: +

+ + $ curl -s ntfy.sh/mytopic1,mytopic2/json
+ {"id":"0OkXIryH3H","time":1637182619,"event":"open","topic":"mytopic1,mytopic2,mytopic3"}
+ {"id":"dzJJm7BCWs","time":1637182634,"event":"message","topic":"mytopic1","message":"for topic 1"}
+ {"id":"Cm02DsxUHb","time":1637182643,"event":"message","topic":"mytopic2","message":"for topic 2"} + + +

FAQ

- Isn't this like ...?
+ Isn't this like ...?
Who knows. I didn't do a lot of research before making this. It was fun making it.

- Can I use this in my app? Will it stay free?
+ Can I use this in my app? Will it stay free?
Yes. As long as you don't abuse it, it'll be available and free of charge. I do not plan on monetizing the service.

- What are the uptime guarantees?
+ What are the uptime guarantees?
Best effort.

- Will you know what topics exist, can you spy on me?
- If you don't trust me or your messages are sensitive, run your own server. It's open source. - That said, the logs do not contain any topic names or other details about you. Check the code if you don't believe me. + What happens if there are multiple subscribers to the same topic?
+ As per usual with pub-sub, all subscribers receive notifications if they are + subscribed to a topic.

- Why is Firebase used?
- In addition to caching messages locally and delivering them to long-polling subscribers, all messages are also - published to Firebase Cloud Messaging (FCM) (if FirebaseKeyFile 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 background services. + Will you know what topics exist, can you spy on me?
+ If you don't trust me or your messages are sensitive, run your own server. It's open source. + That said, the logs do not contain any topic names or other details about you. + Messages are cached for {{.CacheDuration}} to facilitate service restarts, message polling and to overcome + client network disruptions.

-

Privacy policy

+

+ Why is Firebase used?
+ In addition to caching messages locally and delivering them to long-polling subscribers, all messages are also + published to Firebase Cloud Messaging (FCM) (if FirebaseKeyFile is set, which it is on ntfy.sh). This + is to facilitate instant notifications on Android. +

+ +

Privacy policy

Neither the server nor the app record any personal information, or share any of the messages and topics with any outside service. All data is exclusively used to make the service function properly. The one exception @@ -220,7 +241,7 @@

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. + aside from a short on-disk cache (for {{.CacheDuration}}) to support service restarts.

Made with ❤️ by Philipp C. Heckel
diff --git a/server/static/css/app.css b/server/static/css/app.css index 75800e02..272263fc 100644 --- a/server/static/css/app.css +++ b/server/static/css/app.css @@ -95,6 +95,24 @@ code { color: #666; } +/* Anchors */ + +.anchor .anchorLink { + color: #ccc; + text-decoration: none; + padding: 0 5px; + visibility: hidden; +} + +.anchor:hover .anchorLink { + visibility: visible; +} + +.anchor .anchorLink:hover { + color: #3a9784; + visibility: visible; +} + /* Screenshots */ #screenshots { diff --git a/server/static/js/app.js b/server/static/js/app.js index 385f02d9..f0530533 100644 --- a/server/static/js/app.js +++ b/server/static/js/app.js @@ -337,3 +337,12 @@ if (match) { currentTopicUnsubscribeOnClose = true; } } + +document.querySelectorAll('.anchor').forEach((el) => { + if (el.hasAttribute('id')) { + const id = el.getAttribute('id'); + const anchor = document.createElement('a'); + anchor.innerHTML = `#`; + el.appendChild(anchor); + } +});