Merge branch 'master' into feat/overwrite-prev-next-link

src/client/app/router.ts

@@ -97,6 +97,10 @@ export function createRouter(
           const currentUrl = window.location
           // only intercept inbound links
           if (
+            !e.ctrlKey &&
+            !e.shiftKey &&
+            !e.altKey &&
+            !e.metaKey &&
             target !== `_blank` &&
             protocol === currentUrl.protocol &&
             hostname === currentUrl.hostname

src/client/theme-default/Layout.vue

@@ -2,9 +2,10 @@
   <div class="theme">
     <header>
       <NavBar />
+      <ToggleSideBarButton @toggle="toggleSidebar" />
     </header>
-    <aside>
+    <aside :class="{ open }">
-      <SideBar />
+      <SideBar/>
     </aside>
     <main>
       <Page />
@@ -14,15 +15,29 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import NavBar from './components/NavBar.vue'
+import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
 
 export default {
   components: {
     NavBar,
+    ToggleSideBarButton,
     SideBar,
     Page
+  },
+  setup() {
+    let open = ref(false)
+    const toggleSidebar = () => {
+      open.value = !open.value
+    }
+    return {
+      open,
+      toggleSidebar
+    }
   }
 }
 </script>

src/client/theme-default/components/SideBar.ts

@@ -1,4 +1,9 @@
-import { usePageData, useRoute, useSiteDataByRoute } from 'vitepress'
+import {
+  usePageData,
+  useRoute,
+  useSiteDataByRoute,
+  useSiteData
+} from 'vitepress'
 import { computed, h, FunctionalComponent, VNode } from 'vue'
 import { Header } from '../../../../types/shared'
 import { isActive, getPathDirName } from '../utils'
@@ -9,12 +14,14 @@ const SideBarItem: FunctionalComponent<{
   item: ResolvedSidebarItem
 }> = (props) => {
   const {
-    item: { link, text, children }
+    item: { link: relLink, text, children }
   } = props
 
   const route = useRoute()
   const pageData = usePageData()
+  const siteData = useSiteData()
 
+  const link = `${siteData.value.base}${relLink || ''}`
   const active = isActive(route, link)
   const headers = pageData.value.headers
 
@@ -129,7 +136,8 @@ function resolveMultiSidebar(
   headers: Header[],
   depth: number
 ): ResolvedSidebar {
-  const item = config[getPathDirName(path)]
+  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)

src/client/theme-default/components/ToggleSideBarButton.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="sidebar-button" @click="$emit('toggle')">
+    <svg
+      class="icon"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      role="img"
+      viewBox="0 0 448 512"
+    >
+      <path
+        fill="currentColor"
+        d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
+        class
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+
+export default {
+  emits: ['toggle']
+}
+</script>
+
+<style>
+.sidebar-button {
+  cursor: pointer;
+  display: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  position: absolute;
+  top: 1.25rem;
+  left: 1rem;
+}
+.sidebar-button .icon {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+@media screen and (max-width: 719px) {
+  .sidebar-button {
+    display: block;
+  }
+}
+</style>

src/client/theme-default/styles/layout.css

@@ -28,6 +28,11 @@ header {
   justify-content: space-between;
   padding: 0 1.75rem 0 1.5rem;
 }
+@media screen and (max-width: 719px) {
+  header {
+    padding: 0 1.75rem 0 4rem;
+  }
+}
 
 aside {
   position: fixed;
@@ -41,11 +46,25 @@ aside {
   z-index: 3;
   overflow-y: auto;
 }
+@media screen and (max-width: 719px) {
+  aside {
+    transition: transform .2s ease;
+    transform: translateX(-100%);
+  }
+  aside.open {
+    transform: translateX(0);
+  }
+}
 
 main {
   margin-top: var(--header-height);
   margin-left: var(--sidebar-width);
 }
+@media screen and (max-width: 719px) {
+  main {
+    margin-left: 0;
+  }
+}
 
 a {
   text-decoration: none;
@@ -69,7 +88,7 @@ h1 {
 
 h2 {
   font-size: 1.65rem;
-  padding-bottom: .3rem;
+  padding-bottom: 0.3rem;
   border-bottom: 1px solid var(--border-color);
 }
 

src/client/theme-default/styles/vars.css

@@ -6,4 +6,9 @@
   --text-color-light: #476582;
   --code-bg-color: #282c34;
   --accent-color: #3eaf7c;
+
+  /* responsive breakpoints */
+  /* --mq-narrow: 959px; */
+  /* --mq-mobile: 719px; */
+  /* --mq-mobile-narrow: 419px; */
 }

src/node/build/bundle.ts

@@ -3,7 +3,7 @@ import slash from 'slash'
 import fs from 'fs-extra'
 import { APP_PATH, createResolver, SITE_DATA_REQUEST_PATH } from '../resolver'
 import { BuildOptions } from './build'
-import { SiteConfig } from '../config'
+import { resolveUserConfig, SiteConfig } from '../config'
 import { Plugin, OutputAsset, OutputChunk } from 'rollup'
 import { createMarkdownToVueRenderFn } from '../markdownToVue'
 import {
@@ -34,7 +34,8 @@ export async function bundle(
   options: BuildOptions
 ): Promise<[BuildResult, BuildResult, Record<string, string>]> {
   const root = config.root
-  const resolver = createResolver(config.themeDir)
+  const userConfig = await resolveUserConfig(root)
+  const resolver = createResolver(config.themeDir, userConfig)
   const markdownToVue = createMarkdownToVueRenderFn(root)
 
   let isClientBuild = true

src/node/config.ts

@@ -17,6 +17,7 @@ export interface UserConfig<ThemeConfig = any> {
   head?: HeadConfig[]
   themeConfig?: ThemeConfig
   locales?: Record<string, LocaleConfig>
+  alias?: Record<string, string>
   // TODO locales support etc.
 }
 
@@ -37,6 +38,7 @@ const resolve = (root: string, file: string) =>
 export async function resolveConfig(
   root: string = process.cwd()
 ): Promise<SiteConfig> {
+  const userConfig = await resolveUserConfig(root)
   const site = await resolveSiteData(root)
 
   // resolve theme path
@@ -53,13 +55,13 @@ export async function resolveConfig(
     configPath: resolve(root, 'config.js'),
     outDir: resolve(root, 'dist'),
     tempDir: path.resolve(APP_PATH, 'temp'),
-    resolver: createResolver(themeDir)
+    resolver: createResolver(themeDir, userConfig)
   }
 
   return config
 }
 
-export async function resolveSiteData(root: string): Promise<SiteData> {
+export async function resolveUserConfig(root: string) {
   // load user config
   const configPath = resolve(root, 'config.js')
   const hasUserConfig = await fs.pathExists(configPath)
@@ -72,6 +74,12 @@ export async function resolveSiteData(root: string): Promise<SiteData> {
     debug(`no config file found.`)
   }
 
+  return userConfig
+}
+
+export async function resolveSiteData(root: string): Promise<SiteData> {
+  const userConfig = await resolveUserConfig(root)
+
   return {
     lang: userConfig.lang || 'en-US',
     title: userConfig.title || 'VitePress',

src/node/resolver.ts

@@ -1,5 +1,6 @@
 import path from 'path'
 import { Resolver } from 'vite'
+import { UserConfig } from './config'
 
 export const APP_PATH = path.join(__dirname, '../client/app')
 export const SHARED_PATH = path.join(__dirname, '../client/shared')
@@ -15,9 +16,13 @@ export const SITE_DATA_REQUEST_PATH = '/' + SITE_DATA_ID
 // so that we can resolve custom requests that start with /@app or /@theme
 // we also need to map file paths back to their public served paths so that
 // vite HMR can send the correct update notifications to the client.
-export function createResolver(themeDir: string): Resolver {
+export function createResolver(
+  themeDir: string,
+  userConfig: UserConfig
+): Resolver {
   return {
     alias: {
+      ...userConfig.alias,
       '/@app/': APP_PATH,
       '/@theme/': themeDir,
       '/@shared/': SHARED_PATH,

yarn.lock

@@ -2983,9 +2983,9 @@ prettier@^2.0.5:
   integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
 
 prismjs@^1.20.0:
-  version "1.20.0"
+  version "1.21.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3"
-  integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==
+  integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==
   optionalDependencies:
     clipboard "^2.0.0"