Docs and screenshots

This commit is contained in:
Philipp Heckel 2022-03-11 10:43:18 -05:00
parent 3f978bc45f
commit 7b186af765
8 changed files with 16 additions and 10 deletions

View file

@ -63,3 +63,4 @@ Third party libraries and resources:
* [Lightbox with vanilla JS](https://yossiabramov.com/blog/vanilla-js-lightbox) as a lightbox on the landing page * [Lightbox with vanilla JS](https://yossiabramov.com/blog/vanilla-js-lightbox) as a lightbox on the landing page
* [HTTP middleware for gzip compression](https://gist.github.com/CJEnright/bc2d8b8dc0c1389a9feeddb110f822d7) (MIT) is used for serving static files * [HTTP middleware for gzip compression](https://gist.github.com/CJEnright/bc2d8b8dc0c1389a9feeddb110f822d7) (MIT) is used for serving static files
* [Statically linking go-sqlite3](https://www.arp242.net/static-go.html) * [Statically linking go-sqlite3](https://www.arp242.net/static-go.html)
* [Linked tabs in mkdocs](https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#linked-tabs)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 473 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 76 KiB

View file

@ -6,9 +6,9 @@ keep a connection open and listen for incoming notifications.
To learn how to send messages, check out the [publishing page](../publish.md). To learn how to send messages, check out the [publishing page](../publish.md).
<div id="web-screenshots" class="screenshots"> <div id="web-screenshots" class="screenshots">
<a href="../../static/img/web-subscribe.png"><img src="../../static/img/web-subscribe.png"/></a>
<a href="../../static/img/web-notification.png"><img src="../../static/img/web-notification.png"/></a>
<a href="../../static/img/web-detail.png"><img src="../../static/img/web-detail.png"/></a> <a href="../../static/img/web-detail.png"><img src="../../static/img/web-detail.png"/></a>
<a href="../../static/img/web-notification.png"><img src="../../static/img/web-notification.png"/></a>
<a href="../../static/img/web-subscribe.png"><img src="../../static/img/web-subscribe.png"/></a>
</div> </div>
To keep receiving desktop notifications from ntfy, you need to keep the website open. What I do, and what I highly recommend, To keep receiving desktop notifications from ntfy, you need to keep the website open. What I do, and what I highly recommend,

View file

@ -23,7 +23,7 @@
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" /> <meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="ntfy.sh" /> <meta property="og:site_name" content="ntfy.sh" />
<meta property="og:title" content="ntfy.sh | Send push notifications to your phone or desktop via PUT/POST" /> <meta property="og:title" content="ntfy.sh | Push notifications to your phone or desktop via PUT/POST" />
<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: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:image" content="/static/img/ntfy.png" />
<meta property="og:url" content="https://ntfy.sh" /> <meta property="og:url" content="https://ntfy.sh" />
@ -38,9 +38,9 @@
<img id="logo" src="static/img/ntfy.png" alt="logo"/> <img id="logo" src="static/img/ntfy.png" alt="logo"/>
<div id="name">ntfy</div> <div id="name">ntfy</div>
<ol> <ol>
<li><a href="docs/">Getting started</a></li>
<li><a href="app">Web app</a></li> <li><a href="app">Web app</a></li>
<li><a href="docs/subscribe/phone/">Android/iOS</a></li> <li><a href="docs/subscribe/phone/">Android/iOS</a></li>
<li><a href="docs/">Docs</a></li>
<li><a href="docs/publish/">API</a></li> <li><a href="docs/publish/">API</a></li>
<li><a href="https://github.com/binwiederhier/ntfy">GitHub</a></li> <li><a href="https://github.com/binwiederhier/ntfy">GitHub</a></li>
</ol> </ol>
@ -122,16 +122,21 @@
<h3 id="subscribe-web" class="anchor">Subscribe via web app</h3> <h3 id="subscribe-web" class="anchor">Subscribe via web app</h3>
<p> <p>
Subscribe to topics here and receive messages as <b>desktop notification</b>. Topics are not password-protected, Subscribe to topics in the <a href="app">web app</a> and receive messages as <b>desktop notification</b>.
so choose a name that's not easy to guess. It is available at <b><a href="app"><span class="ntfyUrl">ntfy.sh</span>/app</a></b>.
</p> </p>
<figure>
<a href="app"><img src="static/img/screenshot-web-detail.png" width="100%"/></a>
<figcaption>ntfy web app, available at <a href="app"><span class="ntfyUrl">ntfy.sh</span>/app</a></figcaption>
</figure>
<h3 id="subscribe-api" class="anchor">Subscribe using the API</h3> <h3 id="subscribe-api" class="anchor">Subscribe using the API</h3>
<p> <p>
There's a super simple API that you can use to integrate your own app. You can consume There's a super simple API that you can use to integrate your own app. You can consume
a <a href="docs/subscribe/api/#subscribe-as-json-stream">JSON stream</a>, a <a href="docs/subscribe/api/#subscribe-as-json-stream">JSON stream</a>,
an <a href="docs/subscribe/api/#subscribe-as-sse-stream">SSE/EventSource stream</a> (useful for web apps), an <a href="docs/subscribe/api/#subscribe-as-sse-stream">SSE/EventSource stream</a>,
as well as a <a href="docs/subscribe/api/#subscribe-as-raw-stream">plain text stream</a>. a <a href="docs/subscribe/api/#subscribe-as-raw-stream">plain text stream</a>,
or <a href="docs/subscribe/api/#websockets">via WebSockets</a>.
</p> </p>
<p class="smallMarginBottom"> <p class="smallMarginBottom">
Here's an example for JSON. The <b>connection stays open</b>, so you can retrieve messages as they come in: Here's an example for JSON. The <b>connection stays open</b>, so you can retrieve messages as they come in:

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 473 KiB

View file

@ -20,10 +20,10 @@ import ErrorBoundary from "./ErrorBoundary";
import routes from "./routes"; import routes from "./routes";
import {useAutoSubscribe, useConnectionListeners} from "./hooks"; import {useAutoSubscribe, useConnectionListeners} from "./hooks";
// TODO docs // TODO link lighlighting
// TODO screenshot on homepage
// TODO "copy url" toast // TODO "copy url" toast
// TODO "copy link url" button // TODO "copy link url" button
// TODO add drag and drop
// TODO races when two tabs are open // TODO races when two tabs are open
// TODO investigate service workers // TODO investigate service workers