diff --git a/docs/privacy.md b/docs/privacy.md index a4cec9cc..c13f35c1 100644 --- a/docs/privacy.md +++ b/docs/privacy.md @@ -4,9 +4,9 @@ I love free software and I'm doing this because it's fun and to give back. I hav never monetize or sell your information. This service will always stay free and open. 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 -is the Firebase Cloud Messaging (FCM) service, which is required to provide instant Android notifications (see -[FAQ](faq.md) for details). +any outside service. All data is exclusively used to make the service function properly. The only external service +I use is Firebase Cloud Messaging (FCM) service, which is required to provide instant Android notifications (see +[FAQ](faq.md) for details). To avoid FCM altogether, download the F-Droid version. 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 to support service restarts. diff --git a/docs/static/css/extra.css b/docs/static/css/extra.css index 6c85d1aa..ac44b523 100644 --- a/docs/static/css/extra.css +++ b/docs/static/css/extra.css @@ -1,3 +1,7 @@ +.md-header__button.md-logo :is(img, svg) { + width: unset !important; +} + article { padding-bottom: 50px; } @@ -16,3 +20,78 @@ figure img { .remove-md-box td { padding: 0 10px } + +/* Lightbox; thanks to https://yossiabramov.com/blog/vanilla-js-lightbox */ + +.screenshots { + text-align: center; +} + +.screenshots img { + height: 230px; + margin: 3px; + border-radius: 5px; + filter: drop-shadow(2px 2px 2px #ddd); +} + +.screenshots .nowrap { + white-space: nowrap; +} + +.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; +} diff --git a/docs/static/img/android-notification-settings.png b/docs/static/img/android-notification-settings.png new file mode 100644 index 00000000..ce66408c Binary files /dev/null and b/docs/static/img/android-notification-settings.png differ diff --git a/docs/static/img/android-screenshot-add-instant.jpg b/docs/static/img/android-screenshot-add-instant.jpg new file mode 100644 index 00000000..51846efa Binary files /dev/null and b/docs/static/img/android-screenshot-add-instant.jpg differ diff --git a/docs/static/img/android-screenshot-add-other.jpg b/docs/static/img/android-screenshot-add-other.jpg new file mode 100644 index 00000000..004d559c Binary files /dev/null and b/docs/static/img/android-screenshot-add-other.jpg differ diff --git a/docs/static/img/android-screenshot-add.jpg b/docs/static/img/android-screenshot-add.jpg new file mode 100644 index 00000000..7fed362d Binary files /dev/null and b/docs/static/img/android-screenshot-add.jpg differ diff --git a/docs/static/img/android-screenshot-detail.jpg b/docs/static/img/android-screenshot-detail.jpg new file mode 100644 index 00000000..c15dfa6e Binary files /dev/null and b/docs/static/img/android-screenshot-detail.jpg differ diff --git a/docs/static/img/android-screenshot-main.jpg b/docs/static/img/android-screenshot-main.jpg new file mode 100644 index 00000000..3b82fd85 Binary files /dev/null and b/docs/static/img/android-screenshot-main.jpg differ diff --git a/docs/static/img/android-screenshot-pause.jpg b/docs/static/img/android-screenshot-pause.jpg new file mode 100644 index 00000000..dc3ce74b Binary files /dev/null and b/docs/static/img/android-screenshot-pause.jpg differ diff --git a/docs/static/img/android-video-overview.mp4 b/docs/static/img/android-video-overview.mp4 new file mode 100644 index 00000000..cf295099 Binary files /dev/null and b/docs/static/img/android-video-overview.mp4 differ diff --git a/docs/static/img/screenshot-web-notifcation.png b/docs/static/img/screenshot-curl.png similarity index 100% rename from docs/static/img/screenshot-web-notifcation.png rename to docs/static/img/screenshot-curl.png diff --git a/docs/static/img/screenshot-phone-add.jpg b/docs/static/img/screenshot-phone-add.jpg new file mode 100644 index 00000000..f728ec99 Binary files /dev/null and b/docs/static/img/screenshot-phone-add.jpg differ diff --git a/docs/static/img/screenshot-phone-detail.jpg b/docs/static/img/screenshot-phone-detail.jpg new file mode 100644 index 00000000..2cd3b2fe Binary files /dev/null and b/docs/static/img/screenshot-phone-detail.jpg differ diff --git a/docs/static/img/screenshot-phone-main.jpg b/docs/static/img/screenshot-phone-main.jpg new file mode 100644 index 00000000..5caeee14 Binary files /dev/null and b/docs/static/img/screenshot-phone-main.jpg differ diff --git a/docs/static/img/screenshot-phone-notification.jpg b/docs/static/img/screenshot-phone-notification.jpg new file mode 100644 index 00000000..7924c6fd Binary files /dev/null and b/docs/static/img/screenshot-phone-notification.jpg differ diff --git a/docs/static/img/screenshot-web.png b/docs/static/img/screenshot-web.png deleted file mode 100644 index 08c759f8..00000000 Binary files a/docs/static/img/screenshot-web.png and /dev/null differ diff --git a/docs/static/img/web-detail.png b/docs/static/img/web-detail.png new file mode 100644 index 00000000..a45e9155 Binary files /dev/null and b/docs/static/img/web-detail.png differ diff --git a/docs/static/img/web-notification.png b/docs/static/img/web-notification.png new file mode 100644 index 00000000..535d0830 Binary files /dev/null and b/docs/static/img/web-notification.png differ diff --git a/docs/static/img/web-subscribe.png b/docs/static/img/web-subscribe.png new file mode 100644 index 00000000..7c8f7e38 Binary files /dev/null and b/docs/static/img/web-subscribe.png differ diff --git a/docs/static/js/extra.js b/docs/static/js/extra.js index d588866a..0aa380a7 100644 --- a/docs/static/js/extra.js +++ b/docs/static/js/extra.js @@ -29,3 +29,71 @@ for (const tab of tabs) { tab.checked = true } } + +// Lightbox for screenshot + +const lightbox = document.createElement('div'); +lightbox.classList.add('lightbox'); +document.body.appendChild(lightbox); + +const showScreenshotOverlay = (e, el, group, index) => { + lightbox.classList.add('show'); + document.addEventListener('keydown', nextScreenshotKeyboardListener); + return showScreenshot(e, group, index); +}; + +const showScreenshot = (e, group, index) => { + const actualIndex = resolveScreenshotIndex(group, index); + lightbox.innerHTML = '
' + screenshots[group][actualIndex].innerHTML; + lightbox.querySelector('img').onclick = (e) => { return showScreenshot(e, group, actualIndex+1); }; + currentScreenshotGroup = group; + currentScreenshotIndex = actualIndex; + e.stopPropagation(); + return false; +}; + +const nextScreenshot = (e) => { + return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex+1); +}; + +const previousScreenshot = (e) => { + return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex-1); +}; + +const resolveScreenshotIndex = (group, index) => { + if (index < 0) { + return screenshots[group].length - 1; + } else if (index > screenshots[group].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; + } +}; + +let currentScreenshotGroup = ''; +let currentScreenshotIndex = 0; +let screenshots = {}; +Array.from(document.getElementsByClassName('screenshots')).forEach((sg) => { + const group = sg.id; + screenshots[group] = [...sg.querySelectorAll('a')]; + screenshots[group].forEach((el, index) => { + el.onclick = (e) => { return showScreenshotOverlay(e, el, group, index); }; + }); +}); + +lightbox.onclick = hideScreenshotOverlay; diff --git a/docs/subscribe/phone.md b/docs/subscribe/phone.md index d9fed5c9..bfa59714 100644 --- a/docs/subscribe/phone.md +++ b/docs/subscribe/phone.md @@ -4,12 +4,51 @@ notifications directly on your phone. Just like the server, this app is also [op Since I don't have an iPhone or a Mac, I didn't make an iOS app yet. I'd be awesome if [someone else could help out](https://github.com/binwiederhier/ntfy/issues/4). ## Android + + + You can get the Android app from both [Google Play](https://play.google.com/store/apps/details?id=io.heckel.ntfy) and from [F-Droid](https://f-droid.org/en/packages/io.heckel.ntfy/). Both are largely identical, with the one exception that the F-Droid flavor does not use Firebase. - - +### Overview +A picture is worth a thousand words. Here are a few screenshots showing what the app looks like. It's all pretty +straight forward. You can add topics and as soon as you add them, you can [publish messages](../publish.md) to them. + +
+ + + + + +
+ +If those screenshots are still not enough, here's a video: + +
+ +
Sending push notifications to your Android phone
+
+ +### Message priority +When you [publish messages](../publish.md#message-priority) to a topic, you can define a priority. This priority defines +how urgently Android will notify you about the notification, and whether they make a sound and/or vibrate. + +By default, messages with default priority or higher (>= 3) will vibrate and make a sound. Messages with high or urgent +priority (>= 4) will also show as pop-over, like so: + +
+ ![priority notification](../static/img/priority-notification.png){ width=500 } +
High and urgent notifications show as pop-over
+
+ +You can change these settings in Android by long-pressing on the app, and tapping "Notifications". You can then configure +the settings (and custom sounds or vibration) for each of the priorities: + +
+ ![notification settings](../static/img/android-notification-settings.png){ width=500 } +
Per-priority sound/vibration settings
+
### Instant delivery Instant delivery is allows you to receive messages on your phone instantly, **even when your phone is in doze mode**, i.e. diff --git a/docs/subscribe/web.md b/docs/subscribe/web.md index 478d6126..70313a6d 100644 --- a/docs/subscribe/web.md +++ b/docs/subscribe/web.md @@ -3,9 +3,12 @@ You can use the Web UI to subscribe to topics as well. If you do, and you keep t pop up as desktop notifications**. Simply type in the topic name and click the *Subscribe* button. The browser will keep a connection open and listen for incoming notifications. -
- ![web subscribe](../static/img/screenshot-web.png){ width=300 } -
Subscribe via Web UI
-
+To learn how to send messages, check out the [publishing page](../publish.md). + +
+ + + +
+ -Once subscribed, you can [publish messages](../publish.md) via `curl` or from without any of your scripts. diff --git a/mkdocs.yml b/mkdocs.yml index 8a20bdbe..d775238b 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -33,7 +33,7 @@ theme: - search.highlight - search.share - navigation.sections - - navigation.instant + # - navigation.instant - toc.integrate - content.tabs.link extra: @@ -67,6 +67,8 @@ markdown_extensions: plugins: - search + - minify: + minify_html: true nav: - "Getting started": index.md diff --git a/server/index.gohtml b/server/index.gohtml index c6f86be7..b1a75dab 100644 --- a/server/index.gohtml +++ b/server/index.gohtml @@ -24,7 +24,7 @@ - + @@ -104,7 +104,7 @@

Subscribe to topics here and receive messages as desktop notification. Topics are not password-protected, - so choose a name that's not easy to guess. Once subscribed, you can publish messages via PUT/POST. + so choose a name that's not easy to guess.

diff --git a/server/static/img/screenshot-curl.png b/server/static/img/screenshot-curl.png index aeb5a31a..535d0830 100644 Binary files a/server/static/img/screenshot-curl.png and b/server/static/img/screenshot-curl.png differ diff --git a/server/static/img/screenshot-web-detail.png b/server/static/img/screenshot-web-detail.png index 46c33231..a45e9155 100644 Binary files a/server/static/img/screenshot-web-detail.png and b/server/static/img/screenshot-web-detail.png differ