From 4bf2fb85e3c8c5e3b347bcc9779e6ac662960613 Mon Sep 17 00:00:00 2001 From: binwiederhier Date: Tue, 13 Dec 2022 15:19:40 -0500 Subject: [PATCH] Bla --- server/server.go | 3 + web/public/index.html | 2 + web/src/components/App.js | 2 + web/src/components/Home.js | 185 ++++++++++++++++++++++++------- web/src/components/Pricing.js | 12 ++ web/src/components/SiteLayout.js | 30 +++++ web/src/components/routes.js | 1 + 7 files changed, 194 insertions(+), 41 deletions(-) create mode 100644 web/src/components/Pricing.js create mode 100644 web/src/components/SiteLayout.js diff --git a/server/server.go b/server/server.go index cd6cd154..efac7cab 100644 --- a/server/server.go +++ b/server/server.go @@ -48,6 +48,9 @@ import ( - Sign-in - Password reset - Pricing + - change password + - change email + - Config flags: - diff --git a/web/public/index.html b/web/public/index.html index 2c9751f3..0fe7170f 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -4,6 +4,8 @@ ntfy web + + diff --git a/web/src/components/App.js b/web/src/components/App.js index 772961d4..f0c48dec 100644 --- a/web/src/components/App.js +++ b/web/src/components/App.js @@ -29,6 +29,7 @@ import i18n from "i18next"; import api from "../app/Api"; import prefs from "../app/Prefs"; import session from "../app/Session"; +import Pricing from "./Pricing"; // TODO races when two tabs are open // TODO investigate service workers @@ -42,6 +43,7 @@ const App = () => { }/> + }/> }/> }> }/> diff --git a/web/src/components/Home.js b/web/src/components/Home.js index b44a5e49..20a41b88 100644 --- a/web/src/components/Home.js +++ b/web/src/components/Home.js @@ -1,48 +1,151 @@ import * as React from 'react'; -import {useEffect, useState} from 'react'; -import { - CardActions, - CardContent, - FormControl, Link, - Select, - Stack, - Table, - TableBody, - TableCell, - TableHead, - TableRow, - useMediaQuery -} from "@mui/material"; -import Typography from "@mui/material/Typography"; -import prefs from "../app/Prefs"; -import {Paragraph} from "./styles"; -import EditIcon from '@mui/icons-material/Edit'; -import CloseIcon from "@mui/icons-material/Close"; -import IconButton from "@mui/material/IconButton"; -import PlayArrowIcon from '@mui/icons-material/PlayArrow'; -import Container from "@mui/material/Container"; -import TextField from "@mui/material/TextField"; -import MenuItem from "@mui/material/MenuItem"; -import Card from "@mui/material/Card"; -import Button from "@mui/material/Button"; -import {useLiveQuery} from "dexie-react-hooks"; -import theme from "./theme"; -import Dialog from "@mui/material/Dialog"; -import DialogTitle from "@mui/material/DialogTitle"; -import DialogContent from "@mui/material/DialogContent"; -import DialogActions from "@mui/material/DialogActions"; -import userManager from "../app/UserManager"; -import {playSound, shuffle, sounds, validUrl} from "../app/utils"; -import {useTranslation} from "react-i18next"; +import SiteLayout from "./SiteLayout"; const Home = () => { return ( - - - This is the landing page - Login - - + +

Send push notifications to your phone or desktop via PUT/POST

+

+ ntfy (pronounce: notify) is a simple HTTP-based pub-sub notification + service. + It allows you to send notifications to your phone or desktop via scripts from any computer, + entirely without signup, cost or setup. It's also open source if you want to run your own. +

+
+ + + + + + + +
+ +

Publishing messages

+

+ Publishing messages 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, the topic is essentially a password, so pick something that's + not easily guessable. +

+

+ Here's an example showing how to publish a message using a POST request (via curl -d): +

+ + curl -d "Backup successful 😀" ntfy.sh/mytopic + +

+ There are more features related to publishing messages: You can set a + notification priority, a title, + and tag messages. + Here's an example using some of them together: +

+ + curl \
+   -H "Title: Unauthorized access detected" \
+   -H "Priority: urgent" \
+   -H "Tags: warning,skull" \
+   -d "Remote access to $(hostname) detected. Act right away." \
+   ntfy.sh/mytopic + +

+ Here's what that looks like in the Android app: +

+
+ +
Urgent notification with pop-over
+
+ +

Subscribe to a topic

+

+ You can create and subscribe to a topic either using your phone, + in this web UI, or in your own app by subscribing via the API. +

+ +

Subscribe from your phone

+

+ Simply get the app and start publishing messages. To learn more about + the app, + check out the documentation. +

+

+ + + +

+

+ Here's a video showing the app in action: +

+
+ +
Sending push notifications to your Android phone
+
+ +

Subscribe via web app

+

+ Subscribe to topics in the web app and receive messages as desktop + notification. + It is available at ntfy.sh/app. +

+
+ +
ntfy web app, available at ntfy.sh/app
+
+ +

Subscribe using the API

+

+ There's a super simple API that you can use to integrate your own app. You can consume + a JSON stream, + an SSE/EventSource stream, + a plain text stream, + or via WebSockets. +

+

+ Here's an example for JSON. The connection stays open, so you can retrieve messages as they + come in: +

+ + $ curl -s ntfy.sh/mytopic/json
+ {`{"id":"SLiKI64DOt","time":1635528757,"event":"open","topic":"mytopic"}`}
+ {`{"id":"hwQ2YpKdmg","time":1635528741,"event":"message","topic":"mytopic","message":"Hi!"}`}
+ {`{"id":"DGUDShMCsc","time":1635528787,"event":"keepalive","topic":"mytopic"}`}
+ ... + +

+ Here's a short video demonstrating it in action: +

+
+ +
Subscribing to the JSON stream with curl
+
+ +

Check out the docs!

+

+ ntfy has so many more features and you can learn about all of them in the + documentation + (I tried my very best to make it the best docs ever 😉, not sure if I succeeded, hehe). +

+
+ +
Check out the documentation
+
+ +

100% open source & forever free

+

+ 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 + free and open. + You can read more in the FAQs and in the privacy + policy. +

+ +
Made with ❤️ by Philipp C. Heckel
+ ); }; diff --git a/web/src/components/Pricing.js b/web/src/components/Pricing.js new file mode 100644 index 00000000..24532613 --- /dev/null +++ b/web/src/components/Pricing.js @@ -0,0 +1,12 @@ +import * as React from 'react'; +import SiteLayout from "./SiteLayout"; + +const Pricing = () => { + return ( + + pricing + + ); +}; + +export default Pricing; diff --git a/web/src/components/SiteLayout.js b/web/src/components/SiteLayout.js new file mode 100644 index 00000000..16f66eb0 --- /dev/null +++ b/web/src/components/SiteLayout.js @@ -0,0 +1,30 @@ +import * as React from 'react'; +import {NavLink} from "react-router-dom"; +import routes from "./routes"; +import session from "../app/Session"; + +const SiteLayout = (props) => { + return ( +
+ +
+ {props.children} +
+
+ ); +}; + +export default SiteLayout; diff --git a/web/src/components/routes.js b/web/src/components/routes.js index 27b36736..b88d8f99 100644 --- a/web/src/components/routes.js +++ b/web/src/components/routes.js @@ -3,6 +3,7 @@ import {shortUrl} from "../app/utils"; const routes = { home: "/", + pricing: "/pricing", login: "/login", signup: "/signup", app: config.appRoot,