vitepress 1.2.2 → 1.3.0

package/dist/client/app/data.js

@@ -22,7 +22,7 @@ export function initData(route) {
         : appearance
             ? useDark({
                 storageKey: APPEARANCE_KEY,
-                initialValue: () => typeof appearance === 'string' ? appearance : 'auto',
+                initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'),
                 ...(typeof appearance === 'object' ? appearance : {})
             })
             : ref(false);

package/dist/client/app/router.js

@@ -117,52 +117,53 @@ export function createRouter(loadPageModule, fallbackComponent) {
             history.replaceState({}, '');
         }
         window.addEventListener('click', (e) => {
-            // temporary fix for docsearch action buttons
-            const button = e.target.closest('button');
-            if (button)
+            if (e.defaultPrevented ||
+                !(e.target instanceof Element) ||
+                e.target.closest('button') || // temporary fix for docsearch action buttons
+                e.button !== 0 ||
+                e.ctrlKey ||
+                e.shiftKey ||
+                e.altKey ||
+                e.metaKey)
                 return;
             const link = e.target.closest('a');
-            if (link &&
-                !link.closest('.vp-raw') &&
-                (link instanceof SVGElement || !link.download)) {
-                const { target } = link;
-                const { href, origin, pathname, hash, search } = new URL(link.href instanceof SVGAnimatedString
-                    ? link.href.animVal
-                    : link.href, link.baseURI);
-                const currentUrl = new URL(location.href); // copy to keep old data
-                // only intercept inbound html links
-                if (!e.ctrlKey &&
-                    !e.shiftKey &&
-                    !e.altKey &&
-                    !e.metaKey &&
-                    !target &&
-                    origin === currentUrl.origin &&
-                    treatAsHtml(pathname)) {
-                    e.preventDefault();
-                    if (pathname === currentUrl.pathname &&
-                        search === currentUrl.search) {
-                        // scroll between hash anchors in the same page
-                        // avoid duplicate history entries when the hash is same
-                        if (hash !== currentUrl.hash) {
-                            history.pushState({}, '', href);
-                            // still emit the event so we can listen to it in themes
-                            window.dispatchEvent(new HashChangeEvent('hashchange', {
-                                oldURL: currentUrl.href,
-                                newURL: href
-                            }));
-                        }
-                        if (hash) {
-                            // use smooth scroll when clicking on header anchor links
-                            scrollTo(link, hash, link.classList.contains('header-anchor'));
-                        }
-                        else {
-                            window.scrollTo(0, 0);
-                        }
+            if (!link ||
+                link.closest('.vp-raw') ||
+                link.hasAttribute('download') ||
+                link.hasAttribute('target'))
+                return;
+            const linkHref = link.getAttribute('href') ??
+                (link instanceof SVGAElement ? link.getAttribute('xlink:href') : null);
+            if (linkHref == null)
+                return;
+            const { href, origin, pathname, hash, search } = new URL(linkHref, link.baseURI);
+            const currentUrl = new URL(location.href); // copy to keep old data
+            // only intercept inbound html links
+            if (origin === currentUrl.origin && treatAsHtml(pathname)) {
+                e.preventDefault();
+                if (pathname === currentUrl.pathname &&
+                    search === currentUrl.search) {
+                    // scroll between hash anchors in the same page
+                    // avoid duplicate history entries when the hash is same
+                    if (hash !== currentUrl.hash) {
+                        history.pushState({}, '', href);
+                        // still emit the event so we can listen to it in themes
+                        window.dispatchEvent(new HashChangeEvent('hashchange', {
+                            oldURL: currentUrl.href,
+                            newURL: href
+                        }));
+                    }
+                    if (hash) {
+                        // use smooth scroll when clicking on header anchor links
+                        scrollTo(link, hash, link.classList.contains('header-anchor'));
                     }
                     else {
-                        go(href);
+                        window.scrollTo(0, 0);
                     }
                 }
+                else {
+                    go(href);
+                }
             }
         }, { capture: true });
         window.addEventListener('popstate', async (e) => {

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

@@ -11,15 +11,17 @@ const { theme, page, frontmatter } = useData()
 const editLink = useEditLink()
 const control = usePrevNext()
 
-const hasEditLink = computed(() => {
-  return theme.value.editLink && frontmatter.value.editLink !== false
-})
-const hasLastUpdated = computed(() => {
-  return page.value.lastUpdated && frontmatter.value.lastUpdated !== false
-})
-const showFooter = computed(() => {
-  return hasEditLink.value || hasLastUpdated.value || control.value.prev || control.value.next
-})
+const hasEditLink = computed(
+  () => theme.value.editLink && frontmatter.value.editLink !== false
+)
+const hasLastUpdated = computed(() => page.value.lastUpdated)
+const showFooter = computed(
+  () =>
+    hasEditLink.value ||
+    hasLastUpdated.value ||
+    control.value.prev ||
+    control.value.next
+)
 </script>
 
 <template>
@@ -47,14 +49,28 @@ const showFooter = computed(() => {
       <span class="visually-hidden" id="doc-footer-aria-label">Pager</span>
 
       <div class="pager">
-        <VPLink v-if="control.prev?.link" class="pager-link prev" :href="control.prev.link">
-          <span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>
+        <VPLink
+          v-if="control.prev?.link"
+          class="pager-link prev"
+          :href="control.prev.link"
+        >
+          <span
+            class="desc"
+            v-html="theme.docFooter?.prev || 'Previous page'"
+          ></span>
           <span class="title" v-html="control.prev.text"></span>
         </VPLink>
       </div>
       <div class="pager">
-        <VPLink v-if="control.next?.link" class="pager-link next" :href="control.next.link">
-          <span class="desc" v-html="theme.docFooter?.next || 'Next page'"></span>
+        <VPLink
+          v-if="control.next?.link"
+          class="pager-link next"
+          :href="control.next.link"
+        >
+          <span
+            class="desc"
+            v-html="theme.docFooter?.next || 'Next page'"
+          ></span>
           <span class="title" v-html="control.next.text"></span>
         </VPLink>
       </div>

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

@@ -2,10 +2,10 @@
 import { ref, computed, watchEffect, onMounted } from 'vue'
 import { useData } from '../composables/data'
 
-const { theme, page, frontmatter, lang } = useData()
+const { theme, page, lang } = useData()
 
 const date = computed(
-  () => new Date(frontmatter.value.lastUpdated ?? page.value.lastUpdated)
+  () => new Date(page.value.lastUpdated!)
 )
 const isoDatetime = computed(() => date.value.toISOString())
 const datetime = ref('')

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

@@ -10,8 +10,13 @@ defineProps<{
 <template>
   <div class="VPMenu">
     <div v-if="items" class="items">
-      <template v-for="item in items" :key="item.text">
+      <template v-for="item in items" :key="JSON.stringify(item)">
         <VPMenuLink v-if="'link' in item" :item="item" />
+        <component
+          v-else-if="'component' in item"
+          :is="item.component"
+          v-bind="item.props"
+        />
         <VPMenuGroup v-else :text="item.text" :items="item.items" />
       </template>
     </div>
@@ -63,7 +68,7 @@ defineProps<{
   font-size: 12px;
   font-weight: 500;
   color: var(--vp-c-text-2);
-  transition: color .5s;
+  transition: color 0.5s;
 }
 
 .VPMenu :deep(.action) {

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

@@ -12,7 +12,7 @@ import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
 import VPNavBarTitle from './VPNavBarTitle.vue'
 import VPNavBarTranslations from './VPNavBarTranslations.vue'
 
-defineProps<{
+const props = defineProps<{
   isScreenOpen: boolean
 }>()
 
@@ -31,6 +31,7 @@ watchPostEffect(() => {
     'has-sidebar': hasSidebar.value,
     'home': frontmatter.value.layout === 'home',
     'top': y.value === 0,
+    'screen-open': props.isScreenOpen
   }
 })
 </script>
@@ -74,7 +75,13 @@ watchPostEffect(() => {
   height: var(--vp-nav-height);
   pointer-events: none;
   white-space: nowrap;
-  transition: background-color 0.5s;
+  transition: background-color 0.25s;
+}
+
+.VPNavBar.screen-open {
+  transition: none;
+  background-color: var(--vp-nav-bg-color);
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .VPNavBar:not(.home) {
@@ -255,7 +262,7 @@ watchPostEffect(() => {
   background-color: var(--vp-c-gutter);
 }
 
-@media (min-width: 960px) { 
+@media (min-width: 960px) {
   .VPNavBar:not(.home.top) .divider-line {
     background-color: var(--vp-c-gutter);
   }

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

@@ -6,7 +6,14 @@ const { site } = useData()
 </script>
 
 <template>
-  <div v-if="site.appearance && site.appearance !== 'force-dark'" class="VPNavBarAppearance">
+  <div
+    v-if="
+      site.appearance &&
+      site.appearance !== 'force-dark' &&
+      site.appearance !== 'force-auto'
+    "
+    class="VPNavBarAppearance"
+  >
     <VPSwitchAppearance />
   </div>
 </template>

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

@@ -19,8 +19,15 @@ const hasExtraContent = computed(
 </script>
 
 <template>
-  <VPFlyout v-if="hasExtraContent" class="VPNavBarExtra" label="extra navigation">
-    <div v-if="localeLinks.length && currentLang.label" class="group translations">
+  <VPFlyout
+    v-if="hasExtraContent"
+    class="VPNavBarExtra"
+    label="extra navigation"
+  >
+    <div
+      v-if="localeLinks.length && currentLang.label"
+      class="group translations"
+    >
       <p class="trans-title">{{ currentLang.label }}</p>
 
       <template v-for="locale in localeLinks" :key="locale.link">
@@ -28,7 +35,14 @@ const hasExtraContent = computed(
       </template>
     </div>
 
-    <div v-if="site.appearance && site.appearance !== 'force-dark'" class="group">
+    <div
+      v-if="
+        site.appearance &&
+        site.appearance !== 'force-dark' &&
+        site.appearance !== 'force-auto'
+      "
+      class="group"
+    >
       <div class="item appearance">
         <p class="label">
           {{ theme.darkModeSwitchLabel || 'Appearance' }}

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

@@ -7,10 +7,21 @@ const { theme } = useData()
 </script>
 
 <template>
-  <nav v-if="theme.nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
-    <span id="main-nav-aria-label" class="visually-hidden">Main Navigation</span>
-    <template v-for="item in theme.nav" :key="item.text">
+  <nav
+    v-if="theme.nav"
+    aria-labelledby="main-nav-aria-label"
+    class="VPNavBarMenu"
+  >
+    <span id="main-nav-aria-label" class="visually-hidden">
+      Main Navigation
+    </span>
+    <template v-for="item in theme.nav" :key="JSON.stringify(item)">
       <VPNavBarMenuLink v-if="'link' in item" :item="item" />
+      <component
+        v-else-if="'component' in item"
+        :is="item.component"
+        v-bind="item.props"
+      />
       <VPNavBarMenuGroup v-else :item="item" />
     </template>
   </nav>

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

@@ -12,15 +12,17 @@ const props = defineProps<{
 const { page } = useData()
 
 const isChildActive = (navItem: DefaultTheme.NavItem) => {
+  if ('component' in navItem) return false
+
   if ('link' in navItem) {
     return isActive(
       page.value.relativePath,
       navItem.link,
       !!props.item.activeMatch
     )
-  } else {
-    return navItem.items.some(isChildActive)
   }
+
+  return navItem.items.some(isChildActive)
 }
 
 const childrenActive = computed(() => isChildActive(props.item))
@@ -30,11 +32,9 @@ const childrenActive = computed(() => isChildActive(props.item))
   <VPFlyout
     :class="{
       VPNavBarMenuGroup: true,
-      active: isActive(
-        page.relativePath,
-        item.activeMatch,
-        !!item.activeMatch
-      ) || childrenActive
+      active:
+        isActive(page.relativePath, item.activeMatch, !!item.activeMatch) ||
+        childrenActive
     }"
     :button="item.text"
     :items="item.items"

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

@@ -37,7 +37,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);
+  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
   /*rtl:ignore*/
   right: 0;
   bottom: 0;
@@ -47,7 +47,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   width: 100%;
   background-color: var(--vp-nav-screen-bg-color);
   overflow-y: auto;
-  transition: background-color 0.5s;
+  transition: background-color 0.25s;
   pointer-events: auto;
 }
 

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

@@ -6,7 +6,14 @@ const { site, theme } = useData()
 </script>
 
 <template>
-  <div v-if="site.appearance && site.appearance !== 'force-dark'" class="VPNavScreenAppearance">
+  <div
+    v-if="
+      site.appearance &&
+      site.appearance !== 'force-dark' &&
+      site.appearance !== 'force-auto'
+    "
+    class="VPNavScreenAppearance"
+  >
     <p class="text">
       {{ theme.darkModeSwitchLabel || 'Appearance' }}
     </p>

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

@@ -8,10 +8,13 @@ const { theme } = useData()
 
 <template>
   <nav v-if="theme.nav" class="VPNavScreenMenu">
-    <template v-for="item in theme.nav" :key="item.text">
-      <VPNavScreenMenuLink
-        v-if="'link' in item"
-        :item="item"
+    <template v-for="item in theme.nav" :key="JSON.stringify(item)">
+      <VPNavScreenMenuLink v-if="'link' in item" :item="item" />
+      <component
+        v-else-if="'component' in item"
+        :is="item.component"
+        v-bind="item.props"
+        screen-menu
       />
       <VPNavScreenMenuGroup
         v-else

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

@@ -10,8 +10,8 @@ const props = defineProps<{
 
 const isOpen = ref(false)
 
-const groupId = computed(() =>
-  `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`
+const groupId = computed(
+  () => `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`
 )
 
 function toggle() {
@@ -32,16 +32,17 @@ function toggle() {
     </button>
 
     <div :id="groupId" class="items">
-      <template v-for="item in items" :key="item.text">
-        <div v-if="'link' in item" :key="item.text" class="item">
+      <template v-for="item in items" :key="JSON.stringify(item)">
+        <div v-if="'link' in item" class="item">
           <VPNavScreenMenuGroupLink :item="item" />
         </div>
 
+        <div v-else-if="'component' in item" class="item">
+          <component :is="item.component" v-bind="item.props" screen-menu />
+        </div>
+
         <div v-else class="group">
-          <VPNavScreenMenuGroupSection
-            :text="item.text"
-            :items="item.items"
-          />
+          <VPNavScreenMenuGroupSection :items="item.items" />
         </div>
       </template>
     </div>

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

@@ -3,7 +3,7 @@ import { useScrollLock } from '@vueuse/core'
 import { inBrowser } from 'vitepress'
 import { ref, watch } from 'vue'
 import { useSidebar } from '../composables/sidebar'
-import VPSidebarItem from './VPSidebarItem.vue'
+import VPSidebarGroup from './VPSidebarGroup.vue'
 
 const { sidebarGroups, hasSidebar } = useSidebar()
 
@@ -25,6 +25,16 @@ watch(
   },
   { immediate: true, flush: 'post' }
 )
+
+const key = ref(0)
+
+watch(
+  sidebarGroups,
+  () => {
+    key.value += 1
+  },
+  { deep: true }
+)
 </script>
 
 <template>
@@ -37,17 +47,18 @@ watch(
   >
     <div class="curtain" />
 
-    <nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1">
+    <nav
+      class="nav"
+      id="VPSidebarNav"
+      aria-labelledby="sidebar-aria-label"
+      tabindex="-1"
+    >
       <span class="visually-hidden" id="sidebar-aria-label">
         Sidebar Navigation
       </span>
 
       <slot name="sidebar-nav-before" />
-
-      <div v-for="item in sidebarGroups" :key="item.text" class="group">
-        <VPSidebarItem :item="item" :depth="0" />
-      </div>
-
+      <VPSidebarGroup :items="sidebarGroups" :key="key" />
       <slot name="sidebar-nav-after" />
     </nav>
   </aside>
@@ -122,16 +133,4 @@ watch(
 .nav {
   outline: 0;
 }
-
-.group + .group {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 10px;
-}
-
-@media (min-width: 960px) {
-  .group {
-    padding-top: 10px;
-    width: calc(var(--vp-sidebar-width) - 64px);
-  }
-}
 </style>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import VPSidebarItem from './VPSidebarItem.vue'
+
+defineProps<{
+  items: DefaultTheme.SidebarItem[]
+}>()
+
+const disableTransition = ref(true)
+
+let timer: ReturnType<typeof setTimeout> | null = null
+
+onMounted(() => {
+  timer = setTimeout(() => {
+    timer = null
+    disableTransition.value = false
+  }, 300)
+})
+
+onBeforeUnmount(() => {
+  if (timer != null) {
+    clearTimeout(timer)
+    timer = null
+  }
+})
+</script>
+
+<template>
+  <div
+    v-for="item in items"
+    :key="item.text"
+    class="group"
+    :class="{ 'no-transition': disableTransition }"
+  >
+    <VPSidebarItem :item="item" :depth="0" />
+  </div>
+</template>
+
+<style scoped>
+.no-transition :deep(.caret-icon) {
+  transition: none;
+}
+
+.group + .group {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 10px;
+}
+
+@media (min-width: 960px) {
+  .group {
+    padding-top: 10px;
+    width: calc(var(--vp-sidebar-width) - 64px);
+  }
+}
+</style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
 import { useSidebarControl } from '../composables/sidebar'
 import VPLink from './VPLink.vue'
 
@@ -27,8 +27,8 @@ const textTag = computed(() => {
   return !hasChildren.value
     ? 'p'
     : props.depth + 2 === 7
-    ? 'p'
-    : `h${props.depth + 2}`
+      ? 'p'
+      : `h${props.depth + 2}`
 })
 
 const itemRole = computed(() => (isLink.value ? undefined : 'button'))

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, computed } from 'vue'
+import { inject, ref, watchPostEffect } from 'vue'
 import { useData } from '../composables/data'
 import VPSwitch from './VPSwitch.vue'
 
@@ -9,8 +9,10 @@ const toggleAppearance = inject('toggle-appearance', () => {
   isDark.value = !isDark.value
 })
 
-const switchTitle = computed(() => {
-  return isDark.value
+const switchTitle = ref('')
+
+watchPostEffect(() => {
+  switchTitle.value = isDark.value
     ? theme.value.lightModeSwitchTitle || 'Switch to light theme'
     : theme.value.darkModeSwitchTitle || 'Switch to dark theme'
 })

package/dist/client/theme-default/styles/base.css

@@ -242,8 +242,7 @@ vite-error-overlay {
 }
 
 mjx-container {
-  display: inline-block;
-  margin: auto 2px -2px;
+  overflow-x: auto;
 }
 
 mjx-container > svg {

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

@@ -35,6 +35,13 @@
   font-size: 20px;
 }
 
+.vp-doc h4 {
+  margin: 24px 0 0;
+  letter-spacing: -0.01em;
+  line-height: 24px;
+  font-size: 18px;
+}
+
 .vp-doc .header-anchor {
   position: absolute;
   top: 0;
@@ -98,12 +105,12 @@
   border-left: 2px solid var(--vp-c-divider);
   padding-left: 16px;
   transition: border-color 0.5s;
+  color: var(--vp-c-text-2);
 }
 
 .vp-doc blockquote > p {
   margin: 0;
   font-size: 16px;
-  color: var(--vp-c-text-2);
   transition: color 0.5s;
 }
 
@@ -262,7 +269,8 @@
 
 .vp-doc h1 > code,
 .vp-doc h2 > code,
-.vp-doc h3 > code {
+.vp-doc h3 > code,
+.vp-doc h4 > code {
   font-size: 0.9em;
 }