Merge branch 'vuejs:main' into main

.github/workflows/test.yml

@@ -23,7 +23,7 @@ jobs:
 
     strategy:
       matrix:
-        node_version: [18, 20, 21]
+        node_version: [18, 20, 22]
 
     steps:
       - name: Checkout

src/client/theme-default/NotFound.vue

@@ -1,44 +1,55 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { withBase } from 'vitepress'
 import { useData } from './composables/data'
 import { useLangs } from './composables/langs'
 
-const { site, theme } = useData()
+const { site } = useData()
 const { localeLinks } = useLangs({ removeCurrent: false })
 
-const root = ref('/')
+const locale = ref({
+  link: '/',
+  index: 'root'
+})
+
 onMounted(() => {
   const path = window.location.pathname
     .replace(site.value.base, '')
     .replace(/(^.*?\/).*$/, '/$1')
   if (localeLinks.value.length) {
-    root.value =
+    locale.value =
-      localeLinks.value.find(({ link }) => link.startsWith(path))?.link ||
+      localeLinks.value.find(({ link }) => link.startsWith(path)) ||
-      localeLinks.value[0].link
+      localeLinks.value[0]
   }
 })
+
+const notFound = computed(() => ({
+  code: 404,
+  title: 'PAGE NOT FOUND',
+  quote:
+    "But if you don't change your direction, and if you keep looking, you may end up where you are heading.",
+  linkLabel: 'go to home',
+  linkText: 'Take me home',
+  ...(locale.value.index === 'root'
+    ? site.value.themeConfig?.notFound
+    : site.value.locales?.[locale.value.index]?.themeConfig?.notFound)
+}))
 </script>
 
 <template>
   <div class="NotFound">
-    <p class="code">{{ theme.notFound?.code ?? '404' }}</p>
+    <p class="code">{{ notFound.code }}</p>
-    <h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
+    <h1 class="title">{{ notFound.title }}</h1>
     <div class="divider" />
-    <blockquote class="quote">
+    <blockquote class="quote">{{ notFound.quote }}</blockquote>
-      {{
-        theme.notFound?.quote ??
-        "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
-      }}
-    </blockquote>
 
     <div class="action">
       <a
         class="link"
-        :href="withBase(root)"
+        :href="withBase(locale.link)"
-        :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
+        :aria-label="notFound.linkLabel"
       >
-        {{ theme.notFound?.linkText ?? 'Take me home' }}
+        {{ notFound.linkText }}
       </a>
     </div>
   </div>

src/client/theme-default/components/VPDocAsideOutline.vue

@@ -25,7 +25,8 @@ useActiveAnchor(container, marker)
 </script>
 
 <template>
-  <div
+  <nav
+    aria-labelledby="doc-outline-aria-label"
     class="VPDocAsideOutline"
     :class="{ 'has-outline': headers.length > 0 }"
     ref="container"
@@ -34,16 +35,18 @@ useActiveAnchor(container, marker)
     <div class="content">
       <div class="outline-marker" ref="marker" />
 
-      <div class="outline-title" role="heading" aria-level="2">{{ resolveTitle(theme) }}</div>
+      <div
+        aria-level="2"
+        class="outline-title"
+        id="doc-outline-aria-label"
+        role="heading"
+      >
+        {{ resolveTitle(theme) }}
+      </div>
 
-      <nav aria-labelledby="doc-outline-aria-label">
-        <span class="visually-hidden" id="doc-outline-aria-label">
-          Table of Contents for current page
-        </span>
       <VPDocOutlineItem :headers="headers" :root="true" />
-      </nav>
-    </div>
     </div>
+  </nav>
 </template>
 
 <style scoped>

src/client/theme-default/components/VPDocFooter.vue

@@ -39,7 +39,13 @@ const showFooter = computed(() => {
       </div>
     </div>
 
-    <nav v-if="control.prev?.link || control.next?.link" class="prev-next">
+    <nav
+      v-if="control.prev?.link || control.next?.link"
+      class="prev-next"
+      aria-labelledby="doc-footer-aria-label"
+    >
+      <span class="visually-hidden" id="doc-footer-aria-label">Pager</span>
+
       <div class="pager">
         <VPLink v-if="control.prev?.link" class="pager-link prev" :href="control.prev.link">
           <span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>

src/client/theme-default/components/VPLocalNavOutlineDropdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onClickOutside, onKeyStroke } from '@vueuse/core'
+import { onKeyStroke } from '@vueuse/core'
 import { onContentUpdated } from 'vitepress'
-import { nextTick, ref } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import { useData } from '../composables/data'
 import { resolveTitle, type MenuItem } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
@@ -17,8 +17,18 @@ const vh = ref(0)
 const main = ref<HTMLDivElement>()
 const items = ref<HTMLDivElement>()
 
-onClickOutside(main, () => {
+function closeOnClickOutside(e: Event) {
+  if (!main.value?.contains(e.target as Node)) {
     open.value = false
+  }
+}
+
+watch(open, (value) => {
+  if (value) {
+    document.addEventListener('click', closeOnClickOutside)
+    return
+  }
+  document.removeEventListener('click', closeOnClickOutside)
 })
 
 onKeyStroke('Escape', () => {

src/client/theme-default/composables/langs.ts

@@ -8,6 +8,7 @@ export function useLangs({
 } = {}) {
   const { site, localeIndex, page, theme, hash } = useData()
   const currentLang = computed(() => ({
+    index: localeIndex.value,
     label: site.value.locales[localeIndex.value]?.label,
     link:
       site.value.locales[localeIndex.value]?.link ||
@@ -19,6 +20,7 @@ export function useLangs({
       removeCurrent && currentLang.value.label === value.label
         ? []
         : {
+            index: key,
             text: value.label,
             link:
               normalizeLink(

src/client/theme-default/styles/vars.css

@@ -263,7 +263,6 @@
 :root {
   --vp-font-family-base: 'Chinese Quotes', Inter, ui-sans-serif, system-ui,
     sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji';
   --vp-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;