diff options
Diffstat (limited to 'node_modules/vuepress/lib/default-theme/NavLinks.vue')
| -rw-r--r-- | node_modules/vuepress/lib/default-theme/NavLinks.vue | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/node_modules/vuepress/lib/default-theme/NavLinks.vue b/node_modules/vuepress/lib/default-theme/NavLinks.vue new file mode 100644 index 00000000..4037f288 --- /dev/null +++ b/node_modules/vuepress/lib/default-theme/NavLinks.vue @@ -0,0 +1,151 @@ +<template> + <nav + class="nav-links" + v-if="userLinks.length || repoLink" + > + <!-- user links --> + <div + class="nav-item" + v-for="item in userLinks" + :key="item.link" + > + <DropdownLink + v-if="item.type === 'links'" + :item="item" + /> + <NavLink + v-else + :item="item" + /> + </div> + + <!-- repo link --> + <a + v-if="repoLink" + :href="repoLink" + class="repo-link" + target="_blank" + rel="noopener noreferrer" + > + {{ repoLabel }} + <OutboundLink/> + </a> + </nav> +</template> + +<script> +import DropdownLink from './DropdownLink.vue' +import { resolveNavLinkItem } from './util' +import NavLink from './NavLink.vue' + +export default { + components: { NavLink, DropdownLink }, + + computed: { + userNav () { + return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || [] + }, + + nav () { + const { locales } = this.$site + if (locales && Object.keys(locales).length > 1) { + const currentLink = this.$page.path + const routes = this.$router.options.routes + const themeLocales = this.$site.themeConfig.locales || {} + const languageDropdown = { + text: this.$themeLocaleConfig.selectText || 'Languages', + items: Object.keys(locales).map(path => { + const locale = locales[path] + const text = themeLocales[path] && themeLocales[path].label || locale.lang + let link + // Stay on the current page + if (locale.lang === this.$lang) { + link = currentLink + } else { + // Try to stay on the same page + link = currentLink.replace(this.$localeConfig.path, path) + // fallback to homepage + if (!routes.some(route => route.path === link)) { + link = path + } + } + return { text, link } + }) + } + return [...this.userNav, languageDropdown] + } + return this.userNav + }, + + userLinks () { + return (this.nav || []).map(link => { + return Object.assign(resolveNavLinkItem(link), { + items: (link.items || []).map(resolveNavLinkItem) + }) + }) + }, + + repoLink () { + const { repo } = this.$site.themeConfig + if (repo) { + return /^https?:/.test(repo) + ? repo + : `https://github.com/${repo}` + } + }, + + repoLabel () { + if (!this.repoLink) return + if (this.$site.themeConfig.repoLabel) { + return this.$site.themeConfig.repoLabel + } + + const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0] + const platforms = ['GitHub', 'GitLab', 'Bitbucket'] + for (let i = 0; i < platforms.length; i++) { + const platform = platforms[i] + if (new RegExp(platform, 'i').test(repoHost)) { + return platform + } + } + + return 'Source' + } + } +} +</script> + +<style lang="stylus"> +@import './styles/config.styl' + +.nav-links + display inline-block + a + line-height 1.4rem + color inherit + &:hover, &.router-link-active + color $accentColor + .nav-item + position relative + display inline-block + margin-left 1.5rem + line-height 2rem + &:first-child + margin-left 0 + .repo-link + margin-left 1.5rem + +@media (max-width: $MQMobile) + .nav-links + .nav-item, .repo-link + margin-left 0 + +@media (min-width: $MQMobile) + .nav-links a + &:hover, &.router-link-active + color $textColor + .nav-item > a:not(.external) + &:hover, &.router-link-active + margin-bottom -2px + border-bottom 2px solid lighten($accentColor, 8%) +</style> |
