mirror of https://github.com/vuejs/vitepress
Evan You
5 years ago
parent
e435eec94a
commit
ce783e456e
@ -1,12 +0,0 @@
|
|||||||
import { withBase } from '../utils'
|
|
||||||
import NavBarLinks from './NavBarLinks.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
NavBarLinks
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
return { withBase }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
import { defineComponent, computed, PropType } from 'vue'
|
|
||||||
import { useRoute } from 'vitepress'
|
|
||||||
import { withBase, isExternal } from '../utils'
|
|
||||||
import { DefaultTheme } from '../config'
|
|
||||||
import OutboundLink from './icons/OutboundLink.vue'
|
|
||||||
|
|
||||||
const normalizePath = (path: string): string => {
|
|
||||||
path = path
|
|
||||||
.replace(/#.*$/, '')
|
|
||||||
.replace(/\?.*$/, '')
|
|
||||||
.replace(/\.html$/, '')
|
|
||||||
if (path.endsWith('/')) {
|
|
||||||
path += 'index'
|
|
||||||
}
|
|
||||||
return path
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
OutboundLink
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
item: {
|
|
||||||
type: Object as PropType<DefaultTheme.NavItemWithLink>,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
const item = props.item
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
|
|
||||||
const classes = computed(() => ({
|
|
||||||
active: isActiveLink.value,
|
|
||||||
external: isExternalLink.value
|
|
||||||
}))
|
|
||||||
|
|
||||||
const isActiveLink = computed(() => {
|
|
||||||
return normalizePath(withBase(item.link)) === normalizePath(route.path)
|
|
||||||
})
|
|
||||||
|
|
||||||
const isExternalLink = computed(() => {
|
|
||||||
return isExternal(item.link)
|
|
||||||
})
|
|
||||||
|
|
||||||
const href = computed(() => {
|
|
||||||
return isExternalLink.value ? item.link : withBase(item.link)
|
|
||||||
})
|
|
||||||
|
|
||||||
const target = computed(() => {
|
|
||||||
if (item.target) {
|
|
||||||
return item.target
|
|
||||||
}
|
|
||||||
|
|
||||||
return isExternalLink.value ? '_blank' : ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const rel = computed(() => {
|
|
||||||
if (item.rel) {
|
|
||||||
return item.rel
|
|
||||||
}
|
|
||||||
|
|
||||||
return isExternalLink.value ? 'noopener noreferrer' : ''
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
classes,
|
|
||||||
isActiveLink,
|
|
||||||
isExternalLink,
|
|
||||||
href,
|
|
||||||
target,
|
|
||||||
rel
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
import { computed } from 'vue'
|
|
||||||
import { useSiteData, useSiteDataByRoute, useRoute } from 'vitepress'
|
|
||||||
import { inBrowser } from '/@app/utils'
|
|
||||||
import NavBarLink from './NavBarLink.vue'
|
|
||||||
import NavDropdownLink from './NavDropdownLink.vue'
|
|
||||||
import { DefaultTheme } from '../config'
|
|
||||||
|
|
||||||
const platforms = ['GitHub', 'GitLab', 'Bitbucket'].map(
|
|
||||||
(platform) => [platform, new RegExp(platform, 'i')] as const
|
|
||||||
)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
NavBarLink,
|
|
||||||
NavDropdownLink
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const siteDataByRoute = useSiteDataByRoute()
|
|
||||||
const siteData = useSiteData()
|
|
||||||
const route = useRoute()
|
|
||||||
const repoInfo = computed(() => {
|
|
||||||
const theme = siteData.value.themeConfig as DefaultTheme.Config
|
|
||||||
const repo = theme.docsRepo || theme.repo
|
|
||||||
let text: string | undefined = theme.repoLabel
|
|
||||||
|
|
||||||
if (repo) {
|
|
||||||
const link = /^https?:/.test(repo) ? repo : `https://github.com/${repo}`
|
|
||||||
if (!text) {
|
|
||||||
// if no label is provided, deduce it from the repo url
|
|
||||||
const repoHosts = link.match(/^https?:\/\/[^/]+/)
|
|
||||||
if (repoHosts) {
|
|
||||||
const repoHost = repoHosts[0]
|
|
||||||
const foundPlatform = platforms.find(([_platform, re]) =>
|
|
||||||
re.test(repoHost)
|
|
||||||
)
|
|
||||||
text = foundPlatform && foundPlatform[0]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return { link, text: text || 'Source' }
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
|
|
||||||
const localeCandidates = computed(() => {
|
|
||||||
const locales = siteData.value.themeConfig.locales
|
|
||||||
if (!locales) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
const localeKeys = Object.keys(locales)
|
|
||||||
if (localeKeys.length <= 1) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
// handle site base
|
|
||||||
const siteBase = inBrowser ? siteData.value.base : '/'
|
|
||||||
const siteBaseWithoutSuffix = siteBase.endsWith('/')
|
|
||||||
? siteBase.slice(0, -1)
|
|
||||||
: siteBase
|
|
||||||
// remove site base in browser env
|
|
||||||
const routerPath = route.path.slice(siteBaseWithoutSuffix.length)
|
|
||||||
|
|
||||||
const currentLangBase = localeKeys.find((v) => {
|
|
||||||
if (v === '/') {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return routerPath.startsWith(v)
|
|
||||||
})
|
|
||||||
const currentContentPath = currentLangBase
|
|
||||||
? routerPath.substring(currentLangBase.length - 1)
|
|
||||||
: routerPath
|
|
||||||
const candidates = localeKeys.map((v) => {
|
|
||||||
const localePath = v.endsWith('/') ? v.slice(0, -1) : v
|
|
||||||
return {
|
|
||||||
text: locales[v].label || locales[v].lang,
|
|
||||||
link: `${localePath}${currentContentPath}`
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const currentLangKey = currentLangBase ? currentLangBase : '/'
|
|
||||||
const selectText = locales[currentLangKey].selectText
|
|
||||||
? locales[currentLangKey].selectText
|
|
||||||
: 'Languages'
|
|
||||||
return {
|
|
||||||
text: selectText,
|
|
||||||
items: candidates
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const navData = computed(() => {
|
|
||||||
return siteDataByRoute.value.themeConfig.nav
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
navData,
|
|
||||||
repoInfo,
|
|
||||||
localeCandidates
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
import NavBarLink from './NavBarLink.vue'
|
|
||||||
import { defineComponent, ref, watch, PropType } from 'vue'
|
|
||||||
import { useRoute } from 'vitepress'
|
|
||||||
import { DefaultTheme } from '../config'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'DropdownLink',
|
|
||||||
components: {
|
|
||||||
NavBarLink
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
item: {
|
|
||||||
type: Object as PropType<DefaultTheme.NavItemWithChildren>,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const open = ref(false)
|
|
||||||
const route = useRoute()
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => route.path,
|
|
||||||
() => {
|
|
||||||
open.value = false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const setOpen = (value: boolean) => {
|
|
||||||
open.value = value
|
|
||||||
}
|
|
||||||
|
|
||||||
const isLastItemOfArray = <T>(item: T, array: T[]) => {
|
|
||||||
return array.length && array.indexOf(item) === array.length - 1
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
isLastItemOfArray
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
import { computed } from 'vue'
|
|
||||||
import { useRoute, useSiteData } from 'vitepress'
|
|
||||||
import { DefaultTheme } from '../config'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const route = useRoute()
|
|
||||||
// TODO: could this be useSiteData<DefaultTheme.Config> or is the siteData
|
|
||||||
// resolved and has a different structure?
|
|
||||||
const siteData = useSiteData()
|
|
||||||
|
|
||||||
const resolveLink = (targetLink: string) => {
|
|
||||||
let target: DefaultTheme.SideBarLink | undefined
|
|
||||||
Object.keys(siteData.value.themeConfig.sidebar).some((k) => {
|
|
||||||
return siteData.value.themeConfig.sidebar[k].some(
|
|
||||||
(v: { children: any }) => {
|
|
||||||
if (Array.isArray(v.children)) {
|
|
||||||
target = v.children.find((value: any) => {
|
|
||||||
return value.link === targetLink
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return !!target
|
|
||||||
}
|
|
||||||
)
|
|
||||||
})
|
|
||||||
return target
|
|
||||||
}
|
|
||||||
|
|
||||||
const next = computed(() => {
|
|
||||||
const pageData = route.data
|
|
||||||
if (pageData.frontmatter.next === false) {
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
if (typeof pageData.frontmatter.next === 'string') {
|
|
||||||
return resolveLink(pageData.frontmatter.next)
|
|
||||||
}
|
|
||||||
return pageData.next
|
|
||||||
})
|
|
||||||
|
|
||||||
const prev = computed(() => {
|
|
||||||
const pageData = route.data
|
|
||||||
if (pageData.frontmatter.prev === false) {
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
if (typeof pageData.frontmatter.prev === 'string') {
|
|
||||||
return resolveLink(pageData.frontmatter.prev)
|
|
||||||
}
|
|
||||||
return pageData.prev
|
|
||||||
})
|
|
||||||
|
|
||||||
const hasLinks = computed(() => {
|
|
||||||
return !!next || !!prev
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
next,
|
|
||||||
prev,
|
|
||||||
hasLinks
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,123 +0,0 @@
|
|||||||
import { useRoute, useSiteDataByRoute } from 'vitepress'
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { Header } from '../../../../types/shared'
|
|
||||||
import { getPathDirName } from '../utils'
|
|
||||||
import { DefaultTheme } from '../config'
|
|
||||||
import { useActiveSidebarLinks } from '../composables/activeSidebarLink'
|
|
||||||
import NavBarLinks from './NavBarLinks.vue'
|
|
||||||
import { SideBarItem } from './SideBarItem'
|
|
||||||
|
|
||||||
export interface ResolvedSidebarItem {
|
|
||||||
text: string
|
|
||||||
link?: string
|
|
||||||
isGroup?: boolean
|
|
||||||
children?: ResolvedSidebarItem[]
|
|
||||||
}
|
|
||||||
|
|
||||||
type ResolvedSidebar = ResolvedSidebarItem[]
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
NavBarLinks,
|
|
||||||
SideBarItem
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const route = useRoute()
|
|
||||||
const siteData = useSiteDataByRoute()
|
|
||||||
|
|
||||||
useActiveSidebarLinks()
|
|
||||||
|
|
||||||
return {
|
|
||||||
items: computed(() => {
|
|
||||||
const {
|
|
||||||
headers,
|
|
||||||
frontmatter: { sidebar, sidebarDepth = 2 }
|
|
||||||
} = route.data
|
|
||||||
|
|
||||||
if (sidebar === 'auto') {
|
|
||||||
// auto, render headers of current page
|
|
||||||
return resolveAutoSidebar(headers, sidebarDepth)
|
|
||||||
} else if (Array.isArray(sidebar)) {
|
|
||||||
// in-page array config
|
|
||||||
return resolveArraySidebar(sidebar, sidebarDepth)
|
|
||||||
} else if (sidebar === false) {
|
|
||||||
return []
|
|
||||||
} else {
|
|
||||||
// no explicit page sidebar config
|
|
||||||
// check global theme config
|
|
||||||
const { sidebar: themeSidebar } = siteData.value.themeConfig
|
|
||||||
if (themeSidebar === 'auto') {
|
|
||||||
return resolveAutoSidebar(headers, sidebarDepth)
|
|
||||||
} else if (Array.isArray(themeSidebar)) {
|
|
||||||
return resolveArraySidebar(themeSidebar, sidebarDepth)
|
|
||||||
} else if (themeSidebar === false) {
|
|
||||||
return []
|
|
||||||
} else if (typeof themeSidebar === 'object') {
|
|
||||||
return resolveMultiSidebar(
|
|
||||||
themeSidebar,
|
|
||||||
route.path,
|
|
||||||
headers,
|
|
||||||
sidebarDepth
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolveAutoSidebar(headers: Header[], depth: number): ResolvedSidebar {
|
|
||||||
const ret: ResolvedSidebar = []
|
|
||||||
|
|
||||||
if (headers === undefined) {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
|
|
||||||
let lastH2: ResolvedSidebarItem | undefined = undefined
|
|
||||||
headers.forEach(({ level, title, slug }) => {
|
|
||||||
if (level - 1 > depth) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const item: ResolvedSidebarItem = {
|
|
||||||
text: title,
|
|
||||||
link: `#${slug}`
|
|
||||||
}
|
|
||||||
if (level === 2) {
|
|
||||||
lastH2 = item
|
|
||||||
ret.push(item)
|
|
||||||
} else if (lastH2) {
|
|
||||||
;(lastH2.children || (lastH2.children = [])).push(item)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return ret
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolveArraySidebar(
|
|
||||||
config: DefaultTheme.SideBarItem[],
|
|
||||||
depth: number
|
|
||||||
): ResolvedSidebar {
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolveMultiSidebar(
|
|
||||||
config: DefaultTheme.MultiSideBarConfig,
|
|
||||||
path: string,
|
|
||||||
headers: Header[],
|
|
||||||
depth: number
|
|
||||||
): ResolvedSidebar {
|
|
||||||
const paths = [path, Object.keys(config)[0]]
|
|
||||||
const item = paths.map((x) => config[getPathDirName(x)]).find(Boolean)
|
|
||||||
|
|
||||||
if (Array.isArray(item)) {
|
|
||||||
return resolveArraySidebar(item, depth)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item === 'auto') {
|
|
||||||
return resolveAutoSidebar(headers, depth)
|
|
||||||
}
|
|
||||||
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue