feat: show OutboundLink icon for external links (#428)

vuejs · May 13, 2018 · 942a2b9 · 942a2b9
1 parent 2076f7b
commit 942a2b9
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 17 deletions.
diff --git a/lib/app/app.js b/lib/app/app.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Content from './Content'
+import OutboundLink from '../default-theme/OutboundLink.vue'
 import ClientOnly from './ClientOnly'
 import dataMixin from './dataMixin'
 import store from './store'
@@ -28,6 +29,7 @@ Vue.use(Router)
 Vue.mixin(dataMixin)
 // component for rendering markdown content and setting title etc.
 Vue.component('Content', Content)
+Vue.component('OutboundLink', OutboundLink)
 // component for client-only content
 Vue.component('ClientOnly', ClientOnly)
 

diff --git a/lib/default-theme/NavLink.vue b/lib/default-theme/NavLink.vue
@@ -8,10 +8,13 @@
   <a
     v-else
     :href="link"
-    class="nav-link"
+    class="nav-link external"
     :target="isMailto(link) || isTel(link) ? null : '_blank'"
     :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
-  >{{ item.text }}</a>
+  >
+    {{ item.text }}
+    <OutboundLink/>
+  </a>
 </template>
 
 <script>

diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
@@ -21,13 +21,12 @@
 </template>
 
 <script>
-import OutboundLink from './OutboundLink.vue'
 import DropdownLink from './DropdownLink.vue'
 import { resolveNavLinkItem } from './util'
 import NavLink from './NavLink.vue'
 
 export default {
-  components: { OutboundLink, NavLink, DropdownLink },
+  components: { NavLink, DropdownLink },
   computed: {
     userNav () {
       return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
@@ -126,7 +125,7 @@ export default {
   .nav-links a
     &:hover, &.router-link-active
       color $textColor
-  .nav-item > a
+  .nav-item > a:not(.external)
     &:hover, &.router-link-active
       margin-bottom -2px
       border-bottom 2px solid lighten($accentColor, 8%)

diff --git a/lib/default-theme/Page.vue b/lib/default-theme/Page.vue
@@ -28,11 +28,9 @@
 </template>
 
 <script>
-import OutboundLink from './OutboundLink.vue'
 import { resolvePage, normalize, outboundRE, endingSlashRE } from './util'
 
 export default {
-  components: { OutboundLink },
   props: ['sidebarItems'],
   computed: {
     lastUpdated () {

diff --git a/lib/markdown/link.js b/lib/markdown/link.js
@@ -15,8 +15,14 @@ module.exports = (md, externalAttrs) => {
       const isSourceLink = /(\/|\.md|\.html)(#.*)?$/.test(href)
       if (isExternal) {
         Object.entries(externalAttrs).forEach(([key, val]) => {
-          addAttr(token, key, val)
+          token.attrSet(key, val)
         })
+
+        if (/_blank/i.test(externalAttrs['target'])) {
+          // add OutBoundLink to content if it opens in _blank
+          tokens[idx + 1].type = 'html_block'
+          tokens[idx + 1].content += '<OutboundLink/>'
+        }
       } else if (isSourceLink) {
         hasOpenRouterLink = true
         tokens[idx] = toRouterLink(token, link)
@@ -56,12 +62,3 @@ module.exports = (md, externalAttrs) => {
     return self.renderToken(tokens, idx, options)
   }
 }
-
-function addAttr (token, name, val) {
-  const targetIndex = token.attrIndex(name)
-  if (targetIndex < 0) {
-    token.attrPush([name, val])
-  } else {
-    token.attrs[targetIndex][1] = val
-  }
-}