From 4fa28e48c1811f19374d5e635cf31cca4e01bb49 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Mon, 1 Mar 2021 18:43:53 +0330
Subject: [PATCH] fix: default share metatags (#115)

* fix: default share metatags

* theme_colors

* docs
---
 docs/content/1.get-started/2.configuration.md |  2 ++
 docs/content/settings.json                    |  2 ++
 theme/module.js                               |  3 +++
 theme/plugins/docus.js                        | 16 ++++++++++++----
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/content/1.get-started/2.configuration.md b/docs/content/1.get-started/2.configuration.md
index 20e2f9937..90bcb1489 100644
--- a/docs/content/1.get-started/2.configuration.md
+++ b/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. |
diff --git a/docs/content/settings.json b/docs/content/settings.json
index 2a02dee77..2f554b976 100644
--- a/docs/content/settings.json
+++ b/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": {
diff --git a/theme/module.js b/theme/module.js
index 141f54aa2..c9c4a97de 100644
--- a/theme/module.js
+++ b/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
     }
diff --git a/theme/plugins/docus.js b/theme/plugins/docus.js
index e99bbed91..3a69745bd 100644
--- a/theme/plugins/docus.js
+++ b/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,10 +160,13 @@ 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({
@@ -171,6 +174,11 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
           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)
 }