fix: default share metatags (#115)

* fix: default share metatags

* theme_colors

* docs

docs/content/1.get-started/2.configuration.md

@@ -26,6 +26,8 @@ You can create a `content/settings.json` file to configure the theme.
 | Key | Type | Description |
 |---------|------|-------------|
 | `title` | `String` | Documentation title |
+| `tagline` | `String` | The tagline represents a short description of your documentation. |
+| `description` | `String` | Brief summary about documentation, added for search engine optimization and social sharing |
 | `url` | `String` | Url of your deployed documentation. |
 | `logo` | `String` `Object` | Logo of the project, can be an `Object` to set a logo per [color mode](https://github.com/nuxt-community/color-mode-module). |
 | `layout` | `String` | The layout of your documentation (defaults to `docs`). Can be changed to `readme` to have a one-page doc. |

docs/content/settings.json

@@ -1,5 +1,7 @@
 {
   "title": "Docus",
+  "tagline": "Documentation generator based on Nuxt and Tailwind.",
+  "description": "Write in markdown, use Vue components, add style with TailwindCSS and enjoy the power of Nuxt.",
   "url": "https://docus.dev",
   "twitter": "nuxt_js",
   "github": {

theme/module.js

@@ -18,6 +18,9 @@ export default function docusModule () {
   try {
     const docusSettings = require(settingsPath)
 
+    // default title and description for pages
+    options.meta.name = `${docusSettings.title} - ${docusSettings.tagline}`
+    options.meta.description = docusSettings.description
     if (docusSettings.colors && docusSettings.colors.primary) {
       options.meta.theme_color = docusSettings.colors.primary
     }

theme/plugins/docus.js

@@ -84,7 +84,7 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
         this.settings = defu(settings, defaults)
         // Update injected styles on HMR
         if (process.dev && process.client) {
-          this.addThemeStyles()
+          this.updateHead()
         }
       },
       async fetchReleases () {
@@ -160,17 +160,25 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
         this.categories[app.i18n.locale] = groupBy(docs, 'category')
       },
 
-      addThemeStyles () {
+      updateHead () {
         if (!Array.isArray(app.head.style)) {
           app.head.style = []
         }
+        if (!Array.isArray(app.head.meta)) {
+          app.head.meta = []
+        }
         // Avoid duplicates (seems vue-meta don't handle it for style)
         app.head.style = app.head.style.filter(s => s.hid !== 'docus-theme')
         app.head.style.push({
           hid: 'docus-theme',
           cssText: this.themeStyles,
           type: 'text/css'
         })
+
+        app.head.meta = app.head.meta.filter(s => s.hid !== 'apple-mobile-web-app-title')
+        app.head.meta.push({ hid: 'apple-mobile-web-app-title', name: 'apple-mobile-web-app-title', content: this.settings.title })
+        app.head.meta = app.head.meta.filter(s => s.hid !== 'theme-color')
+        app.head.meta.push({ hid: 'theme-color', name: 'theme-color', content: this.settings.colors.primary })
       }
     }
   })
@@ -192,8 +200,8 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
     })
   }
 
-  // Inject colors as css variables
-  $docus.addThemeStyles()
+  // Update app head, Inject colors as css variables
+  $docus.updateHead()
 
   inject('docus', $docus)
 }