Merge branch 'main' into chore/vite-3

.github/workflows/test.yml

@@ -1,6 +1,10 @@
 name: Test
 
-on: [push]
+on:
+  push:
+    branches:
+      - main
+  pull_request:
 
 jobs:
   test:

docs/config/frontmatter-configs.md

@@ -98,7 +98,7 @@ Determines the layout of the page.
 
 - `doc` - It applies default documentation styles to the markdown content.
 - `home` - Special layout for "Home Page". You may add extra options such as `hero` and `features` to rappidly create beautiful landing page.
-- `page` - Behave similar to `doc` but it aplies no styles to the content. Useful when you want to create a fully custom page.
+- `page` - Behave similar to `doc` but it applies no styles to the content. Useful when you want to create a fully custom page.
 
 ```yaml
 ---
@@ -110,7 +110,7 @@ layout: doc
 
 - Type: `Hero`
 
-This option only take effect when `layout` is set to `home`.
+This option only takes effect when `layout` is set to `home`.
 
 It defines contents of home hero section.
 
@@ -165,7 +165,7 @@ interface HeroAction {
 
 - Type: `Feature[]`
 
-This option only take effect when `layout` is set to `home`.
+This option only takes effect when `layout` is set to `home`.
 
 It defines items to display in features section.
 
@@ -199,3 +199,16 @@ interface Feature {
   details: string
 }
 ```
+
+## aside
+
+- Type: `boolean`
+- Default: `true`
+
+If you want the right aside component in `doc` layout not to be shown, set this option to `false`.
+
+```yaml
+---
+aside: false
+---
+```

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

@@ -6,7 +6,7 @@ import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const route = useRoute()
-const { hasSidebar } = useSidebar()
+const { hasSidebar, hasAside } = useSidebar()
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
@@ -14,9 +14,12 @@ const pageName = computed(() =>
 </script>
 
 <template>
-  <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar }">
+  <div
+    class="VPDoc"
+    :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
+  >
     <div class="container">
-      <div class="aside">
+      <div v-if="hasAside" class="aside">
         <div class="aside-curtain" />
         <div class="aside-container">
           <div class="aside-content">
@@ -170,6 +173,9 @@ const pageName = computed(() =>
 
 .content-container {
   margin: 0 auto;
+}
+
+.VPDoc.has-aside .content-container {
   max-width: 688px;
 }
 </style>

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

@@ -14,7 +14,7 @@ const { theme } = useData()
 // hit the hotkey to invoke it.
 const loaded = ref(false)
 
-const metaKey = ref()
+const metaKey = ref(`'Meta'`)
 
 onMounted(() => {
   if (!theme.value.algolia) {
@@ -22,9 +22,9 @@ onMounted(() => {
   }
 
   // meta key detect (same logic as in @docsearch/js)
-  metaKey.value.textContent = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
-    ? '⌘'
-    : 'Ctrl'
+  metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
+    ? `'⌘'`
+    : `'Ctrl'`
 
   const handleSearchHotKey = (e: KeyboardEvent) => {
     if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
@@ -79,7 +79,7 @@ function load() {
           <span class="DocSearch-Button-Placeholder">{{ theme.algolia?.buttonText || 'Search' }}</span>
         </span>
         <span class="DocSearch-Button-Keys">
-          <kbd class="DocSearch-Button-Key" ref="metaKey">Meta</kbd>
+          <kbd class="DocSearch-Button-Key"></kbd>
           <kbd class="DocSearch-Button-Key">K</kbd>
         </span>
       </button>
@@ -255,6 +255,23 @@ function load() {
   padding-right: 6px;
 }
 
+.DocSearch-Button .DocSearch-Button-Key:first-child {
+  font-size: 1px;
+  letter-spacing: -1px;
+  color: transparent;
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child:after {
+  content: v-bind(metaKey);
+  font-size: 12px;
+  letter-spacing: normal;
+  color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child > * {
+  display: none;
+}
+
 .dark .DocSearch-Footer {
   border-top: 1px solid var(--vp-c-divider);
 }

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

@@ -22,6 +22,16 @@ export function useSidebar() {
     )
   })
 
+  const hasAside = computed(() => {
+    if (
+      frontmatter.value.layout !== 'home' &&
+      frontmatter.value.aside === false
+    )
+      return false
+
+    return hasSidebar.value
+  })
+
   function open() {
     isOpen.value = true
   }
@@ -38,6 +48,7 @@ export function useSidebar() {
     isOpen,
     sidebar,
     hasSidebar,
+    hasAside,
     open,
     close,
     toggle