Merge branch 'develop'

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

@@ -68,6 +68,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 } }) {
 
@@ -78,14 +78,30 @@ export default {
     head() {
         return {
             title: `Does ${this.app.name} work on Apple Silicon?`,
-            // meta: [
+            meta: [
-            //     // hid is used as unique identifier. Do not use `vmid` for it as it will not work
+                // hid is used as unique identifier. Do not use `vmid` for it as it will not work
-            //     {
+                {
-            //         hid: 'description',
+                    'hid': 'description',
-            //         name: 'description',
+                    'name': 'description',
-            //         content: 'My custom description'
+                    'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors`
-            //     }
+                },
-            // ]
+
+                // Twitter Card
+                {
+                    'hid': 'twitter:title',
+                    'property':  'twitter:title',
+                    'content': `Does ${this.app.name} work on Apple Silicon?`
+                },
+                {
+                    'hid': 'twitter:description',
+                    'property':  'twitter:description',
+                    'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors`
+                },
+                {
+                    'property':  'twitter:url',
+                    'content': `${process.env.URL}${this.$nuxt.$route.path}`
+                },
+            ]
         }
     }
 }

pages/formula/_slug.vue

@@ -56,14 +56,30 @@ export default {
     head() {
         return {
             title: `Does ${this.app.name} work on Apple Silicon?`,
-            // meta: [
+            meta: [
-            //     // hid is used as unique identifier. Do not use `vmid` for it as it will not work
+                // hid is used as unique identifier. Do not use `vmid` for it as it will not work
-            //     {
+                {
-            //         hid: 'description',
+                    'hid': 'description',
-            //         name: 'description',
+                    'name': 'description',
-            //         content: 'My custom description'
+                    'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors when installed via Homebrew. `
-            //     }
+                },
-            // ]
+
+                // Twitter Card
+                {
+                    'hid': 'twitter:title',
+                    'property':  'twitter:title',
+                    'content': `Does ${this.app.name} work on Apple Silicon?`
+                },
+                {
+                    'hid': 'twitter:description',
+                    'property':  'twitter:description',
+                    'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors when installed via Homebrew. `
+                },
+                {
+                    'property':  'twitter:url',
+                    'content': `${process.env.URL}${this.$nuxt.$route.path}`
+                },
+            ]
         }
     }
 }

pages/game/_slug.vue

@@ -8,12 +8,6 @@
                 {{ app.text }}
             </h2>
 
-            <!-- <div class="subscribe space-y-6 sm:space-x-6 mb-4">
-                <EmailSubscribe
-                    :app-name="app.name"
-                />
-            </div> -->
-
             <ThomasCredit />
 
             <div class="links space-y-6 sm:space-x-6 mb-8">
@@ -102,7 +96,6 @@
 
 <script>
 import LinkButton from '~/components/link-button.vue'
-import EmailSubscribe from '~/components/email-subscribe.vue'
 import ThomasCredit from '~/components/thomas-credit.vue'
 
 import gameList from '~/static/game-list.json'
@@ -112,7 +105,6 @@ import gameList from '~/static/game-list.json'
 export default {
     components: {
         LinkButton,
-        EmailSubscribe,
         ThomasCredit
     },
     async asyncData ({ params: { slug } }) {
@@ -125,14 +117,30 @@ export default {
     head() {
         return {
             title: `Does ${this.app.name} work on Apple Silicon?`,
-            // meta: [
+            meta: [
-            //     // hid is used as unique identifier. Do not use `vmid` for it as it will not work
+                // hid is used as unique identifier. Do not use `vmid` for it as it will not work
-            //     {
+                {
-            //         hid: 'description',
+                    'hid': 'description',
-            //         name: 'description',
+                    'name': 'description',
-            //         content: 'My custom description'
+                    'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors for gaming. `
-            //     }
+                },
-            // ]
+
+                // Twitter Card
+                {
+                    'hid': 'twitter:title',
+                    'property':  'twitter:title',
+                    'content': `Does ${this.app.name} work on Apple Silicon?`
+                },
+                {
+                    'hid': 'twitter:description',
+                    'property':  'twitter:description',
+                    'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors for gaming. `
+                },
+                {
+                    'property':  'twitter:url',
+                    'content': `${process.env.URL}${this.$nuxt.$route.path}`
+                },
+            ]
         }
     }
 }

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 {

pages/kind/_slug.vue

@@ -107,19 +107,38 @@ export default {
         },
         title () {
             return `List of ${this.category.pluralLabel || this.category.label} that work on Apple Silicon?`
-        }
+        },
+        description () {
+            return `Check the the latest reported support status of ${this.category.pluralLabel || this.category.label} on Apple Silicon and Apple M1 Processors. `
+        },
     },
     head() {
         return {
             title: this.title,
-            // meta: [
+            meta: [
-            //     // hid is used as unique identifier. Do not use `vmid` for it as it will not work
+                // hid is used as unique identifier. Do not use `vmid` for it as it will not work
-            //     {
+                {
-            //         hid: 'description',
+                    'hid': 'description',
-            //         name: 'description',
+                    'name': 'description',
-            //         content: 'My custom description'
+                    'content': this.description
-            //     }
+                },
-            // ]
+
+                // Twitter Card
+                {
+                    'hid': 'twitter:title',
+                    'property':  'twitter:title',
+                    'content': this.title
+                },
+                {
+                    'hid': 'twitter:description',
+                    'property':  'twitter:description',
+                    'content': this.description
+                },
+                {
+                    'property':  'twitter:url',
+                    'content': `${process.env.URL}${this.$nuxt.$route.path}`
+                },
+            ]
         }
     }
 }