astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

New logo and header

Browse source
This commit is contained in:
Philipp Heckel 2021-11-23 20:22:09 -05:00
parent 9af64bf3dd
commit 71af1af001
4 changed files with 55 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

47
server/index.gohtml
View file

@ -34,14 +34,14 @@
{{end}} {{end}}
</head> </head>
<body> <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}}> <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> <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. <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, It allows you to send notifications to your phone 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. 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> </p>
<div id="screenshots"> <div id="screenshots">
<a href="static/img/screenshot-curl.png"><img src="static/img/screenshot-curl.png"/></a> <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> <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> <a href="static/img/screenshot-phone-notification.jpg"><img src="static/img/screenshot-phone-notification.jpg"/></a>
</span> </span>
</div> </div>
<p> <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, There are many ways to use it: Notify yourself when a build finishes, when an rsync is done or a backup 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. or know when somebody logs into your server. There are <a href="#examples">many more examples</a>, endless possibilities 😀.
Endless possibilities 😀. Be sure to check out the <a href="#examples">examples below</a>.
</p> </p>
<h2 id="publish" class="anchor">Publishing messages</h2> <h2 id="publish" class="anchor">Publishing messages</h2>
@ -64,16 +62,16 @@
Because there is no sign-up, <b>the topic is essentially a password</b>, so pick something that's not easily guessable. Because there is no sign-up, <b>the topic is essentially a password</b>, so pick something that's not easily guessable.
</p> </p>
<p class="smallMarginBottom"> <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> </p>
<code> <code>
curl -d "Backup successful 😀" <span class="ntfyUrl">ntfy.sh</span>/mytopic curl -d "Backup successful 😀" <span class="ntfyUrl">ntfy.sh</span>/mytopic
</code> </code>
<p class="smallMarginBottom"> <p class="smallMarginBottom">
And another one using PUT: And another one using PUT (via <tt>curl -T</tt>):
</p> </p>
<code> <code>
echo -en "\u26A0\uFE0F Unauthorized login" | curl -sT- <span class="ntfyUrl">ntfy.sh</span>/mytopic echo -en "\u26A0\uFE0F Unauthorized login" | curl -T- <span class="ntfyUrl">ntfy.sh</span>/mytopic
</code> </code>
<p class="smallMarginBottom"> <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>): Here's an example in JS with <tt>fetch()</tt> (see <a href="https://github.com/binwiederhier/ntfy/tree/main/examples">full example</a>):
@ -200,7 +198,7 @@
<h2 id="examples" class="anchor">Examples</h2> <h2 id="examples" class="anchor">Examples</h2>
<p> <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 <a href="https://github.com/binwiederhier/ntfy/tree/main/examples">examples on GitHub</a>, so be sure to check
those out, too. those out, too.
</p> </p>
@ -220,7 +218,7 @@
<h3 id="example-web" class="anchor">Example: Server-sent messages in your web app</h3> <h3 id="example-web" class="anchor">Example: Server-sent messages in your web app</h3>
<p> <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. web application. Check out the <a href="example.html">live example</a> or just look the source of this page.
</p> </p>
@ -302,9 +300,24 @@
is to facilitate instant notifications on Android. is to facilitate instant notifications on Android.
</p> </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> <p>
<b id="why-no-ios" class="anchor">Why is there no iOS app (yet)?</b><br/> <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>. <a href="https://github.com/binwiederhier/ntfy/issues/4">someone else could help out</a>.
</p> </p>
@ -325,9 +338,9 @@
<div id="detail"{{if not .Topic}} style="display: none"{{end}}> <div id="detail"{{if not .Topic}} style="display: none"{{end}}>
<div id="detailMain"> <div id="detailMain">
<button id="detailCloseButton"><img src="static/img/close_black_24dp.svg"/></button> <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"> <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>: To send notifications to it, simply PUT or POST to the topic URL. Here's an example using <tt>curl</tt>:
</p> </p>
<code> <code>

33
server/static/css/app.css
View file

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

BIN
server/static/img/ntfy.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Before After
Before After

2
server/static/js/app.js
View file

@ -181,7 +181,7 @@ const hideDetailView = () => {
currentTopic = ""; currentTopic = "";
history.replaceState('', originalTitle, '/'); history.replaceState('', originalTitle, '/');
detailView.style.display = 'none'; detailView.style.display = 'none';
main.style.display = ''; main.style.display = 'block';
return false; return false;
}; };