vitepress 0.22.3 → 1.0.0-draft.2

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/index.d.ts

@@ -68,17 +68,22 @@ export declare interface Router {
 
 export declare interface SiteData<ThemeConfig = any> {
     base: string
+
     /**
      * Language of the site as it should be set on the `html` element.
+     *
      * @example `en-US`, `zh-CN`
      */
     lang: string
+
     title: string
     description: string
     head: HeadConfig[]
+    appearance: boolean
     themeConfig: ThemeConfig
     scrollOffset: number | string
     locales: Record<string, LocaleConfig>
+
     /**
      * Available locales for the site when it has defined `locales` in its
      * `themeConfig`. This object is otherwise empty. Keys are paths like `/` or

package/dist/client/shared.js

@@ -1,4 +1,5 @@
 export const EXTERNAL_URL_RE = /^https?:/i;
+export const APPEARANCE_KEY = 'vitepress-theme-appearance';
 // @ts-ignore
 export const inBrowser = typeof window !== 'undefined';
 function findMatchRoot(route, roots) {

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

@@ -1,189 +1,48 @@
 <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'
+import VPFooter from './components/VPFooter.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>
+      <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-after><slot name="home-hero-after" /></template>
+      <template #home-features-before><slot name="home-features-before" /></template>
+      <template #home-features-after><slot name="home-features-after" /></template>
+    </VPContent>
+
+    <VPFooter />
   </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 scoped>
+.Layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 </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-index-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/VPBox.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  title: string
+  details: string
+}>()
+</script>
+
+<template>
+  <article class="VPBox">
+    <div v-if="icon" class="icon">{{ icon }}</div>
+    <h1 class="title">{{ title }}</h1>
+    <p class="details">{{ details }}</p>
+  </article>
+</template>
+
+<style scoped>
+.VPBox {
+  border: 1px solid var(--vp-c-divider-light);
+  border-radius: 8px;
+  padding: 24px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.dark .VPBox {
+  background-color: var(--vp-c-bg-mute);
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  border-radius: 6px;
+  background-color: var(--vp-c-gray-light-4);
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+}
+
+.dark .icon {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.details {
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+</style>

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  tag?: string
+  size?: 'medium' | 'big'
+  theme?: 'brand' | 'alt' | 'sponsor'
+  text: string
+  href?: string
+}>()
+
+const classes = computed(() => [
+  props.size ?? 'medium',
+  props.theme ?? 'brand'
+])
+
+const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
+
+const component = computed(() => {
+  if (props.tag) {
+    return props.tag
+  }
+
+  return props.href ? 'a' : 'button'
+})
+</script>
+
+<template>
+  <component
+    :is="component"
+    class="VPButton"
+    :class="classes"
+    :href="href"
+    :target="isExternal ? '_blank' : undefined"
+    :rel="isExternal ? 'noopener noreferrer' : undefined"
+  >
+    {{ text }}
+  </component>
+</template>
+
+<style scoped>
+.VPButton {
+  display: inline-block;
+  border: 1px solid transparent;
+
+  text-align: center;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+}
+
+.VPButton:active {
+  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+}
+
+.VPButton.medium {
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+}
+
+.VPButton.big {
+  border-radius: 24px;
+  padding: 0 24px;
+  line-height: 46px;
+  font-size: 16px;
+}
+
+.VPButton.brand {
+  border-color: var(--vp-button-brand-border);
+  color: var(--vp-button-brand-text);
+  background-color: var(--vp-button-brand-bg);
+}
+
+.VPButton.brand:hover {
+  border-color: var(--vp-button-brand-hover-border);
+  color: var(--vp-button-brand-hover-text);
+  background-color: var(--vp-button-brand-hover-bg);
+}
+
+.VPButton.brand:active {
+  border-color: var(--vp-button-brand-active-border);
+  color: var(--vp-button-brand-active-text);
+  background-color: var(--vp-button-brand-active-bg);
+}
+
+.VPButton.alt {
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+}
+
+.VPButton.alt:hover {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+}
+
+.VPButton.alt:active {
+  border-color: var(--vp-button-alt-active-border);
+  color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg);
+}
+
+.VPButton.sponsor {
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.VPButton.sponsor:hover {
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+
+.VPButton.sponsor:active {
+  border-color: var(--vp-button-sponsor-active-border);
+  color: var(--vp-button-sponsor-active-text);
+  background-color: var(--vp-button-sponsor-active-bg);
+}
+</style>