Embed new web UI into server
This commit is contained in:
Philipp Heckel
parent
1a3816c1ff
commit
e27d5719f0
38 changed files with 64 additions and 110 deletions
|
|
@ -1,176 +0,0 @@
|
|||
{{- /*gotype: heckel.io/ntfy/server.indexPage*/ -}}
|
||||
<!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/app.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="docs/subscribe/phone/">Android/iOS</a></li>
|
||||
<li><a href="docs/publish/">API</a></li>
|
||||
<li><a href="docs/install/">Self-hosting</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/>
|
||||
-H "Title: Unauthorized access detected" \<br/>
|
||||
-H "Priority: urgent" \<br/>
|
||||
-H "Tags: warning,skull" \<br/>
|
||||
-d "Remote access to $(hostname) detected. Act right away." \<br/>
|
||||
<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/priority-notification.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 & 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/emoji.js"></script>
|
||||
<script src="static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,7 +13,6 @@ import (
|
|||
"golang.org/x/sync/errgroup"
|
||||
"heckel.io/ntfy/auth"
|
||||
"heckel.io/ntfy/util"
|
||||
"html/template"
|
||||
"io"
|
||||
"log"
|
||||
"net"
|
||||
|
|
@ -61,35 +60,31 @@ type handleFunc func(http.ResponseWriter, *http.Request, *visitor) error
|
|||
|
||||
var (
|
||||
// If changed, don't forget to update Android App and auth_sqlite.go
|
||||
topicRegex = regexp.MustCompile(`^[-_A-Za-z0-9]{1,64}$`) // No /!
|
||||
topicPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}$`) // Regex must match JS & Android app!
|
||||
jsonPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/json$`)
|
||||
ssePathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/sse$`)
|
||||
rawPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/raw$`)
|
||||
wsPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/ws$`)
|
||||
authPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/auth$`)
|
||||
publishPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/(publish|send|trigger)$`)
|
||||
topicRegex = regexp.MustCompile(`^[-_A-Za-z0-9]{1,64}$`) // No /!
|
||||
topicPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}$`) // Regex must match JS & Android app!
|
||||
extTopicPathRegex = regexp.MustCompile(`^/[^/]+\.[^/]+/[-_A-Za-z0-9]{1,64}$`) // Extended topic path, for web-app, e.g. /example.com/mytopic
|
||||
jsonPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/json$`)
|
||||
ssePathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/sse$`)
|
||||
rawPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/raw$`)
|
||||
wsPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/ws$`)
|
||||
authPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/auth$`)
|
||||
publishPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/(publish|send|trigger)$`)
|
||||
|
||||
staticRegex = regexp.MustCompile(`^/static/.+`)
|
||||
docsRegex = regexp.MustCompile(`^/docs(|/.*)$`)
|
||||
fileRegex = regexp.MustCompile(`^/file/([-_A-Za-z0-9]{1,64})(?:\.[A-Za-z0-9]{1,16})?$`)
|
||||
disallowedTopics = []string{"docs", "static", "file"} // If updated, also update in Android app
|
||||
disallowedTopics = []string{"docs", "static", "file", "app", "settings"} // If updated, also update in Android app
|
||||
attachURLRegex = regexp.MustCompile(`^https?://`)
|
||||
|
||||
templateFnMap = template.FuncMap{
|
||||
"durationToHuman": util.DurationToHuman,
|
||||
}
|
||||
|
||||
//go:embed "index.gohtml"
|
||||
indexSource string
|
||||
indexTemplate = template.Must(template.New("index").Funcs(templateFnMap).Parse(indexSource))
|
||||
|
||||
//go:embed "example.html"
|
||||
exampleSource string
|
||||
|
||||
//go:embed static
|
||||
webStaticFs embed.FS
|
||||
webStaticFsCached = &util.CachingEmbedFS{ModTime: time.Now(), FS: webStaticFs}
|
||||
//go:embed site
|
||||
webFs embed.FS
|
||||
webFsCached = &util.CachingEmbedFS{ModTime: time.Now(), FS: webFs}
|
||||
webSiteDir = "/site"
|
||||
webHomeIndex = "/home.html" // Landing page, only if "web-index: home"
|
||||
webAppIndex = "/app.html" // React app
|
||||
|
||||
//go:embed docs
|
||||
docsStaticFs embed.FS
|
||||
|
|
@ -284,8 +279,6 @@ func (s *Server) handleInternal(w http.ResponseWriter, r *http.Request, v *visit
|
|||
return s.limitRequests(s.handleFile)(w, r, v)
|
||||
} else if r.Method == http.MethodOptions {
|
||||
return s.handleOptions(w, r)
|
||||
} else if r.Method == http.MethodGet && topicPathRegex.MatchString(r.URL.Path) {
|
||||
return s.handleTopic(w, r)
|
||||
} else if (r.Method == http.MethodPut || r.Method == http.MethodPost) && topicPathRegex.MatchString(r.URL.Path) {
|
||||
return s.limitRequests(s.authWrite(s.handlePublish))(w, r, v)
|
||||
} else if r.Method == http.MethodGet && publishPathRegex.MatchString(r.URL.Path) {
|
||||
|
|
@ -300,15 +293,15 @@ func (s *Server) handleInternal(w http.ResponseWriter, r *http.Request, v *visit
|
|||
return s.limitRequests(s.authRead(s.handleSubscribeWS))(w, r, v)
|
||||
} else if r.Method == http.MethodGet && authPathRegex.MatchString(r.URL.Path) {
|
||||
return s.limitRequests(s.authRead(s.handleTopicAuth))(w, r, v)
|
||||
} else if r.Method == http.MethodGet && (topicPathRegex.MatchString(r.URL.Path) || extTopicPathRegex.MatchString(r.URL.Path)) {
|
||||
return s.handleTopic(w, r)
|
||||
}
|
||||
return errHTTPNotFound
|
||||
}
|
||||
|
||||
func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) error {
|
||||
return indexTemplate.Execute(w, &indexPage{
|
||||
Topic: r.URL.Path[1:],
|
||||
CacheDuration: s.config.CacheDuration,
|
||||
})
|
||||
r.URL.Path = webHomeIndex
|
||||
return s.handleStatic(w, r)
|
||||
}
|
||||
|
||||
func (s *Server) handleTopic(w http.ResponseWriter, r *http.Request) error {
|
||||
|
|
@ -319,7 +312,8 @@ func (s *Server) handleTopic(w http.ResponseWriter, r *http.Request) error {
|
|||
_, err := io.WriteString(w, `{"unifiedpush":{"version":1}}`+"\n")
|
||||
return err
|
||||
}
|
||||
return s.handleHome(w, r)
|
||||
r.URL.Path = webAppIndex
|
||||
return s.handleStatic(w, r)
|
||||
}
|
||||
|
||||
func (s *Server) handleEmpty(_ http.ResponseWriter, _ *http.Request, _ *visitor) error {
|
||||
|
|
@ -339,7 +333,8 @@ func (s *Server) handleExample(w http.ResponseWriter, _ *http.Request) error {
|
|||
}
|
||||
|
||||
func (s *Server) handleStatic(w http.ResponseWriter, r *http.Request) error {
|
||||
http.FileServer(http.FS(webStaticFsCached)).ServeHTTP(w, r)
|
||||
r.URL.Path = webSiteDir + r.URL.Path
|
||||
http.FileServer(http.FS(webFsCached)).ServeHTTP(w, r)
|
||||
return nil
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,335 +0,0 @@
|
|||
/* 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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
|
||||
|
Before Width: | Height: | Size: 268 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 270 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 297 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 225 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 116 KiB |
|
|
@ -1,92 +0,0 @@
|
|||
|
||||
/**
|
||||
* 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 + "//";
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue