feat: better mailto links with mailgo (#562)

* feat: better mailto links with mailgo

resolves #556

* chore(deps): mailgo version 0.9.16

Co-authored-by: Damien Robinson <damien.robinson@xcommedia.com.au>

components/mailgo.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-tooltip bottom>
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn
+        target="_blank"
+        v-bind="attrs"
+        large
+        text
+        :href="href"
+        rel="noopener"
+        class="pl-0"
+        v-on="on"
+      >
+        <font-awesome-icon v-if="icon" :icon="icon" fixed-width pull="left" />
+        <slot></slot>
+      </v-btn>
+    </template>
+    <span>Reach out and contact with me now!</span>
+  </v-tooltip>
+</template>
+
+<script>
+import mailgo from 'mailgo';
+export default {
+  props: {
+    href: { type: String, required: true },
+    icon: { type: String, required: true },
+  },
+  created() {
+    if (process.client) {
+      mailgo();
+    }
+  },
+};
+</script>
+
+<style></style>

package.json

@@ -61,6 +61,7 @@
     "github-markdown-css": "4.0.0",
     "koa": "2.13.0",
     "luxon": "1.25.0",
+    "mailgo": "0.9.16",
     "nuxt": "2.14.4",
     "nuxt-fontawesome": "0.4.0",
     "nuxt-i18n": "6.13.12",

pages/resume.vue

@@ -12,29 +12,9 @@
             </v-card-title>
 
             <v-card-subtitle class="text-subtitle-1 text-break pb-0">
-              <v-tooltip bottom>
-                <template v-slot:activator="{ on, attrs }">
-                  <v-btn
-                    target="_blank"
-                    v-bind="attrs"
-                    large
-                    text
-                    href="mailto:damien.robinson@daim.dev"
-                    rel="noopener"
-                    class="pl-0"
-                    v-on="on"
-                  >
-                    <font-awesome-icon
-                      :icon="faEnvelope"
-                      title="email"
-                      fixed-width
-                      pull="left"
-                    />
-                    <span>damien.robinson@daim.dev</span>
-                  </v-btn>
-                </template>
-                <span>Reach out and email me now</span>
-              </v-tooltip>
+              <mailgo href="mailto:damien.robinson@daim.dev" :icon="faEnvelope">
+                <span>damien.robinson@daim.dev</span>
+              </mailgo>
 
               <v-tooltip bottom>
                 <template v-slot:activator="{ on, attrs }">
@@ -360,8 +340,12 @@ import {
   faSass,
   faJenkins,
 } from '@fortawesome/free-brands-svg-icons';
+import Mailgo from '@/components/mailgo.vue';
 
 export default {
+  components: {
+    Mailgo,
+  },
   data: () => ({
     faEnvelope,
     faMapMarker,