vitepress 2.0.0-alpha.11 → 2.0.0-alpha.13

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

@@ -1,5 +1,5 @@
 import { inBrowser } from 'vitepress';
-const shellRE = /language-(shellscript|shell|bash|sh|zsh)/;
+import { isShell } from '../../shared';
 const ignoredNodes = ['.vp-copy-ignore', '.diff.remove'].join(', ');
 export function useCopyCode() {
     if (inBrowser) {
@@ -12,7 +12,6 @@ export function useCopyCode() {
                 if (!parent || !sibling) {
                     return;
                 }
-                const isShell = shellRE.test(parent.className);
                 // Clone the node and remove the ignored nodes
                 const clone = sibling.cloneNode(true);
                 clone.querySelectorAll(ignoredNodes).forEach((node) => node.remove());
@@ -20,7 +19,10 @@ export function useCopyCode() {
                 // doesn't affect the newlines already in the code because they are rendered as `\n<span class="line"></span>`
                 clone.innerHTML = clone.innerHTML.replace(/\n+/g, '\n');
                 let text = clone.textContent || '';
-                if (isShell) {
+                // NOTE: Any changes to this the code here may also need to update
+                // `transformerDisableShellSymbolSelect` in `src/node/markdown/plugins/highlight.ts`
+                const lang = /language-(\w+)/.exec(parent.className)?.[1] || '';
+                if (isShell(lang)) {
                     text = text.replace(/^ *(\$|>) /gm, '').trim();
                 }
                 copyToClipboard(text).then(() => {

package/dist/client/app/data.js

@@ -4,15 +4,7 @@ import { computed, inject, readonly, ref, shallowRef, watch } from 'vue';
 import { APPEARANCE_KEY, createTitle, inBrowser, resolveSiteDataByRoute } from '../shared';
 export const dataSymbol = Symbol();
 // site data is a singleton
-export const siteDataRef = shallowRef((import.meta.env.PROD ? siteData : readonly(siteData)));
-// hmr
-if (import.meta.hot) {
-    import.meta.hot.accept('@siteData', (m) => {
-        if (m) {
-            siteDataRef.value = m.default;
-        }
-    });
-}
+export const siteDataRef = shallowRef(readonly(siteData));
 // per-app data
 export function initData(route) {
     const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath));

package/dist/client/app/router.js

@@ -4,7 +4,7 @@ import { siteDataRef } from './data';
 import { getScrollOffset, 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.
+// matter and is only passed to support same-host hrefs
 const fakeHost = 'http://a.com';
 const getDefaultRoute = () => ({
     path: '/',
@@ -177,21 +177,43 @@ export function scrollTo(hash, smooth = false, scrollPosition = 0) {
     catch (e) {
         console.warn(e);
     }
-    if (target) {
-        const targetPadding = parseInt(window.getComputedStyle(target).paddingTop, 10);
-        const targetTop = window.scrollY +
-            target.getBoundingClientRect().top -
-            getScrollOffset() +
-            targetPadding;
-        function scrollToTarget() {
-            // only smooth scroll if distance is smaller than screen height.
-            if (!smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight)
-                window.scrollTo(0, targetTop);
-            else
-                window.scrollTo({ left: 0, top: targetTop, behavior: 'smooth' });
-        }
-        requestAnimationFrame(scrollToTarget);
-    }
+    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 });
+        // focus the target element for better accessibility
+        target.focus({ preventScroll: true });
+        // return if focus worked
+        if (document.activeElement === target)
+            return;
+        // element has tabindex already, likely not focusable
+        // because of some other reason, bail out
+        if (target.hasAttribute('tabindex'))
+            return;
+        const restoreTabindex = () => {
+            target.removeAttribute('tabindex');
+            target.removeEventListener('blur', restoreTabindex);
+        };
+        // temporarily make the target element focusable
+        target.setAttribute('tabindex', '-1');
+        target.addEventListener('blur', restoreTabindex);
+        // try to focus again
+        target.focus({ preventScroll: true });
+        // remove tabindex and event listener if focus still not worked
+        if (document.activeElement !== target)
+            restoreTabindex();
+    };
+    requestAnimationFrame(scrollToTarget);
 }
 function handleHMR(route) {
     // update route.data on HMR updates of active page
@@ -213,7 +235,7 @@ function shouldHotReload(payload) {
 function normalizeHref(href) {
     const url = new URL(href, fakeHost);
     url.pathname = url.pathname.replace(/(^|\/)index(\.html)?$/, '$1');
-    // ensure correct deep link so page refresh lands on correct files.
+    // ensure correct deep link so page refresh lands on correct files
     if (siteDataRef.value.cleanUrls) {
         url.pathname = url.pathname.replace(/\.html$/, '');
     }

package/dist/client/shared.js

@@ -237,3 +237,7 @@ 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/VPAlgoliaSearchBox.vue

@@ -78,7 +78,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
     }
   })
 
-  docsearch(options)
+  docsearch(options as any)
 }
 
 function getRelativePath(url: string) {

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

@@ -24,6 +24,7 @@ withDefaults(defineProps<Props>(), {
   line-height: 22px;
   font-size: 12px;
   font-weight: 500;
+  white-space: nowrap;
   transform: translateY(-2px);
 }
 

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

@@ -1,26 +1,38 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, onMounted } from 'vue'
+import { useNavigatorLanguage } from '@vueuse/core'
+import { computed, onMounted, shallowRef, useTemplateRef, watchEffect } from 'vue'
 import { useData } from '../composables/data'
 
-const { theme, page, lang } = useData()
+const { theme, page, lang: pageLang } = useData()
+const { language: browserLang } = useNavigatorLanguage()
 
-const date = computed(
-  () => new Date(page.value.lastUpdated!)
-)
+const timeRef = useTemplateRef('timeRef')
+
+const date = computed(() => new Date(page.value.lastUpdated!))
 const isoDatetime = computed(() => date.value.toISOString())
-const datetime = ref('')
+const datetime = shallowRef('')
 
 // set time on mounted hook to avoid hydration mismatch due to
 // potential differences in timezones of the server and clients
 onMounted(() => {
   watchEffect(() => {
+    const lang = theme.value.lastUpdated?.formatOptions?.forceLocale
+      ? pageLang.value
+      : browserLang.value
+
     datetime.value = new Intl.DateTimeFormat(
-      theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+      lang,
       theme.value.lastUpdated?.formatOptions ?? {
-        dateStyle: 'short',
-        timeStyle: 'short'
+        dateStyle: 'medium',
+        timeStyle: 'medium'
       }
     ).format(date.value)
+
+    if (lang && pageLang.value !== lang) {
+      timeRef.value?.setAttribute('lang', lang)
+    } else {
+      timeRef.value?.removeAttribute('lang')
+    }
   })
 })
 </script>
@@ -28,7 +40,7 @@ onMounted(() => {
 <template>
   <p class="VPLastUpdated">
     {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
-    <time :datetime="isoDatetime">{{ datetime }}</time>
+    <time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>
 

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

@@ -5,18 +5,12 @@ defineProps<{
   headers: DefaultTheme.OutlineItem[]
   root?: boolean
 }>()
-
-function onClick({ target: el }: Event) {
-  const id = (el as HTMLAnchorElement).href!.split('#')[1]
-  const heading = document.getElementById(decodeURIComponent(id))
-  heading?.focus({ preventScroll: true })
-}
 </script>
 
 <template>
   <ul class="VPDocOutlineItem" :class="root ? 'root' : 'nested'">
     <li v-for="{ children, link, title } in headers">
-      <a class="outline-link" :href="link" @click="onClick" :title>
+      <a class="outline-link" :href="link" :title>
         {{ title }}
       </a>
       <template v-if="children?.length">

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

@@ -32,7 +32,7 @@ const classes = computed(() => {
     VPLocalNav: true,
     'has-sidebar': hasSidebar.value,
     empty: !hasLocalNav.value,
-    fixed: !hasLocalNav.value && !hasSidebar.value,
+    fixed: !hasLocalNav.value && !hasSidebar.value
   }
 })
 </script>
@@ -113,7 +113,6 @@ const classes = computed(() => {
 .menu {
   display: flex;
   align-items: center;
-  padding: 12px 24px 11px;
   line-height: 24px;
   font-size: 12px;
   font-weight: 500;
@@ -126,12 +125,6 @@ const classes = computed(() => {
   transition: color 0.25s;
 }
 
-@media (min-width: 768px) {
-  .menu {
-    padding: 0 32px;
-  }
-}
-
 @media (min-width: 960px) {
   .menu {
     display: none;
@@ -143,12 +136,14 @@ const classes = computed(() => {
   font-size: 14px;
 }
 
-.VPOutlineDropdown {
+.menu,
+:deep(.VPLocalNavOutlineDropdown > button) {
   padding: 12px 24px 11px;
 }
 
 @media (min-width: 768px) {
-  .VPOutlineDropdown {
+  .menu,
+  :deep(.VPLocalNavOutlineDropdown > button) {
     padding: 12px 32px 11px;
   }
 }

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

@@ -92,16 +92,6 @@ function scrollToTop() {
 </template>
 
 <style scoped>
-.VPLocalNavOutlineDropdown {
-  padding: 12px 20px 11px;
-}
-
-@media (min-width: 960px) {
-  .VPLocalNavOutlineDropdown {
-    padding: 12px 36px 11px;
-  }
-}
-
 .VPLocalNavOutlineDropdown button {
   display: block;
   font-size: 12px;

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

@@ -1,27 +1,37 @@
 <script lang="ts" setup generic="T extends DefaultTheme.NavItemWithLink">
 import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
 import { useData } from '../composables/data'
 import { isActive } from '../../shared'
 import VPLink from './VPLink.vue'
 
-defineProps<{
+const props = defineProps<{
   item: T
 }>()
 
 const { page } = useData()
+
+const href = computed(() =>
+  typeof props.item.link === 'function'
+    ? props.item.link(page.value)
+    : props.item.link
+)
+
+defineOptions({ inheritAttrs: false })
 </script>
 
 <template>
   <div class="VPMenuLink">
     <VPLink
+      v-bind="$attrs"
       :class="{
         active: isActive(
           page.relativePath,
-          item.activeMatch || item.link,
+          item.activeMatch || href,
           !!item.activeMatch
         )
       }"
-      :href="item.link"
+      :href
       :target="item.target"
       :rel="item.rel"
       :no-icon="item.noIcon"
@@ -46,6 +56,7 @@ const { page } = useData()
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
+  text-align: left;
   white-space: nowrap;
   transition:
     background-color 0.25s,

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

@@ -170,16 +170,22 @@ watchPostEffect(() => {
   .VPNavBar.has-sidebar .content {
     position: relative;
     z-index: 1;
-    padding-right: 32px;
     padding-left: var(--vp-sidebar-width);
   }
+
+  .VPNavBar.has-sidebar .content-body {
+    padding-right: 32px;
+  }
 }
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .content {
-    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
     padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
+
+  .VPNavBar.has-sidebar .content-body {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
+  }
 }
 
 .content-body {

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

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

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

@@ -17,7 +17,7 @@ const isChildActive = (navItem: DefaultTheme.NavItem) => {
   if ('link' in navItem) {
     return isActive(
       page.value.relativePath,
-      navItem.link,
+      typeof navItem.link === "function" ? navItem.link(page.value) : navItem.link,
       !!props.item.activeMatch
     )
   }

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

@@ -1,14 +1,21 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
 import { useData } from '../composables/data'
 import { isActive } from '../../shared'
 import VPLink from './VPLink.vue'
 
-defineProps<{
+const props = defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
 const { page } = useData()
+
+const href = computed(() =>
+  typeof props.item.link === 'function'
+    ? props.item.link(page.value)
+    : props.item.link
+)
 </script>
 
 <template>
@@ -17,11 +24,11 @@ const { page } = useData()
       VPNavBarMenuLink: true,
       active: isActive(
         page.relativePath,
-        item.activeMatch || item.link,
+        item.activeMatch || href,
         !!item.activeMatch
       )
     }"
-    :href="item.link"
+    :href
     :target="item.target"
     :rel="item.rel"
     :no-icon="item.noIcon"

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

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

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

@@ -1,20 +1,29 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
+import { useData } from '../composables/data'
 import { navInjectionKey } from '../composables/nav'
 import VPLink from './VPLink.vue'
 
-defineProps<{
+const props = defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
+const { page } = useData()
+
+const href = computed(() =>
+  typeof props.item.link === 'function'
+    ? props.item.link(page.value)
+    : props.item.link
+)
+
 const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
   <VPLink
     class="VPNavScreenMenuGroupLink"
-    :href="item.link"
+    :href
     :target="item.target"
     :rel="item.rel"
     :no-icon="item.noIcon"

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

@@ -1,20 +1,29 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
+import { useData } from '../composables/data'
 import { navInjectionKey } from '../composables/nav'
 import VPLink from './VPLink.vue'
 
-defineProps<{
+const props = defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
+const { page } = useData()
+
+const href = computed(() =>
+  typeof props.item.link === 'function'
+    ? props.item.link(page.value)
+    : props.item.link
+)
+
 const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
   <VPLink
     class="VPNavScreenMenuLink"
-    :href="item.link"
+    :href
     :target="item.target"
     :rel="item.rel"
     :no-icon="item.noIcon"

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

@@ -25,7 +25,14 @@ function toggle() {
 
     <ul class="list">
       <li v-for="locale in localeLinks" :key="locale.link" class="item">
-        <VPLink class="link" :href="locale.link">{{ locale.text }}</VPLink>
+        <VPLink
+          class="link"
+          :href="locale.link"
+          :lang="locale.lang"
+          :dir="locale.dir"
+        >
+          {{ locale.text }}
+        </VPLink>
       </li>
     </ul>
   </div>

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

@@ -111,15 +111,15 @@ watch(
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
-    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: max(32px, calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2));
+    width: calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
 }
 
 @media (min-width: 960px) {
   .curtain {
     position: sticky;
-    top: -64px;
+    top: calc(var(--vp-nav-height) * -1);
     left: 0;
     z-index: 1;
     margin-top: calc(var(--vp-nav-height) * -1);

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

@@ -8,39 +8,18 @@ const route = useRoute()
 const backToTop = ref()
 
 watch(() => route.path, () => backToTop.value.focus())
-
-function focusOnTargetAnchor({ target }: Event) {
-  const el = document.getElementById(
-    decodeURIComponent((target as HTMLAnchorElement).hash).slice(1)
-  )
-
-  if (el) {
-    const removeTabIndex = () => {
-      el.removeAttribute('tabindex')
-      el.removeEventListener('blur', removeTabIndex)
-    }
-
-    el.setAttribute('tabindex', '-1')
-    el.addEventListener('blur', removeTabIndex)
-    el.focus()
-    window.scrollTo(0, 0)
-  }
-}
 </script>
 
 <template>
   <span ref="backToTop" tabindex="-1" />
-  <a
-    href="#VPContent"
-    class="VPSkipLink visually-hidden"
-    @click="focusOnTargetAnchor"
-  >
+  <a href="#VPContent" class="VPSkipLink visually-hidden">
     {{ theme.skipToContentLabel || 'Skip to content' }}
   </a>
 </template>
 
 <style scoped>
 .VPSkipLink {
+  position: fixed;
   top: 8px;
   left: 8px;
   padding: 8px 16px;

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

@@ -12,7 +12,9 @@ export function useLangs({ correspondingLink = false } = {}) {
         ? []
         : {
             text: value.label,
-            link: normalizeLink(value.link || (key === 'root' ? '/' : `/${key}/`), theme.value.i18nRouting !== false && correspondingLink, page.value.relativePath.slice(currentLang.value.link.length - 1), !site.value.cleanUrls) + hash.value
+            link: normalizeLink(value.link || (key === 'root' ? '/' : `/${key}/`), theme.value.i18nRouting !== false && correspondingLink, page.value.relativePath.slice(currentLang.value.link.length - 1), !site.value.cleanUrls) + hash.value,
+            lang: value.lang,
+            dir: value.dir
         }));
     return { localeLinks, currentLang };
 }

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

@@ -14,7 +14,7 @@ export function resolveTitle(theme) {
 }
 export function getHeaders(range) {
     const headers = [
-        ...document.querySelectorAll('.VPDoc :where(h1,h2,h3,h4,h5,h6)')
+        ...document.querySelectorAll('.VPDoc h1, .VPDoc h2, .VPDoc h3, .VPDoc h4, .VPDoc h5, .VPDoc h6')
     ]
         .filter((el) => el.id && el.hasChildNodes())
         .map((el) => {

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

@@ -226,7 +226,7 @@
 }
 
 .vp-doc .custom-block div[class*='language-'] {
-  margin: 8px 0;
+  margin: 8px 0 !important;
   border-radius: 8px;
 }
 

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

@@ -88,6 +88,6 @@
 :root {
   /* clipboard */
   --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/g%3E%3C/svg%3E");
-  /* clipboard-copy */
-  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M16 4h2a2 2 0 0 1 2 2v4m1 4H11'/%3E%3Cpath d='m15 10l-4 4l4 4'/%3E%3C/g%3E%3C/svg%3E");
+  /* clipboard-check */
+  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E");
 }