vitepress 0.22.4 → 1.0.0-draft.1

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';

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>

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

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import VPContentDocOutline from './VPContentDocOutline.vue'
+import VPContentDocFooter from './VPContentDocFooter.vue'
+
+const { page } = useData()
+
+const pageName = computed(() => {
+  return page.value.relativePath.slice(0, page.value.relativePath.indexOf('/'))
+})
+</script>
+
+<template>
+  <div class="VPContentDoc has-aside">
+    <div class="container">
+      <div class="aside">
+        <div class="aside-container">
+          <div class="aside-curtain" />
+          <div class="aside-content">
+            <VPContentDocOutline v-if="page.headers" />
+          </div>
+        </div>
+      </div>
+
+      <div class="content">
+        <main class="main">
+          <Content class="vp-doc" :class="pageName" />
+        </main>
+
+        <VPContentDocFooter />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPContentDoc {
+  padding: 32px 24px 96px;
+}
+
+@media (min-width: 768px) {
+  .VPContentDoc {
+    padding: 48px 32px 128px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPContentDoc {
+    padding: 32px 64px 96px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPContentDoc {
+    padding: 32px 0 128px 64px;
+  }
+
+  .VPContentDoc:not(.has-sidebar.has-aside) {
+    padding-left: calc((100vw - 688px) / 2);
+  }
+
+  .VPContentDoc.has-aside:not(.has-sidebar) {
+    padding-left: calc((100vw - 688px - 320px) / 2);
+  }
+
+  .VPContentDoc:not(.has-aside) .content {
+    min-width: 688px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPContentDoc {
+    padding: 32px 0 128px 96px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    display: flex;
+  }
+}
+
+.aside {
+  position: relative;
+  display: none;
+  order: 2;
+  flex-shrink: 0;
+  flex-grow: 1;
+  padding-left: 64px;
+  padding-right: 32px;
+  min-width: 320px;
+}
+
+@media (min-width: 1280px) {
+  .aside {
+    display: block;
+  }
+}
+
+@media (min-width: 1440px) {
+  .aside {
+    padding-left: 96px;
+  }
+}
+
+.aside-container {
+  position: fixed;
+  top: var(--vp-nav-height-desktop);
+  bottom: 0;
+  padding-top: 32px;
+  width: 224px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.aside-container::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 1440px) {
+  .aside-container {
+    width: 256px;
+  }
+}
+
+.aside-curtain {
+  position: fixed;
+  top: var(--vp-nav-height-desktop);
+  z-index: 10;
+  width: 100%;
+  height: 40px;
+  background: linear-gradient(var(--vp-c-bg-content), transparent);
+}
+
+.aside-content {
+  padding-bottom: 96px;
+}
+
+.content {
+  position: relative;
+  margin: 0 auto;
+  max-width: 688px;
+}
+
+@media (min-width: 1280px) {
+  .content {
+    order: 1;
+    margin: 0;
+    min-width: 632px;
+  }
+}
+
+.edit-link {
+  margin: 0 0 32px;
+}
+
+.edit-link .vt-link {
+  font-size: 14px;
+  color: var(--vt-c-brand);
+  font-weight: 500;
+}
+
+.vt-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--vt-c-brand);
+  display: inline-block;
+  margin-right: 8px;
+  position: relative;
+  top: -1px;
+}
+</style>