vitepress 2.0.0-alpha.16 → 2.0.0-alpha.17

package/README.md

@@ -26,3 +26,14 @@ Please make sure to read the [Contributing Guide](https://github.com/vuejs/vitep
 [MIT](https://github.com/vuejs/vitepress/blob/main/LICENSE)
 
 Copyright (c) 2019-present, Yuxi (Evan) You
+
+## Special Thanks
+
+This project would not be possible without the support of these amazing companies and tools.
+
+|                                                                                                                                             |                                              |                                                                                                                                                                                                        |
+| ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| <a href="https://voidzero.dev" target="_blank"><img alt="VoidZero's logo" src="https://github.com/voidzero-dev.png" width="80" /></a>         | **[VoidZero](https://voidzero.dev)**         | The company behind Vite, Vitest, Rolldown, and Oxc. VoidZero has been a long-time sponsor of VitePress. VitePress itself is built on top of this ecosystem of high-performance JavaScript tooling.     |
+| <a href="https://stackblitz.com" target="_blank"><img alt="StackBlitz's logo" src="https://github.com/stackblitz.png" width="80" /></a>       | **[StackBlitz](https://stackblitz.com)**     | Creators of WebContainers and a browser-based development platform. Their technology powers the VitePress playground and provides instant preview releases for our pull requests and commits.          |
+| <a href="https://algolia.com" target="_blank"><img alt="Algolia's logo" src="https://github.com/algolia.png" width="80" /></a>                | **[Algolia](https://algolia.com)**           | An AI-powered search platform that provides fast, scalable search. Algolia powers DocSearch for VitePress. Their team has been a long-time partner in building and maintaining our search integration. |
+| <a href="https://browserstack.com" target="_blank"><img alt="BrowserStack's logo" src="https://github.com/browserstack.png" width="80" /></a> | **[BrowserStack](https://browserstack.com)** | A cloud-based testing platform for websites and mobile apps. BrowserStack provides the cross-browser and real-device infrastructure used to ensure VitePress works consistently across all browsers.   |

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

@@ -41,7 +41,7 @@ export function useCopyCode() {
 }
 async function copyToClipboard(text) {
     try {
-        return navigator.clipboard.writeText(text);
+        await navigator.clipboard.writeText(text);
     }
     catch {
         const element = document.createElement('textarea');

package/dist/client/app/router.js

@@ -18,17 +18,25 @@ export function createRouter(loadPageModule, fallbackComponent) {
     const router = {
         route,
         async go(href, options) {
+            const { hash } = new URL(href, fakeHost);
+            const hasTextFragment = inBrowser && document.fragmentDirective && hash.includes(':~:');
             href = normalizeHref(href);
             if ((await router.onBeforeRouteChange?.(href)) === false)
                 return;
-            if (!inBrowser || (await changeRoute(href, options)))
-                await loadPage(href);
+            if (!inBrowser ||
+                (await changeRoute(href, { ...options, hasTextFragment }))) {
+                await loadPage(href, { initialLoad: !!options?.initialLoad });
+            }
+            if (hasTextFragment) {
+                // this will create a new history entry, but that's almost unavoidable
+                location.hash = hash;
+            }
             syncRouteQueryAndHash();
             await router.onAfterRouteChange?.(href);
         }
     };
     let latestPendingPath = null;
-    async function loadPage(href, scrollPosition = 0, isRetry = false) {
+    async function loadPage(href, { scrollPosition = 0, isRetry = false, initialLoad = false } = {}) {
         if ((await router.onBeforePageLoad?.(href)) === false)
             return;
         const targetLoc = new URL(href, fakeHost);
@@ -61,7 +69,8 @@ export function createRouter(loadPageModule, fallbackComponent) {
                             href = actualPathname + targetLoc.search + targetLoc.hash;
                             history.replaceState({}, '', href);
                         }
-                        return scrollTo(targetLoc.hash, false, scrollPosition);
+                        if (!initialLoad)
+                            scrollTo(targetLoc.hash, false, scrollPosition);
                     });
                 }
             }
@@ -78,7 +87,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 try {
                     const res = await fetch(siteDataRef.value.base + 'hashmap.json');
                     window.__VP_HASH_MAP__ = await res.json();
-                    await loadPage(href, scrollPosition, true);
+                    await loadPage(href, { scrollPosition, isRetry: true, initialLoad });
                     return;
                 }
                 catch (e) { }
@@ -144,7 +153,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
             if (e.state === null)
                 return;
             const href = normalizeHref(location.href);
-            await loadPage(href, (e.state && e.state.scrollPosition) || 0);
+            await loadPage(href, { scrollPosition: e.state.scrollPosition || 0 });
             syncRouteQueryAndHash();
             await router.onAfterRouteChange?.(href);
         });
@@ -242,15 +251,16 @@ function normalizeHref(href) {
     else if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html')) {
         url.pathname += '.html';
     }
-    return url.pathname + url.search + url.hash;
+    return url.pathname + url.search + url.hash.split(':~:')[0];
 }
-async function changeRoute(href, { smoothScroll = false, initialLoad = false, replace = false } = {}) {
+async function changeRoute(href, { smoothScroll = false, 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) {
-            scrollTo(nextUrl.hash, smoothScroll);
+            if (!hasTextFragment)
+                scrollTo(nextUrl.hash, smoothScroll);
             return false;
         }
     }
@@ -270,7 +280,8 @@ async function changeRoute(href, { smoothScroll = false, initialLoad = false, re
                     oldURL: currentUrl.href,
                     newURL: nextUrl.href
                 }));
-                scrollTo(nextUrl.hash, smoothScroll);
+                if (!hasTextFragment)
+                    scrollTo(nextUrl.hash, smoothScroll);
             }
             return false;
         }

package/dist/client/shared.js

@@ -2,7 +2,7 @@ export const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
 export const APPEARANCE_KEY = 'vitepress-theme-appearance';
 export const VP_SOURCE_KEY = '[VP_SOURCE]';
 const UnpackStackView = Symbol('stack-view:unpack');
-const HASH_RE = /#.*$/;
+const HASH_WITHOUT_FRAGMENT_RE = /#.*?(?=:~:|$)/;
 const HASH_OR_QUERY_RE = /[?#].*$/;
 const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/;
 export const inBrowser = typeof document !== 'undefined';
@@ -27,7 +27,7 @@ export function isActive(currentPath, matchPath, asRegex = false) {
     if (normalize(matchPath) !== currentPath) {
         return false;
     }
-    const hashMatch = matchPath.match(HASH_RE);
+    const hashMatch = matchPath.match(HASH_WITHOUT_FRAGMENT_RE);
     if (hashMatch) {
         return (inBrowser ? location.hash : '') === hashMatch[0];
     }

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

@@ -61,6 +61,7 @@ provide(layoutInfoInjectionKey, { heroImageSlotExists })
       <template #home-hero-info><slot name="home-hero-info" /></template>
       <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
       <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-actions-before-actions><slot name="home-hero-actions-before-actions" /></template>
       <template #home-hero-image><slot name="home-hero-image" /></template>
       <template #home-hero-after><slot name="home-hero-after" /></template>
       <template #home-features-before><slot name="home-features-before" /></template>

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

@@ -29,6 +29,7 @@ const { isHome, hasSidebar } = useLayout()
       <template #home-hero-info><slot name="home-hero-info" /></template>
       <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
       <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-actions-before-actions><slot name="home-hero-actions-before-actions" /></template>
       <template #home-hero-image><slot name="home-hero-image" /></template>
       <template #home-hero-after><slot name="home-hero-after" /></template>
       <template #home-features-before><slot name="home-features-before" /></template>

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

@@ -41,8 +41,10 @@ defineProps<{
       />
       <div v-else-if="icon" class="icon" v-html="icon"></div>
       <h2 class="title" v-html="title"></h2>
-      <p v-if="details" class="details" v-html="details"></p>
-
+      <ul v-if="Array.isArray(details)" class="details">
+        <li v-for="item in details" :key="item" v-html="item"></li>
+      </ul>
+      <p v-else-if="details" class="details" v-html="details"></p>
       <div v-if="linkText" class="link-text">
         <p class="link-text-value">
           {{ linkText }} <span class="vpi-arrow-right link-text-icon" />
@@ -105,6 +107,11 @@ defineProps<{
   color: var(--vp-c-text-2);
 }
 
+ul.details {
+  list-style-type: disc;
+  padding-left: 14px;
+}
+
 .link-text {
   padding-top: 8px;
 }

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

@@ -42,6 +42,7 @@ const { heroImageSlotExists } = inject(
         <slot name="home-hero-info-after" />
 
         <div v-if="actions" class="actions">
+          <slot name="home-hero-actions-before-actions" />
           <div v-for="action in actions" :key="action.link" class="action">
             <VPButton
               tag="a"
@@ -143,6 +144,11 @@ const { heroImageSlotExists } = inject(
   font-size: 32px;
   font-weight: 700;
   white-space: pre-wrap;
+
+  &:lang(ja) {
+    font-feature-settings: 'palt';
+    word-break: auto-phrase;
+  }
 }
 
 .VPHero.has-image .name,

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

@@ -19,6 +19,7 @@ const { frontmatter, theme } = useData()
       <template #home-hero-info><slot name="home-hero-info" /></template>
       <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
       <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-actions-before-actions><slot name="home-hero-actions-before-actions" /></template>
       <template #home-hero-image><slot name="home-hero-image" /></template>
     </VPHomeHero>
     <slot name="home-hero-after" />

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

@@ -19,6 +19,7 @@ const { frontmatter: fm } = useData()
     <template #home-hero-info><slot name="home-hero-info" /></template>
     <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
     <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+    <template #home-hero-actions-before-actions><slot name="home-hero-actions-before-actions" /></template>
     <template #home-hero-image><slot name="home-hero-image" /></template>
   </VPHero>
 </template>

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

@@ -7,6 +7,7 @@ import VPLink from './VPLink.vue'
 
 const props = defineProps<{
   item: T
+  rel?: string
 }>()
 
 const { page } = useData()
@@ -17,6 +18,14 @@ const href = computed(() =>
     : props.item.link
 )
 
+const isActiveLink = computed(() =>
+  isActive(
+    page.value.relativePath,
+    props.item.activeMatch || href.value,
+    !!props.item.activeMatch
+  )
+)
+
 defineOptions({ inheritAttrs: false })
 </script>
 
@@ -24,16 +33,10 @@ defineOptions({ inheritAttrs: false })
   <div class="VPMenuLink">
     <VPLink
       v-bind="$attrs"
-      :class="{
-        active: isActive(
-          page.relativePath,
-          item.activeMatch || href,
-          !!item.activeMatch
-        )
-      }"
+      :class="{ active: isActiveLink }"
       :href
       :target="item.target"
-      :rel="item.rel"
+      :rel="props.rel ?? item.rel"
       :no-icon="item.noIcon"
     >
       <span v-html="item.text"></span>

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

@@ -31,7 +31,13 @@ const hasExtraContent = computed(
       <p class="trans-title">{{ currentLang.label }}</p>
 
       <template v-for="locale in localeLinks" :key="locale.link">
-        <VPMenuLink :item="locale" :lang="locale.lang" :dir="locale.dir" />
+        <VPMenuLink
+          :item="locale"
+          :lang="locale.lang"
+          :hreflang="locale.lang"
+          rel="alternate"
+          :dir="locale.dir"
+        />
       </template>
     </div>
 

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

@@ -11,31 +11,36 @@ const props = defineProps<{
 
 const { page } = useData()
 
-const isChildActive = (navItem: DefaultTheme.NavItem) => {
+const isActiveGroup = computed(() => {
+  if (props.item.activeMatch) {
+    return isActive(page.value.relativePath, props.item.activeMatch, true)
+  }
+  return isChildActive(props.item)
+})
+
+function isChildActive(navItem: DefaultTheme.NavItem): boolean {
   if ('component' in navItem) return false
 
   if ('link' in navItem) {
+    const href =
+      typeof navItem.link === 'function'
+        ? navItem.link(page.value)
+        : navItem.link
+
     return isActive(
       page.value.relativePath,
-      typeof navItem.link === "function" ? navItem.link(page.value) : navItem.link,
-      !!props.item.activeMatch
+      navItem.activeMatch || href,
+      !!navItem.activeMatch
     )
   }
 
   return navItem.items.some(isChildActive)
 }
-
-const childrenActive = computed(() => isChildActive(props.item))
 </script>
 
 <template>
   <VPFlyout
-    :class="{
-      VPNavBarMenuGroup: true,
-      active:
-        isActive(page.relativePath, item.activeMatch, !!item.activeMatch) ||
-        childrenActive
-    }"
+    :class="{ VPNavBarMenuGroup: true, active: isActiveGroup }"
     :button="item.text"
     :items="item.items"
   />

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

@@ -16,18 +16,19 @@ const href = computed(() =>
     ? props.item.link(page.value)
     : props.item.link
 )
+
+const isActiveLink = computed(() =>
+  isActive(
+    page.value.relativePath,
+    props.item.activeMatch || href.value,
+    !!props.item.activeMatch
+  )
+)
 </script>
 
 <template>
   <VPLink
-    :class="{
-      VPNavBarMenuLink: true,
-      active: isActive(
-        page.relativePath,
-        item.activeMatch || href,
-        !!item.activeMatch
-      )
-    }"
+    :class="{ VPNavBarMenuLink: true, active: isActiveLink }"
     :href
     :target="item.target"
     :rel="item.rel"

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

@@ -19,7 +19,13 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
       <p class="title">{{ currentLang.label }}</p>
 
       <template v-for="locale in localeLinks" :key="locale.link">
-        <VPMenuLink :item="locale" :lang="locale.lang" :dir="locale.dir" />
+        <VPMenuLink
+          :item="locale"
+          :lang="locale.lang"
+          :hreflang="locale.lang"
+          rel="alternate"
+          :dir="locale.dir"
+        />
       </template>
     </div>
   </VPFlyout>

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

@@ -71,6 +71,7 @@ export function registerWatchers({ closeSidebar }) {
     }
     const route = useRoute();
     watch(() => route.path, closeSidebar);
+    watch(is960, closeSidebar);
     useCloseSidebarOnEscape(closeSidebar);
 }
 export const layoutInfoInjectionKey = Symbol('layout-info');

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

@@ -44,6 +44,8 @@
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    text-autospace: normal;
+    text-spacing-trim: normal;
   }
 
   main {
@@ -119,6 +121,7 @@
   kbd,
   samp {
     font-family: var(--vp-font-family-mono);
+    text-autospace: no-autospace;
   }
 
   img,

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

@@ -92,6 +92,7 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc p,
+.vp-doc img,
 .vp-doc summary {
   margin: 16px 0;
 }