{{ define "body" }}

<script async type="module" src="{{ StaticURL "api.js" }}"></script>

<p>
  Here's your options for receiving updates about new blog 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 blog 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 this blog 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="{{ BlogURL "feed.xml" }}">{{ BlogURL "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" . }}