From 4b57304b094ce2f12cf111718e2047f33aa4bb44 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 11 Jun 2021 20:34:32 +0430
Subject: [PATCH 1/5] fix: do not remove H1 from markdown content

---
 docs/content/1.get-started/1.installation.md       |  2 +-
 docs/content/1.get-started/2.configuration.md      |  2 +-
 docs/content/2.writing/1.my-first-page.md          |  2 +-
 docs/content/2.writing/2.syntax.md                 |  2 +-
 docs/content/2.writing/3.front-matter.md           |  6 +++---
 docs/content/2.writing/4.prose.md                  |  2 +-
 docs/content/3.features/1.routing.md               |  2 +-
 docs/content/3.features/2.localization.md          |  2 +-
 docs/content/3.features/3.assets.md                |  2 +-
 docs/content/3.features/4.social-image.md          |  2 +-
 docs/content/3.features/5.deployment.md            |  2 +-
 docs/content/3.features/6.extend.md                |  2 +-
 docs/content/3.features/7.migration.md             |  2 +-
 docs/content/4.theme/1.settings.md                 |  2 +-
 docs/content/4.theme/2.components.md               |  2 +-
 docs/content/4.theme/5.layout.md                   |  2 +-
 docs/content/4.theme/6.slots.md                    |  2 +-
 src/core/utils/document.ts                         | 12 ++----------
 .../components/organisms/PageContent.vue           | 14 ++++++++++++--
 19 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/docs/content/1.get-started/1.installation.md b/docs/content/1.get-started/1.installation.md
index a5a0443f6..1c8f7a642 100644
--- a/docs/content/1.get-started/1.installation.md
+++ b/docs/content/1.get-started/1.installation.md
@@ -1,6 +1,6 @@
 # Installation
 
-> Setting up a beautiful website with Docus is one command away. 🤙
+Setting up a beautiful website with Docus is one command away. 🤙
 
 Docus is an opinionated [Nuxt](https://nuxtjs.org) application that allows you to generate **content-based websites** with ease.
 
diff --git a/docs/content/1.get-started/2.configuration.md b/docs/content/1.get-started/2.configuration.md
index d91b9ef75..d6158403d 100644
--- a/docs/content/1.get-started/2.configuration.md
+++ b/docs/content/1.get-started/2.configuration.md
@@ -1,6 +1,6 @@
 # Configuration
 
-> Tailor Docus for your own identity easily. 🌈
+Tailor Docus for your own identity easily. 🌈
 
 ## Website
 
diff --git a/docs/content/2.writing/1.my-first-page.md b/docs/content/2.writing/1.my-first-page.md
index 33b7f8884..8c9cc6bcd 100644
--- a/docs/content/2.writing/1.my-first-page.md
+++ b/docs/content/2.writing/1.my-first-page.md
@@ -5,7 +5,7 @@ navigation:
 
 # Writing my first page
 
-> The fastest path to writing your content. 🏎
+The fastest path to writing your content. 🏎
 
 Let's walk through the creation of a simple introduction page.
 
diff --git a/docs/content/2.writing/2.syntax.md b/docs/content/2.writing/2.syntax.md
index 9a83e1c09..0036fccea 100644
--- a/docs/content/2.writing/2.syntax.md
+++ b/docs/content/2.writing/2.syntax.md
@@ -1,6 +1,6 @@
 # Syntax
 
-> Docus syntax makes you love your components even more. 🤝
+Docus syntax makes you love your components even more. 🤝
 
 Docus writing experience is based on a specific syntax built upon Vue components.
 
diff --git a/docs/content/2.writing/3.front-matter.md b/docs/content/2.writing/3.front-matter.md
index 9f98f786a..522491396 100644
--- a/docs/content/2.writing/3.front-matter.md
+++ b/docs/content/2.writing/3.front-matter.md
@@ -1,6 +1,6 @@
 # Front-matter
 
-> Easily configure the rendering of your Markdown pages. 📝
+Easily configure the rendering of your Markdown pages. 📝
 
 Front-matter is used to transmit data to your components and templates, from any page or directory.
 
@@ -42,7 +42,7 @@ The **title** and **description** are automatically filled in from the Markdown
 ```md
 # Title of the page
 
-> Description of the page
+Description of the page
 ```
 
 You can overwrite them using the Front-matter:
@@ -55,7 +55,7 @@ description: Overwritten description
 
 # Title of the page
 
-> Description of the page
+Description of the page
 ```
 
 ## Inheritance
diff --git a/docs/content/2.writing/4.prose.md b/docs/content/2.writing/4.prose.md
index e334cfa73..3e751ee48 100644
--- a/docs/content/2.writing/4.prose.md
+++ b/docs/content/2.writing/4.prose.md
@@ -1,6 +1,6 @@
 # Prose
 
-> Customizing your Markdown rendering has never been easier. 🧙‍♂️
+Customizing your Markdown rendering has never been easier. 🧙‍♂️
 
 Docus Markdown rendering preserves the HTML structure of your file.
 
diff --git a/docs/content/3.features/1.routing.md b/docs/content/3.features/1.routing.md
index a185f63a3..9467eef7e 100644
--- a/docs/content/3.features/1.routing.md
+++ b/docs/content/3.features/1.routing.md
@@ -1,6 +1,6 @@
 # Filesystem routing
 
-> A good looking website from any directory. 🔮
+A good looking website from any directory. 🔮
 
 Each markdown page in the `contentDir` directory will become a page and will be listed in the left navigation.
 
diff --git a/docs/content/3.features/2.localization.md b/docs/content/3.features/2.localization.md
index 439aff674..aa3cdc848 100644
--- a/docs/content/3.features/2.localization.md
+++ b/docs/content/3.features/2.localization.md
@@ -1,6 +1,6 @@
 # Localization
 
-> Enable i18n just by creating a directory. 🗺
+Enable i18n just by creating a directory. 🗺
 
 The first level of directories in the `content/` folder are the locales used with [nuxt-i18n](https://github.com/nuxt-community/i18n-module) as defined in your `nuxt.config.js`.
 
diff --git a/docs/content/3.features/3.assets.md b/docs/content/3.features/3.assets.md
index a1dc898b0..70b2fd03f 100644
--- a/docs/content/3.features/3.assets.md
+++ b/docs/content/3.features/3.assets.md
@@ -1,6 +1,6 @@
 # Assets
 
-> Easily import and optimize your assets with pre-defined modules. 🙈
+Easily import and optimize your assets with pre-defined modules. 🙈
 
 ## Favicon and PWA Icon
 
diff --git a/docs/content/3.features/4.social-image.md b/docs/content/3.features/4.social-image.md
index 7756a3828..5fd719aa6 100644
--- a/docs/content/3.features/4.social-image.md
+++ b/docs/content/3.features/4.social-image.md
@@ -1,6 +1,6 @@
 # Social Images
 
-> Docus automatically generates a social preview image for every document. 🤳
+Docus automatically generates a social preview image for every document. 🤳
 
 It uses the `social-image-preview` page to generate the images.
 
diff --git a/docs/content/3.features/5.deployment.md b/docs/content/3.features/5.deployment.md
index 4a865451d..9021f5de9 100644
--- a/docs/content/3.features/5.deployment.md
+++ b/docs/content/3.features/5.deployment.md
@@ -1,6 +1,6 @@
 # Deployment
 
-> Deploy your documentation with Docus to any static hosting. 🪶
+Deploy your documentation with Docus to any static hosting. 🪶
 
 To generate the documentation for production, run the following command:
 
diff --git a/docs/content/3.features/6.extend.md b/docs/content/3.features/6.extend.md
index 9461bd020..3c9cca50d 100644
--- a/docs/content/3.features/6.extend.md
+++ b/docs/content/3.features/6.extend.md
@@ -1,6 +1,6 @@
 # Extend
 
-> Extend Docus with the power of Nuxt modules. 🚀
+Extend Docus with the power of Nuxt modules. 🚀
 
 Docus is based on Nuxt, so you can benefit from the existing ecosystem of [Nuxt Modules](https://modules.nuxtjs.org/).
 
diff --git a/docs/content/3.features/7.migration.md b/docs/content/3.features/7.migration.md
index 84ed5944a..5e8046cef 100644
--- a/docs/content/3.features/7.migration.md
+++ b/docs/content/3.features/7.migration.md
@@ -5,7 +5,7 @@ navigation:
 
 # Migrate from @nuxt/content-theme-docs
 
-> Migrate from @nuxt/content-theme-docs to Docus. 🔋
+Migrate from @nuxt/content-theme-docs to Docus. 🔋
 
 By migrating to Docus, you will have a fresh new design for your documentation :sparkles:
 
diff --git a/docs/content/4.theme/1.settings.md b/docs/content/4.theme/1.settings.md
index 4f592a94e..6cf879c30 100644
--- a/docs/content/4.theme/1.settings.md
+++ b/docs/content/4.theme/1.settings.md
@@ -5,7 +5,7 @@ navigation:
 
 # Theme settings
 
-> The default theme is entirely customizable, from a simple configuration file! ✨
+The default theme is entirely customizable, from a simple configuration file! ✨
 
 The default configuration sets defaults for every needed feature of your theme.
 
diff --git a/docs/content/4.theme/2.components.md b/docs/content/4.theme/2.components.md
index 130de9c2b..e5e0f9f7e 100644
--- a/docs/content/4.theme/2.components.md
+++ b/docs/content/4.theme/2.components.md
@@ -1,6 +1,6 @@
 # Components
 
-> Good looking components, ready to use in your website. 💄
+Good looking components, ready to use in your website. 💄
 
 Docus default theme comes with a lot of pre-defined components.
 
diff --git a/docs/content/4.theme/5.layout.md b/docs/content/4.theme/5.layout.md
index cd6adcf94..5d4c79225 100644
--- a/docs/content/4.theme/5.layout.md
+++ b/docs/content/4.theme/5.layout.md
@@ -1,6 +1,6 @@
 # Layout
 
-> Customize your website with slots or overwrite the layout components. 🧩
+Customize your website with slots or overwrite the layout components. 🧩
 
 With the power of the [Nuxt Components](https://github.com/nuxt/components#overwriting-components), every part of the template is fully customizable.
 
diff --git a/docs/content/4.theme/6.slots.md b/docs/content/4.theme/6.slots.md
index d45c15af0..fddedf9ef 100644
--- a/docs/content/4.theme/6.slots.md
+++ b/docs/content/4.theme/6.slots.md
@@ -1,6 +1,6 @@
 # Slots
 
-> Docus supports customizable slots in the template. 🧱
+Docus supports customizable slots in the template. 🧱
 
 Just create a component inside your `components` directory with the same name as the slot.
 
diff --git a/src/core/utils/document.ts b/src/core/utils/document.ts
index 2bc52f849..de6e6439c 100644
--- a/src/core/utils/document.ts
+++ b/src/core/utils/document.ts
@@ -43,22 +43,14 @@ export function processDocumentInfo(document: DocusDocument): DocusDocument {
   if (first && expandTags(['h1']).includes(first.tag)) {
     if (!document.title) {
       document.title = getTextContent(first)
-      Object.assign(first, {
-        type: 'text',
-        value: ''
-      })
     }
     // look for second element to find description
-    if (second && expandTags(['blockquote']).includes(second.tag)) {
+    if (second && expandTags(['p']).includes(second.tag)) {
       if (!document.description) {
         document.description = getTextContent(second)
-        Object.assign(second, {
-          type: 'text',
-          value: ''
-        })
       }
     }
-  } else if (first && first.type === 'blockquote') {
+  } else if (first && first.type === 'p') {
     if (!document.description) {
       document.description = getTextContent(first)
       Object.assign(first, {
diff --git a/src/defaultTheme/components/organisms/PageContent.vue b/src/defaultTheme/components/organisms/PageContent.vue
index d8039ae85..095257609 100644
--- a/src/defaultTheme/components/organisms/PageContent.vue
+++ b/src/defaultTheme/components/organisms/PageContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <section class="xl:mb-4 mt-4 xl:mt-0 px-4 sm:px-6">
+    <!-- <section class="xl:mb-4 mt-4 xl:mt-0 px-4 sm:px-6">
       <div class="flex items-center justify-between">
         <InjectComponent
           v-if="page.icon"
@@ -40,7 +40,7 @@
         v-if="$scopedSlots['mobile-toc'] || page.description"
         class="mt-4 border-gray-100 dark:border-gray-800 dark:border-opacity-50"
       />
-    </section>
+    </section> -->
 
     <slot name="mobile-toc" />
 
@@ -62,3 +62,13 @@ export default defineComponent({
   }
 })
 </script>
+
+<style scoped lang="postcss">
+.docus-content {
+  ::v-deep {
+    & > h1:first-child {
+      margin-top: 0;
+    }
+  }
+}
+</style>
\ No newline at end of file

From 1b68ebb7a01bd45b295b961e016469dd67bcd455 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Tue, 15 Jun 2021 13:21:45 +0430
Subject: [PATCH 2/5] feat: `extract.heading`

---
 .../{NuxtContent.vue => DocusContent.vue}     | 21 +++++++---
 src/core/utils/document.ts                    | 39 +++++++++++++++----
 .../components/atoms/InjectContent.vue        |  2 +-
 .../components/organisms/PageContent.vue      | 37 ++++++++++++------
 .../components/templates/BlogPost.vue         |  2 +-
 .../components/templates/Marketing.vue        |  2 +-
 .../components/templates/Page.vue             |  2 +-
 .../components/templates/Releases.vue         |  2 +-
 src/types/core.ts                             |  8 ++++
 9 files changed, 85 insertions(+), 30 deletions(-)
 rename src/core/runtime/components/{NuxtContent.vue => DocusContent.vue} (94%)

diff --git a/src/core/runtime/components/NuxtContent.vue b/src/core/runtime/components/DocusContent.vue
similarity index 94%
rename from src/core/runtime/components/NuxtContent.vue
rename to src/core/runtime/components/DocusContent.vue
index c3b2adfd2..ede23f4ea 100644
--- a/src/core/runtime/components/NuxtContent.vue
+++ b/src/core/runtime/components/DocusContent.vue
@@ -148,20 +148,27 @@ function getSlotName(node) {
 }
 
 export default {
-  name: 'NuxtContent',
+  name: 'DocusContent',
   functional: true,
   props: {
     document: {
-      type: Object,
+      type: [Object, String],
       required: true
     }
   },
-  render(h, { data, props, parent }) {
+  render(h, { data, props, parent, _v }) {
     const { document } = props
+
+    // Render simple string
+    if (typeof document === 'string') {
+      return _v(document)
+    }
+
     const { body } = document || {}
     if (!body || !body.children || !Array.isArray(body.children)) {
       return
     }
+
     let classes = []
     if (Array.isArray(data.class)) {
       classes = data.class
@@ -171,7 +178,7 @@ export default {
     } else {
       classes = [data.class]
     }
-    data.class = classes.concat('nuxt-content')
+    data.class = classes
     data.props = Object.assign({ ...body.props }, data.props)
     const children = body.children.map(child => processNode(child, h, document))
 
@@ -184,7 +191,11 @@ export default {
         }
       })
     }
-    return h('div', data, children)
+
+    // detect root tag
+    const tag = body.tag || 'div'
+
+    return h(tag, data, children)
   }
 }
 </script>
diff --git a/src/core/utils/document.ts b/src/core/utils/document.ts
index de6e6439c..df8ac23a4 100644
--- a/src/core/utils/document.ts
+++ b/src/core/utils/document.ts
@@ -33,9 +33,9 @@ export function isDraft(path: string): boolean {
 }
 
 export function processDocumentInfo(document: DocusDocument): DocusDocument {
-  if (document.title && document.description) {
-    return document
-  }
+  // There is no need to extract if both title and descriptio is provided by user
+  if (document.title && document.description) return document
+
   const [first, second] = document.body.children
     // top level `text` can be ignored
     .filter(node => node.type !== 'text')
@@ -43,20 +43,43 @@ export function processDocumentInfo(document: DocusDocument): DocusDocument {
   if (first && expandTags(['h1']).includes(first.tag)) {
     if (!document.title) {
       document.title = getTextContent(first)
+      document.titleNode = { body: first }
+
+      // Remove node if heading extract is enables
+      if (document.extract?.heading !== false) {
+        Object.assign(first, {
+          type: 'text',
+          value: ''
+        })
+      }
     }
     // look for second element to find description
     if (second && expandTags(['p']).includes(second.tag)) {
       if (!document.description) {
         document.description = getTextContent(second)
+        document.descriptionNode = { body: second }
+
+        // Remove node if heading extract is enables
+        if (document.extract?.heading !== false) {
+          Object.assign(second, {
+            type: 'text',
+            value: ''
+          })
+        }
       }
     }
-  } else if (first && first.type === 'p') {
+  } else if (first && expandTags(['p']).includes(first.tag)) {
     if (!document.description) {
       document.description = getTextContent(first)
-      Object.assign(first, {
-        type: 'text',
-        value: ''
-      })
+      document.descriptionNode = { body: first }
+
+      // Remove node if heading extract is enables
+      if (document.extract?.heading !== false) {
+        Object.assign(first, {
+          type: 'text',
+          value: ''
+        })
+      }
     }
   }
   return document
diff --git a/src/defaultTheme/components/atoms/InjectContent.vue b/src/defaultTheme/components/atoms/InjectContent.vue
index 89654b747..46c04fd29 100644
--- a/src/defaultTheme/components/atoms/InjectContent.vue
+++ b/src/defaultTheme/components/atoms/InjectContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtContent :document="page" />
+  <DocusContent :document="page" />
 </template>
 
 <script>
diff --git a/src/defaultTheme/components/organisms/PageContent.vue b/src/defaultTheme/components/organisms/PageContent.vue
index 095257609..2cdbc4bc3 100644
--- a/src/defaultTheme/components/organisms/PageContent.vue
+++ b/src/defaultTheme/components/organisms/PageContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- <section class="xl:mb-4 mt-4 xl:mt-0 px-4 sm:px-6">
+    <section v-if="showHeading" class="xl:mb-4 mt-4 xl:mt-0 px-4 sm:px-6">
       <div class="flex items-center justify-between">
         <InjectComponent
           v-if="page.icon"
@@ -9,9 +9,12 @@
         >
           <span class="text-3rem">{{ page.icon }}</span>
         </InjectComponent>
-        <h1 class="flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
-          {{ page.title }}
-        </h1>
+
+        <DocusContent
+          :document="page.titleNode || page.title"
+          class="mb-0 flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100"
+        />
+
         <span
           v-if="page.draft"
           class="
@@ -27,31 +30,34 @@
             bg-yellow-100
             rounded-full
             items-flex
-            dark:bg-yellow-800 dark:text-yellow-400
+            dark:bg-yellow-800
+            dark:text-yellow-400
           "
           >Draft</span
         >
         <Badge v-if="page.badge" class="font-medium">{{ page.badge }}</Badge>
       </div>
-      <p v-if="page.description" class="mt-4 text-lg font-medium text-gray-500 dark:text-gray-400">
-        {{ page.description }}
-      </p>
+      <DocusContent
+        v-if="page.description"
+        :document="page.descriptionNode || page.description"
+        class="mt-4 mb-0 text-lg font-medium text-gray-500 dark:text-gray-400"
+      />
       <hr
         v-if="$scopedSlots['mobile-toc'] || page.description"
         class="mt-4 border-gray-100 dark:border-gray-800 dark:border-opacity-50"
       />
-    </section> -->
+    </section>
 
     <slot name="mobile-toc" />
 
     <div class="px-4 sm:px-6 mt-4">
-      <NuxtContent :document="page" class="docus-content" />
+      <DocusContent :document="page" class="docus-content" />
     </div>
   </div>
 </template>
 
 <script>
-import { defineComponent } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   props: {
@@ -59,6 +65,13 @@ export default defineComponent({
       type: Object,
       required: true
     }
+  },
+  setup(props) {
+    const showHeading = computed(() => !props.page.extract || props.page.extract.heading !== false)
+
+    return {
+      showHeading
+    }
   }
 })
 </script>
@@ -71,4 +84,4 @@ export default defineComponent({
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/defaultTheme/components/templates/BlogPost.vue b/src/defaultTheme/components/templates/BlogPost.vue
index 46685d587..5297c04aa 100644
--- a/src/defaultTheme/components/templates/BlogPost.vue
+++ b/src/defaultTheme/components/templates/BlogPost.vue
@@ -73,7 +73,7 @@
 
       <div class="max-w-2xl mx-auto">
         <BlogpostToc :toc="page.toc.links" :title="page.toc.title" class="mb-8" />
-        <NuxtContent :document="page" class="px-4 docus-content" />
+        <DocusContent :document="page" class="px-4 docus-content" />
       </div>
     </div>
   </div>
diff --git a/src/defaultTheme/components/templates/Marketing.vue b/src/defaultTheme/components/templates/Marketing.vue
index c89a5620f..54cb76112 100644
--- a/src/defaultTheme/components/templates/Marketing.vue
+++ b/src/defaultTheme/components/templates/Marketing.vue
@@ -1,6 +1,6 @@
 <template>
   <AppContainer fluid :footer="page.footer">
-    <NuxtContent :document="page" />
+    <DocusContent :document="page" />
   </AppContainer>
 </template>
 
diff --git a/src/defaultTheme/components/templates/Page.vue b/src/defaultTheme/components/templates/Page.vue
index 4dc4407f2..35de2a8d4 100644
--- a/src/defaultTheme/components/templates/Page.vue
+++ b/src/defaultTheme/components/templates/Page.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtContent :document="page" />
+  <DocusContent :document="page" />
 </template>
 
 <script>
diff --git a/src/defaultTheme/components/templates/Releases.vue b/src/defaultTheme/components/templates/Releases.vue
index e5818314b..de48d8ca3 100644
--- a/src/defaultTheme/components/templates/Releases.vue
+++ b/src/defaultTheme/components/templates/Releases.vue
@@ -22,7 +22,7 @@
           </ProseH2>
           <span class="text-sm font-normal text-gray-500">{{ formatDate($i18n.local, release) }}</span>
         </div>
-        <NuxtContent :document="release" class="docus-content" />
+        <DocusContent :document="release" class="docus-content" />
       </div>
     </div>
 
diff --git a/src/types/core.ts b/src/types/core.ts
index ee7d1f70e..080173383 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -94,6 +94,14 @@ export interface DocusDocument {
     fluid: boolean
     [key: string]: any
   }
+  extract: {
+    heading: boolean
+  }
+  // AST node of markdown title that extracts from content
+  titleNode?: any
+  // AST node of markdown lead pragraph that extracts from content
+  descriptionNode?: any
+
   // Generated
   key: string
   path: string

From 65d24bb4542f1d261847aac0068b3b4abfdc9e9b Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Wed, 16 Jun 2021 12:53:50 +0430
Subject: [PATCH 3/5] fix: improve UI

---
 src/core/utils/document.ts                      |  5 ++++-
 .../components/organisms/PageContent.vue        | 17 ++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/core/utils/document.ts b/src/core/utils/document.ts
index df8ac23a4..2ad5fdb55 100644
--- a/src/core/utils/document.ts
+++ b/src/core/utils/document.ts
@@ -1,6 +1,6 @@
 import { withoutTrailingSlash } from 'ufo'
 import { DocusDocument, DocusMarkdownNode } from '../../types'
-import { expandTags } from '../runtime/utils'
+import { expandTags, flatUnwrap } from '../runtime/utils'
 
 export function generatePosition(path: string, document: DocusDocument): string {
   const position = path
@@ -43,6 +43,9 @@ export function processDocumentInfo(document: DocusDocument): DocusDocument {
   if (first && expandTags(['h1']).includes(first.tag)) {
     if (!document.title) {
       document.title = getTextContent(first)
+      // Remove anchor link
+      first.children = flatUnwrap(first.children, ['a'])
+
       document.titleNode = { body: first }
 
       // Remove node if heading extract is enables
diff --git a/src/defaultTheme/components/organisms/PageContent.vue b/src/defaultTheme/components/organisms/PageContent.vue
index 2cdbc4bc3..78f52560f 100644
--- a/src/defaultTheme/components/organisms/PageContent.vue
+++ b/src/defaultTheme/components/organisms/PageContent.vue
@@ -10,10 +10,7 @@
           <span class="text-3rem">{{ page.icon }}</span>
         </InjectComponent>
 
-        <DocusContent
-          :document="page.titleNode || page.title"
-          class="mb-0 flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100"
-        />
+        <DocusContent id="headline" :document="page.titleNode || page.title" />
 
         <span
           v-if="page.draft"
@@ -37,11 +34,7 @@
         >
         <Badge v-if="page.badge" class="font-medium">{{ page.badge }}</Badge>
       </div>
-      <DocusContent
-        v-if="page.description"
-        :document="page.descriptionNode || page.description"
-        class="mt-4 mb-0 text-lg font-medium text-gray-500 dark:text-gray-400"
-      />
+      <DocusContent v-if="page.description" id="lead" :document="page.descriptionNode || page.description" />
       <hr
         v-if="$scopedSlots['mobile-toc'] || page.description"
         class="mt-4 border-gray-100 dark:border-gray-800 dark:border-opacity-50"
@@ -84,4 +77,10 @@ export default defineComponent({
     }
   }
 }
+#headline {
+  @apply m-0 flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100;
+}
+#lead {
+  @apply mt-4 mb-0 text-lg font-medium text-gray-500 dark:text-gray-400;
+}
 </style>

From 9f35bab5657fa08d5ed23308d6ad14abce85c050 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Wed, 16 Jun 2021 13:26:03 +0430
Subject: [PATCH 4/5] fix: trim text content

---
 src/core/utils/document.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/utils/document.ts b/src/core/utils/document.ts
index 2ad5fdb55..7a694be3f 100644
--- a/src/core/utils/document.ts
+++ b/src/core/utils/document.ts
@@ -95,7 +95,7 @@ function getTextContent(node: DocusMarkdownNode): string {
   if (node.children) {
     text = text + node.children.map(child => getTextContent(child)).join('')
   }
-  return text
+  return text.trim()
 }
 
 function padLeft(value: string, length: number): string {

From ca932d49b0b1c174de194d817df14ee173e3c903 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Wed, 16 Jun 2021 16:46:50 +0430
Subject: [PATCH 5/5] fix: handle string values

---
 src/defaultTheme/components/organisms/PageContent.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/defaultTheme/components/organisms/PageContent.vue b/src/defaultTheme/components/organisms/PageContent.vue
index 78f52560f..43e46ba7b 100644
--- a/src/defaultTheme/components/organisms/PageContent.vue
+++ b/src/defaultTheme/components/organisms/PageContent.vue
@@ -10,7 +10,8 @@
           <span class="text-3rem">{{ page.icon }}</span>
         </InjectComponent>
 
-        <DocusContent id="headline" :document="page.titleNode || page.title" />
+        <DocusContent v-if="page.titleNode" id="headline" :document="page.titleNode" />
+        <ProseH1 v-else id="headline">{{ page.title }}</ProseH1>
 
         <span
           v-if="page.draft"
@@ -34,7 +35,10 @@
         >
         <Badge v-if="page.badge" class="font-medium">{{ page.badge }}</Badge>
       </div>
-      <DocusContent v-if="page.description" id="lead" :document="page.descriptionNode || page.description" />
+      <template v-if="page.description">
+        <DocusContent v-if="page.descriptionNode" id="lead" :document="page.descriptionNode" />
+        <ProseParagraph id="lead">{{ page.description }}</ProseParagraph>
+      </template>
       <hr
         v-if="$scopedSlots['mobile-toc'] || page.description"
         class="mt-4 border-gray-100 dark:border-gray-800 dark:border-opacity-50"