feat: detect title and description of document (#98)

* feat: detect title and description of document

* chore: update markdown files

docs/content/1.index.md

@@ -1,7 +1,5 @@
 ---
-title: Introduction
 category: Getting Started
-description: 'Create beautiful documentations with Markdown, Vue and TailwindCSS ✨'
 features:
   - Powered by Markdown
   - Ready for translations
@@ -13,6 +11,10 @@ features:
   - Static Generated
 ---
 
+# Introduction
+
+> Create beautiful documentations with Markdown, Vue and TailwindCSS ✨
+
 Docus makes it easy to create beautiful documentation, it is using [Vue](https://vuejs.org), [Nuxt](https://nuxtjs.org), [Content](https://content.nuxtjs.org) and [TailwindCSS](https://tailwindcss.com) under the hood.
 
 Create a new docs with our [GitHub template](/installation#github-template) or [locally](/installation#download-locally) and start writing markdown in a beautiful documentation, live preview your changes and use [Vue components](/usage/components).

docs/content/2.installation.md

@@ -1,9 +1,11 @@
 ---
-title: Installation
-description: 'Setting up a beautiful documentation with Docus is one command away 🤙'
 category: Getting Started
 ---
 
+# Installation
+
+> Setting up a beautiful documentation with Docus is one command away 🤙
+
 Docus is a pre-configured [Nuxt](https://nuxtjs.org) application, with [TailwindCSS](https://tailwindcss.com) and [Nuxt Content](https://content.nuxtjs.org).
 
 ## System Requirements

docs/content/2.usage/1.configuration.md

@@ -1,8 +1,9 @@
 ---
-title: Configuration
 category: Usage
 ---
 
+# Configuration
+
 ## Theme
 
 You can create a `content/settings.json` file to configure the theme.

docs/content/2.usage/2.content.md

@@ -1,9 +1,10 @@
 ---
-title: Writing content for the docs
 menuTitle: Content
 category: Usage
 ---
 
+# Writing content for the docs
+
 Once you've setup your documentation, you can directly start writing your content.
 
 <alert type="info">

docs/content/2.usage/3.components.md

@@ -1,9 +1,10 @@
 ---
-title: Components
 menuTitle: Components
 category: Usage
 ---
 
+# Components
+
 The theme comes with some default Vue.js components you can use directly in your markdown content.
 
 > You can create your own components in the `components/global/` folder, check out [this section](https://content.nuxtjs.org/writing#vue-components).

docs/content/2.usage/4.assets.md

@@ -1,9 +1,10 @@
 ---
-title: Assets
 menuTitle: Assets
 category: Usage
 ---
 
+# Assets
+
 ## Favicon and PWA Icon
 
 You can add a `static/icon.png` image to enable [nuxt-pwa](https://pwa.nuxtjs.org) and generate a favicon automatically.

docs/content/2.usage/5.template.md

@@ -1,9 +1,10 @@
 ---
-title: Template
 menuTitle: Template
 category: Usage
 ---
 
+# Template
+
 ## Slots
 
 Docus support customizable slots in the template. You can use this slots to show custom information. In order to show information in one of slots, you need to create a component inside `components` directory with the same name.

docs/content/3.more/1.example.md

@@ -1,9 +1,11 @@
 ---
-title: Example
 category: More
-description: 'Live example of Nuxt Content docs theme on CodeSandbox.'
 csb_link: https://codesandbox.io/embed/docus-starter-1xsm7?hidenavigation=1&theme=dark
 fullscreen: true
 ---
 
+# Example
+
+> Live example of Nuxt Content docs theme on CodeSandbox.
+
 <code-sandbox :src="csb_link"></code-sandbox>

docs/content/3.more/2.showcases.md

@@ -1,5 +1,4 @@
 ---
-title: Showcases
 category: More
 fullscreen: true
 showcases:
@@ -21,4 +20,6 @@ showcases:
   - https://speedcurve.nuxtjs.org
 ---
 
+# Showcases
+
 <showcases :showcases="showcases"></showcases>

docs/content/3.more/3.deployment.md

@@ -1,9 +1,11 @@
 ---
-title: Deployment
 category: More
-description: 'Deploy your documentation with Docus to any static hosting 🪶'
 ---
 
+# Deployment
+
+> Deploy your documentation with Docus to any static hosting 🪶
+
 To generate the documentation for production, run the following command:
 
 <code-group>

docs/content/3.more/4.migration.md

@@ -1,10 +1,12 @@
 ---
-title: Migrate from @nuxt/content-theme-docs
 menuTitle: Migration
 category: More
-description: 'Migrate from @nuxt/content-theme-docs to Docus'
 ---
 
+# Migrate from @nuxt/content-theme-docs
+
+> Migrate from @nuxt/content-theme-docs to Docus
+
 By migrating to docus, you will have a fresh new design for your documentation ✨
 
 <div class="flex flex-wrap">

theme/module.js

@@ -3,7 +3,7 @@ import defu from 'defu'
 import gracefulFs from 'graceful-fs'
 
 import tailwindConfig from './tailwind.config'
-import { generatePosition, generateSlug, isDraft } from './utils/document'
+import { generatePosition, generateSlug, isDraft, processDocumentInfo } from './utils/document'
 
 const fs = gracefulFs.promises
 const r = (...args) => resolve(__dirname, ...args)
@@ -91,6 +91,8 @@ export default function docusModule () {
     const _to = `${_dir}/${slug}`.replace(/\/+/, '/')
     const position = generatePosition(_to, document)
 
+    processDocumentInfo(document)
+
     document.slug = generateSlug(slug)
     document.position = position
     document.to = generateSlug(_to)

theme/utils/document.js

@@ -20,6 +20,50 @@ export function isDraft (path) {
   return !!path.match(/(\.draft)$/, '$2')
 }
 
+export function processDocumentInfo (document) {
+  if (document.title && document.description) {
+    return document
+  }
+  const [first, second] = document.body.children
+    .flatMap(node => node.children ? node.children : node)
+    // top level `text` can be ignored
+    .filter(node => node.type !== 'text')
+
+  if (first && first.tag === 'h1') {
+    if (!document.title) {
+      document.title = getTextContent(first)
+      Object.assign(first, {
+        type: 'text', value: ''
+      })
+    }
+    // look for second element to find description
+    if (second && second.tag === 'blockquote') {
+      if (!document.description) {
+        document.description = getTextContent(second)
+        Object.assign(second, {
+          type: 'text', value: ''
+        })
+      }
+    }
+  } else if (first && first.type === 'blockquote') {
+    if (!document.description) {
+      document.description = getTextContent(first)
+      Object.assign(first, {
+        type: 'text', value: ''
+      })
+    }
+  }
+  return document
+}
+
+function getTextContent (node) {
+  let text = node.value || ''
+  if (node.children) {
+    text = text + node.children.map(child => getTextContent(child)).join('')
+  }
+  return text
+}
+
 function paddLeft (value, length) {
   return ('0'.repeat(length) + value).substr(String(value).length)
 }