vitepress 1.0.0-beta.3 → 1.0.0-beta.4

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

@@ -52,7 +52,8 @@ export function usePrefetch() {
                     if (!hasFetched.has(pathname)) {
                         hasFetched.add(pathname);
                         const pageChunkPath = pathToFile(pathname);
-                        doFetch(pageChunkPath);
+                        if (pageChunkPath)
+                            doFetch(pageChunkPath);
                     }
                 }
             });
@@ -61,7 +62,6 @@ export function usePrefetch() {
             document
                 .querySelectorAll('#app a')
                 .forEach((link) => {
-                const { target } = link;
                 const { hostname, pathname } = new URL(link.href instanceof SVGAnimatedString
                     ? link.href.animVal
                     : link.href, link.baseURI);
@@ -72,7 +72,7 @@ export function usePrefetch() {
                 if (
                 // only prefetch same tab navigation, since a new tab will load
                 // the lean js chunk instead.
-                target !== `_blank` &&
+                link.target !== '_blank' &&
                     // only prefetch inbound links
                     hostname === location.hostname) {
                     if (pathname !== location.pathname) {

package/dist/client/app/index.js

@@ -1,15 +1,14 @@
-import { createApp as createClientApp, createSSRApp, defineComponent, h, onMounted, watchEffect } from 'vue';
 import RawTheme from '@theme/index';
-import { inBrowser, pathToFile } from './utils';
-import { RouterSymbol, createRouter, scrollTo } from './router';
-import { siteDataRef, useData } from './data';
-import { useUpdateHead } from './composables/head';
-import { usePrefetch } from './composables/preFetch';
-import { dataSymbol, initData } from './data';
-import { Content } from './components/Content';
+import { createApp as createClientApp, createSSRApp, defineComponent, h, onMounted, watchEffect } from 'vue';
 import { ClientOnly } from './components/ClientOnly';
-import { useCopyCode } from './composables/copyCode';
+import { Content } from './components/Content';
 import { useCodeGroups } from './composables/codeGroups';
+import { useCopyCode } from './composables/copyCode';
+import { useUpdateHead } from './composables/head';
+import { usePrefetch } from './composables/preFetch';
+import { dataSymbol, initData, siteDataRef, useData } from './data';
+import { RouterSymbol, createRouter, scrollTo } from './router';
+import { inBrowser, pathToFile } from './utils';
 function resolveThemeExtends(theme) {
     if (theme.extends) {
         const base = resolveThemeExtends(theme.extends);
@@ -96,6 +95,8 @@ function newRouter() {
     let initialPath;
     return createRouter((path) => {
         let pageFilePath = pathToFile(path);
+        if (!pageFilePath)
+            return null;
         if (isInitialPageLoad) {
             initialPath = pageFilePath;
         }
@@ -120,7 +121,7 @@ if (inBrowser) {
             app.mount('#app');
             // scroll to hash on new tab during dev
             if (import.meta.env.DEV && location.hash) {
-                const target = document.querySelector(decodeURIComponent(location.hash));
+                const target = document.getElementById(decodeURIComponent(location.hash).slice(1));
                 if (target) {
                     scrollTo(target, location.hash);
                 }

package/dist/client/app/router.js

@@ -5,7 +5,7 @@ import { siteDataRef } from './data';
 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 fakeHost = 'http://a.com';
 const getDefaultRoute = () => ({
     path: '/',
     component: null,
@@ -18,7 +18,8 @@ export function createRouter(loadPageModule, fallbackComponent) {
         go
     };
     async function go(href = inBrowser ? location.href : '/') {
-        await router.onBeforeRouteChange?.(href);
+        if ((await router.onBeforeRouteChange?.(href)) === false)
+            return;
         const url = new URL(href, fakeHost);
         if (!siteDataRef.value.cleanUrls) {
             // ensure correct deep link so page refresh lands on correct files.
@@ -38,10 +39,15 @@ export function createRouter(loadPageModule, fallbackComponent) {
     }
     let latestPendingPath = null;
     async function loadPage(href, scrollPosition = 0, isRetry = false) {
+        if ((await router.onBeforePageLoad?.(href)) === false)
+            return;
         const targetLoc = new URL(href, fakeHost);
         const pendingPath = (latestPendingPath = targetLoc.pathname);
         try {
             let page = await loadPageModule(pendingPath);
+            if (!page) {
+                throw new Error(`Page not found: ${pendingPath}`);
+            }
             if (latestPendingPath === pendingPath) {
                 latestPendingPath = null;
                 const { default: comp, __pageData } = page;
@@ -68,7 +74,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
                         if (targetLoc.hash && !scrollPosition) {
                             let target = null;
                             try {
-                                target = document.querySelector(decodeURIComponent(targetLoc.hash));
+                                target = document.getElementById(decodeURIComponent(targetLoc.hash).slice(1));
                             }
                             catch (e) {
                                 console.warn(e);
@@ -84,7 +90,8 @@ export function createRouter(loadPageModule, fallbackComponent) {
             }
         }
         catch (err) {
-            if (!/fetch/.test(err.message) && !/^\/404(\.html|\/)?$/.test(href)) {
+            if (!/fetch|Page not found/.test(err.message) &&
+                !/^\/404(\.html|\/)?$/.test(href)) {
                 console.error(err);
             }
             // retry on fetch fail: the page to hash map may have been invalidated
@@ -128,7 +135,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
                     !e.shiftKey &&
                     !e.altKey &&
                     !e.metaKey &&
-                    target !== `_blank` &&
+                    !target &&
                     origin === currentUrl.origin &&
                     // don't intercept if non-html extension is present
                     !(extMatch && extMatch[0] !== '.html')) {
@@ -178,7 +185,7 @@ export function scrollTo(el, hash, smooth = false) {
     try {
         target = el.classList.contains('header-anchor')
             ? el
-            : document.querySelector(decodeURIComponent(hash));
+            : document.getElementById(decodeURIComponent(hash).slice(1));
     }
     catch (e) {
         console.warn(e);
@@ -207,16 +214,20 @@ export function scrollTo(el, hash, smooth = false) {
             offset +
             targetPadding;
         // only smooth scroll if distance is smaller than screen height.
-        if (!smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight) {
-            window.scrollTo(0, targetTop);
-        }
-        else {
-            window.scrollTo({
-                left: 0,
-                top: targetTop,
-                behavior: 'smooth'
-            });
+        function scrollToTarget() {
+            if (!smooth ||
+                Math.abs(targetTop - window.scrollY) > window.innerHeight) {
+                window.scrollTo(0, targetTop);
+            }
+            else {
+                window.scrollTo({
+                    left: 0,
+                    top: targetTop,
+                    behavior: 'smooth'
+                });
+            }
         }
+        requestAnimationFrame(scrollToTarget);
     }
 }
 function tryOffsetSelector(selector) {

package/dist/client/app/utils.js

@@ -41,6 +41,8 @@ export function pathToFile(path) {
                     : pagePath.slice(0, -3) + '_index.md';
                 pageHash = __VP_HASH_MAP__[pagePath.toLowerCase()];
             }
+            if (!pageHash)
+                return null;
             pagePath = `${base}assets/${pagePath}.${pageHash}.js`;
         }
         else {

package/dist/client/index.d.ts

@@ -11,9 +11,26 @@ interface Route {
     component: Component | null;
 }
 interface Router {
+    /**
+     * Current route.
+     */
     route: Route;
-    go: (href?: string) => Promise<void>;
-    onBeforeRouteChange?: (to: string) => Awaitable<void>;
+    /**
+     * Navigate to a new URL.
+     */
+    go: (to?: string) => Promise<void>;
+    /**
+     * Called before the route changes. Return `false` to cancel the navigation.
+     */
+    onBeforeRouteChange?: (to: string) => Awaitable<void | boolean>;
+    /**
+     * Called before the page component is loaded (after the history state is
+     * updated). Return `false` to cancel the navigation.
+     */
+    onBeforePageLoad?: (to: string) => Awaitable<void | boolean>;
+    /**
+     * Called after the route changes.
+     */
     onAfterRouteChanged?: (to: string) => Awaitable<void>;
 }
 declare function useRouter(): Router;

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

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { computed, provide, useSlots, watch } from 'vue'
 import { useRoute } from 'vitepress'
-import { useData } from './composables/data'
-import { useSidebar, useCloseSidebarOnEscape } from './composables/sidebar'
-import VPSkipLink from './components/VPSkipLink.vue'
+import { useSidebar } from 'vitepress/theme'
+import { computed, provide, useSlots, watch } from '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'
+import VPLocalNav from './components/VPLocalNav.vue'
+import VPNav from './components/VPNav.vue'
+import VPSidebar from './components/VPSidebar.vue'
+import VPSkipLink from './components/VPSkipLink.vue'
+import { useData } from './composables/data'
+import { useCloseSidebarOnEscape } from './composables/sidebar'
 
 const {
   isOpen: isSidebarOpen,
@@ -38,7 +39,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
-    <VPNav>
+    <VPNav v-if="frontmatter.navbar !== false">
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
       <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
@@ -56,7 +57,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     <VPContent>
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>
-      
+
       <template #not-found><slot name="not-found" /></template>
       <template #home-hero-before><slot name="home-hero-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { useSidebar } from 'vitepress/theme'
+import NotFound from '../NotFound.vue'
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
-import VPPage from './VPPage.vue'
-import VPHome from './VPHome.vue'
 import VPDoc from './VPDoc.vue'
-import NotFound from '../NotFound.vue'
+import VPHome from './VPHome.vue'
+import VPPage from './VPPage.vue'
 
 const { page, frontmatter } = useData()
 const { hasSidebar } = useSidebar()

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

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { useRoute } from 'vitepress'
+import { useSidebar } from 'vitepress/theme'
 import { computed } from 'vue'
-import { useSidebar } from '../composables/sidebar'
+import { useData } from '../composables/data'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 import VPDocOutlineDropdown from './VPDocOutlineDropdown.vue'
 
+const { theme } = useData()
+
 const route = useRoute()
 const { hasSidebar, hasAside, leftAside } = useSidebar()
 
@@ -42,7 +45,13 @@ const pageName = computed(() =>
           <slot name="doc-before" />
           <VPDocOutlineDropdown />
           <main class="main">
-            <Content class="vp-doc" :class="pageName" />
+            <Content
+              class="vp-doc"
+              :class="[
+                pageName,
+                theme.externalLinkIcon && 'external-link-icon-enabled'
+              ]"
+            />
           </main>
           <VPDocFooter>
             <template #doc-footer-before><slot name="doc-footer-before" /></template>
@@ -193,4 +202,8 @@ const pageName = computed(() =>
 .VPDoc.has-aside .content-container {
   max-width: 688px;
 }
+
+.external-link-icon-enabled :is(.vp-doc a[href*='://'], .vp-doc a[target='_blank'])::after {
+  content: '';
+}
 </style>

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

@@ -2,7 +2,7 @@
 import { ref, computed, watchEffect, onMounted } from 'vue'
 import { useData } from '../composables/data'
 
-const { theme, page, lang } = useData()
+const { theme, page } = useData()
 
 const date = computed(() => new Date(page.value.lastUpdated!))
 const isoDatetime = computed(() => date.value.toISOString())
@@ -12,14 +12,20 @@ const datetime = ref('')
 // potential differences in timezones of the server and clients
 onMounted(() => {
   watchEffect(() => {
-    datetime.value = date.value.toLocaleString(lang.value)
+    datetime.value = new Intl.DateTimeFormat(
+      undefined,
+      theme.value.lastUpdated?.formatOptions ?? {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      }
+    ).format(date.value)
   })
 })
 </script>
 
 <template>
   <p class="VPLastUpdated">
-    {{ theme.lastUpdatedText || 'Last updated' }}:
+    {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
     <time :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>

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

@@ -7,10 +7,8 @@ defineProps<{
 }>()
 
 function onClick({ target: el }: Event) {
-  const id = '#' + (el as HTMLAnchorElement).href!.split('#')[1]
-  const heading = document.querySelector<HTMLAnchorElement>(
-    decodeURIComponent(id)
-  )
+  const id = (el as HTMLAnchorElement).href!.split('#')[1]
+  const heading = document.getElementById(decodeURIComponent(id))
   heading?.focus()
 }
 </script>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useSidebar } from 'vitepress/theme'
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
 
 const { theme } = useData()
 const { hasSidebar } = useSidebar()

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { normalizeLink } from '../support/utils'
-import VPIconExternalLink from './icons/VPIconExternalLink.vue'
 import { EXTERNAL_URL_RE } from '../../shared'
 
 const props = defineProps<{
@@ -20,25 +19,11 @@ const isExternal = computed(() => props.href && EXTERNAL_URL_RE.test(props.href)
   <component
     :is="tag"
     class="VPLink"
-    :class="{ link: href }"
+    :class="{ link: href, 'vp-external-link-icon': isExternal && !noIcon }"
     :href="href ? normalizeLink(href) : undefined"
     :target="target || (isExternal ? '_blank' : undefined)"
     :rel="rel || (isExternal ? 'noreferrer' : undefined)"
   >
     <slot />
-    <VPIconExternalLink v-if="isExternal && !noIcon" class="icon" />
   </component>
 </template>
-
-<style scoped>
-.icon {
-  display: inline-block;
-  margin-top: -1px;
-  margin-left: 4px;
-  width: 11px;
-  height: 11px;
-  fill: var(--vp-c-text-3);
-  transition: fill 0.25s;
-  flex-shrink: 0;
-}
-</style>

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
-import { computed, shallowRef } from 'vue'
 import { onContentUpdated } from 'vitepress'
+import { useSidebar } from 'vitepress/theme'
+import { computed, shallowRef } from 'vue'
 import { useData } from '../composables/data'
 import { getHeaders, type MenuItem } from '../composables/outline'
-import { useSidebar } from '../composables/sidebar'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
 import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 

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

@@ -230,6 +230,7 @@ debouncedWatch(
 async function fetchExcerpt(id: string) {
   const file = pathToFile(id.slice(0, id.indexOf('#')))
   try {
+    if (!file) throw new Error(`Cannot find file for id: ${id}`)
     return { id, mod: await import(/*@vite-ignore*/ file) }
   } catch (e) {
     console.error(e)
@@ -420,7 +421,7 @@ function formMarkRegex(terms: Set<string>) {
             <button
               class="back-button"
               :title="$t('modal.backButtonTitle')"
-              @click="selectedIndex > -1 && $emit('close')"
+              @click="$emit('close')"
             >
               <svg
                 width="18"

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

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { useWindowScroll } from '@vueuse/core'
-import { useSidebar } from '../composables/sidebar'
-import VPNavBarTitle from './VPNavBarTitle.vue'
-import VPNavBarSearch from './VPNavBarSearch.vue'
-import VPNavBarMenu from './VPNavBarMenu.vue'
-import VPNavBarTranslations from './VPNavBarTranslations.vue'
+import { useSidebar } from 'vitepress/theme'
+import { computed } from 'vue'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
-import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
 import VPNavBarHamburger from './VPNavBarHamburger.vue'
+import VPNavBarMenu from './VPNavBarMenu.vue'
+import VPNavBarSearch from './VPNavBarSearch.vue'
+import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
+import VPNavBarTitle from './VPNavBarTitle.vue'
+import VPNavBarTranslations from './VPNavBarTranslations.vue'
 
 defineProps<{
   isScreenOpen: boolean

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useSidebar } from 'vitepress/theme'
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
 import { useLangs } from '../composables/langs'
 import { normalizeLink } from '../support/utils'
 import VPImage from './VPImage.vue'

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock'
+import { useSidebar } from 'vitepress/theme'
 import { ref, watchPostEffect } from 'vue'
-import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
-import { useSidebar } from '../composables/sidebar'
 import VPSidebarItem from './VPSidebarItem.vue'
 
 const { sidebarGroups, hasSidebar } = useSidebar()

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

@@ -8,8 +8,8 @@ const backToTop = ref()
 watch(() => route.path, () => backToTop.value.focus())
 
 function focusOnTargetAnchor({ target }: Event) {
-  const el = document.querySelector<HTMLAnchorElement>(
-    decodeURIComponent((target as HTMLAnchorElement).hash)
+  const el = document.getElementById(
+    decodeURIComponent((target as HTMLAnchorElement).hash).slice(1)
   )
 
   if (el) {

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

@@ -1,6 +1,6 @@
-import { computed } from 'vue';
 import { useMediaQuery } from '@vueuse/core';
-import { useSidebar } from './sidebar';
+import { useSidebar } from 'vitepress/theme';
+import { computed } from 'vue';
 export function useAside() {
     const { hasSidebar } = useSidebar();
     const is960 = useMediaQuery('(min-width: 960px)');

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

@@ -522,3 +522,24 @@
   margin: 0 !important;
   max-width: calc((100% - 24px) / 2) !important;
 }
+
+:is(
+  .vp-external-link-icon,
+  .vp-doc a[href*='://'],
+  .vp-doc a[target='_blank']
+)::after {
+  display: inline-block;
+  margin-top: -1px;
+  margin-left: 4px;
+  width: 11px;
+  height: 11px;
+  background: currentColor;
+  flex-shrink: 0;
+  --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
+  -webkit-mask-image: var(--icon);
+  mask-image: var(--icon);
+}
+
+.vp-external-link-icon::after {
+  content: '';
+}

package/dist/client/theme-default/support/utils.js

@@ -28,7 +28,7 @@ export function normalizeLink(url) {
         return url.replace(PATHNAME_PROTOCOL_RE, '');
     }
     const { site } = useData();
-    const { pathname, search, hash } = new URL(url, 'http://example.com');
+    const { pathname, search, hash } = new URL(url, 'http://a.com');
     const normalizedPath = pathname.endsWith('/') || pathname.endsWith('.html')
         ? url
         : url.replace(/(?:(^\.+)\/)?.*$/, `$1${pathname.replace(/(\.md)?$/, site.value.cleanUrls ? '' : '.html')}${search}${hash}`);

package/dist/client/theme-default/without-fonts.js

@@ -19,6 +19,7 @@ export { default as VPTeamPage } from './components/VPTeamPage.vue';
 export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';
 export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue';
 export { default as VPTeamMembers } from './components/VPTeamMembers.vue';
+export { useSidebar } from './composables/sidebar';
 const theme = {
     Layout,
     enhanceApp: ({ app }) => {

package/dist/node/cli.js

@@ -1,4 +1,4 @@
-import { o as getDefaultExportFromCjs, p as c, q as clearCache, k as build, s as serve, l as init, j as createServer } from './serve-ec0537e0.js';
+import { o as getDefaultExportFromCjs, p as c, q as clearCache, k as build, s as serve, l as init, j as createServer } from './serve-d0f912b9.js';
 import { createLogger } from 'vite';
 import 'url';
 import 'path';
@@ -294,7 +294,7 @@ var minimist = function (args, opts) {
 
 var minimist$1 = /*@__PURE__*/getDefaultExportFromCjs(minimist);
 
-var version = "1.0.0-beta.3";
+var version = "1.0.0-beta.4";
 
 function bindShortcuts(server, createDevServer) {
   if (!server.httpServer || !process.stdin.isTTY || process.env.CI) {

package/dist/node/index.js

@@ -1,5 +1,5 @@
-import { g as glob, c as createMarkdownRenderer, f as fs, m as matter } from './serve-ec0537e0.js';
-export { S as ScaffoldThemeType, k as build, j as createServer, a as defineConfig, b as defineConfigWithTheme, d as defineLoader, l as init, r as resolveConfig, i as resolvePages, h as resolveSiteData, e as resolveUserConfig, n as scaffold, s as serve } from './serve-ec0537e0.js';
+import { g as glob, c as createMarkdownRenderer, f as fs, m as matter } from './serve-d0f912b9.js';
+export { S as ScaffoldThemeType, k as build, j as createServer, a as defineConfig, b as defineConfigWithTheme, d as defineLoader, l as init, r as resolveConfig, i as resolvePages, h as resolveSiteData, e as resolveUserConfig, n as scaffold, s as serve } from './serve-d0f912b9.js';
 import path from 'path';
 import { normalizePath } from 'vite';
 export { loadEnv } from 'vite';