vitepress 0.22.2 → 1.0.0-draft.1

package/README.md

@@ -5,7 +5,7 @@
 
 ---
 
-VitePress is [VuePress](http://vuepress.vuejs.org/)' spiritual successor, built on top of [vite](https://github.com/vuejs/vite).
+VitePress is [VuePress](https://vuepress.vuejs.org)' spiritual successor, built on top of [vite](https://github.com/vitejs/vite).
 
 ## Documentation
 
@@ -13,14 +13,14 @@ To check out docs, visit [vitepress.vuejs.org](https://vitepress.vuejs.org).
 
 ## Changelog
 
-Detailed changes for each release are documented in the [CHANGELOG](https://github.com/vuejs/vitepress/blob/master/CHANGELOG.md).
+Detailed changes for each release are documented in the [CHANGELOG](https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md).
 
 ## Contribution
 
-Please make sure to read the [Contributing Guide](./.github/contributing.md) before making a pull request.
+Please make sure to read the [Contributing Guide](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md) before making a pull request.
 
 ## License
 
-[MIT](https://opensource.org/licenses/MIT)
+[MIT](https://github.com/vuejs/vitepress/blob/main/LICENSE)
 
 Copyright (c) 2019-present, Yuxi (Evan) You

package/client.d.ts

@@ -1,4 +1,3 @@
-// re-export vite client types
-// with strict installers like pnpm, user won't be able to reference vite/client
-// in project root
+// re-export vite client types. with strict installers like pnpm, user won't
+// be able to reference vite/client in project root.
 /// <reference types="vite/client" />

package/dist/client/app/components/ClientOnly.js

@@ -1,4 +1,4 @@
-import { ref, onMounted, defineComponent } from 'vue';
+import { defineComponent, ref, onMounted } from 'vue';
 export const ClientOnly = defineComponent({
     setup(_, { slots }) {
         const show = ref(false);

package/dist/client/app/index.js

@@ -1,9 +1,9 @@
 import { createApp as createClientApp, createSSRApp, defineAsyncComponent, h, onMounted, watch } from 'vue';
+import Theme from '/@theme/index';
 import { inBrowser, pathToFile } from './utils';
 import { RouterSymbol, createRouter } from './router';
 import { siteDataRef, useData } from './data';
 import { useUpdateHead } from './composables/head';
-import Theme from '/@theme/index';
 import { usePrefetch } from './composables/preFetch';
 import { dataSymbol, initData } from './data';
 import { Content } from './components/Content';
@@ -33,10 +33,6 @@ export function createApp() {
     app.provide(RouterSymbol, router);
     const data = initData(router.route);
     app.provide(dataSymbol, data);
-    if (inBrowser) {
-        // dynamically update head tags
-        useUpdateHead(router.route, data.site);
-    }
     // install global components
     app.component('Content', Content);
     app.component('ClientOnly', ClientOnly);
@@ -56,7 +52,7 @@ export function createApp() {
             siteData: siteDataRef
         });
     }
-    return { app, router };
+    return { app, router, data };
 }
 function newApp() {
     return import.meta.env.PROD
@@ -104,9 +100,11 @@ function shouldHotReload(payload) {
     return payloadPath === locationPath;
 }
 if (inBrowser) {
-    const { app, router } = createApp();
+    const { app, router, data } = createApp();
     // wait until page component is fetched before mounting
     router.go().then(() => {
+        // dynamically update head tags
+        useUpdateHead(router.route, data.site);
         app.mount('#app');
     });
 }

package/dist/client/app/router.js

@@ -5,13 +5,18 @@ export const RouterSymbol = Symbol();
 // we are just using URL to parse the pathname and hash - the base doesn't
 // matter and is only passed to support same-host hrefs.
 const fakeHost = `http://a.com`;
+const notFoundPageData = {
+    relativePath: '',
+    title: '404',
+    description: 'Not Found',
+    headers: [],
+    frontmatter: {},
+    lastUpdated: 0
+};
 const getDefaultRoute = () => ({
     path: '/',
     component: null,
-    // this will be set upon initial page load, which is before
-    // the app is mounted, so it's guaranteed to be available in
-    // components. We just need enough data for 404 pages to render.
-    data: { frontmatter: {} }
+    data: notFoundPageData
 });
 export function createRouter(loadPageModule, fallbackComponent) {
     const route = reactive(getDefaultRoute());
@@ -91,6 +96,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 latestPendingPath = null;
                 route.path = pendingPath;
                 route.component = fallbackComponent ? markRaw(fallbackComponent) : null;
+                route.data = notFoundPageData;
             }
         }
     }
@@ -153,7 +159,7 @@ export function useRoute() {
 function scrollTo(el, hash, smooth = false) {
     let target = null;
     try {
-        target = el.classList.contains('.header-anchor')
+        target = el.classList.contains('header-anchor')
             ? el
             : document.querySelector(decodeURIComponent(hash));
     }

package/dist/client/theme-default/Layout.vue

@@ -1,189 +1,31 @@
 <script setup lang="ts">
-import { ref, computed, watch, defineAsyncComponent } from 'vue'
-import { useRoute, useData } from 'vitepress'
-import { isSideBarEmpty, getSideBarConfig } from './support/sideBar'
-
-// components
-import Home from './components/Home.vue'
-import NavBar from './components/NavBar.vue'
-import SideBar from './components/SideBar.vue'
-import Page from './components/Page.vue'
-
-const NoopComponent = () => null
-
-const CarbonAds = __CARBON__
-  ? defineAsyncComponent(() => import('./components/CarbonAds.vue'))
-  : NoopComponent
-const BuySellAds = __BSA__
-  ? defineAsyncComponent(() => import('./components/BuySellAds.vue'))
-  : NoopComponent
-const AlgoliaSearchBox = __ALGOLIA__
-  ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue'))
-  : NoopComponent
-
-// generic state
-const route = useRoute()
-const { site, page, theme, frontmatter } = useData()
-
-// custom layout
-const isCustomLayout = computed(() => !!frontmatter.value.customLayout)
-// home
-const enableHome = computed(() => !!frontmatter.value.home)
-
-// automatic multilang check for AlgoliaSearchBox
-const isMultiLang = computed(() => Object.keys(site.value.langs).length > 1)
-
-// navbar
-const showNavbar = computed(() => {
-  const themeConfig = theme.value
-  if (frontmatter.value.navbar === false || themeConfig.navbar === false) {
-    return false
-  }
-  return (
-    site.value.title || themeConfig.logo || themeConfig.repo || themeConfig.nav
-  )
-})
-
-// sidebar
-const openSideBar = ref(false)
-
-const showSidebar = computed(() => {
-  if (frontmatter.value.home || frontmatter.value.sidebar === false) {
-    return false
-  }
-
-  return !isSideBarEmpty(
-    getSideBarConfig(theme.value.sidebar, route.data.relativePath)
-  )
-})
-
-const toggleSidebar = (to?: boolean) => {
-  openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value
-}
-
-const hideSidebar = toggleSidebar.bind(null, false)
-// close the sidebar when navigating to a different location
-watch(route, hideSidebar)
-// TODO: route only changes when the pathname changes
-// listening to hashchange does nothing because it's prevented in router
-
-// page classes
-const pageClasses = computed(() => {
-  return [
-    {
-      'no-navbar': !showNavbar.value,
-      'sidebar-open': openSideBar.value,
-      'no-sidebar': !showSidebar.value
-    }
-  ]
-})
+import { provide } from 'vue'
+import { useSidebar, useCloseSidebarOnEscape } from './composables/sidebar'
+import VPSkipLink from './components/VPSkipLink.vue'
+import VPBackdrop from './components/VPBackdrop.vue'
+import VPNav from './components/VPNav.vue'
+import VPLocalNav from './components/VPLocalNav.vue'
+import VPSidebar from './components/VPSidebar.vue'
+import VPContent from './components/VPContent.vue'
+
+const {
+  isOpen: isSidebarOpen,
+  open: openSidebar,
+  close: closeSidebar
+} = useSidebar()
+
+useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
+
+provide('close-sidebar', closeSidebar)
 </script>
 
 <template>
-  <div class="theme" :class="pageClasses">
-    <NavBar v-if="showNavbar" @toggle="toggleSidebar">
-      <template #search>
-        <slot name="navbar-search">
-          <AlgoliaSearchBox
-            v-if="theme.algolia"
-            :options="theme.algolia"
-            :multilang="isMultiLang"
-          />
-        </slot>
-      </template>
-    </NavBar>
-
-    <SideBar :open="openSideBar">
-      <template #sidebar-top>
-        <slot name="sidebar-top" />
-      </template>
-      <template #sidebar-bottom>
-        <slot name="sidebar-bottom" />
-      </template>
-    </SideBar>
-    <!-- TODO: make this button accessible -->
-    <div class="sidebar-mask" @click="toggleSidebar(false)" />
-
-    <Content v-if="isCustomLayout" />
-
-    <template v-else-if="enableHome">
-      <!-- A slot for customizing the entire homepage easily -->
-      <slot name="home">
-        <Home>
-          <template #hero>
-            <slot name="home-hero" />
-          </template>
-          <template #features>
-            <slot name="home-features" />
-          </template>
-          <template #footer>
-            <slot name="home-footer" />
-          </template>
-        </Home>
-      </slot>
-    </template>
-
-    <Page v-else>
-      <template #top>
-        <slot name="page-top-ads">
-          <div
-            id="ads-container"
-            v-if="theme.carbonAds && theme.carbonAds.carbon"
-          >
-            <CarbonAds
-              :key="'carbon' + page.relativePath"
-              :code="theme.carbonAds.carbon"
-              :placement="theme.carbonAds.placement"
-            />
-          </div>
-        </slot>
-        <slot name="page-top" />
-      </template>
-      <template #bottom>
-        <slot name="page-bottom" />
-        <slot name="page-bottom-ads">
-          <BuySellAds
-            v-if="theme.carbonAds && theme.carbonAds.custom"
-            :key="'custom' + page.relativePath"
-            :code="theme.carbonAds.custom"
-            :placement="theme.carbonAds.placement"
-          />
-        </slot>
-      </template>
-    </Page>
+  <div class="Layout">
+    <VPSkipLink />
+    <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
+    <VPNav />
+    <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
+    <VPSidebar :open="isSidebarOpen" />
+    <VPContent />
   </div>
-
-  <Debug />
 </template>
-
-<style>
-#ads-container {
-  margin: 0 auto;
-}
-
-@media (min-width: 420px) {
-  #ads-container {
-    position: relative;
-    right: 0;
-    float: right;
-    margin: -8px -8px 24px 24px;
-    width: 146px;
-  }
-}
-
-@media (max-width: 420px) {
-  #ads-container {
-    /* Avoid layout shift */
-    height: 105px;
-    margin: 1.75rem 0;
-  }
-}
-
-@media (min-width: 1400px) {
-  #ads-container {
-    position: fixed;
-    right: 8px;
-    bottom: 8px;
-  }
-}
-</style>

package/dist/client/theme-default/NotFound.vue

@@ -1,15 +1,8 @@
-<template>
-  <div class="theme">
-    <h1>404</h1>
-    <blockquote>{{ getMsg() }}</blockquote>
-    <a :href="site.base" aria-label="go to home">Take me home.</a>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useData } from 'vitepress'
 
 const { site } = useData()
+
 const msgs = [
   `There's nothing here.`,
   `How did we get here?`,
@@ -21,3 +14,11 @@ function getMsg() {
   return msgs[Math.floor(Math.random() * msgs.length)]
 }
 </script>
+
+<template>
+  <div class="NotFound">
+    <h1>404</h1>
+    <blockquote>{{ getMsg() }}</blockquote>
+    <a :href="site.base" aria-label="go to home">Take me home.</a>
+  </div>
+</template>

package/dist/client/theme-default/components/VPAlgoliaSearchBox.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import docsearch from '@docsearch/js'
+import { DocSearchHit } from '@docsearch/react/dist/esm/types'
+import { onMounted } from 'vue'
+import { useRouter, useRoute, useData } from 'vitepress'
+import { DefaultTheme } from '../config'
+
+const router = useRouter()
+const route = useRoute()
+const { theme } = useData()
+
+onMounted(() => {
+  initialize(theme.value.algolia)
+  setTimeout(poll, 16)
+})
+
+function poll() {
+  // programmatically open the search box after initialize
+  const e = new Event('keydown') as any
+
+  e.key = 'k'
+  e.metaKey = true
+
+  window.dispatchEvent(e)
+
+  setTimeout(() => {
+    if (!document.querySelector('.DocSearch-Modal')) {
+      poll()
+    }
+  }, 16)
+}
+
+function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
+  // note: multi-lang search support is removed since the theme
+  // doesn't support multiple locales as of now.
+  const options = Object.assign({}, userOptions, {
+    container: '#docsearch',
+
+    navigator: {
+      navigate({ itemUrl }: { itemUrl: string }) {
+        const { pathname: hitPathname } = new URL(
+          window.location.origin + itemUrl
+        )
+
+        // router doesn't handle same-page navigation so we use the native
+        // browser location API for anchor navigation
+        if (route.path === hitPathname) {
+          window.location.assign(window.location.origin + itemUrl)
+        } else {
+          router.go(itemUrl)
+        }
+      }
+    },
+
+    transformItems(items: DocSearchHit[]) {
+      return items.map((item) => {
+        return Object.assign({}, item, {
+          url: getRelativePath(item.url)
+        })
+      })
+    },
+
+    hitComponent({ hit, children }: { hit: DocSearchHit, children: any }) {
+      const relativeHit = hit.url.startsWith('http')
+        ? getRelativePath(hit.url as string)
+        : hit.url
+
+      return {
+        __v: null,
+        type: 'a',
+        ref: undefined,
+        constructor: undefined,
+        key: undefined,
+
+        props: {
+          href: hit.url,
+
+          onClick(event: MouseEvent) {
+            if (isSpecialClick(event)) {
+              return
+            }
+
+            // we rely on the native link scrolling when user is already on
+            // the right anchor because Router doesn't support duplicated
+            // history entries.
+            if (route.path === relativeHit) {
+              return
+            }
+
+            // if the hits goes to another page, we prevent the native link
+            // behavior to leverage the Router loading feature.
+            if (route.path !== relativeHit) {
+              event.preventDefault()
+            }
+
+            router.go(relativeHit)
+          },
+
+          children
+        }
+      }
+    }
+  })
+
+  docsearch(options)
+}
+
+function isSpecialClick(event: MouseEvent) {
+  return (
+    event.button === 1 ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey
+  )
+}
+
+function getRelativePath(absoluteUrl: string) {
+  const { pathname, hash } = new URL(absoluteUrl)
+
+  return pathname + hash
+}
+</script>
+
+<template>
+  <div id="docsearch" />
+</template>

package/dist/client/theme-default/components/VPBackdrop.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+defineProps<{
+  show: boolean
+}>()
+</script>
+
+<template>
+  <transition name="fade">
+    <div v-if="show" class="VPBackdrop" />
+  </transition>
+</template>
+
+<style scoped>
+.VPBackdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--vp-z-backdrop);
+  background: rgba(0, 0, 0, .6);
+  transition: opacity 0.5s;
+}
+
+.VPBackdrop.fade-enter-from,
+.VPBackdrop.fade-leave-to {
+  opacity: 0;
+}
+
+.VPBackdrop.fade-leave-active {
+  transition-duration: .25s;
+}
+
+@media (min-width: 1280px) {
+  .VPBackdrop {
+    display: none;
+  }
+}
+</style>

package/dist/client/theme-default/components/VPContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useRoute } from 'vitepress'
+import { useSidebar } from '../composables/sidebar'
+import NotFound from '../NotFound.vue'
+import VPContentDoc from './VPContentDoc.vue'
+
+const route = useRoute()
+const { hasSidebar } = useSidebar()
+</script>
+
+<template>
+  <div
+    class="VPContent"
+    id="VPContent"
+    :class="{ 'has-sidebar': hasSidebar }"
+  >
+    <NotFound v-if="route.component === NotFound" />
+    <VPContentDoc v-else :class="{ 'has-sidebar': hasSidebar }" />
+  </div>
+</template>
+
+<style scoped>
+@media (max-width: 768px) {
+  .VPContent {
+    overflow-x: hidden;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPContent {
+    padding-top: var(--vp-nav-height-desktop);
+  }
+
+  .VPContent.has-sidebar {
+    padding-left: var(--vp-sidebar-width);
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPContent.has-sidebar {
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) - 32px);
+  }
+}
+</style>