feat(config)!: single source of truth for merged config

.docs/.studio/app.config.json

@@ -25,16 +25,8 @@
       "logo": true,
       "showLinkIcon": true,
       "exclude": [],
-      "fixed": true,
       "fluid": true
     },
-    "github": {
-      "dir": ".docs/content",
-      "branch": "main",
-      "repo": "docus",
-      "owner": "nuxt-themes",
-      "edit": true
-    },
     "footer": {
       "credits": {
         "icon": "IconDocus",
@@ -49,6 +41,13 @@
         }
       ],
       "fluid": true
+    },
+    "github": {
+      "dir": ".docs/content",
+      "branch": "main",
+      "repo": "docus",
+      "owner": "nuxt-themes",
+      "edit": true
     }
   },
   "prose": {

.docs/content/0.index.md

@@ -2,9 +2,8 @@
 title: Home
 navigation: false
 layout: page
-header:
-  fixed: 
-    initial: true
+main:
+  fluid: false
 ---
 
 :ellipsis{right=0px width=75% blur=150px}

.docs/content/1.introduction/_dir.yml

@@ -1,3 +1,2 @@
 icon: ph:star-duotone
 navigation.redirect: /introduction/getting-started
-fluid: true

.docs/content/2.api/2.composables.md

@@ -6,35 +6,40 @@ Discover the Docus composables to use in your custom Vue components and pages.
 
 `useDocus()`{lang=ts} gives access to docus runtime config, all default values and your custom config from `app.config.ts`
 
+- `config` refers to the merged config of the current page.
+
+`main`, `header`, `aside`, `footer` and `titleTemplate` can be set from `_dir.yml` and any `page.md` file.
+
+The configs in `app.config` file will be used as defaults.
+
 ```vue
 <script setup>
-const docus = useDocus()
+const { config } = useDocus()
 </script>
 
 <template>
   <div>
-    <h1>{{ docus.title }}</h1>
-    <p>{{ docus.description }}</p>
+    <h1>{{ config.title }}</h1>
+    <p>{{ config.description }}</p>
   </div>
 </template>
 ```
 
-## `useCurrentNavigation()`
+- `tree` refers to the current navigation tree that is displayed in the `aside` component.
 
-`useCurrentNavigation()`{lang="ts"} gives access to current navigation calculated from @nuxt/content navigation object and features in theme and pages front-matter.
+```vue
+<script setup>
+const { tree } = useDocus()
+</script>
 
-```ts
-const {
-  // Navigation object
-  tree,
-  // Aside config computed from front-matter and theme config
-  asideConfig
-} = useCurrentNavigation()
+<template>
+  <DocsAsideTree :links="tree" />
+</template>
 ```
 
 ::source-link
 ---
-source: "/packages/docs-theme/composables/useCurrentNavigation.ts"
+source: "composables/useDocus.ts"
 ---
 ::
 
@@ -57,7 +62,7 @@ const {
 
 ::source-link
 ---
-source: "/packages/docs-theme/composables/useMenu.ts"
+source: "composables/useMenu.ts"
 ---
 ::
 
@@ -78,6 +83,6 @@ const {
 
 ::source-link
 ---
-source: "/packages/docs-theme/composables/useScrollspy.ts"
+source: "composables/useScrollspy.ts"
 ---
 ::

.docs/content/2.api/_dir.yml

@@ -1,3 +1,2 @@
 title: 'API'
 icon: heroicons-outline:bookmark-alt
-fluid: true

app.config.ts

@@ -21,7 +21,6 @@ export default defineAppConfig({
       title: '',
       logo: false,
       showLinkIcon: false,
-      fixed: true,
       fluid: false,
       exclude: []
     },

components/app/AppFooter.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-const docus = useDocus()
+const { config } = useDocus()
 const socialIcons = ref(null)
-const icons = computed(() => docus.value?.footer?.iconLinks || [])
-const textLinks = computed(() => docus.value?.footer?.textLinks || [])
-const socialIconsCount = computed(() => Object.entries(docus.value?.socials || {}).filter(([_, v]) => v).length)
+const icons = computed(() => config.value?.footer?.iconLinks || [])
+const textLinks = computed(() => config.value?.footer?.textLinks || [])
+const socialIconsCount = computed(() => Object.entries(config.value?.socials || {}).filter(([_, v]) => v).length)
 const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value : 0))
 </script>
 
 <template>
   <footer>
-    <Container :fluid="docus?.footer?.fluid" padded class="footer-container">
+    <Container :fluid="config?.footer?.fluid" padded class="footer-container">
       <!-- Left -->
       <div class="left">
-        <a v-if="docus?.footer?.credits" :href="docus?.footer?.credits?.href || '#'" rel="noopener" target="_blank">
-          <Component :is="docus?.footer?.credits?.icon" v-if="docus?.footer?.credits?.icon" class="left-icon" />
-          <p v-if="docus?.footer?.credits?.text">{{ docus.footer.credits.text }}</p>
+        <a v-if="config?.footer?.credits" :href="config?.footer?.credits?.href || '#'" rel="noopener" target="_blank">
+          <Component :is="config?.footer?.credits?.icon" v-if="config?.footer?.credits?.icon" class="left-icon" />
+          <p v-if="config?.footer?.credits?.text">{{ config.footer.credits.text }}</p>
         </a>
       </div>
 
@@ -42,7 +42,7 @@ const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value
           :href="icon.href"
           target="_blank"
         >
-          <Icon :name="icon.icon || icon.component" />
+          <Icon :name="icon.icon" />
         </a>
         <AppSocialIcons ref="socialIcons" />
       </div>

components/app/AppHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const docus = useDocus()
+const { config } = useDocus()
 const { navigation } = useContent()
 const { hasDocSearch } = useDocSearch()
 
@@ -12,7 +12,7 @@ defineProps({
 
 <template>
   <header :class="{ 'has-dialog': hasDialog, 'has-doc-search': hasDocSearch }">
-    <Container :fluid="docus?.header?.fluid ">
+    <Container :fluid="config?.header?.fluid ">
       <div class="section left">
         <AppHeaderDialog v-if="hasDialog" />
         <AppHeaderLogo />
@@ -60,6 +60,7 @@ css({
 
   header: {
     backdropFilter: '{elements.backdrop.filter}',
+    position: 'sticky',
     top: 0,
     zIndex: 10,
     width: '100%',
@@ -102,12 +103,6 @@ css({
         }
       }
     }
-  },
-  variants: {
-    fixed: {
-      true: { position: 'sticky' },
-      false: {},
-    }
   }
 })
 </style>

components/app/AppHeaderDialog.vue

@@ -2,9 +2,9 @@
 import ThemeSelect from './ThemeSelect.vue'
 
 const { navigation } = useContent()
-const docus = useDocus()
+const { config } = useDocus()
 
-const filtered = computed(() => docus.value.aside?.exclude || [])
+const filtered = computed(() => config.value.aside?.exclude || [])
 
 const links = computed(() => {
   return (navigation.value || []).filter((item: any) => {

components/app/AppHeaderLogo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const docus = useDocus()
-const logo = computed(() => docus.value.header?.logo || false)
-const title = computed(() => docus.value.header?.title || docus.value.title)
+const { config } = useDocus()
+const logo = computed(() => config.value.header?.logo || false)
+const title = computed(() => config.value.header?.title || config.value.title)
 </script>
 
 <template>

components/app/AppHeaderNavigation.vue

@@ -2,11 +2,11 @@
 const route = useRoute()
 const { navBottomLink } = useContentHelpers()
 const { navigation } = useContent()
-const docus = useDocus()
+const { config } = useDocus()
 
-const hasNavigation = computed(() => !!docus.value.aside?.level)
+const hasNavigation = computed(() => !!config.value.aside?.level)
 
-const filtered = computed(() => docus.value.header?.exclude || [])
+const filtered = computed(() => config.value.header?.exclude || [])
 
 const tree = computed(() => {
   return (navigation.value || []).filter((item: any) => {
@@ -30,7 +30,7 @@ const isActive = (link: any) => (link.exact ? route.fullPath === link._path : ro
           :to="link.redirect? link.redirect : navBottomLink(link)"
           :class="{ active: isActive(link) }"
         >
-          <Icon v-if="link.icon && docus?.header?.showLinkIcon" :name="link.icon" />
+          <Icon v-if="link.icon && config?.header?.showLinkIcon" :name="link.icon" />
           {{ link.title }}
         </NuxtLink>
       </li>

components/app/AppLayout.vue

@@ -1,43 +1,26 @@
 <script setup lang="ts">
-const docus = useDocus()
-const { navigation, page } = useContent()
-const { navKeyFromPath } = useContentHelpers()
-
-const headerPosition = computed(() => page.value?.header?.fixed || docus?.value?.header?.fixed || true)
-
-const titleTemplate = computed(() => {
-  const appTitleTemplate = docus?.value?.titleTemplate || `%s · ${docus?.value?.title}`
-  if (page.value) {
-    return page.value.head?.titleTemplate || navKeyFromPath(page.value._path, 'titleTemplate', navigation.value || []) || appTitleTemplate
-  }
-  return appTitleTemplate
-})
-
-// TODO: remove?
-defineProps({
-  padded: {
-    type: Boolean,
-    default: true
-  }
-})
+const { config } = useDocus()
 
 useHead({
-  titleTemplate: titleTemplate.value,
+  titleTemplate: config.value.titleTemplate,
   meta: [
     { name: 'twitter:card', content: 'summary_large_image' }
   ]
 })
 
-watch(titleTemplate, () => useHead({ titleTemplate: titleTemplate.value }))
+watch(
+  () => config.value.titleTemplate,
+  () => useHead({ titleTemplate: config.value.titleTemplate })
+)
 
-useContentHead(docus.value as any)
+useContentHead(config.value as any)
 </script>
 
 <template>
   <div>
     <AppLoadingBar />
-    <AppHeader v-if="docus?.header" :fixed="headerPosition" />
+    <AppHeader v-if="Object.keys(config?.header).length" />
     <slot />
-    <AppFooter v-if="docus?.footer" />
+    <AppFooter v-if="Object.keys(config?.footer).length" />
   </div>
 </template>

components/app/AppSocialIcons.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 const socials = ['twitter', 'facebook', 'instagram', 'youtube', 'github', 'medium']
 
-const docus = useDocus()
+const { config } = useDocus()
 
 const icons = computed<any>(() => {
-  return Object.entries(docus.value.socials || {})
+  return Object.entries(config.value.socials || {})
     .map(([key, value]) => {
       if (typeof value === 'object') {
         return value

components/docs/DocsAside.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { tree } = useCurrentNavigation()
+const { tree } = useDocus()
 </script>
 
 <template>

components/docs/DocsAsideTree.vue

@@ -21,7 +21,7 @@ const props = defineProps({
 })
 
 const route = useRoute()
-const docus = useDocus()
+const { config } = useDocus()
 
 const collapsedMap = useState(`docus-docs-aside-collapse-map-${props.parent?._path || '/'}`, () => {
   if (props.level === 0) {
@@ -47,12 +47,12 @@ const isCollapsed = (link: any) => {
     }
 
     // Check if aside.collapsed has been set in YML
-    if (link.aside?.hasOwnProperty('collapsed')) { return link.aside.collapsed }
+    if (link?.aside?.collapsed) { return link.aside.collapsed }
 
     // Return value grabbed from the link
     if (link?.collapsed) { return link?.collapsed }
 
-    if (docus?.value?.aside?.collapsed) { return docus.value.aside?.collapsed }
+    if (config?.value?.aside?.collapsed) { return config.value.aside?.collapsed }
   }
 
   return false

components/docs/DocsPageBottom.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 const { page } = useContent()
-const docus = useDocus()
+const { config } = useDocus()
 </script>
 
 <template>
   <div v-if="page" class="docs-page-bottom">
-    <div v-if="docus?.github?.edit" class="edit-link">
+    <div v-if="config?.github?.edit" class="edit-link">
       <Icon name="uil:edit" />
       <EditOnLink v-slot="{ url }" :page="page">
         <ProseA :to="url">