vbatts/ntfy
1
0
Fork 0
Code Pull requests Activity

Embed new web UI into server

Browse source
This commit is contained in:
Philipp Heckel 2022-03-05 20:24:10 -05:00
parent 1a3816c1ff
commit e27d5719f0
38 changed files with 64 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

44
web/README.md
View file

@ -1,44 +0,0 @@
# Create React App example
## How to use
Download the example [or clone the repo](https://github.com/mui/material-ui):
<!-- #default-branch-switch -->
```sh
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app
cd create-react-app
```
Install it and run:
```sh
npm install
npm start
```
or:
<!-- #default-branch-switch -->
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/create-react-app)
<!-- #default-branch-switch -->
[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/create-react-app)
## The idea behind the example
<!-- #default-branch-switch -->
This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app).
It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
If you prefer, you can [use styled-components instead](https://mui.com/guides/interoperability/#styled-components).
## What's next?
<!-- #default-branch-switch -->
You now have a working example project.
You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/getting-started/templates/) section.

3
web/public/config.js
View file

@ -1,3 +0,0 @@
var config = {
defaultBaseUrl: 'https://ntfy.sh'
};

BIN
web/public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.8 KiB

174
web/public/home.html Normal file
View file

@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ntfy.sh | Send push notifications to your phone via PUT/POST</title>
<link rel="stylesheet" href="static/css/home.css" type="text/css">
<!-- Mobile view -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<!-- Mobile browsers, background color -->
<meta name="theme-color" content="#317f6f">
<meta name="msapplication-navbutton-color" content="#317f6f">
<meta name="apple-mobile-web-app-status-bar-style" content="#317f6f">
<!-- Favicon, see favicon.io -->
<link rel="icon" type="image/png" href="static/img/favicon.png">
<!-- Previews in Google, Slack, WhatsApp, etc. -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<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: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" />
</head>
<body>
<nav id="header">
<div id="headerBox">
<img id="logo" src="static/img/ntfy.png" alt="logo"/>
<div id="name">ntfy</div>
<ol>
<li><a href="docs/">Getting started</a></li>
<li><a href="app">Web app</a></li>
<li><a href="docs/subscribe/phone/">Android/iOS</a></li>
<li><a href="docs/publish/">API</a></li>
<li><a href="https://github.com/binwiederhier/ntfy">GitHub</a></li>
</ol>
</div>
</nav>
<div id="main">
<h1>Send push notifications to your phone or desktop via PUT/POST</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 notifications to your phone or desktop via scripts from any computer,
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>
<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>
<h2 id="publish" class="anchor">Publishing messages</h2>
<p>
<a href="docs/publish/">Publishing messages</a> can be done via PUT or POST. Topics are created on the fly by subscribing or publishing to them.
Because there is no sign-up, <b>the topic is essentially a password</b>, so pick something that's not easily guessable.
</p>
<p class="smallMarginBottom">
Here's an example showing how to publish a message using a POST request (via <tt>curl -d</tt>):
</p>
<code>
curl -d "Backup successful 😀" <span class="ntfyUrl">ntfy.sh</span>/mytopic
</code>
<p class="smallMarginBottom">
There are <a href="docs/publish/">more features</a> related to publishing messages: You can set a
<a href="docs/publish/#message-priority">notification priority</a>, a <a href="docs/publish/#message-title">title</a>,
and <a href="docs/publish/#tags-emojis">tag messages</a>.
Here's an example using some of them together:
</p>
<code>
curl \<br/>
&nbsp;&nbsp;-H "Title: Unauthorized access detected" \<br/>
&nbsp;&nbsp;-H "Priority: urgent" \<br/>
&nbsp;&nbsp;-H "Tags: warning,skull" \<br/>
&nbsp;&nbsp;-d "Remote access to $(hostname) detected. Act right away." \<br/>
&nbsp;&nbsp;<span class="ntfyUrl">ntfy.sh</span>/mytopic
</code>
<p>
Here's what that looks like in the <a href="docs/subscribe/phone/">Android app</a>:
</p>
<figure>
<img src="static/img/screenshot-phone-popover.png" style="max-height: 200px"/>
<figcaption>Urgent notification with pop-over</figcaption>
</figure>
<h2 id="subscribe" class="anchor">Subscribe to a topic</h2>
<p>
You can create and subscribe to a topic either <a href="docs/subscribe/phone/">using your phone</a>,
in <a href="docs/subscribe/web/">this web UI</a>, or in your own app by <a href="docs/subscribe/api/">subscribing via the API</a>.
</p>
<h3 id="subscribe-phone" class="anchor">Subscribe from your phone</h3>
<p>
Simply get the app and start <a href="docs/publish/">publishing messages</a>. To learn more about the app,
<a href="docs/subscribe/phone/">check out the documentation</a>.
</p>
<p>
<a href="https://play.google.com/store/apps/details?id=io.heckel.ntfy"><img src="static/img/badge-googleplay.png"></a>
<a href="https://f-droid.org/en/packages/io.heckel.ntfy/"><img src="static/img/badge-fdroid.png"></a>
<a href="https://github.com/binwiederhier/ntfy/issues/4"><img src="static/img/badge-appstore.png"></a>
</p>
<p>
Here's a video showing the app in action:
</p>
<figure>
<video controls muted autoplay loop src="static/img/android-video-overview.mp4" style="max-width: 650px"></video>
<figcaption>Sending push notifications to your Android phone</figcaption>
</figure>
<h3 id="subscribe-web" class="anchor">Subscribe via web app</h3>
<p>
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.
</p>
<h3 id="subscribe-api" class="anchor">Subscribe using the API</h3>
<p>
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>,
an <a href="docs/subscribe/api/#subscribe-as-sse-stream">SSE/EventSource stream</a> (useful for web apps),
as well as a <a href="docs/subscribe/api/#subscribe-as-raw-stream">plain text stream</a>.
</p>
<p class="smallMarginBottom">
Here's an example for JSON. The <b>connection stays open</b>, so you can retrieve messages as they come in:
</p>
<code>
$ curl -s <span class="ntfyUrl">ntfy.sh</span>/mytopic/json<br/>
{"id":"SLiKI64DOt","time":1635528757,"event":"open","topic":"mytopic"}<br/>
{"id":"hwQ2YpKdmg","time":1635528741,"event":"message","topic":"mytopic","message":"Hi!"}<br/>
{"id":"DGUDShMCsc","time":1635528787,"event":"keepalive","topic":"mytopic"}<br/>
...
</code>
<p>
Here's a short video demonstrating it in action:
</p>
<figure>
<video controls muted autoplay loop src="static/img/android-video-subscribe-api.mp4" style="max-width: 650px"></video>
<figcaption>Subscribing to the JSON stream with <tt>curl</tt></figcaption>
</figure>
<h3 id="docs" class="anchor">Check out the docs!</h3>
<p>
ntfy has so many more features and you can learn about all of them <a href="docs/">in the documentation</a>
(I tried my very best to make it the best docs ever 😉, not sure if I succeeded, hehe).
</p>
<figure>
<a href="docs/"><img width="100%" src="static/img/screenshot-docs.png"/></a>
<figcaption>Check out the documentation</figcaption>
</figure>
<h3 id="free-software" class="anchor">100% open source &amp; forever free</h3>
<p>
I love free software, and I'm doing this because it's fun. I have no bad intentions, and I will
never monetize or sell your information. This service will always stay
<a href="https://github.com/binwiederhier/ntfy">free and open</a>.
You can read more in the <a href="docs/faq/">FAQs</a> and in the <a href="docs/privacy/">privacy policy</a>.
</p>
<center id="ironicCenterTagDontFreakOut"><i>Made with ❤️ by <a href="https://heckel.io">Philipp C. Heckel</a></i></center>
</div>
<div id="lightbox" class="lightbox"></div>
<script src="static/js/home.js"></script>
</body>
</html>

9
web/public/index.html
View file

@ -20,18 +20,15 @@
<!-- Previews in Google, Slack, WhatsApp, etc. -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<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: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:site_name" content="ntfy web" />
<meta property="og:title" content="ntfy web | Web app to receive push notifications from scripts via PUT/POST" />
<meta property="og:description" content="ntfy lets you send push notifications via scripts from any computer or phone, 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="%PUBLIC_URL%/static/img/ntfy.png" />
<meta property="og:url" content="https://ntfy.sh" />
<!-- Never index -->
<meta name="robots" content="noindex, nofollow" />
<!-- Server configuration -->
<script src="%PUBLIC_URL%/config.js"></script>
<!-- FIXME Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
</head>

15
web/public/manifest.json
View file

@ -1,15 +0,0 @@
{
"short_name": "Your Orders",
"name": "Your Orders",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

335
web/public/static/css/home.css Normal file
View file

@ -0,0 +1,335 @@
/* general styling */
html, body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 1.1em;
color: #444;
margin: 0;
padding: 0;
}
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;
}
a:hover {
text-decoration: none;
color: #317f6f;
}
h1 {
margin-top: 35px;
margin-bottom: 30px;
font-size: 2.5em;
word-wrap: break-word; /* For very long topics */
padding-right: 40px; /* For the X on the detail page */
font-weight: 300;
color: #666;
}
h2 {
margin-top: 30px;
margin-bottom: 5px;
font-size: 1.8em;
font-weight: 300;
color: #333;
}
h3 {
margin-top: 25px;
margin-bottom: 5px;
font-size: 1.3em;
font-weight: 300;
color: #333;
}
p {
margin-top: 10px;
margin-bottom: 20px;
line-height: 160%;
font-weight: 400;
}
p.smallMarginBottom {
margin-bottom: 10px;
}
b {
font-weight: 500;
}
tt {
background: #eee;
padding: 2px 7px;
border-radius: 3px;
}
code {
display: block;
background: #eee;
font-family: monospace;
padding: 20px;
border-radius: 3px;
margin-top: 10px;
margin-bottom: 20px;
overflow-x: auto;
white-space: nowrap;
}
/* Roboto font, embedded with the help of https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin */
/* roboto-300 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local(''),
url('../font/roboto-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../font/roboto-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local(''),
url('../font/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../font/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local(''),
url('../font/roboto-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../font/roboto-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* Main page */
#main {
max-width: 900px;
margin: 0 auto 50px auto;
padding: 0 10px;
}
#error {
color: darkred;
font-style: italic;
}
#ironicCenterTagDontFreakOut {
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;
}
/* Figures */
figure {
text-align: center;
}
figure img, figure video {
filter: drop-shadow(3px 3px 3px #ccc);
border-radius: 7px;
max-width: 100%;
}
figure video {
width: 100%;
max-height: 450px;
}
figcaption {
text-align: center;
font-style: italic;
padding-top: 10px;
}
/* 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;
}
/* Header */
#header {
background: #3a9784;
height: 130px;
}
#header #headerBox {
max-width: 900px;
margin: 0 auto;
padding: 0 10px;
}
#header #logo {
margin-top: 23px;
float: left;
}
#header #name {
float: left;
color: white;
font-size: 2.6em;
font-weight: 300;
margin: 35px 0 0 20px;
}
#header ol {
list-style-type: none;
float: right;
margin-top: 80px;
}
#header ol li {
display: inline-block;
margin: 0 10px;
font-weight: 400;
}
#header ol li a, nav ol li a:visited {
color: white;
text-decoration: none;
}
#header ol li a:hover {
text-decoration: underline;
}
/* 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;
}
/* Hide top menu SMALL SCREEN */
@media only screen and (max-width: 780px) {
#header ol {
display: none;
}
}

BIN
web/public/static/font/roboto-v29-latin-300.woff Normal file
View file

Binary file not shown.

BIN
web/public/static/font/roboto-v29-latin-300.woff2 Normal file
View file

Binary file not shown.

BIN
web/public/static/font/roboto-v29-latin-500.woff Normal file
View file

Binary file not shown.

BIN
web/public/static/font/roboto-v29-latin-500.woff2 Normal file
View file

Binary file not shown.

BIN
web/public/static/font/roboto-v29-latin-regular.woff Normal file
View file

Binary file not shown.

BIN
web/public/static/font/roboto-v29-latin-regular.woff2 Normal file
View file

Binary file not shown.

BIN
web/public/static/img/android-video-overview.mp4 Normal file
View file

Binary file not shown.

BIN
web/public/static/img/android-video-subscribe-api.mp4 Normal file
View file

Binary file not shown.

BIN
web/public/static/img/badge-appstore.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
web/public/static/img/badge-fdroid.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
web/public/static/img/badge-googleplay.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
web/public/static/img/basic-notification.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
web/public/static/img/screenshot-curl.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 297 KiB

BIN
web/public/static/img/screenshot-docs.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 134 KiB

BIN
web/public/static/img/screenshot-phone-add.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
web/public/static/img/screenshot-phone-detail.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 225 KiB

BIN
web/public/static/img/screenshot-phone-main.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
web/public/static/img/screenshot-phone-notification.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 224 KiB

BIN
web/public/static/img/screenshot-phone-popover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 270 KiB

BIN
web/public/static/img/screenshot-web-detail.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 116 KiB

92
web/public/static/js/home.js Normal file
View file

@ -0,0 +1,92 @@
/**
* Hello, dear curious visitor. I am not a web-guy, so please don't judge my horrible JS code.
* In fact, please do tell me about all the things I did wrong and that I could improve. I've been trying
* to read up on modern JS, but it's just a little much.
*
* Feel free to open tickets at https://github.com/binwiederhier/ntfy/issues. Thank you!
*/
/* All the things */
let currentUrl = window.location.hostname;
if (window.location.port) {
currentUrl += ':' + window.location.port
}
/* Screenshots */
const lightbox = document.getElementById("lightbox");
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;
}
};
let currentScreenshotIndex = 0;
const screenshots = [...document.querySelectorAll("#screenshots a")];
screenshots.forEach((el, index) => {
el.onclick = (e) => { return showScreenshotOverlay(e, el, index); };
});
lightbox.onclick = hideScreenshotOverlay;
// Add anchor links
document.querySelectorAll('.anchor').forEach((el) => {
if (el.hasAttribute('id')) {
const id = el.getAttribute('id');
const anchor = document.createElement('a');
anchor.innerHTML = `<a href="#${id}" class="anchorLink">#</a>`;
el.appendChild(anchor);
}
});
// Change ntfy.sh url and protocol to match self-hosted one
document.querySelectorAll('.ntfyUrl').forEach((el) => {
el.innerHTML = currentUrl;
});
document.querySelectorAll('.ntfyProtocol').forEach((el) => {
el.innerHTML = window.location.protocol + "//";
});

5
web/src/app/config.js
View file

@ -1,2 +1,5 @@
const config = window.config;
//const config = window.config;
const config = {
defaultBaseUrl: "https://ntfy.sh"
};
export default config;

1
web/src/components/App.js
View file

@ -21,7 +21,6 @@ import {BrowserRouter, Route, Routes, useLocation, useNavigate} from "react-rout
import {subscriptionRoute} from "../app/utils";
// TODO support unsubscribed routes
// TODO embed into ntfy server
// TODO googlefonts
// TODO new notification indicator
// TODO sound

2
web/src/components/Notifications.js
View file

@ -251,7 +251,7 @@ const NothingHereYet = (props) => {
return (
<VerticallyCenteredContainer maxWidth="xs">
<Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
<img src="static/img/ntfy-outline.svg" height="64" width="64" alt="No notifications"/><br />
<img src="/static/img/ntfy-outline.svg" height="64" width="64" alt="No notifications"/><br />
You haven't received any notifications for this topic yet.
</Typography>
<Paragraph>

1
web/src/components/SubscribeDialog.js
View file

@ -109,6 +109,7 @@ const SubscribePage = (props) => {
margin="dense"
id="topic"
placeholder="Topic name, e.g. phil_alerts"
inputProps={{ maxLength: 64 }}
value={props.topic}
onChange={ev => props.setTopic(ev.target.value)}
type="text"