vitepress 1.0.0-alpha.2 → 1.0.0-alpha.5

package/client.d.ts

@@ -1,3 +1,5 @@
 // re-export vite client types. with strict installers like pnpm, user won't
 // be able to reference vite/client in project root.
 /// <reference types="vite/client" />
+
+export * from './dist/client'

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

@@ -1,5 +1,5 @@
 import { watchEffect } from 'vue';
-import { createTitle } from '../../shared';
+import { createTitle, mergeHead } from '../../shared';
 export function useUpdateHead(route, siteDataByRouteRef) {
     let managedHeadTags = [];
     let isFirstUpdate = true;
@@ -10,59 +10,25 @@ export function useUpdateHead(route, siteDataByRouteRef) {
             isFirstUpdate = false;
             return;
         }
-        const newEls = [];
-        const commonLength = Math.min(managedHeadTags.length, newTags.length);
-        for (let i = 0; i < commonLength; i++) {
-            let el = managedHeadTags[i];
-            const [tag, attrs, innerHTML = ''] = newTags[i];
-            if (el.tagName.toLocaleLowerCase() === tag) {
-                for (const key in attrs) {
-                    if (el.getAttribute(key) !== attrs[key]) {
-                        el.setAttribute(key, attrs[key]);
-                    }
-                }
-                for (let i = 0; i < el.attributes.length; i++) {
-                    const name = el.attributes[i].name;
-                    if (!(name in attrs)) {
-                        el.removeAttribute(name);
-                    }
-                }
-                if (el.innerHTML !== innerHTML) {
-                    el.innerHTML = innerHTML;
-                }
-            }
-            else {
-                document.head.removeChild(el);
-                el = createHeadElement(newTags[i]);
-                document.head.append(el);
-            }
-            newEls.push(el);
-        }
-        managedHeadTags
-            .slice(commonLength)
-            .forEach((el) => document.head.removeChild(el));
-        newTags.slice(commonLength).forEach((headConfig) => {
+        managedHeadTags.forEach((el) => document.head.removeChild(el));
+        managedHeadTags = [];
+        newTags.forEach((headConfig) => {
             const el = createHeadElement(headConfig);
             document.head.appendChild(el);
-            newEls.push(el);
+            managedHeadTags.push(el);
         });
-        managedHeadTags = newEls;
     };
     watchEffect(() => {
         const pageData = route.data;
         const siteData = siteDataByRouteRef.value;
         const pageDescription = pageData && pageData.description;
-        const frontmatterHead = pageData && pageData.frontmatter.head;
+        const frontmatterHead = (pageData && pageData.frontmatter.head) || [];
         // update title and description
         document.title = createTitle(siteData, pageData);
         document
             .querySelector(`meta[name=description]`)
             .setAttribute('content', pageDescription || siteData.description);
-        updateHeadTags([
-            // site head can only change during dev
-            ...(import.meta.env.DEV ? siteData.head : []),
-            ...(frontmatterHead ? filterOutHeadDescription(frontmatterHead) : [])
-        ]);
+        updateHeadTags(mergeHead(siteData.head, filterOutHeadDescription(frontmatterHead)));
     });
 }
 function createHeadElement([tag, attrs, innerHTML]) {

package/dist/client/app/data.js

@@ -1,17 +1,15 @@
 import { shallowRef, readonly, computed, inject } from 'vue';
-import serializedSiteData from '@siteData';
+import siteData from '@siteData';
 import { resolveSiteDataByRoute, createTitle } from '../shared';
 import { withBase } from './utils';
 export const dataSymbol = Symbol();
-export const siteDataRef = shallowRef(parse(serializedSiteData));
-function parse(data) {
-    const parsed = JSON.parse(data);
-    return (import.meta.env.DEV ? readonly(parsed) : parsed);
-}
+export const siteDataRef = shallowRef(import.meta.env.PROD ? siteData : readonly(siteData));
 // hmr
 if (import.meta.hot) {
     import.meta.hot.accept('/@siteData', (m) => {
-        siteDataRef.value = parse(m.default);
+        if (m) {
+            siteDataRef.value = m.default;
+        }
     });
 }
 // per-app data

package/dist/client/app/router.js

@@ -97,7 +97,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
         window.addEventListener('click', (e) => {
             const link = e.target.closest('a');
             if (link) {
-                const { href, protocol, hostname, pathname, hash, target } = link;
+                const { href, origin, pathname, hash, search, target } = link;
                 const currentUrl = window.location;
                 const extMatch = pathname.match(/\.\w+$/);
                 // only intercept inbound links
@@ -106,11 +106,12 @@ export function createRouter(loadPageModule, fallbackComponent) {
                     !e.altKey &&
                     !e.metaKey &&
                     target !== `_blank` &&
-                    protocol === currentUrl.protocol &&
-                    hostname === currentUrl.hostname &&
+                    origin === currentUrl.origin &&
+                    // don't intercept if non-html extension is present
                     !(extMatch && extMatch[0] !== '.html')) {
                     e.preventDefault();
-                    if (pathname === currentUrl.pathname) {
+                    if (pathname === currentUrl.pathname &&
+                        search === currentUrl.search) {
                         // scroll between hash anchors in the same page
                         if (hash && hash !== currentUrl.hash) {
                             history.pushState(null, '', hash);

package/dist/client/shared.js

@@ -1,4 +1,4 @@
-export const EXTERNAL_URL_RE = /^https?:/i;
+export const EXTERNAL_URL_RE = /^[a-z]+:/i;
 export const APPEARANCE_KEY = 'vitepress-theme-appearance';
 // @ts-ignore
 export const inBrowser = typeof window !== 'undefined';
@@ -7,7 +7,7 @@ export const notFoundPageData = {
     title: '404',
     description: 'Not Found',
     headers: [],
-    frontmatter: {},
+    frontmatter: { sidebar: false, layout: 'page' },
     lastUpdated: 0
 };
 function findMatchRoot(route, roots) {
@@ -93,3 +93,15 @@ function cleanRoute(siteData, route) {
     const baseWithoutSuffix = base.endsWith('/') ? base.slice(0, -1) : base;
     return route.slice(baseWithoutSuffix.length);
 }
+function hasTag(head, tag) {
+    const [tagType, tagAttrs] = tag;
+    if (tagType !== 'meta')
+        return false;
+    const keyAttr = Object.entries(tagAttrs)[0]; // First key
+    if (keyAttr == null)
+        return false;
+    return head.some(([type, attrs]) => type === tagType && attrs[keyAttr[0]] === keyAttr[1]);
+}
+export function mergeHead(prev, curr) {
+    return [...prev.filter((tagAttrs) => !hasTag(curr, tagAttrs)), ...curr];
+}

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { provide } from 'vue'
+import { provide, watch } from 'vue'
+import { useRoute } from 'vitepress'
 import { useSidebar, useCloseSidebarOnEscape } from './composables/sidebar'
 import VPSkipLink from './components/VPSkipLink.vue'
 import VPBackdrop from './components/VPBackdrop.vue'
@@ -15,6 +16,9 @@ const {
   close: closeSidebar
 } = useSidebar()
 
+const route = useRoute()
+watch(() => route.path, closeSidebar)
+
 useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
 
 provide('close-sidebar', closeSidebar)
@@ -22,9 +26,17 @@ provide('close-sidebar', closeSidebar)
 
 <template>
   <div class="Layout">
+    <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
-    <VPNav />
+    <VPNav>
+      <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>
+      <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
+      <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
+      <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
+    </VPNav>
     <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
     <VPSidebar :open="isSidebarOpen" />
 
@@ -34,6 +46,7 @@ provide('close-sidebar', closeSidebar)
       <template #home-features-before><slot name="home-features-before" /></template>
       <template #home-features-after><slot name="home-features-after" /></template>
 
+      <template #doc-footer-before><slot name="doc-footer-before" /></template>
       <template #doc-before><slot name="doc-before" /></template>
       <template #doc-after><slot name="doc-after" /></template>
 
@@ -46,6 +59,7 @@ provide('close-sidebar', closeSidebar)
     </VPContent>
 
     <VPFooter />
+    <slot name="layout-bottom" />
   </div>
 </template>
 

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

@@ -1,9 +1,8 @@
 <script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
 import docsearch from '@docsearch/js'
-import { DocSearchHit } from '@docsearch/react/dist/esm/types'
 import { onMounted } from 'vue'
 import { useRouter, useRoute, useData } from 'vitepress'
-import { DefaultTheme } from '../config'
 
 const router = useRouter()
 const route = useRoute()
@@ -52,7 +51,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
       }
     },
 
-    transformItems(items: DocSearchHit[]) {
+    transformItems(items: any[]) {
       return items.map((item) => {
         return Object.assign({}, item, {
           url: getRelativePath(item.url)
@@ -60,44 +59,14 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
       })
     },
 
-    hitComponent({ hit, children }: { hit: DocSearchHit, children: any }) {
-      const relativeHit = hit.url.startsWith('http')
-        ? getRelativePath(hit.url as string)
-        : hit.url
-
+    hitComponent({ hit, children }: { hit: any; children: any }) {
       return {
         __v: null,
         type: 'a',
         ref: undefined,
         constructor: undefined,
         key: undefined,
-
-        props: {
-          href: hit.url,
-
-          onClick(event: MouseEvent) {
-            if (isSpecialClick(event)) {
-              return
-            }
-
-            // we rely on the native link scrolling when user is already on
-            // the right anchor because Router doesn't support duplicated
-            // history entries.
-            if (route.path === relativeHit) {
-              return
-            }
-
-            // if the hits goes to another page, we prevent the native link
-            // behavior to leverage the Router loading feature.
-            if (route.path !== relativeHit) {
-              event.preventDefault()
-            }
-
-            router.go(relativeHit)
-          },
-
-          children
-        }
+        props: { href: hit.url, children }
       }
     }
   })
@@ -105,19 +74,8 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
   docsearch(options)
 }
 
-function isSpecialClick(event: MouseEvent) {
-  return (
-    event.button === 1 ||
-    event.altKey ||
-    event.ctrlKey ||
-    event.metaKey ||
-    event.shiftKey
-  )
-}
-
 function getRelativePath(absoluteUrl: string) {
   const { pathname, hash } = new URL(absoluteUrl)
-
   return pathname + hash
 }
 </script>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { withBase } from 'vitepress'
+import { normalizeLink } from '../support/utils'
+import { EXTERNAL_URL_RE } from '../../shared'
 
 const props = defineProps<{
   tag?: string
@@ -15,7 +16,7 @@ const classes = computed(() => [
   props.theme ?? 'brand'
 ])
 
-const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
+const isExternal = computed(() => props.href && EXTERNAL_URL_RE.test(props.href))
 
 const component = computed(() => {
   if (props.tag) {
@@ -31,9 +32,9 @@ const component = computed(() => {
     :is="component"
     class="VPButton"
     :class="classes"
-    :href="href ? withBase(href) : undefined"
+    :href="href ? normalizeLink(href) : undefined"
     :target="isExternal ? '_blank' : undefined"
-    :rel="isExternal ? 'noopener noreferrer' : undefined"
+    :rel="isExternal ? 'noreferrer' : undefined"
   >
     {{ text }}
   </component>

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

@@ -2,7 +2,7 @@
 import { useRoute, useData } from 'vitepress'
 import { useCopyCode } from '../composables/copy-code'
 import { useSidebar } from '../composables/sidebar'
-import NotFound from '../NotFound.vue'
+import Theme from '/@theme/index'
 import VPPage from './VPPage.vue'
 import VPHome from './VPHome.vue'
 import VPDoc from './VPDoc.vue'
@@ -11,6 +11,8 @@ const route = useRoute()
 const { frontmatter } = useData()
 const { hasSidebar } = useSidebar()
 
+const NotFound = Theme.NotFound || (() => '404 Not Found')
+
 useCopyCode()
 </script>
 
@@ -35,6 +37,7 @@ useCopyCode()
     </VPHome>
 
     <VPDoc v-else>
+      <template #doc-footer-before><slot name="doc-footer-before" /></template>
       <template #doc-before><slot name="doc-before" /></template>
       <template #doc-after><slot name="doc-after" /></template>
 

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

@@ -1,19 +1,25 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useRoute } from 'vitepress'
 import { useSidebar } from '../composables/sidebar'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
-const { path } = useRoute()
-const { hasSidebar } = useSidebar()
+const route = useRoute()
+const { hasSidebar, hasAside } = useSidebar()
 
-const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
+const pageName = computed(() =>
+  route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
+)
 </script>
 
 <template>
-  <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar }">
+  <div
+    class="VPDoc"
+    :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
+  >
     <div class="container">
-      <div class="aside">
+      <div v-if="hasAside" class="aside">
         <div class="aside-curtain" />
         <div class="aside-container">
           <div class="aside-content">
@@ -32,13 +38,11 @@ const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
       <div class="content">
         <div class="content-container">
           <slot name="doc-before" />
-
           <main class="main">
             <Content class="vp-doc" :class="pageName" />
           </main>
-
+          <slot name="doc-footer-before" />
           <VPDocFooter />
-
           <slot name="doc-after" />
         </div>
       </div>
@@ -167,26 +171,9 @@ const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
 
 .content-container {
   margin: 0 auto;
-  max-width: 688px;
-}
-
-.edit-link {
-  margin: 0 0 32px;
-}
-
-.edit-link .vt-link {
-  font-size: 14px;
-  color: var(--vt-c-brand);
-  font-weight: 500;
 }
 
-.vt-icon {
-  width: 18px;
-  height: 18px;
-  color: var(--vt-c-brand);
-  display: inline-block;
-  margin-right: 8px;
-  position: relative;
-  top: -1px;
+.VPDoc.has-aside .content-container {
+  max-width: 688px;
 }
 </style>

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

@@ -22,7 +22,9 @@ const resolvedHeaders = computed(() => {
 
 function handleClick({ target: el }: Event) {
   const id = '#' + (el as HTMLAnchorElement).href!.split('#')[1]
-  const heading = document.querySelector(id) as HTMLAnchorElement
+  const heading = document.querySelector(
+    decodeURIComponent(id)
+  ) as HTMLAnchorElement
   heading?.focus()
 }
 </script>

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

@@ -13,15 +13,21 @@ 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
+})
 </script>
 
 <template>
-  <footer v-if="control.prev || control.next" class="VPDocFooter">
-    <div class="edit-info">
-      <div v-if="theme.editLink && frontmatter.editLink !== false" class="edit-link">
+  <footer v-if="showFooter" class="VPDocFooter">
+    <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
+      <div v-if="hasEditLink" class="edit-link">
         <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
           <VPIconEdit class="edit-link-icon" />
           {{ editLink.text }}
@@ -33,16 +39,16 @@ const hasLastUpdated = computed(() => {
       </div>
     </div>
 
-    <div class="prev-next">
+    <div v-if="control.prev || control.next" class="prev-next">
       <div class="pager">
         <a v-if="control.prev" class="pager-link prev" :href="normalizeLink(control.prev.link)">
-          <span class="desc">Previous page</span>
+          <span class="desc">{{ theme.docFooter?.prev ?? 'Previous page' }}</span>
           <span class="title">{{ control.prev.text }} </span>
         </a>
       </div>
       <div class="pager" :class="{ 'has-prev': control.prev }">
         <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
-          <span class="desc">Next page</span>
+          <span class="desc">{{ theme.docFooter?.next ?? 'Next page' }}</span>
           <span class="title">{{ control.next.text }}</span>
         </a>
       </div>

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, watchEffect, onMounted } from 'vue'
+import { ref, computed, watchEffect, onMounted } from 'vue'
 import { useData } from 'vitepress'
 
 const { theme, page } = useData()
 
-const date = new Date(page.value.lastUpdated!)
-const isoDatetime = date.toISOString()
+const date = computed(() => new Date(page.value.lastUpdated!))
+const isoDatetime = computed(() => date.value.toISOString())
 const datetime = ref('')
 
 // set time on mounted hook because the locale string might be different
@@ -13,7 +13,7 @@ const datetime = ref('')
 // calculated at build time
 onMounted(() => {
   watchEffect(() => {
-    datetime.value = date.toLocaleString(window.navigator.language)
+    datetime.value = date.value.toLocaleString(window.navigator.language)
   })
 })
 </script>

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

@@ -60,7 +60,7 @@ function onBlur() {
 }
 
 .VPFlyout:hover {
-  color: var(--vp-c-bland);
+  color: var(--vp-c-brand);
   transition: color 0.25s;
 }
 
@@ -72,6 +72,14 @@ function onBlur() {
   fill: var(--vp-c-text-2);
 }
 
+.VPFlyout.active .text {
+  color: var(--vp-c-brand);
+}
+
+.VPFlyout.active:hover .text {
+  color: var(--vp-c-brand-dark);
+}
+
 .VPFlyout:hover .menu,
 .button[aria-expanded="true"] + .menu {
   opacity: 1;

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

@@ -9,8 +9,8 @@ const { hasSidebar } = useSidebar()
 <template>
   <footer v-if="theme.footer" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
     <div class="container">
-      <p class="message">{{ theme.footer.message }}</p>
-      <p class="copyright">{{ theme.footer.copyright }}</p>
+      <p class="message" v-html="theme.footer.message"></p>
+      <p class="copyright" v-html="theme.footer.copyright"></p>
     </div>
   </footer>
 </template>

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
 import VPButton from './VPButton.vue'
+import VPImage from './VPImage.vue'
 
 export interface HeroAction {
   theme?: 'brand' | 'alt'
@@ -7,16 +9,11 @@ export interface HeroAction {
   link: string
 }
 
-export interface Image {
-  src: string
-  alt?: string
-}
-
 defineProps<{
   name?: string
   text: string
   tagline?: string
-  image?: Image
+  image?: DefaultTheme.ThemeableImage
   actions?: HeroAction[]
 }>()
 </script>
@@ -25,7 +22,9 @@ defineProps<{
   <div class="VPHero" :class="{ 'has-image': image }">
     <div class="container">
       <div class="main">
-        <h1 v-if="name" class="name"><span class="clip">{{ name }}</span></h1>
+        <h1 v-if="name" class="name">
+          <span class="clip">{{ name }}</span>
+        </h1>
         <p v-if="text" class="text">{{ text }}</p>
         <p v-if="tagline" class="tagline">{{ tagline }}</p>
 
@@ -45,7 +44,7 @@ defineProps<{
       <div v-if="image" class="image">
         <div class="image-container">
           <div class="image-bg" />
-          <img class="image-src" :src="image.src" :alt="image.alt">
+          <VPImage class="image-src" :image="image" />
         </div>
       </div>
     </div>
@@ -293,7 +292,7 @@ defineProps<{
   }
 }
 
-.image-src {
+:deep(.image-src) {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -302,13 +301,13 @@ defineProps<{
 }
 
 @media (min-width: 640px) {
-  .image-src {
+  :deep(.image-src) {
     max-width: 256px;
   }
 }
 
 @media (min-width: 960px) {
-  .image-src {
+  :deep(.image-src) {
     max-width: 320px;
   }
 }

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { withBase } from 'vitepress'
+
+defineProps<{
+  image: DefaultTheme.ThemeableImage
+}>()
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<template>
+  <template v-if="image">
+    <img
+      v-if="typeof image === 'string' || 'src' in image"
+      class="VPImage"
+      v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+      :src="withBase(typeof image === 'string' ? image : image.src)"
+    />
+    <template v-else>
+      <VPImage class="dark" :image="image.dark" v-bind="$attrs" />
+      <VPImage class="light" :image="image.light" v-bind="$attrs" />
+    </template>
+  </template>
+</template>
+
+<style scoped>
+html:not(.dark) .VPImage.dark {
+  display: none;
+}
+.dark .VPImage.light {
+  display: none;
+}
+</style>