feat(theme): support hiding aside component from frontmatter (#980)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

docs/config/frontmatter-configs.md

@@ -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/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