From da447cedaae2c48a8826af199210b9a84c3dd64b Mon Sep 17 00:00:00 2001
From: wighawag <wighawag@gmail.com>
Date: Sun, 10 Sep 2023 17:55:28 +0000
Subject: [PATCH] Revert "use tinyletter"

This reverts commit 06d814147aef34fca97bfd7bad631bf8c9cfac65.
---
 docs/.vitepress/theme/custom.css | 75 +++++++++++++++++++++++++++++++-
 docs/index.md                    | 58 ++++++++++++------------
 2 files changed, 103 insertions(+), 30 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 9abb209f..624c3ff4 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -29,14 +29,85 @@
   font-weight: 600;
 }
 
-#email-address {
+.gui-toast-group {
+  position: fixed;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline: 0;
+  padding-block-end: 5vh;
+}
+
+.gui-toast-group {
+  display: grid;
+  justify-items: center;
+  justify-content: center;
+  gap: 1vh;
+}
+
+.gui-toast {
+  max-inline-size: min(25ch, 90vw);
+  padding-block: .5ch;
+  padding-inline: 1ch;
+  border-radius: 3px;
+  font-size: 1rem;
+}
+
+.gui-toast-group {
+  pointer-events: none;
+}
+
+.gui-toast {
+  --_bg-lightness: 90%;
+
+  color: black;
+  background: hsl(0 0% var(--_bg-lightness) / 90%);
+}
+
+:root.dark .gui-toast {
+    color: white;
+    --_bg-lightness: 20%;
+}
+
+@keyframes fade-in {
+  from { opacity: 0 }
+}
+
+@keyframes fade-out {
+  to { opacity: 0 }
+}
+
+@keyframes slide-in {
+  from { transform: translateY(var(--_travel-distance, 10px)) }
+}
+
+.gui-toast {
+  --_duration: 3s;
+  --_travel-distance: 0;
+
+  will-change: transform;
+  animation: 
+    fade-in .3s ease,
+    slide-in .3s ease,
+    fade-out .3s ease var(--_duration);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .gui-toast {
+    --_travel-distance: 5vh;
+  }
+}
+
+#email {
   font-size: 1rem;
   margin: 1rem 3rem 3rem 3rem;
   border-radius: 1rem;
   padding: 0.8rem;
-  background-color: rgb(22, 22, 24);
+  background-color: rgb(220, 220, 220);
 }
 
+:root.dark #email {
+  background-color: rgb(22, 22, 24);
+}
 
 #call-to-action {
   font-size: 1.5rem;
diff --git a/docs/index.md b/docs/index.md
index 46c1e3d7..13b448fe 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -56,10 +56,15 @@ async function subscribe(e) {
       if (json.error) {
           throw new Error(json.error);
       }
-      obj.value = {type: 'Success', message : 'Subscribed'};
-      setTimeout(() => acknowledge(), 3000);
+      if (json.message) {
+        obj.value = {type: 'Success', message : json.message};
+      } else {
+        obj.value = {type: 'Success', message : "Noted, You'll receive an email to confirm your subscription"};
+      }
   } catch (e) {
     obj.value = { type: 'Error', message: e.message || '' + e };
+  } finally {
+    setTimeout(() => acknowledge(), 5000);
   }
 }
 
@@ -67,32 +72,29 @@ async function subscribe(e) {
 
 
 <div class="custom-layout">
-  <form
-					class="mt-1 max-w-sm"
-					action="https://tinyletter.com/stratagems"
-					method="post"
-					target="popupwindow"
-					onsubmit="window.open('https://tinyletter.com/stratagems', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true"
-				>
-					<p id="call-to-action">
-						Subscribe for updates on Stratagems!
+
+<section class="gui-toast-group">
+  <output role="status" class="gui-toast" v-if="obj.type=='Error'" style="color: #dc2626;">{{obj.message}}</output>
+  <output role="status" class="gui-toast" v-if="obj.type=='Success'" style="color: #16a34a;">{{obj.message}}</output>
+</section>
+  
+  <form id="subscribeForm" action="https://etherplay-newsletter-subscription.rim.workers.dev" method="POST">
+    <!-- TODO <label for="email" class="sr-only">Email address</label> -->
+    <p id="call-to-action">
+						Subscribe for updates on Stratagems and more from Etherplay!
 					</p>
-					<div class="flex gap-x-4">
-						<!-- <label for="email-address" class="sr-only">Email address</label> -->
-						<input
-							id="email-address"
-							name="email"
-							type="email"
-							autocomplete="email"
-							required
-							placeholder="Enter your email"
+    <div class="flex gap-x-4">
+    <input type="hidden" name="main_list" value="announcements@etherplay.io" />
+    <input type="hidden" name="sub_list" value="stratagems-announcements@etherplay.io"/>
+    <input
+      id="email"
+      name="email"
+      type="email"
+      placeholder="Enter your email"
 						/>
-						<button
-              class="btn"
-              id="submit"
-							type="submit"
-							>Subscribe</button
-						>
-					</div>
-				</form>
+    <button id="submit" class="btn" @click="subscribe">
+    Subscribe
+    </button>
+    </div>
+  </form>
 </div>