Fix newsletter form (#651)

Co-authored-by: Daniel N <[email protected]>

src/.vuepress/theme/components/blog/NewsletterForm.vue

@@ -5,77 +5,51 @@
   >
     <div class="flex-shrink lg:max-w-sm xl:max-w-xl mb-4 lg:mb-0">
       <h2 class="type-h2">Stay informed</h2>
-      <p class="mt-2 mr-2">
+      <p class="mt-2 mb-6 mr-2">
         Sign up for the IPFS newsletter (<router-link
           :to="latestWeeklyPost ? latestWeeklyPost.path : ''"
           class="text-blueGreenLight hover:underline"
           >example</router-link
         >) for the latest on releases, upcoming developments, community events,
         and more.
       </p>
+      <a target="_blank" href="https://ipfs.fyi/newsletter">
+        <button
+          type="button"
+          class="
+            px-3
+            py-2
+            text-white
+            bg-blueGreen
+            font-semibold
+            rounded
+            hover:bg-blueGreenScreen
+            transition
+            duration-300
+          "
+        >
+          Sign up
+        </button>
+      </a>
     </div>
-    <form
+
+    <div
       id="mc-embedded-subscribe-form"
       name="mc-embedded-subscribe-form"
       class="flex lg:justify-end max-w-lg xl:w-2/5"
-      action="https://ipfs.us4.list-manage.com/subscribe/post?u=25473244c7d18b897f5a1ff6b&amp;id=cad54b2230"
-      method="post"
-      target="_blank"
-      @submit="subscribeClick"
     >
       <div id="mc_embed_signup_scroll" class="grid gric-col-2 w-full">
         <div class="fields flex flex-col sm:flex-row col-start-1 col-span-2">
-          <input
-            id="mce-EMAIL"
-            v-model="email"
-            required
-            type="email"
-            aria-label="Email Address"
-            class="flex-grow text-black p-2 rounded"
-            placeholder="[email protected]"
-            name="EMAIL"
-          />
-          <div class="sm:ml-4 sm:pt-0 pt-2">
-            <input
-              id="mc-embedded-subscribe"
-              type="submit"
-              value="Subscribe"
-              name="subscribe"
-              class="p-2 text-white font-semibold bg-blueGreen hover:bg-blueGreenScreen transition duration-300 rounded cursor-pointer w-full"
-            />
-          </div>
-        </div>
-        <label class="pt-2 col-start-1 col-span-2" for="gdpr_28879">
-          <input
-            id="gdpr_28879"
-            type="checkbox"
-            class=""
-            required
-            name="gdpr[28879]"
-            value="Y"
-          /><span class="pl-2">Please send me the newsletter</span>
-        </label>
-      </div>
-      <div id="mergeRow-gdpr">
-        <div style="position: absolute; left: -5000px" aria-hidden="true">
-          <input
-            type="text"
-            name="b_25473244c7d18b897f5a1ff6b_cad54b2230"
-            tabindex="-1"
-            value=""
-          />
+          <div class="sm:ml-4 sm:pt-0"></div>
         </div>
-        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
       </div>
-    </form>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 
-import countly from '../../util/countly'
-
 export default {
   name: 'NewsletterForm',
   props: {},
@@ -85,10 +59,6 @@ export default {
   computed: {
     ...mapState('appState', ['latestWeeklyPost']),
   },
-  methods: {
-    subscribeClick() {
-      countly.trackEvent(countly.events.NEWSLETTER_SUBSCRIBE)
-    },
-  },
+  methods: {},
 }
 </script>

src/.vuepress/theme/layouts/Blog.vue

@@ -19,7 +19,14 @@
         :block-lazy-load="blockLazyLoad"
       />
       <div
-        class="grid-margins pt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+        class="
+          grid-margins
+          pt-8
+          grid grid-cols-1
+          md:grid-cols-2
+          lg:grid-cols-3
+          gap-8
+        "
         itemscope
         itemtype="http://schema.org/Blog"
       >
@@ -37,7 +44,17 @@
         class="flex justify-center mt-8 pb-4"
       >
         <button
-          class="px-3 py-2 text-white text-xl bg-blueGreen font-semibold rounded hover:bg-blueGreenScreen transition duration-300"
+          class="
+            px-3
+            py-2
+            text-white text-xl
+            bg-blueGreen
+            font-semibold
+            rounded
+            hover:bg-blueGreenScreen
+            transition
+            duration-300
+          "
           @click="handleLoadMoreClick"
         >
           Load More
@@ -327,7 +344,7 @@ export default {
         (item) =>
           item.frontmatter &&
           item.frontmatter.tags &&
-          item.frontmatter.tags.find((tag) => tag.name === 'weekly')
+          item.frontmatter.tags.find((tag) => tag.name === 'newsletter')
       )
       .sort(
         (a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date)