Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show OutboundLink icon for external links #428

Merged
merged 4 commits into from
May 13, 2018
Merged

Show OutboundLink icon for external links #428

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e17370
added outboundlink icon to nav external link
ycmjason May 12, 2018
14e2d42
include outboundlink when link is external
ycmjason May 12, 2018
59681d8
remove external link hover styling
ycmjason May 12, 2018
9e78910
unformat code and remove OutboundLink from components
ycmjason May 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lib/app/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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)

Expand Down
19 changes: 10 additions & 9 deletions lib/default-theme/NavLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
<template>
<router-link
class="nav-link"
<router-link class="nav-link"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't format the original code

:to="link"
v-if="!isExternal(link)"
:exact="link === '/'"
>{{ item.text }}</router-link>
<a
v-else
:exact="link === '/'">{{ item.text }}</router-link>
<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>
:rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'">
{{ item.text }}
<OutboundLink/>
</a>
</template>

<script>
import { isExternal, isMailto, isTel, ensureExt } from './util'
import OutboundLink from './OutboundLink.vue'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you have registered <OutboundLink> as a global component, either that removing this import or removing the global registration. (You could only choose the 1st.)


export default {
components: { OutboundLink },
props: {
item: {
required: true
Expand Down
2 changes: 1 addition & 1 deletion lib/default-theme/NavLinks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,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%)
Expand Down
17 changes: 7 additions & 10 deletions lib/markdown/link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
}
}