vitepress 2.0.0-alpha.17 → 2.0.0-alpha.18

package/dist/client/app/index.js

@@ -136,7 +136,7 @@ if (inBrowser) {
             app.mount('#app');
             // scroll to hash on new tab during dev
             if (import.meta.env.DEV && location.hash) {
-                scrollTo(location.hash);
+                setTimeout(() => scrollTo(location.hash), 100);
             }
         });
     });

package/dist/client/app/router.js

@@ -1,7 +1,7 @@
 import { inject, markRaw, nextTick, reactive, readonly } from 'vue';
 import { notFoundPageData, treatAsHtml } from '../shared';
 import { siteDataRef } from './data';
-import { getScrollOffset, inBrowser, withBase } from './utils';
+import { inBrowser, withBase } from './utils';
 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
@@ -70,7 +70,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
                             history.replaceState({}, '', href);
                         }
                         if (!initialLoad)
-                            scrollTo(targetLoc.hash, false, scrollPosition);
+                            scrollTo(targetLoc.hash, scrollPosition);
                     });
                 }
             }
@@ -143,10 +143,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
             // only intercept inbound html links
             if (origin === currentLoc.origin && treatAsHtml(pathname)) {
                 e.preventDefault();
-                router.go(href, {
-                    // use smooth scroll when clicking on header anchor links
-                    smoothScroll: link.classList.contains('header-anchor')
-                });
+                router.go(href);
             }
         }, { capture: true });
         window.addEventListener('popstate', async (e) => {
@@ -174,7 +171,7 @@ export function useRouter() {
 export function useRoute() {
     return useRouter().route;
 }
-export function scrollTo(hash, smooth = false, scrollPosition = 0) {
+export function scrollTo(hash, scrollPosition = 0) {
     if (!hash || scrollPosition) {
         window.scrollTo(0, scrollPosition);
         return;
@@ -188,18 +185,8 @@ export function scrollTo(hash, smooth = false, scrollPosition = 0) {
     }
     if (!target)
         return;
-    const targetTop = window.scrollY +
-        target.getBoundingClientRect().top -
-        getScrollOffset() +
-        Number.parseInt(window.getComputedStyle(target).paddingTop, 10) || 0;
-    const behavior = window.matchMedia('(prefers-reduced-motion)').matches
-        ? 'instant'
-        : // only smooth scroll if distance is smaller than screen height
-            smooth && Math.abs(targetTop - window.scrollY) <= window.innerHeight
-                ? 'smooth'
-                : 'auto';
     const scrollToTarget = () => {
-        window.scrollTo({ left: 0, top: targetTop, behavior });
+        target.scrollIntoView({ block: 'start' });
         // focus the target element for better accessibility
         target.focus({ preventScroll: true });
         // return if focus worked
@@ -253,14 +240,14 @@ function normalizeHref(href) {
     }
     return url.pathname + url.search + url.hash.split(':~:')[0];
 }
-async function changeRoute(href, { smoothScroll = false, initialLoad = false, replace = false, hasTextFragment = false } = {}) {
+async function changeRoute(href, { initialLoad = false, replace = false, hasTextFragment = false } = {}) {
     const loc = normalizeHref(location.href);
     const nextUrl = new URL(href, location.origin);
     const currentUrl = new URL(loc, location.origin);
     if (href === loc) {
         if (!initialLoad) {
             if (!hasTextFragment)
-                scrollTo(nextUrl.hash, smoothScroll);
+                scrollTo(nextUrl.hash);
             return false;
         }
     }
@@ -281,7 +268,7 @@ async function changeRoute(href, { smoothScroll = false, initialLoad = false, re
                     newURL: nextUrl.href
                 }));
                 if (!hasTextFragment)
-                    scrollTo(nextUrl.hash, smoothScroll);
+                    scrollTo(nextUrl.hash);
             }
             return false;
         }

package/dist/client/app/utils.js

@@ -84,37 +84,3 @@ export function defineClientComponent(loader, args, cb) {
         }
     };
 }
-export function getScrollOffset() {
-    let scrollOffset = siteDataRef.value.scrollOffset;
-    let offset = 0;
-    let padding = 24;
-    if (typeof scrollOffset === 'object' && 'padding' in scrollOffset) {
-        padding = scrollOffset.padding;
-        scrollOffset = scrollOffset.selector;
-    }
-    if (typeof scrollOffset === 'number') {
-        offset = scrollOffset;
-    }
-    else if (typeof scrollOffset === 'string') {
-        offset = tryOffsetSelector(scrollOffset, padding);
-    }
-    else if (Array.isArray(scrollOffset)) {
-        for (const selector of scrollOffset) {
-            const res = tryOffsetSelector(selector, padding);
-            if (res) {
-                offset = res;
-                break;
-            }
-        }
-    }
-    return offset;
-}
-function tryOffsetSelector(selector, padding) {
-    const el = document.querySelector(selector);
-    if (!el)
-        return 0;
-    const bot = el.getBoundingClientRect().bottom;
-    if (bot < 0)
-        return 0;
-    return bot + padding;
-}

package/dist/client/index.d.ts

@@ -1,7 +1,159 @@
 import * as vue from 'vue';
-import { Component, Ref, InjectionKey, App, AsyncComponentLoader } from 'vue';
-import { PageData, Awaitable, SiteData } from '../../types/shared.js';
-export { HeadConfig, Header, PageData, SiteData } from '../../types/shared.js';
+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
 
 declare const inBrowser: boolean;
 /**
@@ -26,7 +178,6 @@ interface Router {
      */
     go: (to: string, options?: {
         initialLoad?: boolean;
-        smoothScroll?: boolean;
         replace?: boolean;
     }) => Promise<void>;
     /**
@@ -50,41 +201,6 @@ interface Router {
 declare function useRouter(): Router;
 declare function useRoute(): Route;
 
-declare const dataSymbol: InjectionKey<VitePressData>;
-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>;
-}
-declare function useData<T = any>(): VitePressData<T>;
-
 interface EnhanceAppContext {
     app: App;
     router: Router;
@@ -104,6 +220,10 @@ interface Theme {
     NotFound?: Component;
 }
 
+declare const dataSymbol: InjectionKey<VitePressData>;
+
+declare function useData<T = any>(): VitePressData<T>;
+
 /**
  * Append base to internal (non-relative) urls
  */
@@ -118,7 +238,6 @@ declare function defineClientComponent(loader: AsyncComponentLoader, args?: any[
         [key: string]: any;
     }> | null;
 };
-declare function getScrollOffset(): number;
 
 declare const Content: vue.DefineComponent<vue.ExtractPropTypes<{
     as: {
@@ -136,4 +255,4 @@ declare const Content: vue.DefineComponent<vue.ExtractPropTypes<{
     as: string | Record<string, any>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Content, type EnhanceAppContext, type Route, type Router, type Theme, type VitePressData, escapeHtml as _escapeHtml, dataSymbol, defineClientComponent, getScrollOffset, inBrowser, onContentUpdated, useData, useRoute, useRouter, withBase };
+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 };

package/dist/client/index.js

@@ -4,6 +4,6 @@
 export { dataSymbol, useData } from './app/data';
 export { useRoute, useRouter } from './app/router';
 // utilities
-export { _escapeHtml, defineClientComponent, getScrollOffset, inBrowser, onContentUpdated, withBase } from './app/utils';
+export { _escapeHtml, defineClientComponent, inBrowser, onContentUpdated, withBase } from './app/utils';
 // components
 export { Content } from './app/components/Content';

package/dist/client/shared.js

@@ -4,7 +4,7 @@ export const VP_SOURCE_KEY = '[VP_SOURCE]';
 const UnpackStackView = Symbol('stack-view:unpack');
 const HASH_WITHOUT_FRAGMENT_RE = /#.*?(?=:~:|$)/;
 const HASH_OR_QUERY_RE = /[?#].*$/;
-const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/;
+const INDEX_OR_EXT_RE = /(?:(^|\/)index)?(?:\.(?:md|html))?$/;
 export const inBrowser = typeof document !== 'undefined';
 export const notFoundPageData = {
     relativePath: '404.md',

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

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import type { DocSearchInstance, DocSearchProps } from '@docsearch/js'
-import type { SidepanelInstance, SidepanelProps } from '@docsearch/sidepanel-js'
+import type { SidepanelInstance } from '@docsearch/sidepanel-js'
 import { inBrowser, useRouter } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
 import { nextTick, onUnmounted, watch } from 'vue'
 import type { DocSearchAskAi } from '../../../../types/docsearch'
 import { useData } from '../composables/data'
-import { resolveMode, validateCredentials } from '../support/docsearch'
+import {
+  buildSidePanelProps,
+  resolveMode,
+  validateCredentials
+} from '../support/docsearch'
 
 import '../styles/docsearch.css'
 
@@ -105,12 +109,7 @@ async function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
     if (currentInitialize !== initializeCount) return
 
     sidepanelInstance = sidepanel({
-      ...(askAi.sidePanel === true ? {} : askAi.sidePanel),
-      container: '#vp-docsearch-sidepanel',
-      indexName: askAi.indexName ?? userOptions.indexName,
-      appId: askAi.appId ?? userOptions.appId,
-      apiKey: askAi.apiKey ?? userOptions.apiKey,
-      assistantId: askAi.assistantId,
+      ...buildSidePanelProps(askAi, userOptions),
       onOpen: focusInput,
       onClose: onClose.bind(null, 'sidepanel'),
       onReady: () => {
@@ -122,7 +121,7 @@ async function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
       keyboardShortcuts: {
         'Ctrl/Cmd+I': false
       }
-    } as SidepanelProps)
+    })
   }
 
   const options = {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { normalizeLink } from '../support/utils'
 import { EXTERNAL_URL_RE } from '../../shared'
+import { normalizeLink } from '../support/utils'
 
 interface Props {
   tag?: string

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DefaultTheme } from 'vitepress/theme'
-import { ref, watch, onMounted } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useAside } from '../composables/aside'
 import { useData } from '../composables/data'
 
@@ -19,9 +19,14 @@ let isInitialized = false
 function init() {
   if (!isInitialized) {
     isInitialized = true
+    const params = new URLSearchParams({
+      serve: carbonOptions.code,
+      placement: carbonOptions.placement,
+      format: carbonOptions?.format || 'classic',
+    })
     const s = document.createElement('script')
     s.id = '_carbonads_js'
-    s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}`
+    s.src = `//cdn.carbonads.com/carbon.js?${params.toString()}`
     s.async = true
     container.value.appendChild(s)
   }

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { resolveDynamicComponent } from 'vue'
 import NotFound from '../NotFound.vue'
 import { useData } from '../composables/data'
 import { useLayout } from '../composables/layout'
@@ -8,6 +9,10 @@ import VPPage from './VPPage.vue'
 
 const { page, frontmatter } = useData()
 const { isHome, hasSidebar } = useLayout()
+
+function isRegistered(component: string): boolean {
+  return typeof resolveDynamicComponent(component) !== 'string'
+}
 </script>
 
 <template>
@@ -18,12 +23,12 @@ const { isHome, hasSidebar } = useLayout()
   >
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
 
-    <VPPage v-else-if="frontmatter.layout === 'page'">
+    <VPPage v-else-if="frontmatter.layout === 'page' && !isRegistered('page')">
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>
     </VPPage>
 
-    <VPHome v-else-if="frontmatter.layout === 'home'">
+    <VPHome v-else-if="frontmatter.layout === 'home' && !isRegistered('home')">
       <template #home-hero-before><slot name="home-hero-before" /></template>
       <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>
@@ -36,12 +41,7 @@ const { isHome, hasSidebar } = useLayout()
       <template #home-features-after><slot name="home-features-after" /></template>
     </VPHome>
 
-    <component
-      v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'"
-      :is="frontmatter.layout"
-    />
-
-    <VPDoc v-else>
+    <VPDoc v-else-if="(!frontmatter.layout || frontmatter.layout === 'doc') && !isRegistered('doc')">
       <template #doc-top><slot name="doc-top" /></template>
       <template #doc-bottom><slot name="doc-bottom" /></template>
 
@@ -56,6 +56,8 @@ const { isHome, hasSidebar } = useLayout()
       <template #aside-ads-after><slot name="aside-ads-after" /></template>
       <template #aside-bottom><slot name="aside-bottom" /></template>
     </VPDoc>
+
+    <component v-else :is="frontmatter.layout || 'doc'" />
   </div>
 </template>
 

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useData } from '../composables/data'
-import VPDocAsideOutline from './VPDocAsideOutline.vue'
 import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
+import VPDocAsideOutline from './VPDocAsideOutline.vue'
 
 const { theme } = useData()
 </script>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
+import { defineAsyncComponent } from 'vue'
 
 defineProps<{
   carbonAds: DefaultTheme.CarbonAdsOptions

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useData } from '../composables/data'
+import { useLayout } from '../composables/layout'
 import { resolveTitle, useActiveAnchor } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
-import { useLayout } from '../composables/layout'
 
 const { theme } = useData()
 

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Sponsors } from './VPSponsors.vue'
-import type { Sponsor } from './VPSponsorsGrid.vue'
 import VPSponsors from './VPSponsors.vue'
+import type { Sponsor } from './VPSponsorsGrid.vue'
 
 defineProps<{
   tier?: string

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

@@ -3,8 +3,8 @@ import { computed } from 'vue'
 import { useData } from '../composables/data'
 import { useEditLink } from '../composables/edit-link'
 import { usePrevNext } from '../composables/prev-next'
-import VPLink from './VPLink.vue'
 import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
+import VPLink from './VPLink.vue'
 
 const { theme, page, frontmatter } = useData()
 

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import VPHomeHero from './VPHomeHero.vue'
-import VPHomeFeatures from './VPHomeFeatures.vue'
-import VPHomeContent from './VPHomeContent.vue'
 import { useData } from '../composables/data'
+import VPHomeContent from './VPHomeContent.vue'
+import VPHomeFeatures from './VPHomeFeatures.vue'
+import VPHomeHero from './VPHomeHero.vue'
 
 const { frontmatter, theme } = useData()
 </script>

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

@@ -1,21 +1,19 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { normalizeLink } from '../support/utils'
-import { EXTERNAL_URL_RE } from '../../shared'
+import { isLinkExternal, normalizeLink } from '../support/utils'
 
 const props = defineProps<{
   tag?: string
   href?: string
   noIcon?: boolean
+  external?: boolean
   target?: string
   rel?: string
 }>()
 
 const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
-const isExternal = computed(
-  () =>
-    (props.href && EXTERNAL_URL_RE.test(props.href)) ||
-    props.target === '_blank'
+const isExternal = computed(() =>
+  isLinkExternal(props.href, props.target, props.external)
 )
 </script>