fix: support mailto links in NavLink + style tweaks (close #93)

Author: yyx990803

docs/README.md

@@ -2,7 +2,7 @@
 home: true
 heroImage: /hero.png
 actionText: Get Started →
-actionLink: /guide/
+actionLink: https://github.com
 features:
 - title: Simplicity First
   details: Minimal setup with markdown-centered project structure helps you focus on writing.

lib/default-theme/DropdownLink.vue

@@ -15,37 +15,37 @@
             class="dropdown-subitem"
             v-for="childSubItem in subItem.items"
             :key="childSubItem.link">
-            <nav-link :item="childSubItem"></nav-link>
+            <NavLink :item="childSubItem"/>
           </li>
         </ul>
-        <nav-link v-else :item="subItem"></nav-link>
+        <NavLink v-else :item="subItem"/>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
-  import { isExternal, ensureExt } from './util'
-  import NavLink from './NavLink.vue'
+import { isExternal, ensureExt } from './util'
+import NavLink from './NavLink.vue'
 
-  export default {
-    components: { NavLink },
-    data() {
-      return {
-        open: false
-      }
-    },
-    props: {
-      item: {
-        required: true
-      }
-    },
-    methods: {
-      toggle() {
-        this.open = !this.open
-      }
+export default {
+  components: { NavLink },
+  data() {
+    return {
+      open: false
+    }
+  },
+  props: {
+    item: {
+      required: true
+    }
+  },
+  methods: {
+    toggle() {
+      this.open = !this.open
     }
   }
+}
 </script>
 
 <style lang="stylus">

lib/default-theme/Home.vue

@@ -7,9 +7,7 @@
         {{ data.tagline || $site.description }}
       </p>
       <p class="action" v-if="data.actionText && data.actionLink">
-        <router-link class="action-button" :to="ensureExt(data.actionLink)">
-          {{ data.actionText }}
-        </router-link>
+        <NavLink class="action-button" :item="actionLink"/>
       </p>
     </div>
     <div class="features">
@@ -26,15 +24,19 @@
 </template>
 
 <script>
-import { ensureExt } from './util'
+import NavLink from './NavLink.vue'
 
 export default {
-  methods: {
-    ensureExt
-  },
+  components: { NavLink },
   computed: {
     data () {
       return this.$page.frontmatter
+    },
+    actionLink () {
+      return {
+        link: this.data.actionLink,
+        text: this.data.actionText
+      }
     }
   }
 }

lib/default-theme/NavLink.vue

@@ -8,27 +8,29 @@
   <a
     v-else
     :href="link"
-    target="_blank"
     class="nav-link"
-    rel="noopener noreferrer"
+    :target="isMailto(link) ? null : '_blank'"
+    :rel="isMailto(link) ? null : 'noopener noreferrer'"
   >{{ item.text }}</a>
 </template>
 
 <script>
-  import { isExternal, ensureExt } from './util'
-  export default {
-    props: {
-      item: {
-        required: true
-      }
-    },
-    computed: {
-      link() {
-        return ensureExt(this.item.link)
-      }
-    },
-    methods: {
-      isExternal
+import { isExternal, isMailto, ensureExt } from './util'
+
+export default {
+  props: {
+    item: {
+      required: true
+    }
+  },
+  computed: {
+    link() {
+      return ensureExt(this.item.link)
     }
+  },
+  methods: {
+    isExternal,
+    isMailto
   }
+}
 </script>

lib/default-theme/NavLinks.vue

@@ -5,10 +5,8 @@
       class="nav-item"
       v-for="item in userLinks"
       :key="item.link">
-      <dropdown-link
-        v-if="item.type === 'links'"
-        :item="item"></dropdown-link>
-      <nav-link v-else :item="item"></nav-link>
+      <DropdownLink v-if="item.type === 'links'" :item="item"/>
+      <NavLink v-else :item="item"/>
     </div>
     <!-- github link -->
     <a v-if="githubLink"

lib/default-theme/util.js

@@ -1,7 +1,7 @@
 export const hashRE = /#.*$/
 export const extRE = /\.(md|html)$/
 export const endingSlashRE = /\/$/
-export const outboundRE = /^https?:/
+export const outboundRE = /^(https?:|mailto:)/
 
 export function normalize (path) {
   return path
@@ -20,6 +20,10 @@ export function isExternal (path) {
   return outboundRE.test(path)
 }
 
+export function isMailto (path) {
+  return /^mailto:/.test(path)
+}
+
 export function ensureExt (path) {
   if (isExternal(path)) {
     return path