vitepress 2.0.0-alpha.18 → 2.0.0-alpha.19

package/dist/client/app/components/Content.js

@@ -8,8 +8,8 @@ export const Content = defineComponent({
         as: { type: [Object, String], default: 'div' }
     },
     setup(props) {
-        const route = useRoute();
         const { frontmatter, site } = useData();
+        const route = useRoute();
         watch(frontmatter, runCbs, { deep: true, flush: 'post' });
         return () => h(props.as, site.value.contentProps ?? { style: { position: 'relative' } }, [
             route.component

package/dist/client/app/data.js

@@ -1,13 +1,13 @@
 import siteData from '@siteData';
 import { useDark, usePreferredDark } from '@vueuse/core';
-import { computed, inject, readonly, ref, shallowRef, watch } from 'vue';
-import { APPEARANCE_KEY, createTitle, inBrowser, resolveSiteDataByRoute } from '../shared';
+import { computed, inject, readonly, ref, shallowRef } from 'vue';
+import { APPEARANCE_KEY, createTitle, resolveSiteDataByRoute } from '../shared';
 export const dataSymbol = Symbol();
 // site data is a singleton
 export const siteDataRef = shallowRef(readonly(siteData));
 // per-app data
 export function initData(route) {
-    const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath));
+    const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath, route.data.filePath));
     const appearance = site.value.appearance; // fine with reactivity being lost here, config change triggers a restart
     const isDark = appearance === 'force-dark'
         ? ref(true)
@@ -20,15 +20,6 @@ export function initData(route) {
                     ...(typeof appearance === 'object' ? appearance : {})
                 })
                 : ref(false);
-    const hashRef = ref(inBrowser ? location.hash : '');
-    if (inBrowser) {
-        window.addEventListener('hashchange', () => {
-            hashRef.value = location.hash;
-        });
-    }
-    watch(() => route.data, () => {
-        hashRef.value = inBrowser ? location.hash : '';
-    });
     return {
         site,
         theme: computed(() => site.value.themeConfig),
@@ -40,8 +31,7 @@ export function initData(route) {
         localeIndex: computed(() => site.value.localeIndex || 'root'),
         title: computed(() => createTitle(site.value, route.data)),
         description: computed(() => route.data.description || site.value.description),
-        isDark,
-        hash: computed(() => hashRef.value)
+        isDark
     };
 }
 export function useData() {

package/dist/client/app/utils.js

@@ -10,7 +10,7 @@ export function joinPath(base, path) {
     return `${base}${path}`.replace(/\/+/g, '/');
 }
 /**
- * Append base to internal (non-relative) urls
+ * Prepend base to internal (non-relative) urls
  */
 export function withBase(path) {
     return EXTERNAL_URL_RE.test(path) || !path.startsWith('/')

package/dist/client/index.d.ts

@@ -1,159 +1,7 @@
+import { Route, Awaitable, SiteData, VitePressData, PageData } from '../../types/shared.js';
+export { HeadConfig, Header, PageData, Route, SiteData, VitePressData } from '../../types/shared.js';
 import * as vue from 'vue';
-import { Ref, Component, App, InjectionKey, AsyncComponentLoader } from 'vue';
-import { UseDarkOptions } from '@vueuse/core';
-
-// types shared between server and client
-
-
-type Awaitable<T> = T | PromiseLike<T>
-
-type DeepPartial<T> =
-  T extends Record<string, any>
-    ? T extends
-        | Date
-        | RegExp
-        | Function
-        | ReadonlyMap<any, any>
-        | ReadonlySet<any>
-        | ReadonlyArray<any>
-      ? T
-      : { [P in keyof T]?: DeepPartial<T[P]> }
-    : T
-
-interface PageData {
-  relativePath: string
-  /**
-   * differs from relativePath in case of path rewrites
-   * empty string if the page is virtual (e.g. 404 page)
-   */
-  filePath: string
-  title: string
-  titleTemplate?: string | boolean
-  description: string
-  headers: Header[]
-  frontmatter: Record<string, any>
-  params?: Record<string, any>
-  isNotFound?: boolean
-  lastUpdated?: number
-}
-
-interface Header {
-  /**
-   * The level of the header
-   *
-   * `1` to `6` for `<h1>` to `<h6>`
-   */
-  level: number
-  /**
-   * The title of the header
-   */
-  title: string
-  /**
-   * The slug of the header
-   *
-   * Typically the `id` attr of the header anchor
-   */
-  slug: string
-  /**
-   * Link of the header
-   *
-   * Typically using `#${slug}` as the anchor hash
-   */
-  link: string
-  /**
-   * The children of the header
-   */
-  children: Header[]
-}
-
-interface SiteData<ThemeConfig = any> {
-  base: string
-  cleanUrls?: boolean
-  lang: string
-  dir: string
-  title: string
-  titleTemplate?: string | boolean
-  description: string
-  head: HeadConfig[]
-  appearance:
-    | boolean
-    | 'dark'
-    | 'force-dark'
-    | 'force-auto'
-    | (Omit<UseDarkOptions, 'initialValue'> & { initialValue?: 'dark' })
-  themeConfig: ThemeConfig
-  locales: LocaleConfig<ThemeConfig>
-  localeIndex?: string
-  contentProps?: Record<string, any>
-  router: {
-    prefetchLinks: boolean
-  }
-  additionalConfig?:
-    AdditionalConfigDict<ThemeConfig> | AdditionalConfigLoader<ThemeConfig>
-}
-
-interface VitePressData<T = any> {
-  /**
-   * Site-level metadata
-   */
-  site: Ref<SiteData<T>>
-  /**
-   * themeConfig from .vitepress/config.js
-   */
-  theme: Ref<T>
-  /**
-   * Page-level metadata
-   */
-  page: Ref<PageData>
-  /**
-   * page frontmatter data
-   */
-  frontmatter: Ref<PageData['frontmatter']>
-  /**
-   * dynamic route params
-   */
-  params: Ref<PageData['params']>
-  title: Ref<string>
-  description: Ref<string>
-  lang: Ref<string>
-  dir: Ref<string>
-  localeIndex: Ref<string>
-  isDark: Ref<boolean>
-  /**
-   * Current location hash
-   */
-  hash: Ref<string>
-}
-
-type HeadConfig =
-  [string, Record<string, string>] | [string, Record<string, string>, string]
-
-interface LocaleSpecificConfig<ThemeConfig = any> {
-  lang?: string
-  dir?: string
-  title?: string
-  titleTemplate?: string | boolean
-  description?: string
-  head?: HeadConfig[]
-  themeConfig?: DeepPartial<ThemeConfig>
-}
-
-type LocaleConfig<ThemeConfig = any> = Record<
-  string,
-  LocaleSpecificConfig<ThemeConfig> & { label: string; link?: string }
->
-
-type AdditionalConfig<ThemeConfig = any> =
-  LocaleSpecificConfig<ThemeConfig>
-
-type AdditionalConfigDict<ThemeConfig = any> = Record<
-  string,
-  AdditionalConfig<ThemeConfig>
->
-
-type AdditionalConfigLoader<ThemeConfig = any> = (
-  relativePath: string
-) => AdditionalConfig<ThemeConfig>[] | void
+import { App, Ref, Component, InjectionKey, AsyncComponentLoader } from 'vue';
 
 declare const inBrowser: boolean;
 /**
@@ -161,13 +9,6 @@ declare const inBrowser: boolean;
  */
 declare function escapeHtml(str: string): string;
 
-interface Route {
-    path: string;
-    hash: string;
-    query: string;
-    data: PageData;
-    component: Component | null;
-}
 interface Router {
     /**
      * Current route.
@@ -220,12 +61,32 @@ interface Theme {
     NotFound?: Component;
 }
 
+declare const ClientOnly: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare const Content: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: (ObjectConstructor | StringConstructor)[];
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: (ObjectConstructor | StringConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    as: string | Record<string, any>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
 declare const dataSymbol: InjectionKey<VitePressData>;
 
 declare function useData<T = any>(): VitePressData<T>;
 
 /**
- * Append base to internal (non-relative) urls
+ * Prepend base to internal (non-relative) urls
  */
 declare function withBase(path: string): string;
 /**
@@ -239,20 +100,15 @@ declare function defineClientComponent(loader: AsyncComponentLoader, args?: any[
     }> | null;
 };
 
-declare const Content: vue.DefineComponent<vue.ExtractPropTypes<{
-    as: {
-        type: (ObjectConstructor | StringConstructor)[];
-        default: string;
-    };
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    as: {
-        type: (ObjectConstructor | StringConstructor)[];
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    as: string | Record<string, any>;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare module 'vue' {
+    interface GlobalComponents {
+        ClientOnly: typeof ClientOnly;
+        Content: typeof Content;
+    }
+    interface ComponentCustomProperties {
+        $frontmatter: PageData['frontmatter'];
+        $params: PageData['params'];
+    }
+}
 
-export { Content, type EnhanceAppContext, type HeadConfig, type Header, type PageData, type Route, type Router, type SiteData, type Theme, type VitePressData, escapeHtml as _escapeHtml, dataSymbol, defineClientComponent, inBrowser, onContentUpdated, useData, useRoute, useRouter, withBase };
+export { ClientOnly, Content, type EnhanceAppContext, type Router, type Theme, escapeHtml as _escapeHtml, dataSymbol, defineClientComponent, inBrowser, onContentUpdated, useData, useRoute, useRouter, withBase };

package/dist/client/index.js

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

package/dist/client/shared.js

@@ -5,6 +5,11 @@ const UnpackStackView = Symbol('stack-view:unpack');
 const HASH_WITHOUT_FRAGMENT_RE = /#.*?(?=:~:|$)/;
 const HASH_OR_QUERY_RE = /[?#].*$/;
 const INDEX_OR_EXT_RE = /(?:(^|\/)index)?(?:\.(?:md|html))?$/;
+// https://github.com/rollup/rollup/blob/fec513270c6ac350072425cc045db367656c623b/src/utils/sanitizeFileName.ts
+const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g;
+const DRIVE_LETTER_REGEX = /^[a-z]:/i;
+const KNOWN_EXTENSIONS = new Set();
+const shellLangs = ['shellscript', 'shell', 'bash', 'sh', 'zsh'];
 export const inBrowser = typeof document !== 'undefined';
 export const notFoundPageData = {
     relativePath: '404.md',
@@ -16,10 +21,7 @@ export const notFoundPageData = {
     lastUpdated: 0,
     isNotFound: true
 };
-export function isActive(currentPath, matchPath, asRegex = false) {
-    if (matchPath === undefined) {
-        return false;
-    }
+export function isActive(currentPath, currentHash, matchPath, asRegex = false, skipHashCheck = false) {
     currentPath = normalize(`/${currentPath}`);
     if (asRegex) {
         return new RegExp(matchPath).test(currentPath);
@@ -27,9 +29,12 @@ export function isActive(currentPath, matchPath, asRegex = false) {
     if (normalize(matchPath) !== currentPath) {
         return false;
     }
+    if (skipHashCheck) {
+        return true;
+    }
     const hashMatch = matchPath.match(HASH_WITHOUT_FRAGMENT_RE);
     if (hashMatch) {
-        return (inBrowser ? location.hash : '') === hashMatch[0];
+        return currentHash === hashMatch[0];
     }
     return true;
 }
@@ -44,16 +49,18 @@ export function isExternal(path) {
 export function getLocaleForPath(siteData, relativePath) {
     return (Object.keys(siteData?.locales || {}).find((key) => key !== 'root' &&
         !isExternal(key) &&
-        isActive(relativePath, `^/${key}/`, true)) || 'root');
+        isActive(relativePath, '', `^/${key}/`, true)) || 'root');
 }
 /**
  * this merges the locales data to the main data by the route
  */
-export function resolveSiteDataByRoute(siteData, relativePath) {
+export function resolveSiteDataByRoute(siteData, relativePath, filePath) {
     const localeIndex = getLocaleForPath(siteData, relativePath);
-    const { label, link, ...localeConfig } = siteData.locales[localeIndex] ?? {};
+    const { label, link, markdown, ...localeConfig } = siteData.locales[localeIndex] ?? {};
     Object.assign(localeConfig, { localeIndex });
-    const additionalConfigs = resolveAdditionalConfig(siteData, relativePath);
+    // additional configs are colocated with sources, so resolve them by the
+    // source path (filePath) rather than the rewritten one
+    const additionalConfigs = resolveAdditionalConfig(siteData, filePath || relativePath);
     if (inBrowser && import.meta.env?.DEV) {
         ;
         localeConfig[VP_SOURCE_KEY] = `locale config (${localeIndex})`;
@@ -119,9 +126,6 @@ export function mergeHead(...headArrays) {
     }
     return merged;
 }
-// https://github.com/rollup/rollup/blob/fec513270c6ac350072425cc045db367656c623b/src/utils/sanitizeFileName.ts
-const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g;
-const DRIVE_LETTER_REGEX = /^[a-z]:/i;
 export function sanitizeFileName(name) {
     const match = DRIVE_LETTER_REGEX.exec(name);
     const driveLetter = match ? match[0] : '';
@@ -134,7 +138,6 @@ export function sanitizeFileName(name) {
 export function slash(p) {
     return p.replace(/\\/g, '/');
 }
-const KNOWN_EXTENSIONS = new Set();
 export function treatAsHtml(filename) {
     if (KNOWN_EXTENSIONS.size === 0) {
         const extraExts = (typeof process === 'object' && process.env?.VITE_EXTRA_EXTENSIONS) ||
@@ -237,7 +240,6 @@ stackView.unpack = function (obj) {
 export function isObject(value) {
     return Object.prototype.toString.call(value) === '[object Object]';
 }
-const shellLangs = ['shellscript', 'shell', 'bash', 'sh', 'zsh'];
 export function isShell(lang) {
     return shellLangs.includes(lang);
 }

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { useRoute } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
 import { onMounted, ref, watch } from 'vue'
 import { useAside } from '../composables/aside'
-import { useData } from '../composables/data'
 
-const { page } = useData()
+const route = useRoute()
 const props = defineProps<{
   carbonAds: DefaultTheme.CarbonAdsOptions
 }>()
@@ -32,7 +32,7 @@ function init() {
   }
 }
 
-watch(() => page.value.relativePath, () => {
+watch(() => route.data.relativePath, () => {
   if (isInitialized && isAsideEnabled.value) {
     ;(window as any)._carbonads?.refresh()
   }

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

@@ -7,7 +7,6 @@ import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const { theme } = useData()
-
 const route = useRoute()
 const { hasSidebar, hasAside, leftAside } = useLayout()
 

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

@@ -53,6 +53,8 @@ const showFooter = computed(
           v-if="control.prev?.link"
           class="pager-link prev"
           :href="control.prev.link"
+          :target="control.prev.target"
+          :rel="control.prev.rel"
         >
           <span
             class="desc"
@@ -66,6 +68,8 @@ const showFooter = computed(
           v-if="control.next?.link"
           class="pager-link next"
           :href="control.next.link"
+          :target="control.next.target"
+          :rel="control.next.rel"
         >
           <span
             class="desc"

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

@@ -39,7 +39,7 @@ onMounted(() => {
 
 <template>
   <p class="VPLastUpdated">
-    {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
+    {{ theme.lastUpdated?.text || 'Last updated' }}:
     <time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>

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

@@ -37,8 +37,8 @@ const grid = computed(() => {
 <template>
   <div v-if="features" class="VPFeatures">
     <div class="container">
-      <div class="items">
-        <div
+      <ul class="items">
+        <li
           v-for="feature in features"
           :key="feature.title"
           class="item"
@@ -53,8 +53,8 @@ const grid = computed(() => {
             :rel="feature.rel"
             :target="feature.target"
           />
-        </div>
-      </div>
+        </li>
+      </ul>
     </div>
   </div>
 </template>

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

@@ -11,6 +11,7 @@ const { width: vw } = useWindowSize({
   <div
     class="vp-doc container"
     :style="vw ? { '--vp-offset': `calc(50% - ${vw / 2}px)` } : {}"
+    data-allow-mismatch="style"
   >
     <slot />
   </div>

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

@@ -40,7 +40,7 @@ defineOptions({ inheritAttrs: false })
 html:not(.dark) .VPImage.dark {
   display: none;
 }
-.dark .VPImage.light {
+html.dark .VPImage.light {
   display: none;
 }
 </style>

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

@@ -2,14 +2,16 @@
 import { computed } from 'vue'
 import { isLinkExternal, normalizeLink } from '../support/utils'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   tag?: string
   href?: string
   noIcon?: boolean
   external?: boolean
   target?: string
   rel?: string
-}>()
+}>(), {
+  external: undefined,
+})
 
 const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
 const isExternal = computed(() =>

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

@@ -65,9 +65,10 @@ function scrollToTop() {
 
 <template>
   <div
+    ref="main"
     class="VPLocalNavOutlineDropdown"
     :style="{ '--vp-vh': vh + 'px' }"
-    ref="main"
+    data-allow-mismatch="style"
   >
     <button @click="toggle" :class="{ open }" v-if="headers.length > 0">
       <span class="menu-text">{{ resolveTitle(theme) }}</span>

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

@@ -117,8 +117,7 @@ const showDetailedList = useLocalStorage(
 const disableDetailedView = computed(() => {
   return (
     theme.value.search?.provider === 'local' &&
-    (theme.value.search.options?.disableDetailedView === true ||
-      theme.value.search.options?.detailedView === false)
+    theme.value.search.options?.detailedView === false
   )
 })
 
@@ -730,7 +729,7 @@ function onMouseMove(e: MouseEvent) {
   }
 }
 
-@media (min-width: 769px) {
+@media (min-width: 768px) {
   .search-actions.before {
     display: none;
   }

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

@@ -10,8 +10,8 @@ defineProps<{
 
 <template>
   <div class="VPMenu">
-    <div v-if="items" class="items">
-      <template v-for="item in items" :key="JSON.stringify(item)">
+    <ul v-if="items" class="items">
+      <li v-for="item in items" :key="JSON.stringify(item)">
         <VPMenuLink v-if="'link' in item" :item />
         <component
           v-else-if="'component' in item"
@@ -19,8 +19,8 @@ defineProps<{
           v-bind="item.props"
         />
         <VPMenuGroup v-else :text="item.text" :items="item.items" />
-      </template>
-    </div>
+      </li>
+    </ul>
 
     <slot />
   </div>

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup generic="T extends DefaultTheme.NavItemWithLink">
+import { useRoute } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
 import { computed } from 'vue'
 import { isActive } from '../../shared'
-import { useData } from '../composables/data'
 import VPLink from './VPLink.vue'
 
 const props = defineProps<{
@@ -10,21 +10,22 @@ const props = defineProps<{
   rel?: string
 }>()
 
-const { page } = useData()
+const route = useRoute()
 
 const href = computed(() =>
   typeof props.item.link === 'function'
-    ? props.item.link(page.value)
+    ? props.item.link(route.data)
     : props.item.link
 )
 
-const isActiveLink = computed(() =>
-  isActive(
-    page.value.relativePath,
+const isActiveLink = computed(() => {
+  return isActive(
+    route.data.relativePath,
+    route.hash,
     props.item.activeMatch || href.value,
     !!props.item.activeMatch
   )
-)
+})
 
 defineOptions({ inheritAttrs: false })
 </script>

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

@@ -8,7 +8,9 @@ import VPSocialLinks from './VPSocialLinks.vue'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
 
 const { site, theme } = useData()
-const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
+const { localeLinks, currentLang } = useLangs({
+  linkToCorrespondingPage: true
+})
 
 const hasExtraContent = computed(
   () =>
@@ -24,13 +26,13 @@ const hasExtraContent = computed(
     class="VPNavBarExtra"
     label="extra navigation"
   >
-    <div
+    <ul
       v-if="localeLinks.length && currentLang.label"
       class="group translations"
     >
-      <p class="trans-title">{{ currentLang.label }}</p>
+      <li class="trans-title">{{ currentLang.label }}</li>
 
-      <template v-for="locale in localeLinks" :key="locale.link">
+      <li v-for="locale in localeLinks" :key="locale.link">
         <VPMenuLink
           :item="locale"
           :external="false"
@@ -38,9 +40,10 @@ const hasExtraContent = computed(
           :hreflang="locale.lang"
           rel="alternate"
           :dir="locale.dir"
+          data-allow-mismatch="attribute"
         />
-      </template>
-    </div>
+      </li>
+    </ul>
 
     <div
       v-if="