vitepress 1.3.4 → 1.4.1

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

@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, watch } from 'vue';
 import { useData, useRoute } from 'vitepress';
 import { contentUpdatedCallbacks } from '../utils';
 const runCbs = () => contentUpdatedCallbacks.forEach((fn) => fn());
@@ -9,7 +9,8 @@ export const Content = defineComponent({
     },
     setup(props) {
         const route = useRoute();
-        const { site } = useData();
+        const { frontmatter, site } = useData();
+        watch(frontmatter, runCbs, { deep: true, flush: 'post' });
         return () => h(props.as, site.value.contentProps ?? { style: { position: 'relative' } }, [
             route.component
                 ? h(route.component, {

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

@@ -64,7 +64,7 @@ function createHeadElement([tag, attrs, innerHTML]) {
     if (innerHTML) {
         el.innerHTML = innerHTML;
     }
-    if (tag === 'script' && !attrs.async) {
+    if (tag === 'script' && attrs.async == null) {
         // async is true by default for dynamically created scripts
         ;
         el.async = false;

package/dist/client/app/data.js

@@ -1,5 +1,5 @@
 import siteData from '@siteData';
-import { useDark } from '@vueuse/core';
+import { useDark, usePreferredDark } from '@vueuse/core';
 import { computed, inject, readonly, ref, shallowRef, watch } from 'vue';
 import { APPEARANCE_KEY, createTitle, inBrowser, resolveSiteDataByRoute } from '../shared';
 export const dataSymbol = Symbol();
@@ -19,13 +19,15 @@ export function initData(route) {
     const appearance = site.value.appearance; // fine with reactivity being lost here, config change triggers a restart
     const isDark = appearance === 'force-dark'
         ? ref(true)
-        : appearance
-            ? useDark({
-                storageKey: APPEARANCE_KEY,
-                initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'),
-                ...(typeof appearance === 'object' ? appearance : {})
-            })
-            : ref(false);
+        : appearance === 'force-auto'
+            ? usePreferredDark()
+            : appearance
+                ? useDark({
+                    storageKey: APPEARANCE_KEY,
+                    initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'),
+                    ...(typeof appearance === 'object' ? appearance : {})
+                })
+                : ref(false);
     const hashRef = ref(inBrowser ? location.hash : '');
     if (inBrowser) {
         window.addEventListener('hashchange', () => {

package/dist/client/app/router.js

@@ -46,6 +46,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 if (!comp) {
                     throw new Error(`Invalid route component: ${comp}`);
                 }
+                await router.onAfterPageLoad?.(href);
                 route.path = inBrowser ? pendingPath : withBase(pendingPath);
                 route.component = markRaw(comp);
                 route.data = import.meta.env.PROD

package/dist/client/index.d.ts

@@ -32,6 +32,10 @@ interface Router {
      * updated). Return `false` to cancel the navigation.
      */
     onBeforePageLoad?: (to: string) => Awaitable<void | boolean>;
+    /**
+     * Called after the page component is loaded (before the page component is updated).
+     */
+    onAfterPageLoad?: (to: string) => Awaitable<void>;
     /**
      * Called after the route changes.
      */
@@ -110,20 +114,20 @@ declare function defineClientComponent(loader: AsyncComponentLoader, args?: any[
 };
 declare function getScrollOffset(): number;
 
-declare const Content: vue.DefineComponent<{
+declare const Content: vue.DefineComponent<vue.ExtractPropTypes<{
     as: {
         type: (ObjectConstructor | StringConstructor)[];
         default: string;
     };
-}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, {}, {}, {}, 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>;
 
 export { Content, type EnhanceAppContext, type Route, type Router, type Theme, type VitePressData, escapeHtml as _escapeHtml, dataSymbol, defineClientComponent, getScrollOffset, inBrowser, onContentUpdated, useData, useRoute, useRouter, withBase };

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

@@ -22,7 +22,7 @@ const isExternal = computed(
 )
 
 const component = computed(() => {
-  return props.tag || props.href ? 'a' : 'button'
+  return props.tag || (props.href ? 'a' : 'button')
 })
 </script>
 

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

@@ -78,6 +78,12 @@ function onBlur() {
   color: var(--vp-c-brand-2);
 }
 
+.button[aria-expanded="false"] + .menu {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(0);
+}
+
 .VPFlyout:hover .menu,
 .button[aria-expanded="true"] + .menu {
   opacity: 1;
@@ -85,12 +91,6 @@ function onBlur() {
   transform: translateY(0);
 }
 
-.button[aria-expanded="false"] + .menu {
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(0);
-}
-
 .button {
   display: flex;
   align-items: center;

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

@@ -440,10 +440,20 @@ function formMarkRegex(terms: Set<string>) {
           <input
             ref="searchInput"
             v-model="filterText"
-            :placeholder="buttonText"
-            id="localsearch-input"
+            :aria-activedescendant="selectedIndex > -1 ? ('localsearch-item-' + selectedIndex) : undefined"
+            aria-autocomplete="both"
+            :aria-controls="results?.length ? 'localsearch-list' : undefined"
             aria-labelledby="localsearch-label"
+            autocapitalize="off"
+            autocomplete="off"
+            autocorrect="off"
             class="search-input"
+            id="localsearch-input"
+            enterkeyhint="go"
+            maxlength="64"
+            :placeholder="buttonText"
+            spellcheck="false"
+            type="search"
           />
           <div class="search-actions">
             <button
@@ -482,8 +492,9 @@ function formMarkRegex(terms: Set<string>) {
           <li
             v-for="(p, index) in results"
             :key="p.id"
-            role="option"
+            :id="'localsearch-item-' + index"
             :aria-selected="selectedIndex === index ? 'true' : 'false'"
+            role="option"
           >
             <a
               :href="p.id"

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

@@ -14,12 +14,19 @@ const { page } = useData()
 <template>
   <div class="VPMenuLink">
     <VPLink
-      :class="{ active: isActive(page.relativePath, item.activeMatch || item.link, !!item.activeMatch) }"
+      :class="{
+        active: isActive(
+          page.relativePath,
+          item.activeMatch || item.link,
+          !!item.activeMatch
+        )
+      }"
       :href="item.link"
       :target="item.target"
       :rel="item.rel"
+      :no-icon="item.noIcon"
     >
-      {{ item.text }}
+      <span v-html="item.text"></span>
     </VPLink>
   </div>
 </template>
@@ -40,7 +47,9 @@ const { page } = useData()
   font-weight: 500;
   color: var(--vp-c-text-1);
   white-space: nowrap;
-  transition: background-color 0.25s, color 0.25s;
+  transition:
+    background-color 0.25s,
+    color 0.25s;
 }
 
 .link:hover {

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

@@ -22,9 +22,9 @@ const { page } = useData()
       )
     }"
     :href="item.link"
-    :noIcon="item.noIcon"
     :target="item.target"
     :rel="item.rel"
+    :no-icon="item.noIcon"
     tabindex="0"
   >
     <span v-html="item.text"></span>

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

@@ -16,9 +16,10 @@ const closeScreen = inject('close-screen') as () => void
     :href="item.link"
     :target="item.target"
     :rel="item.rel"
+    :no-icon="item.noIcon"
     @click="closeScreen"
   >
-    {{ item.text }}
+    <span v-html="item.text"></span>
   </VPLink>
 </template>
 

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

@@ -16,9 +16,11 @@ const closeScreen = inject('close-screen') as () => void
     :href="item.link"
     :target="item.target"
     :rel="item.rel"
+    :no-icon="item.noIcon"
     @click="closeScreen"
-    v-html="item.text"
-  />
+  >
+    <span v-html="item.text"></span>
+  </VPLink>
 </template>
 
 <style scoped>
@@ -30,7 +32,9 @@ const closeScreen = inject('close-screen') as () => void
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
-  transition: border-color 0.25s, color 0.25s;
+  transition:
+    border-color 0.25s,
+    color 0.25s;
 }
 
 .VPNavScreenMenuLink:hover {

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

@@ -56,32 +56,7 @@ export function resolveHeaders(headers, range) {
         : levelsRange === 'deep'
             ? [2, 6]
             : levelsRange;
-    headers = headers.filter((h) => h.level >= high && h.level <= low);
-    // clear previous caches
-    resolvedHeaders.length = 0;
-    // update global header list for active link rendering
-    for (const { element, link } of headers) {
-        resolvedHeaders.push({ element, link });
-    }
-    const ret = [];
-    outer: for (let i = 0; i < headers.length; i++) {
-        const cur = headers[i];
-        if (i === 0) {
-            ret.push(cur);
-        }
-        else {
-            for (let j = i - 1; j >= 0; j--) {
-                const prev = headers[j];
-                if (prev.level < cur.level) {
-                    ;
-                    (prev.children || (prev.children = [])).push(cur);
-                    continue outer;
-                }
-            }
-            ret.push(cur);
-        }
-    }
-    return ret;
+    return buildTree(headers, high, low);
 }
 export function useActiveAnchor(container, marker) {
     const { isAsideEnabled } = useAside();
@@ -176,3 +151,30 @@ function getAbsoluteTop(element) {
     }
     return offsetTop;
 }
+function buildTree(data, min, max) {
+    resolvedHeaders.length = 0;
+    const result = [];
+    const stack = [];
+    data.forEach((item) => {
+        const node = { ...item, children: [] };
+        let parent = stack[stack.length - 1];
+        while (parent && parent.level >= node.level) {
+            stack.pop();
+            parent = stack[stack.length - 1];
+        }
+        if (node.element.classList.contains('ignore-header') ||
+            (parent && 'shouldIgnore' in parent)) {
+            stack.push({ level: node.level, shouldIgnore: true });
+            return;
+        }
+        if (node.level > max || node.level < min)
+            return;
+        resolvedHeaders.push({ element: node.element, link: node.link });
+        if (parent)
+            parent.children.push(node);
+        else
+            result.push(node);
+        stack.push(node);
+    });
+    return result;
+}

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

@@ -1,9 +1,5 @@
 /* webfont-marker-begin */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
-
-html body {
-  font-synthesis: style;
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 /* webfont-marker-end */
 
 @font-face {

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

@@ -16,7 +16,10 @@ export { default as VPHomeContent } from './components/VPHomeContent.vue';
 export { default as VPHomeHero } from './components/VPHomeHero.vue';
 export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';
 export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';
+export { default as VPLink } from './components/VPLink.vue';
 export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';
+export { default as VPSocialLink } from './components/VPSocialLink.vue';
+export { default as VPSocialLinks } from './components/VPSocialLinks.vue';
 export { default as VPSponsors } from './components/VPSponsors.vue';
 export { default as VPTeamPage } from './components/VPTeamPage.vue';
 export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';