Add twitter button

components/twitter-follow.vue

@@ -0,0 +1,71 @@
+<template>
+
+    <div
+        :class="[
+            'h-8 transition-opacity duration-500 ease-in-out',
+            visible ? 'opacity-100' : 'opacity-0'
+        ]"
+    >
+
+        <a
+            ref="follow"
+            href="https://twitter.com/doesitarm?ref_src=twsrc%5Etfw"
+            class="twitter-follow-button"
+            data-show-count="false"
+        >Follow @doesitarm</a>
+
+    </div>
+
+</template>
+
+<script>
+
+import { observeElementInViewport } from 'observe-element-in-viewport'
+
+export default {
+    data: function () {
+        return {
+            visible: false
+        }
+    },
+    mounted () {
+        // https://platform.twitter.com/widgets.js
+
+        // the returned function, when called, stops tracking the target element in the
+        // given viewport
+        const unobserve = observeElementInViewport(this.$refs.follow, async (_, unobserve, expandZoneElem) => {
+            // On element enter viewport
+            // console.log('Entered', logoRef)
+
+            this.loadTwitterScript()
+
+            // Turn off this observer
+            unobserve()
+        }, () => {
+            // On element exit viewport
+            // console.log('Exited', logoRef)
+        }, {
+            threshold: [ 0 ]
+        })
+
+    },
+    methods: {
+        loadTwitterScript () {
+            const twitterScript = document.createElement('script')
+
+            twitterScript.setAttribute('charset','utf-8')
+            twitterScript.setAttribute('async','true')
+            twitterScript.setAttribute('src','https://platform.twitter.com/widgets.js')
+
+            document.head.appendChild(twitterScript)
+
+
+            // Reveal after 200ms
+            setInterval(() => {
+                this.visible = true
+            }, 750)
+        }
+    }
+}
+
+</script>

layouts/default.vue

@@ -4,6 +4,33 @@
         <div class="app-main min-h-screen flex items-center">
             <nuxt />
         </div>
+
+        <footer class="">
+            <div class="max-w-screen-xl mx-auto py-12 px-4 overflow-hidden space-y-8 sm:px-6 lg:px-8">
+                <!-- <nav class="-mx-5 -my-2 flex flex-wrap justify-center">
+                    <div class="px-5 py-2">
+                        <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
+                            About
+                        </a>
+                    </div>
+                    <div class="px-5 py-2">
+                        <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
+                            Blog
+                        </a>
+                    </div>
+                </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>
+                        <TwitterFollow />
+                    </div>
+                </div>
+                <p class="mt-8 text-center text-base leading-6 text-gray-400">
+                    &copy; 2020 Does it ARM All rights reserved.
+                </p>
+            </div>
+        </footer>
+
     </div>
 </template>
 
@@ -11,10 +38,12 @@
 import 'typeface-inter/inter.css'
 
 import Navbar from '~/components/navbar.vue'
+import TwitterFollow from '~/components/twitter-follow.vue'
 
 export default {
     components: {
-        Navbar
+        Navbar,
+        TwitterFollow
     }
 }