Add link to subscribe to substack

AchoArnold · AchoArnold · commit eef630dccccf · 2023-10-30T22:27:48.000+02:00
diff --git a/web/components/BlogInfo.vue b/web/components/BlogInfo.vue
@@ -27,18 +27,41 @@
       <v-icon left>{{ mdiBookOpenVariant }}</v-icon>
       Documentation
     </v-btn>
+    <p class="body-2 mt-6 mb-4">
+      Subscribe to my newsletter where I share the new features and updates on
+      httpSMS.
+    </p>
+    <v-progress-circular
+      v-if="!substackLoaded"
+      indeterminate
+      size="40"
+      width="2"
+      color="primary"
+    ></v-progress-circular>
+    <div id="custom-substack-embed" ref="custom-substack-embed"></div>
   </div>
 </template>
 
 <script lang="ts">
 import { mdiBookOpenVariant } from '@mdi/js'
+import Vue from 'vue'
 
-export default {
+export default Vue.extend({
   name: 'BlogInfo',
   data() {
     return {
       mdiBookOpenVariant,
+      substackLoaded: false,
     }
   },
-}
+  mounted() {
+    setTimeout(() => {
+      const s = document.createElement('script')
+      s.type = 'text/javascript'
+      s.src = 'https://substackapi.com/widget.js'
+      document.getElementsByTagName('head')[0].appendChild(s)
+      this.substackLoaded = true
+    }, 5000)
+  },
+})
 </script>
diff --git a/web/pages/index.vue b/web/pages/index.vue
@@ -662,6 +662,25 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());
             </v-card>
           </v-col>
         </v-row>
+        <client-only>
+          <v-row>
+            <v-col class="text-center" md="6" offset-md="3">
+              <p class="text-h4 text--secondary mt-6 mb-4">
+                Subscribe to my newsletter where I share new features and
+                updates on httpSMS.
+              </p>
+              <v-progress-circular
+                v-if="!substackLoaded"
+                indeterminate
+                size="40"
+                width="2"
+                class="mt-8"
+                color="primary"
+              ></v-progress-circular>
+              <div id="custom-substack-embed" ref="substackEmbed"></div>
+            </v-col>
+          </v-row>
+        </client-only>
       </v-container>
     </v-sheet>
   </div>
@@ -719,8 +738,18 @@ export default Vue.extend({
       mdiLanguageGo,
       selectedTab: 'javascript',
       yearlyPricing: false,
+      substackLoaded: false,
     }
   },
+  mounted() {
+    setTimeout(() => {
+      const s = document.createElement('script')
+      s.type = 'text/javascript'
+      s.src = 'https://substackapi.com/widget.js'
+      document.getElementsByTagName('head')[0].appendChild(s)
+      this.substackLoaded = true
+    }, 5000)
+  },
 })
 </script>
 
diff --git a/web/static/integrations.js b/web/static/integrations.js
@@ -13,3 +13,11 @@
 
 // LemonSqueezy
 window.lemonSqueezyAffiliateConfig = { store: 'httpsms' }
+
+// substack
+window.CustomSubstackWidget = {
+  substackUrl: 'httpsms.substack.com',
+  placeholder: 'example@gmail.com',
+  buttonText: 'Subscribe',
+  theme: 'green',
+}
diff --git a/web/store/index.ts b/web/store/index.ts
@@ -195,6 +195,13 @@ export const getters = {
   getNotification(state: State): Notification {
     return state.notification
   },
+
+  getSubStackLoaded() {
+    if (!process.client) {
+      return false
+    }
+    return (window as any).CustomSubstackWidget.scriptLoaded
+  },
 }
 
 export const mutations = {
