Replace App Subscribe with General Subscribe

components/all-updates-subscribe.vue

@@ -0,0 +1,167 @@
+<template>
+
+    <div>
+        <div
+            v-if="feedbackMessage === null"
+        >
+            <form
+                class="all-updates-subscribe text-xs relative"
+                @submit.prevent="trySubmit"
+            >
+                <label
+                    v-if="isFocused"
+                    :for="inputId"
+                    class="block font-medium absolute"
+                    style="top: -2em;"
+                >Email</label>
+                <div class="mt-1 relative rounded-md shadow-sm">
+                    <div
+                        v-if="isFocused"
+                        class="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none"
+                    >
+                        <!-- Heroicon name: mail -->
+                        <svg
+                            class="h-5 w-5 text-gray-500"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                        >
+                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                        </svg>
+                    </div>
+                    <input
+                        :id="inputId"
+                        v-model="email"
+                        :class="inputClasslist"
+                        :placeholder="isFocused ? 'me@email.com' : placeholder"
+                        :aria-label="placeholder"
+                        name="all-updates-subscribe"
+                        style="width: 240px;"
+                        type="email"
+                        required
+                        @focus="isFocused = true"
+                        @blur="isFocused = false"
+                    >
+                </div>
+            </form>
+        </div>
+
+        <div
+            v-if="feedbackMessage"
+            class="text-center p-4"
+        >
+            {{ feedbackMessage }}
+        </div>
+    </div>
+
+</template>
+
+<script>
+
+import axios from 'axios'
+
+export default {
+    props: {
+        appName: {
+            type: String,
+            required: true
+        },
+        placeholder: {
+            type: String,
+            default: 'Send me regular app updates'
+        },
+        notes: {
+            type: String,
+            default: ''
+        },
+        inputClassGroups: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    data: function () {
+        return {
+            email: '',
+
+            isFocused: false,
+            feedbackMessage: null,
+        }
+    },
+    computed: {
+        inputId () {
+            return `all-updates-subscribe-${this._uid}`
+        },
+        inputClasslist () {
+            const defaultClassGroups = {
+                general: 'form-input block w-full rounded-md py-1',
+                shadow: 'neumorphic-shadow',
+                bg: 'bg-darker',
+                focus: 'pl-8',
+                blur: 'placeholder-white text-center border border-transparent px-3',
+            }
+
+            const mergedClassGroups = {
+                ...defaultClassGroups,
+                ...this.inputClassGroups
+            }
+
+            if (this.isFocused) {
+                delete mergedClassGroups.blur
+            } else {
+                delete mergedClassGroups.focus
+            }
+
+            return Object.values(mergedClassGroups)
+        }
+    },
+    methods: {
+        async trySubmit () {
+            console.log('Trying submit')
+
+            // Set intermediate message
+            this.feedbackMessage = 'Sending...'
+
+            // const pagePath = $nuxt.$route.path
+
+            // console.log('this.$config.allUpdateSubscribe', this.$config.allUpdateSubscribe)
+
+            // https://stackoverflow.com/questions/51995070/post-data-to-a-google-form-with-ajax/55496118#55496118
+            const actionUrl = this.$config.allUpdateSubscribe
+
+            axios({
+                method: 'post',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                url: actionUrl,
+                data: {
+                    // Email
+                    'email': this.email
+                },
+            }).then( response => {
+
+                this.feedbackMessage = 'We\'ll keep you informed!'
+
+                // console.log('response', response)
+                // if (response.status === 200) {
+                //     this.feedbackMessage = '- We\'ll keep an eye on it for you!'
+                // } else {
+                //     this.feedbackMessage = 'Oops! Something went wrong'
+                // }
+            }).catch( error => {
+                console.warn('error', error)
+                this.feedbackMessage = 'Something went wrong. Try refreshing. '
+            })
+
+            // .catch(error => {
+            //     // handle error
+            //     console.error('Error Subscribing -', error)
+            //     this.feedbackMessage = 'Oops! Something went wrong'
+            // })
+        }
+    }
+}
+
+</script>

layouts/default.vue

@@ -21,8 +21,7 @@
                 </nav> -->
                 <div class="mt-8 flex justify-center space-x-6">
                     <div class="flex flex-col items-center space-y-4">
-                        <div>Get Twitter Updates</div>
+                        <AllUpdatesSubscribe />
-                        <TwitterFollow />
                     </div>
                 </div>
                 <p class="mt-8 text-center text-base leading-6 text-gray-400">
@@ -38,12 +37,13 @@
 import 'typeface-inter/inter.css'
 
 import Navbar from '~/components/navbar.vue'
-import TwitterFollow from '~/components/twitter-follow.vue'
+// import TwitterFollow from '~/components/twitter-follow.vue'
+import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
 
 export default {
     components: {
         Navbar,
-        TwitterFollow
+        AllUpdatesSubscribe
     }
 }
 

nuxt.config.js

@@ -62,6 +62,10 @@ const storeAppLists = async function (builder) {
 export default {
     target: 'static',
 
+    publicRuntimeConfig: {
+        allUpdateSubscribe: process.env.ALL_UPDATE_SUBSCRIBE
+    },
+
     /*
     ** Hooks
     * https://nuxtjs.org/api/configuration-hooks/

pages/app/_slug.vue

@@ -9,7 +9,7 @@
             </h2>
 
             <div class="subscribe space-y-6 sm:space-x-6 mb-4">
-                <EmailSubscribe
+                <AllUpdatesSubscribe
                     :app-name="app.name"
                 />
             </div>
@@ -47,14 +47,14 @@
 <script>
 import parseGithubDate from '~/helpers/parse-github-date'
 import LinkButton from '~/components/link-button.vue'
-import EmailSubscribe from '~/components/email-subscribe.vue'
+import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
 import appList from '~/static/app-list.json'
 // import buildAppList from '~/helpers/build-app-list'
 
 export default {
     components: {
         LinkButton,
-        EmailSubscribe
+        AllUpdatesSubscribe
     },
     async asyncData ({ params: { slug } }) {
 

pages/index.vue

@@ -30,6 +30,16 @@
                 </LinkButton>
             </div>
 
+            <AllUpdatesSubscribe
+                :input-class-groups="{
+                    shadow: 'hover:neumorphic-shadow',
+                    bg: '',
+                    focus: 'bg-transparent neumorphic-shadow pl-8',
+                    blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
+                }"
+                class="my-12"
+            />
+
         </div>
     </section>
 </template>
@@ -37,6 +47,7 @@
 <script>
 import Search from '~/components/search.vue'
 import LinkButton from '~/components/link-button.vue'
+import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
 
 export default {
     async asyncData () {
@@ -51,7 +62,8 @@ export default {
     },
     components: {
         Search,
-        LinkButton
+        LinkButton,
+        AllUpdatesSubscribe
     },
     data: function () {
         return {