vitepress 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/client/app/composables/copyCode.js

@@ -1,13 +1,12 @@
 import { inBrowser } from 'vitepress';
 export function useCopyCode() {
     if (inBrowser) {
-        const timeoutIdMap = new Map();
+        const timeoutIdMap = new WeakMap();
         window.addEventListener('click', (e) => {
             const el = e.target;
             if (el.matches('div[class*="language-"] > button.copy')) {
                 const parent = el.parentElement;
-                const sibling = el.nextElementSibling
-                    ?.nextElementSibling;
+                const sibling = el.nextElementSibling?.nextElementSibling;
                 if (!parent || !sibling) {
                     return;
                 }

package/dist/client/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Component, Ref, App, AsyncComponentLoader } from 'vue';
+import { Component, InjectionKey, Ref, App, AsyncComponentLoader } from 'vue';
 import { PageData, Awaitable, SiteData } from '../../types/shared.js';
 export { HeadConfig, Header, PageData, SiteData } from '../../types/shared.js';
 
@@ -19,6 +19,7 @@ interface Router {
 declare function useRouter(): Router;
 declare function useRoute(): Route;
 
+declare const dataSymbol: InjectionKey<VitePressData>;
 interface VitePressData<T = any> {
     /**
      * Site-level metadata
@@ -96,4 +97,4 @@ declare const Content: vue.DefineComponent<{
     as: string | Record<string, any>;
 }, {}>;
 
-export { Content, EnhanceAppContext, Route, Router, Theme, VitePressData, defineClientComponent, inBrowser, onContentUpdated, useData, useRoute, useRouter, withBase };
+export { Content, EnhanceAppContext, Route, Router, Theme, VitePressData, dataSymbol, defineClientComponent, inBrowser, onContentUpdated, useData, useRoute, useRouter, withBase };

package/dist/client/index.js

@@ -1,7 +1,7 @@
 // exports in this file are exposed to themes and md files via 'vitepress'
 // so the user can do `import { useRoute, useSiteData } from 'vitepress'`
 // composables
-export { useData } from './app/data';
+export { useData, dataSymbol } from './app/data';
 export { useRoute, useRouter } from './app/router';
 // utilities
 export { inBrowser, onContentUpdated, defineClientComponent, withBase } from './app/utils';

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

@@ -47,7 +47,4 @@ const { hasSidebar } = useSidebar()
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
-
-.message   { order: 2; }
-.copyright { order: 1; }
 </style>

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

@@ -1,8 +1,12 @@
 <script lang="ts" setup>
+import { useWindowScroll } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+import { onContentUpdated } from 'vitepress'
 import { useData } from '../composables/data'
+import { getHeaders, type MenuItem } from '../composables/outline'
 import { useSidebar } from '../composables/sidebar'
-import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
+import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 
 defineProps<{
   open: boolean
@@ -14,10 +18,32 @@ defineEmits<{
 
 const { theme, frontmatter } = useData()
 const { hasSidebar } = useSidebar()
+const { y } = useWindowScroll()
+
+const headers = shallowRef<MenuItem[]>([])
+
+onContentUpdated(() => {
+  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
+})
+
+const empty = computed(() => {
+  return headers.value.length === 0 && !hasSidebar.value
+})
+
+const classes = computed(() => {
+  return {
+    VPLocalNav: true,
+    fixed: empty.value,
+    'reached-top': y.value >= 64
+  }
+})
 </script>
 
 <template>
-  <div class="VPLocalNav" v-if="frontmatter.layout !== 'home'">
+  <div
+    v-if="frontmatter.layout !== 'home' && (!empty || y >= 64)"
+    :class="classes"
+  >
     <button
       v-if="hasSidebar"
       class="menu"
@@ -31,7 +57,7 @@ const { hasSidebar } = useSidebar()
       </span>
     </button>
 
-    <VPLocalNavOutlineDropdown />
+    <VPLocalNavOutlineDropdown :headers="headers" />
   </div>
 </template>
 
@@ -45,11 +71,19 @@ const { hasSidebar } = useSidebar()
   display: flex;
   justify-content: space-between;
   align-items: center;
+  border-top: 1px solid var(--vp-c-gutter);
   border-bottom: 1px solid var(--vp-c-gutter);
   padding-top: var(--vp-layout-top-height, 0px);
   width: 100%;
   background-color: var(--vp-local-nav-bg-color);
-  transition: border-color 0.5s, background-color 0.5s;
+}
+
+.VPLocalNav.fixed {
+  position: fixed;
+}
+
+.VPLocalNav.reached-top {
+  border-top-color: transparent;
 }
 
 @media (min-width: 960px) {

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

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { ref, nextTick, shallowRef } from 'vue'
+import { onContentUpdated } from 'vitepress'
+import { nextTick, ref } from 'vue'
 import { useData } from '../composables/data'
-import { getHeaders, resolveTitle, type MenuItem } from '../composables/outline'
+import { resolveTitle, type MenuItem } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
-import { onContentUpdated } from 'vitepress'
 import VPIconChevronRight from './icons/VPIconChevronRight.vue'
 
-const { frontmatter, theme } = useData()
+defineProps<{
+  headers: MenuItem[]
+}>()
+
+const { theme } = useData()
 const open = ref(false)
 const vh = ref(0)
 const items = ref<HTMLDivElement>()
@@ -36,14 +40,6 @@ function scrollToTop() {
   open.value = false
   window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
 }
-
-const headers = shallowRef<MenuItem[]>([])
-
-onContentUpdated(() => {
-  headers.value = getHeaders(
-    frontmatter.value.outline ?? theme.value.outline
-  )
-})
 </script>
 
 <template>

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

@@ -12,7 +12,7 @@ import {
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import Mark from 'mark.js/src/vanilla.js'
 import MiniSearch, { type SearchResult } from 'minisearch'
-import { useRouter } from 'vitepress'
+import { useRouter, dataSymbol } from 'vitepress'
 import {
   computed,
   createApp,
@@ -27,7 +27,6 @@ import {
   type Ref
 } from 'vue'
 import type { ModalTranslations } from '../../../../types/local-search'
-import { dataSymbol } from '../../app/data'
 import { pathToFile } from '../../app/utils'
 import { useData } from '../composables/data'
 import { createTranslate } from '../support/translation'
@@ -119,8 +118,6 @@ watchEffect(() => {
 
 const results: Ref<(SearchResult & Result)[]> = shallowRef([])
 
-const headingRegex = /<h(\d*).*?>.*?<a.*? href="#(.*?)".*?>.*?<\/a><\/h\1>/gi
-
 const enableNoResults = ref(false)
 
 watch(filterText, () => {
@@ -155,8 +152,13 @@ debouncedWatch(
     if (canceled) return
     const c = new Map<string, Map<string, string>>()
     for (const { id, mod } of mods) {
+      const mapId = id.slice(0, id.indexOf('#'))
+      let map = c.get(mapId)
+      if (map) continue
+      map = new Map()
+      c.set(mapId, map)
       const comp = mod.default ?? mod
-      if (comp?.render) {
+      if (comp?.render || comp?.setup) {
         const app = createApp(comp)
         // Silence warnings about missing components
         app.config.warnHandler = () => {}
@@ -175,20 +177,17 @@ debouncedWatch(
         })
         const div = document.createElement('div')
         app.mount(div)
-        const sections = div.innerHTML.split(headingRegex)
+        const headings = div.querySelectorAll('h1, h2, h3, h4, h5, h6')
+        headings.forEach((el) => {
+          const href = el.querySelector('a')?.getAttribute('href')
+          const anchor = href?.startsWith('#') && href.slice(1)
+          if (!anchor) return
+          let html = ''
+          while ((el = el.nextElementSibling!) && !/^h[1-6]$/i.test(el.tagName))
+            html += el.outerHTML
+          map!.set(anchor, html)
+        })
         app.unmount()
-        sections.shift()
-        const mapId = id.slice(0, id.indexOf('#'))
-        let map = c.get(mapId)
-        if (!map) {
-          map = new Map()
-          c.set(mapId, map)
-        }
-        for (let i = 0; i < sections.length; i += 3) {
-          const anchor = sections[i + 1]
-          const html = sections[i + 2]
-          map.set(anchor, html)
-        }
       }
       if (canceled) return
     }
@@ -241,10 +240,12 @@ async function fetchExcerpt(id: string) {
 /* Search input focus */
 
 const searchInput = ref<HTMLInputElement>()
-
-function focusSearchInput() {
+const disableReset = computed(() => {
+  return filterText.value?.length <= 0
+})
+function focusSearchInput(select = true) {
   searchInput.value?.focus()
-  searchInput.value?.select()
+  select && searchInput.value?.select()
 }
 
 onMounted(() => {
@@ -259,11 +260,11 @@ function onSearchBarClick(event: PointerEvent) {
 
 /* Search keyboard selection */
 
-const selectedIndex = ref(0)
+const selectedIndex = ref(-1)
 const disableMouseOver = ref(false)
 
-watch(results, () => {
-  selectedIndex.value = 0
+watch(results, (r) => {
+  selectedIndex.value = r.length ? 0 : -1
   scrollToSelectedResult()
 })
 
@@ -360,6 +361,11 @@ onBeforeUnmount(() => {
   isLocked.value = false
 })
 
+function resetSearch() {
+  filterText.value = ''
+  nextTick().then(() => focusSearchInput(false))
+}
+
 function formMarkRegex(terms: Set<string>) {
   return new RegExp(
     [...terms]
@@ -377,34 +383,44 @@ function formMarkRegex(terms: Set<string>) {
 
 <template>
   <Teleport to="body">
-    <div ref="el" class="VPLocalSearchBox" aria-modal="true">
+    <div
+      ref="el"
+      role="button"
+      :aria-owns="results?.length ? 'localsearch-list' : undefined"
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-labelledby="localsearch-label"
+      class="VPLocalSearchBox"
+    >
       <div class="backdrop" @click="$emit('close')" />
 
       <div class="shell">
-        <div class="search-bar" @pointerup="onSearchBarClick($event)">
-          <svg
-            class="search-icon"
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <g
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
+        <form class="search-bar" @pointerup="onSearchBarClick($event)" @submit.prevent="">
+          <label :title="placeholder" id="localsearch-label" for="localsearch-input">
+            <svg
+              class="search-icon"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
             >
-              <circle cx="11" cy="11" r="8" />
-              <path d="m21 21l-4.35-4.35" />
-            </g>
-          </svg>
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <circle cx="11" cy="11" r="8" />
+                <path d="m21 21l-4.35-4.35" />
+              </g>
+            </svg>
+          </label>
           <div class="search-actions before">
             <button
               class="back-button"
               :title="$t('modal.backButtonTitle')"
-              @click="$emit('close')"
+              @click="selectedIndex > -1 && $emit('close')"
             >
               <svg
                 width="18"
@@ -427,6 +443,8 @@ function formMarkRegex(terms: Set<string>) {
             ref="searchInput"
             v-model="filterText"
             :placeholder="placeholder"
+            id="localsearch-input"
+            aria-labelledby="localsearch-label"
             class="search-input"
           />
           <div class="search-actions">
@@ -435,7 +453,7 @@ function formMarkRegex(terms: Set<string>) {
               class="toggle-layout-button"
               :class="{ 'detailed-list': showDetailedList }"
               :title="$t('modal.displayDetails')"
-              @click="showDetailedList = !showDetailedList"
+              @click="selectedIndex > -1 && (showDetailedList = !showDetailedList)"
             >
               <svg
                 width="18"
@@ -456,8 +474,10 @@ function formMarkRegex(terms: Set<string>) {
 
             <button
               class="clear-button"
+              type="reset"
+              :disabled="disableReset"
               :title="$t('modal.resetButtonTitle')"
-              @click="filterText = ''"
+              @click="resetSearch"
             >
               <svg
                 width="18"
@@ -476,65 +496,72 @@ function formMarkRegex(terms: Set<string>) {
               </svg>
             </button>
           </div>
-        </div>
+        </form>
 
-        <div
+        <ul
           ref="resultsEl"
+          :id="results?.length ? 'localsearch-list' : undefined"
+          :role="results?.length ? 'listbox' : undefined"
+          :aria-labelledby="results?.length ? 'localsearch-label' : undefined"
           class="results"
           @mousemove="disableMouseOver = false"
         >
-          <a
+          <li
             v-for="(p, index) in results"
             :key="p.id"
-            :href="p.id"
-            class="result"
-            :class="{
-              selected: selectedIndex === index
-            }"
-            :aria-label="[...p.titles, p.title].join(' > ')"
-            @mouseenter="!disableMouseOver && (selectedIndex = index)"
-            @focusin="selectedIndex = index"
-            @click="$emit('close')"
+            role="option"
+            :aria-selected="selectedIndex === index ? 'true' : 'false'"
           >
-            <div>
-              <div class="titles">
-                <span class="title-icon">#</span>
-                <span v-for="(t, index) in p.titles" :key="index" class="title">
-                  <span class="text" v-html="t" />
-                  <svg width="18" height="18" viewBox="0 0 24 24">
-                    <path
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="m9 18l6-6l-6-6"
-                    />
-                  </svg>
-                </span>
-                <span class="title main">
-                  <span class="text" v-html="p.title" />
-                </span>
-              </div>
+            <a
+              :href="p.id"
+              class="result"
+              :class="{
+                selected: selectedIndex === index
+              }"
+              :aria-label="[...p.titles, p.title].join(' > ')"
+              @mouseenter="!disableMouseOver && (selectedIndex = index)"
+              @focusin="selectedIndex = index"
+              @click="$emit('close')"
+            >
+              <div>
+                <div class="titles">
+                  <span class="title-icon">#</span>
+                  <span v-for="(t, index) in p.titles" :key="index" class="title">
+                    <span class="text" v-html="t" />
+                    <svg width="18" height="18" viewBox="0 0 24 24">
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="m9 18l6-6l-6-6"
+                      />
+                    </svg>
+                  </span>
+                  <span class="title main">
+                    <span class="text" v-html="p.title" />
+                  </span>
+                </div>
 
-              <div v-if="showDetailedList" class="excerpt-wrapper">
-                <div v-if="p.text" class="excerpt" inert>
-                  <div class="vp-doc" v-html="p.text" />
+                <div v-if="showDetailedList" class="excerpt-wrapper">
+                  <div v-if="p.text" class="excerpt" inert>
+                    <div class="vp-doc" v-html="p.text"  />
+                  </div>
+                  <div class="excerpt-gradient-bottom" />
+                  <div class="excerpt-gradient-top" />
                 </div>
-                <div class="excerpt-gradient-bottom" />
-                <div class="excerpt-gradient-top" />
               </div>
-            </div>
-          </a>
-
-          <div
+            </a>
+          </li>
+          <li
             v-if="filterText && !results.length && enableNoResults"
             class="no-results"
           >
             {{ $t('modal.noResultsText') }} "<strong>{{ filterText }}</strong
             >"
-          </div>
-        </div>
+          </li>
+        </ul>
 
         <div class="search-keyboard-shortcuts">
           <span>
@@ -692,11 +719,15 @@ function formMarkRegex(terms: Set<string>) {
   padding: 8px;
 }
 
-.search-actions button:hover,
+.search-actions button:not([disabled]):hover,
 .toggle-layout-button.detailed-list {
   color: var(--vp-c-brand);
 }
 
+.search-actions button.clear-button:disabled {
+    opacity: 0.37;
+}
+
 .search-keyboard-shortcuts {
   font-size: 0.8rem;
   opacity: 75%;

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

@@ -62,15 +62,10 @@ const classes = computed(() => ({
   border-bottom: 1px solid transparent;
   padding: 0 8px 0 24px;
   height: var(--vp-nav-height);
-  transition: border-color 0.5s, background-color 0.5s;
   pointer-events: none;
   white-space: nowrap;
 }
 
-.VPNavBar.has-sidebar {
-  border-bottom-color: var(--vp-c-gutter);
-}
-
 @media (min-width: 768px) {
   .VPNavBar {
     padding: 0 32px;
@@ -79,7 +74,6 @@ const classes = computed(() => ({
 
 @media (min-width: 960px) {
   .VPNavBar.has-sidebar {
-    border-bottom-color: transparent;
     padding: 0;
   }
 

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

@@ -26,6 +26,7 @@ const { theme, localeIndex } = useData()
 // payload), we delay initializing it until the user has actually clicked or
 // hit the hotkey to invoke it.
 const loaded = ref(false)
+const actuallyLoaded = ref(false)
 
 const buttonText = computed(() => {
   const options = theme.value.search?.options ?? theme.value.algolia
@@ -169,9 +170,10 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
       <VPAlgoliaSearchBox
         v-if="loaded"
         :algolia="theme.search?.options ?? theme.algolia"
+        @vue:beforeMount="actuallyLoaded = true"
       />
 
-      <div v-else id="docsearch">
+      <div v-if="!actuallyLoaded" id="docsearch">
         <VPNavBarSearchButton :placeholder="buttonText" @click="load" />
       </div>
     </template>

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

@@ -59,10 +59,6 @@ function focusOnTargetAnchor({ target }: Event) {
   clip-path: none;
 }
 
-.dark .VPSkipLink {
-  color: var(--vp-c-green);
-}
-
 @media (min-width: 1280px) {
   .VPSkipLink {
     top: 14px;

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

@@ -6,6 +6,7 @@ import { icons } from '../support/socialIcons'
 const props = defineProps<{
   icon: DefaultTheme.SocialLinkIcon
   link: string
+  ariaLabel?: string
 }>()
 
 const svg = computed(() => {
@@ -18,7 +19,7 @@ const svg = computed(() => {
   <a
     class="VPSocialLink"
     :href="link"
-    :aria-label="typeof icon === 'string' ? icon : ''"
+    :aria-label="ariaLabel ?? (typeof icon === 'string' ? icon : '')"
     target="_blank"
     rel="noopener"
     v-html="svg"

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

@@ -10,10 +10,11 @@ defineProps<{
 <template>
   <div class="VPSocialLinks">
     <VPSocialLink
-      v-for="{ link, icon } in links"
+      v-for="{ link, icon, ariaLabel } in links"
       :key="link"
       :icon="icon"
       :link="link"
+      :ariaLabel="ariaLabel"
     />
   </div>
 </template>

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

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { ref, onMounted, watch } from 'vue'
 import { useData } from '../composables/data'
-import { APPEARANCE_KEY } from '../../shared'
+import { inBrowser, APPEARANCE_KEY } from '../../shared'
 import VPSwitch from './VPSwitch.vue'
 import VPIconSun from './icons/VPIconSun.vue'
 import VPIconMoon from './icons/VPIconMoon.vue'
 
 const { site, isDark } = useData()
 const checked = ref(false)
-const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
+const toggle = inBrowser ? useAppearance() : () => {}
 
 onMounted(() => {
   checked.value = document.documentElement.classList.contains('dark')

package/dist/client/theme-default/composables/outline.js

@@ -1,5 +1,5 @@
 import { onMounted, onUnmounted, onUpdated } from 'vue';
-import { useAside } from '../composables/aside';
+import { useAside } from './aside';
 import { throttleAndDebounce } from '../support/utils';
 // magic number to avoid repeated retrieval
 const PAGE_OFFSET = 71;

package/dist/client/theme-default/composables/prev-next.js

@@ -10,8 +10,12 @@ export function usePrevNext() {
         const index = candidates.findIndex((link) => {
             return isActive(page.value.relativePath, link.link);
         });
+        const hidePrev = (theme.value.docFooter?.prev === false && !frontmatter.value.prev) ||
+            frontmatter.value.prev === false;
+        const hideNext = (theme.value.docFooter?.next === false && !frontmatter.value.next) ||
+            frontmatter.value.next === false;
         return {
-            prev: frontmatter.value.prev === false
+            prev: hidePrev
                 ? undefined
                 : {
                     text: (typeof frontmatter.value.prev === 'string'
@@ -23,7 +27,7 @@ export function usePrevNext() {
                         ? frontmatter.value.prev.link
                         : undefined) ?? candidates[index - 1]?.link
                 },
-            next: frontmatter.value.next === false
+            next: hideNext
                 ? undefined
                 : {
                     text: (typeof frontmatter.value.next === 'string'

package/dist/client/theme-default/styles/components/vp-code-group.css

@@ -56,7 +56,7 @@
   right: 8px;
   bottom: -1px;
   left: 8px;
-  z-index: 10;
+  z-index: 1;
   height: 1px;
   content: '';
   background-color: transparent;