feat: add OverviewContent component and update Layout.vue to support overview pages

Author: onmax

packages/nimiq-vitepress-theme/src/layout/Layout.vue

@@ -7,13 +7,15 @@ import DesktopHeader from './DesktopHeader.vue'
 import MobileNav from './MobileNav.vue'
 import MobileOutlineAccordion from './MobileOutlineAccordion.vue'
 import NotFound from './NotFound.vue'
+import OverviewContent from './OverviewContent.vue'
 import PageContent from './PageContent.vue'
 import SecondarySidebar from './SecondarySidebar.vue'
 import Sidebar from './Sidebar.vue'
 
 const { frontmatter, page } = useData()
 
 const isHome = computed(() => frontmatter.value.layout === 'home')
+const isOverview = computed(() => frontmatter.value.layout === 'overview')
 const is404 = computed(() => page.value.isNotFound || frontmatter.value.layout === '404')
 const showSidebar = computed(() => {
   if (frontmatter.value.sidebar !== undefined)
@@ -33,8 +35,25 @@ const isMobileOrTablet = breakpoints.smaller('lg')
   <!-- 404 Not Found Page -->
   <NotFound v-if="is404" />
 
-  <!-- Documentation Pages -->
-  <div v-else-if="!isHome" id="viewport" flex relative var:nq-sidebar-width:100vw md:var:nq-sidebar-width:288px data-layout="docs">
+  <!-- Home Page -->
+  <div v-else-if="isHome" data-layout="home" min-h-screen>
+    <template v-if="isMobileOrTablet">
+      <Content />
+      <MobileNav fixed bottom-0 />
+    </template>
+    <template v-else>
+      <DesktopHeader />
+      <Content f-pt-xl />
+    </template>
+  </div>
+
+  <!-- Overview Pages -->
+  <div v-else-if="isOverview" id="viewport" data-layout="overview" min-h-screen>
+    <OverviewContent />
+  </div>
+
+  <!-- Documentation Pages (default) -->
+  <div v-else id="viewport" flex relative var:nq-sidebar-width:100vw md:var:nq-sidebar-width:288px data-layout="docs">
     <!-- TODO Add skip -->
     <div v-if="!isMobileOrTablet" flex w-full>
       <div shrink-0 relative w="$nq-sidebar-width">
@@ -71,16 +90,4 @@ const isMobileOrTablet = breakpoints.smaller('lg')
       <MobileNav fixed bottom-0 />
     </template>
   </div>
-
-  <!-- Home Page -->
-  <div v-else data-layout="home" min-h-screen>
-    <template v-if="isMobileOrTablet">
-      <Content />
-      <MobileNav fixed bottom-0 />
-    </template>
-    <template v-else>
-      <DesktopHeader />
-      <Content f-pt-xl />
-    </template>
-  </div>
 </template>

packages/nimiq-vitepress-theme/src/layout/OverviewContent.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useBreakpoints } from '@vueuse/core'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import MobileNav from './MobileNav.vue'
+import MobileOutlineAccordion from './MobileOutlineAccordion.vue'
+import Sidebar from './Sidebar.vue'
+import '../assets/code-blocks.css'
+import '../assets/typography.css'
+import '../assets/github-callouts.css'
+import 'nimiq-css/css/static-content.css'
+
+const { frontmatter } = useData()
+
+const showSidebar = computed(() => {
+  if (frontmatter.value.sidebar !== undefined)
+    return frontmatter.value.sidebar
+  return true // Default to showing sidebar for overview pages
+})
+
+const breakpoints = useBreakpoints({ lg: 1224 })
+const isMobileOrTablet = breakpoints.smaller('lg')
+</script>
+
+<template>
+  <div flex relative var:nq-sidebar-width:100vw md:var:nq-sidebar-width:288px>
+    <!-- Desktop Layout -->
+    <div v-if="!isMobileOrTablet" flex w-full>
+      <div shrink-0 relative w="$nq-sidebar-width">
+        <Sidebar v-if="showSidebar" w="$nq-sidebar-width" />
+      </div>
+      <main
+        of-hidden dark:bg-neutral-1100 min-h-screen w-full flex-1 min-w-0
+        :class="{
+          'ml-[$nq-sidebar-width]': showSidebar,
+          'ml-0': !showSidebar,
+          'md:max-w-1220 md:mx-auto': !showSidebar,
+        }"
+      >
+        <article h-full>
+          <Content />
+        </article>
+      </main>
+    </div>
+
+    <!-- Mobile Layout -->
+    <template v-else>
+      <div flex="~ col" size-full>
+        <MobileOutlineAccordion />
+
+        <main dark:bg-neutral-1100 min-h-screen w-full>
+          <article w-full max-w-none h-full>
+            <Content />
+          </article>
+        </main>
+      </div>
+
+      <MobileNav fixed bottom-0 />
+    </template>
+  </div>
+</template>