newsletter

docs/.vitepress/config.mts

@@ -43,7 +43,18 @@ export default defineConfig({
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/wighawag/stratagems#readme' }
-    ]
+      { icon: 'github', link: 'https://github.com/wighawag/stratagems#readme' },
+      { icon: 'twitter', link: 'https://twitter.com/stratagems_eth' },
+      { icon: 'discord', link: 'https://discord.gg/Qb4gr2ekfr' },
+    ],
+
+    search: {
+      provider: 'local'
+    },
+
+    footer: {
+      message: 'Released under the GPL 3.0 License.',
+      copyright: 'Copyright © 2022-present Ronan Sandford'
+    }
   }
 })

docs/.vitepress/theme/custom.css

@@ -1,4 +1,62 @@
 :root {
     --vp-c-brand: #646cff;
     --vp-c-brand-light: #747bff;
-  }
+  }
+
+
+  /* Custom Stlye */
+.custom-layout {
+  font: var(--vp-font-family-base);
+  background-color: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 1rem;
+  min-height: 400px;
+  max-width: 1152px;
+  margin: 6rem auto;
+  border-radius: 10px;
+}
+
+.custom-layout h1 {
+  margin: 1rem;
+  font-size: 2rem;
+  line-height: 3rem;
+  font-weight: 600;
+}
+
+#email {
+  font-size: 1rem;
+  margin: 1rem;
+  border-radius: 1rem;
+  padding: 0.8rem;
+  background-color: rgb(22, 22, 24);
+}
+
+
+
+.custom-layout .btn {
+  border: 1px solid transparent;
+  background-color: var(--vp-button-brand-bg);
+  color: var(--vp-button-brand-text);
+  border-color: var(--vp-button-brand-border);
+  border-radius: 1em;
+  padding: 0.5rem 1.4rem;
+  font-size: 1.2rem;
+}
+
+ .custom-layout .btn:hover {
+  border-color: var(--vp-button-brand-hover-border);
+  color: var(--vp-button-brand-hover-text);
+  background-color: var(--vp-button-brand-hover-bg);
+}
+
+.custom-layout .btn:active {
+  border-color: var(--vp-button-brand-active-border);
+  color: var(--vp-button-brand-active-text);
+  background-color: var(--vp-button-brand-active-bg);
+}

docs/index.md

@@ -26,3 +26,63 @@ features:
     details: The whole game is a smart contract
 ---
 
+
+<script setup>
+import { ref } from 'vue'
+
+const obj = ref({
+  type: 'Idle',
+  // working: false, TODO
+  message: ""
+})
+
+function acknowledge() {
+  obj.value.type = 'Idle';
+}
+async function subscribe(e) {
+  e.preventDefault();
+  console.log("subscribing...");
+  const form = document.getElementById('subscribeForm');;
+  const formData = new FormData(form);
+  const data = new URLSearchParams([...formData]);
+  console.log({ data: data.toString() });
+  try {
+      const result = await fetch(form.action, {
+          method: form.method,
+          body: data,
+      });
+      const json = await result.json();
+      console.log(json);
+      if (json.error) {
+          throw new Error(json.error);
+      }
+      obj.value = {type: 'Success', message : 'Subscribed'};
+      setTimeout(() => acknowledge(), 3000);
+  } catch (e) {
+    obj.value = { type: 'Error', message: e.message || '' + e };
+  }
+}
+
+</script>
+
+
+<div class="custom-layout">
+  <h1>Subscribe to Our <a href="https://etherplay.io" target="_blank" rel="noreferer noopener" style="text-decoration: underline;">Etherplay</a> mailing list for updates on Stratagems.</h1>
+
+  <span v-if="obj.type=='Error'" style="color: #dc2626;">{{obj.message}}</span>
+  <span v-if="obj.type=='Success'" style="color: #16a34a;">{{obj.message}}</span>
+  <form id="subscribeForm" action="https://etherplay-newsletter-subscription.rim.workers.dev" method="POST">
+    <!-- TODO <label for="email" class="sr-only">Email address</label> -->
+    <input type="hidden" name="main_list" value="[email protected]" />
+    <input type="hidden" name="sub_list" value="[email protected]"/>
+    <input
+      id="email"
+      name="email"
+      type="email"
+      placeholder="Enter your email"
+						/>
+    <button id="submit" class="btn" @click="subscribe">
+    Subscribe
+    </button>
+  </form>
+</div>