Add Discord popup modal (#646)

* The modal seems to be working and building

* Update DiscordModal.vue

* Update Home.vue

* Update DiscordModal.vue

* Update DiscordModal.vue

docs/.vitepress/theme/components/DiscordModal.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const ONE_DAY_MS = 1000 * 60 * 60 * 24
+const STORAGE_KEY = 'discord-modal-last-opened'
+
+const isVisible = ref(false)
+
+const close = () => {
+  isVisible.value  = false
+  localStorage.setItem(STORAGE_KEY, String(new Date().getTime()))
+}
+
+onMounted(() => {
+  const now = new Date().getTime()
+
+  // get the last time we showed the modal, or 1 day ago if it's not set yet
+  const lastOpenedAt = localStorage.getItem(STORAGE_KEY) || now - ONE_DAY_MS
+  const lastOpenedTime = new Date(Number(lastOpenedAt)).getTime()
+  const lastOpenDiff = now - lastOpenedTime
+
+  // show the modal once a day only
+  if (lastOpenDiff >= ONE_DAY_MS) {
+    // Show the modal 5 seconds after the page load
+    setTimeout(() => {
+      isVisible.value = true
+    }, 5000)
+  }
+})
+
+onBeforeUnmount(() => {
+  // Only call `close` if the `isVisible` is true, to prevent updating `localStorage` timestamp
+  if (isVisible.value) {
+    close()
+  }
+})
+</script>
+
+<template>
+<Teleport to="body">
+  <div v-if="isVisible" class="z-10 fixed inset-0 flex items-center justify-center bg-black bg-opacity-40">
+    <div class="bg-elevation-02 p-6 lg:p-12 max-w-[800px]">
+      <header class="flex items-start mb-6 relative">
+        <button class="absolute right-0 top-0" @click="close()">
+          <span class="sr-only">close this modal</span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z" fill="#ECECEC"/>
+          </svg>
+        </button>
+      </header>
+
+      <h4 class="text-center mb-10 mt-10">Need help getting your ML projects to production?</h4>
+
+      <h3 class="text-center max-w-[400px] mx-auto">
+        Talk with our team about how KitOps can help
+      </h3>
+
+      <div class="flex justify-center items-center">
+        <a href="https://discord.gg/Tapeh8agYy" target="_blank" class="kit-button kit-button-gold text-center mt-10 mx-auto inline-block w-max">
+          Say hello
+        </a>
+      </div>
+    </div>
+  </div>
+</Teleport>
+</template>
+
+<style scoped>
+.input {
+    @apply border border-off-white text-off-white;
+    @apply focus:border-gold;
+    @apply placeholder:text-gray-05 placeholder:opacity-100;
+    @apply block px-4 py-2 flex-1 bg-transparent w-full;
+    @apply outline-none focus:!outline-none;
+  }
+</style>

docs/.vitepress/theme/components/Home.vue

@@ -16,8 +16,6 @@ const isSubscribed = ref(false)
 const isSuccess = ref(false)
 const isProd = import.meta.env.PROD
 
-isSubscribed.value = localStorage.getItem('subscribed') === 'true'
-
 const activeQuote = ref(0)
 const quotes = [
   {
@@ -93,6 +91,8 @@ const subscribeToNewsletter = async () => {
 }
 
 onMounted(() => {
+  isSubscribed.value = localStorage.getItem('subscribed') === 'true'
+
   setTimeout(() => {
     // check if there's an anchor link in the url and if so, scroll to that element id
     if (location.hash) {

docs/.vitepress/theme/index.ts

@@ -1,15 +1,14 @@
 // https://vitepress.dev/guide/custom-theme
 import { h, ref } from 'vue'
-import { VueReCaptcha } from 'vue-recaptcha-v3'
 import { type Theme, inBrowser } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import PlatformSelect from './components/PlatformSelect.vue'
 import PlatformSnippet from './components/PlatformSnippet.vue'
 import GithubStartButton from './components/GithubStartButton.vue'
-import Layout from './Layout.vue'
 import './assets/css/fonts.css'
 import './assets/css/tailwind.css'
 import './style.css'
+import DiscordModal from './components/DiscordModal.vue'
 
 const isPlatformModalOpen = ref(false)
 
@@ -33,18 +32,12 @@ export default {
       'sidebar-nav-after': () => h(PlatformSelect),
       'nav-bar-content-after': () => h(GithubStartButton, {
         class: 'ml-4 pt-2'
-      })
+      }),
+      'doc-bottom': () => h(DiscordModal)
     })
   },
   enhanceApp({ app, router, siteData }) {
     app.component('PlatformSnippet', PlatformSnippet)
     app.provide('isPlatformModalOpen', isPlatformModalOpen)
-
-    app.use(VueReCaptcha, {
-      siteKey: '6Lc4-VAqAAAAAF6W1JTuP24DYqc_BzHD715Yqob-',
-      loaderOptions: {
-        autoHideBadge: true
-      },
-    })
   }
 } satisfies Theme

docs/package.json

@@ -20,8 +20,6 @@
     "@vueuse/core": "^11.2.0",
     "axios": "^1.7.7",
     "cheerio": "1.0.0-rc.12",
-    "sitemap": "^8.0.0",
-    "vue-recaptcha-v3": "^2.0.1",
     "vue3-marquee": "^4.2.2"
   }
-}
+}