fix(theme): prevent layout shift in search button key (#2889)

Author: brc-dd

docs/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vitepress",
+    "dev": "vitepress dev",
     "build": "vitepress build",
     "preview": "vitepress preview"
   },

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

@@ -34,7 +34,7 @@ useActiveAnchor(container, marker)
     <div class="content">
       <div class="outline-marker" ref="marker" />
 
-      <div class="outline-title" role="heading">{{ resolveTitle(theme) }}</div>
+      <div class="outline-title" role="heading" aria-level="2">{{ resolveTitle(theme) }}</div>
 
       <nav aria-labelledby="doc-outline-aria-label">
         <span class="visually-hidden" id="doc-outline-aria-label">

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

@@ -137,20 +137,11 @@ if (__VP_LOCAL_SEARCH__) {
   })
 }
 
-const metaKey = ref(`'Meta'`)
-
-onMounted(() => {
-  // meta key detect (same logic as in @docsearch/js)
-  metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
-    ? `'⌘'`
-    : `'Ctrl'`
-})
-
 const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
 </script>
 
 <template>
-  <div class="VPNavBarSearch" :style="{ '--vp-meta-key': metaKey }">
+  <div class="VPNavBarSearch">
     <template v-if="provider === 'local'">
       <VPLocalSearchBox
         v-if="showSearch"

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

@@ -194,12 +194,16 @@ defineProps<{
 }
 
 .DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: var(--vp-meta-key);
+  content: 'Ctrl';
   font-size: 12px;
   letter-spacing: normal;
   color: var(--docsearch-muted-color);
 }
 
+.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
+  content: '\2318';
+}
+
 .DocSearch-Button .DocSearch-Button-Key:first-child > * {
   display: none;
 }

src/node/config.ts

@@ -255,19 +255,23 @@ function resolveSiteDataHead(userConfig?: UserConfig): HeadConfig[] {
         ? userConfig.appearance.initialValue ?? 'auto'
         : 'auto'
 
-    head.push([
-      'script',
-      { id: 'check-dark-light' },
-      `
-        ;(() => {
+    head.push(
+      [
+        'script',
+        { id: 'check-dark-light' },
+        `;(() => {
           const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}'
           const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-          if (!preference || preference === 'auto' ? prefersDark : preference === 'dark') {
+          if (!preference || preference === 'auto' ? prefersDark : preference === 'dark')
             document.documentElement.classList.add('dark')
-          }
-        })()
-      `
-    ])
+        })()`
+      ],
+      [
+        'script',
+        { id: 'check-mac-os' },
+        `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`
+      ]
+    )
   }
 
   return head