add subscription page, used as a template for subscribe-list

book.toml

@@ -17,4 +17,8 @@ no-section-label = true
 git-repository-url = "https://git.libre-chip.org/libre-chip/website"
 git-repository-icon = "fa-git"
 # edit-url-template = "https://git.libre-chip.org/libre-chip/website/FIXME/{path}"
-input-404 = "404.md"
+input-404 = "404.md"
+additional-css = ["src/custom.css"]
+
+[output.html.print]
+enable = false

src/README.md

@@ -4,7 +4,7 @@ Libre-Chip is a project for creating [Free/Libre](https://en.wikipedia.org/wiki/
 
 We're just starting and our website doesn't have a whole lot on it yet...
 
-* [Subscribe for Announcements via E-Mail](https://libre-chip.org/subscription)[^subscribe]
+* [Subscribe for Announcements via E-Mail](subscription/index.md)[^subscribe]
 * [Libre-Chip's Git](https://git.libre-chip.org/)
 * Chat at [#libre-chip:matrix.org](https://matrix.to/#/#libre-chip:matrix.org) or at #libre-chip on [OFTC IRC](https://www.oftc.net/)
 

src/SUMMARY.md

@@ -1,4 +1,5 @@
 * [Libre-Chip](README.md)
+* [Subscribe for Announcements via E-Mail](subscription/index.md)
 * [Conduct](Conduct.md)
 * [License](LICENSE.md)
     * [GPL 3.0](gpl-3.0.md)

src/custom.css

@@ -0,0 +1,49 @@
+.subscribe_list_buttons {
+    gap: .5rem !important;
+    flex-wrap: wrap !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    display: flex !important;
+    padding: 1rem !important;
+    border: solid 1px !important;
+    border-radius: 0.5rem !important;
+    border-color: var(--theme-popup-border) !important;
+}
+
+.subscribe_list_buttons a {
+    color: var(--fg) !important;
+    cursor: pointer !important;
+    text-align: center !important;
+    min-height: 1em !important;
+    margin: 0 0.25em 0 0 !important;
+    padding: 0.75em 1.5em !important;
+    text-decoration: none !important;
+    background: var(--table-header-bg) !important;
+    border: solid 1px !important;
+    border-radius: 0.5rem !important;
+    border-color: var(--theme-popup-border) !important;
+    width: 50%;
+}
+
+.subscribe_list_buttons a.subscribe_list_delete_account {
+    color: var(--fg) !important;
+    cursor: pointer !important;
+    text-align: center !important;
+    min-height: 1em !important;
+    margin: 0 0.25em 0 0 !important;
+    padding: 0.75em 1.5em !important;
+    text-decoration: none !important;
+    background: var(--table-header-bg) !important;
+    border: solid 3px !important;
+    border-radius: 0.5rem !important;
+    border-color: var(--warning-border) !important;
+    width: 50%;
+}
+
+.subscribe_list_buttons a:active {
+    background: var(--theme-hover) !important;
+}
+
+.subscribe_list_buttons a:hover {
+    background: var(--theme-hover) !important;
+}

src/subscription/index.md

@@ -0,0 +1,38 @@
+# Subscribe for Announcements via E-Mail
+
+<!-- this page is handled by https://git.libre-chip.org/libre-chip/subscribe-list -->
+<script><!--
+// hide sidebar
+var body = document.querySelector('body');
+var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
+sidebar_toggle.checked = false;
+body.classList.remove('sidebar-visible');
+body.classList.add('sidebar-hidden');
+//--></script>
+
+<div class="subscribe_list_template_section" id="SubscriptionLoggedOut"/>
+
+As an anti-spam measure, you need to register using a 3rd-party account:
+
+<br/>
+
+<div class="subscribe_list_buttons">
+{{- for provider in providers -}}
+<a href="{provider.url}">Sign in with {provider.pretty_name}</a>
+{{- endfor -}}
+</div>
+<div class="subscribe_list_template_section"/>
+
+<div class="subscribe_list_template_section" id="SubscriptionLoggedIn"/>
+
+<h2>Signed in as {email}</h2>
+
+You are subscribed.
+
+<br/>
+
+<div class="subscribe_list_buttons">
+<a href="/subscription/logout">Logout</a>
+<a href="/subscription/unsubscribe" class="subscribe_list_delete_account"><b>Unsubscribe and Delete Account</b></a>
+</div>
+<div class="subscribe_list_template_section"/>