Merge branch 'main' into feat/client-side-fts-search

Author: larbish

app/app.vue

@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import type { NavigationItem } from 'comark-content'
+import { useRoute } from 'vue-router'
 
 const { seo, docs } = useAppConfig()
 
 const content = useDocsContent()
+const route = useRoute()
 
 const { data: navigation } = await useAsyncData('navigation', () => content.value.client.navigation(), {
   watch: [() => content.value.base],
 })
 
+const nuxtApp = useNuxtApp()
 const navTree = computed<NavigationItem[]>(() => prefixNavigation(navigation.value ?? [], content.value.base))
+const navigationLayout = ref(findNavigationLayout(navTree.value, route.path))
+onNuxtReady(() => {
+  nuxtApp.hook('page:finish', () => {
+    navigationLayout.value = findNavigationLayout(navTree.value, route.path)
+  })
+})
 
 useHead({
   meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
@@ -34,6 +43,7 @@ useSeoMeta({
 })
 
 provide('navigation', navTree)
+provide('layout', navigationLayout)
 
 // const colorMode = useColorMode()
 const historyOpen = useVersionHistory()
@@ -64,9 +74,17 @@ defineShortcuts({
     <AppHeader />
 
     <UMain>
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
+      <Suspense>
+        <LayoutsPage v-if="navigationLayout === 'page'">
+          <NuxtPage />
+        </LayoutsPage>
+        <LayoutsDocs v-else-if="navigationLayout === 'docs'">
+          <NuxtPage />
+        </LayoutsDocs>
+        <UContainer v-else>
+          <NuxtPage />
+        </UContainer>
+      </Suspense>
     </UMain>
 
     <AppFooter />

app/components/docs/DocsAsideMobileBar.vue

@@ -14,6 +14,7 @@ const menuDrawerOpen = ref(false)
 const tocDrawerOpen = ref(false)
 const navigationRef = ref<HTMLElement | null>(null)
 let observer: IntersectionObserver | undefined
+const layout = inject('layout')
 
 watch(menuDrawerOpen, (open) => {
   nextTick(() => {
@@ -28,9 +29,11 @@ watch(menuDrawerOpen, (open) => {
 
 <template>
   <div
-    class="lg:hidden sticky top-(--ui-header-height) z-10 bg-default -mx-6 p-2 px-6 border-b border-muted flex justify-between"
+    class="lg:hidden sticky top-(--ui-header-height) z-10 bg-default -mx-6 p-2 px-6 border-b border-muted flex h-13"
+    :class="layout === 'page' ? 'justify-end' : 'justify-between'"
   >
     <UDrawer
+      v-if="layout === 'docs'"
       v-model:open="menuDrawerOpen"
       direction="left"
       :title="title"

app/layouts/docs.vue app/components/layouts/LayoutsDocs.vueapp/layouts/docs.vue renamed to app/components/layouts/LayoutsDocs.vue

@@ -0,0 +1,7 @@
+<template>
+  <UContainer class="max-w-7xl">
+    <UTheme :ui="{ pageHeader: { container: 'lg:pt-8' }, contentToc: { container: 'lg:pt-16' } }">
+      <slot />
+    </UTheme>
+  </UContainer>
+</template>

app/components/layouts/LayoutsPage.vue

@@ -6,13 +6,13 @@ import CodeExplorer from '../components/CodeExplorer.vue'
 import Browser from '../components/Browser.vue'
 
 definePageMeta({
-  layout: 'docs',
   path: '/:slug(.+)',
 })
 
 const { toc, seo } = useAppConfig()
 const navigation = inject<Ref<NavigationItem[]>>('navigation')
 const content = useDocsContent()
+const layout = inject<Ref<NavigationLayout>>('layout')
 
 const { data: page } = await useAsyncData(`${content.value.base}:${content.value.path}`, () =>
   content.value.client.get(content.value.path)
@@ -126,6 +126,7 @@ if (content.value.mode === 'prod') {
       />
 
       <UContentSurround
+        v-if="layout === 'docs'"
         :surround="surroundLinks as any"
         :ui="{ root: !surroundLinks[0] ? 'sm:grid-cols-1' : 'sm:grid-cols-2' }"
       />

app/pages/[...slug].vue

@@ -64,6 +64,35 @@ export interface BreadcrumbItem {
   path?: string
 }
 
+export type NavigationLayout = 'docs' | 'page'
+
+/** Layout declared by the nearest matching page or directory navigation node. */
+export function findNavigationLayout(
+  navigation: NavigationItem[] | undefined | null,
+  path: string | undefined
+): NavigationLayout | undefined {
+  if (!navigation?.length || !path || path === '/') return undefined
+
+  let layout: NavigationLayout | undefined
+  const visit = (items: NavigationItem[]) => {
+    for (const item of items) {
+      const isPage = item.path === path
+      const isDirectory = Boolean(
+        item.children?.length
+        && item.path !== '/'
+        && path.startsWith(`${item.path}/`)
+      )
+      if (!isPage && !isDirectory) continue
+
+      if (item.layout === 'docs' || item.layout === 'page') layout = item.layout
+      if (item.children?.length) visit(item.children)
+    }
+  }
+
+  visit(navigation)
+  return layout || 'docs'
+}
+
 /** Trail of navigation items leading to `path`, including the page itself. */
 export function findBreadcrumb(
   navigation: NavigationItem[] | undefined | null,

app/utils/navigation.ts

@@ -12,6 +12,7 @@ export default defineAppConfig({
     ecosystem: [{ mark: 'comark-content', to: 'https://content.comark.dev', label: 'Comark Content' }],
     nav: [
       { label: 'Documentation', sections: ['getting-started', 'writing', 'concepts', 'deployment'] },
+      { label: 'Page', to: '/page' }
     ],
   },
   footer: {

playground/app/app.config.ts

@@ -26,6 +26,17 @@ title: Getting Started
 
 Page titles come from frontmatter — `navigation.title` when set, `title` otherwise. Pages with `navigation: false` are excluded from the tree entirely (and therefore from prev/next links, search, and `llms.txt`).
 
+## Section layouts
+
+Pages use the `docs` layout by default, which includes the navigation sidebar. Set `layout: page` in a directory's `.navigation.yml` to render every page in that directory without the sidebar:
+
+```yaml [content/3.examples/.navigation.yml]
+title: Examples
+layout: page
+```
+
+The layout applies to nested directories too. A nested `.navigation.yml` can set `layout: docs` to restore the sidebar. The `page` layout keeps the header, footer and page table of contents.
+
 ## Header tabs
 
 The header renders one tab per group in `header.nav` from `app.config.ts`. Each group maps top-level content sections to a tab:

playground/content/2.writing/5.navigation.md

@@ -0,0 +1,23 @@
+---
+title: Page
+description: This is an example using the page layout.
+navigation:
+  layout: page
+---
+
+In order to use the `page` layout without the left aside.
+
+## Usage
+
+You only need to set:
+
+```yaml
+---
+navigation:
+  layout: page
+---
+```
+
+## TOC
+
+The Table of Contents stays if you have headings.

playground/content/page.md

@@ -0,0 +1 @@
+layout: page