From e48a30de851c9e9e49e9b2d6132c04a5affe83a9 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 18 Aug 2023 15:39:33 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20newsletter=20subscription=20i?=
 =?UTF-8?q?n=20footer=20(#1297)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer.vue | 104 ++++++++++++++++++++++++++++----------
 src/locales/en.json       |   1 +
 src/locales/zh-Hant.json  |   1 +
 src/nuxt.config.js        |   1 +
 4 files changed, 80 insertions(+), 27 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index ddc62682d..da6fa8f91 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -17,34 +17,42 @@
         </NuxtLink>
         <CommunityCTA class="mt-[24px] laptop:mt-0 !justify-start" />
       </div>
-      <div
-        class="
-          pl-[56px]
-          pr-[32px]
-          pt-[24px]
-          pb-[48px]
-          grid
-          laptop:grid-flow-col
-          justify-start
-          gap-[64px]
-        "
-      >
-        <div class="grid grid-flow-row gap-y-[16px]">
-          <a
-            class="cursor-pointer hover:underline"
-            @click="isOpenAboutTeam = !isOpenAboutTeam"
-          >{{ $t('footer_nav_about_liker_land') }}</a>
-          <hr class="w-[32px] border-white border-opacity-[0.2]">
-          <a class="hover:underline" target="_blank" href="https://like.co">{{ $t('footer_nav_about_likecoin') }}</a>
-        </div>
-        <div class="grid grid-flow-row gap-y-[16px]">
-          <a class="hover:underline" target="_blank" :href="mintNftURL">
-            {{ $t('footer_nav_mint_nft') }}
-          </a>
-        </div>
-        <div class="grid grid-flow-row gap-y-[16px]">
-          <NuxtLink class="hover:underline" :to="localeLocation({ name: 'civic' })">{{ $t('footer_nav_civic_liker') }}</NuxtLink>
+
+      <div class="flex flex-col-reverse desktop:flex-row pl-[56px] pr-[32px] pt-[24px] pb-[48px] gap-[3rem]">
+
+        <div
+          class="
+            flex-grow
+            grid
+            laptop:grid-flow-col
+            justify-start
+            gap-x-[4rem]
+            gap-y-[1rem]
+            mt-[0.75rem]
+          "
+        >
+          <div class="grid grid-flow-row gap-y-[16px]">
+            <a
+              class="cursor-pointer hover:underline"
+              @click="isOpenAboutTeam = !isOpenAboutTeam"
+            >{{ $t('footer_nav_about_liker_land') }}</a>
+            <hr class="w-[32px] border-white border-opacity-[0.2]">
+            <a class="hover:underline" target="_blank" href="https://like.co">{{ $t('footer_nav_about_likecoin') }}</a>
+          </div>
+
+          <div class="grid grid-flow-row gap-y-[16px]">
+            <a class="hover:underline" target="_blank" :href="mintNftURL">
+              {{ $t('footer_nav_mint_nft') }}
+            </a>
+          </div>
+
+          <div class="grid grid-flow-row gap-y-[16px]">
+            <NuxtLink class="hover:underline" :to="localeLocation({ name: 'civic' })">{{ $t('footer_nav_civic_liker') }}</NuxtLink>
+          </div>
         </div>
+
+        <div id="custom-substack-embed" />
+
       </div>
     </div>
     <div
@@ -115,11 +123,36 @@ export default {
       isOpenAboutTeam: false,
     };
   },
+  head() {
+    return {
+      script: [
+        {
+          hid: 'substack-js-script',
+          src: 'https://substackapi.com/widget.js',
+          async: 'true',
+        },
+      ],
+    };
+  },
   computed: {
     mintNftURL() {
       return `${APP_LIKE_CO_URL_BASE}/nft`;
     },
   },
+  mounted() {
+    window.CustomSubstackWidget = {
+      substackUrl: 'likerland.substack.com',
+      placeholder: 'example@gmail.com',
+      buttonText: this.$t('footer_subscribe_newsletter_button'),
+      theme: 'custom',
+      colors: {
+        primary: '#AAF1E7',
+        input: '#00000000',
+        email: '#AAF1E7',
+        text: '#28646E',
+      },
+    };
+  },
   methods: {
     handleClickHelp() {
       if (this.$crisp) {
@@ -130,3 +163,20 @@ export default {
   },
 };
 </script>
+
+<style>
+#custom-substack-embed .custom-substack-widget {
+  border-radius: 14px;
+}
+#custom-substack-embed .custom-substack-widget + .success {
+  color: #d7ecec;
+}
+@media screen and (min-width: 992px) {
+  .custom-substack-widget {
+    margin-left: auto;
+  }
+  .custom-substack-widget + .success {
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index ea049fa9a..ef98d509a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -231,6 +231,7 @@
   "footer_nav_help": "Help",
   "footer_nav_mint_nft": "Mint NFT",
   "footer_nav_writing_nft": "Writing NFT",
+  "footer_subscribe_newsletter_button": "Subscribe Newsletter",
   "GetAppPage": {
     "Og": {
       "Description": "Writing NFT: Publish as you write. Collect as you read.",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index f868b02ed..ee54d91bc 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -221,6 +221,7 @@
   "footer_nav_help": "幫助",
   "footer_nav_mint_nft": "發行 NFT",
   "footer_nav_writing_nft": "Writing NFT",
+  "footer_subscribe_newsletter_button": "訂閱電子報",
   "GetAppPage": {
     "Og": {
       "Description": "Writing NFT：隨心收藏，輕鬆出版。",
diff --git a/src/nuxt.config.js b/src/nuxt.config.js
index 0bdc22ed3..a70356a57 100644
--- a/src/nuxt.config.js
+++ b/src/nuxt.config.js
@@ -210,6 +210,7 @@ const nuxtConfig = {
           'use.typekit.net',
           'https://js.stripe.com',
           'https://unpkg.com/@google/model-viewer@3.1.1/',
+          'https://substackapi.com',
           '*.crisp.chat',
           'connect.facebook.net',
         ],