A fast and simple blog backend.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
mediocre-blog/src/http/tpl/follow.html

150 lines
3.6 KiB

{{ define "body" }}
<script async type="module" src="{{ StaticURL "api.js" }}"></script>
<p>
Here's your options for receiving updates about new posts:
</p>
<h2>Option 1: Email</h2>
<p>
Email is by far my preferred option for notifying followers of new posts. The
entire email list system for this site has been designed from scratch and is
completely self-hosted in my living room.
</p>
<p>
I solemnly swear that:
</p>
<ul>
<li>
You will never receive an email from me except to notify of a new post.
</li>
<li>
Your email will never be provided or sold to anyone else for any reason.
</li>
</ul>
<p>
So smash that subscribe button!
</p>
<p>
You will need to verify your email, so be sure to check your spam folder to
complete the process if you don't immediately see anything in your inbox.
</p>
<p style="color: var(--nc-lk-2);">
Unfortunately Google considers all emails from my mail server to be spam, so
gmail emails are not allowed. Sorry (not sorry).
</p>
<style>
#emailStatus.success {
color: green;
}
#emailStatus.fail {
color: red;
}
</style>
<form action="javascript:void(0);">
<input type="email" placeholder="name@host.com" id="emailAddress" />
<input class="button-primary" type="submit" value="Subscribe" id="emailSubscribe" />
<span id="emailStatus"></span>
</form>
<script>
const emailAddress = document.getElementById("emailAddress");
const emailSubscribe = document.getElementById("emailSubscribe");
const emailSubscribeOrigValue = emailSubscribe.value;
const emailStatus = document.getElementById("emailStatus");
emailSubscribe.onclick = async () => {
const api = await import("{{ StaticURL "api.js" }}");
emailSubscribe.disabled = true;
emailSubscribe.className = "";
emailSubscribe.value = "Please hold...";
emailStatus.innerHTML = '';
try {
if (!window.isSecureContext) {
throw "The browser environment is not secure.";
}
await api.call('/api/mailinglist/subscribe', {
body: { email: emailAddress.value },
requiresPow: true,
});
emailStatus.className = "success";
emailStatus.innerHTML = "Verification email sent (check your spam folder)";
} catch (e) {
emailStatus.className = "fail";
emailStatus.innerHTML = e;
} finally {
emailSubscribe.disabled = false;
emailSubscribe.className = "button-primary";
emailSubscribe.value = emailSubscribeOrigValue;
}
};
</script>
<h2>Option 2: RSS</h2>
<p>
RSS is the classic way to follow a site's updates, and we're bringing it back!
Just give any RSS reader the following URL:
</p>
<p>
<a href="{{ BlogHTTPURL "feed.xml" }}">{{ BlogHTTPURL "feed.xml" }}</a>
</p>
<p>
There are literally thousands of RSS readers to choose from if you don't have
one. Here's some recommendations:
</p>
<ul>
<li>
<a href="https://chrome.google.com/webstore/detail/rss-feed-reader/pnjaodmkngahhkoihejjehlcdlnohgmp">
Google Chrome Browser Extension
</a>
</li>
<li>
<a href="https://f-droid.org/en/packages/net.etuldan.sparss.floss/">
spaRSS
</a>
is my preferred android RSS reader, but you'll need to install
<a href="https://f-droid.org/">f-droid</a> on your device to use it (a
good thing to do anyway).
</li>
<li>
<a href="https://ranchero.com/netnewswire/">NetNewsWire</a>
is a good reader for iPhone/iPad/Mac devices, so I'm told. Their homepage
description makes a much better sales pitch for RSS than I ever could.
</li>
</ul>
{{ end }}
{{ template "base.html" . }}