feat: app container split

docs/content/index.md

@@ -1,9 +1,12 @@
 ---
-template: landing
 title: Documentation Generator based on Nuxt and Windi.
 description: >-
   Write pages in markdown, use Vue components, add style with Windi CSS and enjoy the power of Nuxt with a blazing fast developer experience.
+template: page
 navigation: false
+layout:
+  asideClass: 'block lg:hidden'
+  aside: true
 ---
 
 ::block-hero

docs/content/releases.md

@@ -1,6 +1,5 @@
 ---
 template: releases
-menu: false
 ---
 
-# Releases
+# Releases

docs/content/templates/pre-launch.md

@@ -1,6 +1,11 @@
 ---
-template: pre-launch
+template: page
 title: Pre-launch template
+layout:
+   footer: false
+   aside: true
+   asideClass: 'bloc lg:hidden'
+   fluid: true
 ---
 
 

src/app/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <AppLayout>
+    <Nuxt />
+  </AppLayout>
+</template>

src/app/module.ts

@@ -5,16 +5,18 @@ const r = (...args: any[]) => resolve(__dirname, ...args)
 
 export default <Module>function docusAppModule() {
   const { nuxt } = this
+
+  nuxt.options.layouts.default = r('layouts/default.vue')
+
   // Extend `/` route
   nuxt.hook('build:extendRoutes', (routes: any[]) => {
     const hasRoute = (name: string) => routes.some(route => route.name === name)
 
-    if (!hasRoute('all')) {
+    if (!hasRoute('all'))
       routes.push({
         path: '/*',
         name: 'all',
         component: r('pages/_.vue')
       })
-    }
   })
 }

src/app/pages/_.vue

@@ -5,52 +5,76 @@
 <script>
 import Vue from 'vue'
 import { withoutTrailingSlash } from 'ufo'
+import { defineComponent } from '@nuxtjs/composition-api'
 
-export default {
+export default defineComponent({
   name: 'PageSlug',
+
   middleware({ app, params, redirect }) {
-    if (params.pathMatch === 'index') {
-      redirect(app.localePath('/'))
-    }
+    if (params.pathMatch === 'index') redirect(app.localePath('/'))
   },
-  async asyncData({ $docus, app, params, error }) {
-    const language = app.i18n.locale
+
+  async asyncData({ $docus, app: { i18n }, params, error }) {
+    const language = i18n.locale
+
+    // Init template options from Docus settings
+    let templateOptions = {
+      ...$docus.settings.value.layout
+    }
+
+    // Get the proper current path
     const to = withoutTrailingSlash(`/${params.pathMatch || ''}`) || '/'
+
+    // TODO: Fix the draft system
     const draft = false
+
+    // Page query
     const [page] = await $docus.search({ deep: true }).where({ language, to, draft }).fetch()
-    if (!page) {
-      return error({ statusCode: 404, message: 'Page not found' })
-    }
 
+    // Break on missing page query
+    if (!page) return error({ statusCode: 404, message: 'Page not found' })
+
+    // Get page template
     page.template = $docus.getPageTemplate(page)
+
     // Preload the component on client-side navigation
-    await Vue.component(page.template)()
+    const component = await Vue.component(page.template)()
 
-    return { page }
-  },
-  data() {
-    return {
-      page: {}
-    }
+    // Set layout defaults for this template
+    if (component.templateOptions) templateOptions = { ...templateOptions, ...component.templateOptions }
+
+    // Set layout from page
+    if (page.layout) templateOptions = { ...templateOptions, ...page.layout }
+
+    // Set Docus runtime current page
+    $docus.currentPage.value = page
+
+    return { page, templateOptions }
   },
+
   head() {
     const head = {
       title: this.page.title,
       meta: [],
       ...(this.page.head || {})
     }
+
     this.mergeMeta(head.meta, this.pageMeta)
+
     return head
   },
+
   computed: {
     pageMeta() {
       return [
-        // Open Graph
+        // OpenGraph
         { hid: 'og:title', property: 'og:title', content: this.page.title },
         // Twitter Card
         { hid: 'twitter:title', name: 'twitter:title', content: this.page.title },
+        /// Page description
         ...(this.page.description
           ? [
+              // Meta description
               {
                 hid: 'description',
                 name: 'description',
@@ -71,16 +95,17 @@ export default {
             ]
           : [])
       ]
-    },
-    settings() {
-      return this.$docus.settings
     }
   },
+
+  beforeMount() {
+    this.$docus.layout.value = this.templateOptions
+  },
+
   mounted() {
-    if (this.page.version) {
-      localStorage.setItem(`page-${this.page.slug}-version`, this.page.version)
-    }
+    if (this.page?.version) localStorage.setItem(`page-${this.page.slug}-version`, this.page.version)
   },
+
   methods: {
     mergeMeta(to, from) {
       from.forEach(newMeta => {
@@ -92,5 +117,5 @@ export default {
       })
     }
   }
-}
+})
 </script>

src/core/database.ts

@@ -20,7 +20,8 @@ export const useDB = () => {
       const existed = _items.findOne({ key: document.key })
 
       if (existed) {
-        return _items.update({ $loki: existed.$loki, meta: existed.meta, ...document })
+        _items.update({ $loki: existed.$loki, meta: existed.meta, ...document })
+        return document
       }
 
       return _items.insert(document)

src/core/parser/markdown/index.ts

@@ -64,7 +64,7 @@ async function parse(file, options) {
     ...data,
     toc,
     body,
-    text: content,
+    text: file,
     excerpt
   }
 }

src/core/runtime/composables/api.ts

@@ -23,10 +23,6 @@ export const useDocusApi = createQuery => {
     return links.find(link => link.to === to)
   }
 
-  // function findLinkBySlug(links: NavItem[], slug: string) {
-  //   return links.find(link => link.slug === slug)
-  // }
-
   return {
     data,
     search,

src/core/runtime/docus.ts

@@ -25,8 +25,12 @@ export const createDocus = async (
 
   // State
   const state = reactive({
+    currentPage: null,
     settings: null,
-    theme: null
+    theme: null,
+    layout: {
+      ...settings.layout
+    }
   }) as DocusState
 
   // Split theme & user settings
@@ -63,7 +67,7 @@ export const createDocus = async (
   await setupAddons()
 
   // Init Docus for every context
-  await docusInit(docusAddonContext)
+  docusInit(docusAddonContext)
 
   // Workaround for async data
   clientAsyncData(context.app, $nuxt)