chore(docs): add meta description for docs pages (#2957)

tmorehouse · web-flow · commit d53363031bc4 · 2019-03-31T13:16:40.000-03:00
diff --git a/docs/content/index.js b/docs/content/index.js
@@ -1,5 +1,5 @@
 import { importAll, parseVersion } from '~/utils'
-import { version, dependencies, devDependencies } from '~/../package.json'
+import { version, dependencies, devDependencies, description } from '~/../package.json'
 import { getDefaults } from '~/../src/utils/config'
 
 const componentsContext = require.context('~/../src/components/', true, /package.json/)
@@ -46,5 +46,6 @@ export const bootstrapVersion = parseVersion(dependencies.bootstrap)
 export const vueVersion = parseVersion(devDependencies.vue)
 export const nuxtVersion = parseVersion(devDependencies.nuxt)
 export const defaultConfig = getDefaults()
+export const bvDescription = description
 
 export { version }
diff --git a/docs/markdown/misc/changelog/meta.json b/docs/markdown/misc/changelog/meta.json
@@ -1,3 +1,4 @@
 {
-  "title": "Changelog"
+  "title": "Changelog",
+  "description": "All notable changes to BootstrapVue are documented in this page."
 }
diff --git a/docs/markdown/misc/contributing/meta.json b/docs/markdown/misc/contributing/meta.json
@@ -1,3 +1,4 @@
 {
-  "title": "Contributing"
+  "title": "Contributing",
+  "description": "Information on contributing to the BootstrapVue project."
 }
diff --git a/docs/markdown/misc/settings/meta.json b/docs/markdown/misc/settings/meta.json
@@ -1,4 +1,5 @@
 {
   "title": "Settings",
+  "description": "Configuring BootstrapVue",
   "new": true
 }
diff --git a/docs/markdown/reference/color-variants/meta.json b/docs/markdown/reference/color-variants/meta.json
@@ -1,3 +1,4 @@
 {
-  "title": "Color Variants"
+  "title": "Color Variants",
+  "description": "Color variants available when using the default Bootstrap V4 CSS and their mappings to CSS classes."
 }
diff --git a/docs/markdown/reference/images/README.md b/docs/markdown/reference/images/README.md
@@ -1,7 +1,9 @@
-# Project relative image URLs for BootstrapVue custom components
+# Component img src resolving
 
-> vue-loader automatically converts project relative `src` attributes on `<img>` tags, but doesn't
-> automatically for BootstrapVue custom components that accept image src url tags.
+## Using project relative image URLs for BootstrapVue custom components
+
+vue-loader automatically converts project relative `src` attributes on `<img>` tags, but doesn't
+automatically for BootstrapVue custom components that accept image src url tags.
 
 ## Vue-loader `transformAssetUrls` to resolve img paths
 
diff --git a/docs/markdown/reference/images/meta.json b/docs/markdown/reference/images/meta.json
@@ -1,4 +1,5 @@
 {
   "title": "Component img src resolving",
+  "description": "Using project relative image URLs for BootstrapVue custom components with vue-loader",
   "slug": "images"
 }
diff --git a/docs/markdown/reference/router-links/meta.json b/docs/markdown/reference/router-links/meta.json
@@ -1,4 +1,5 @@
 {
   "title": "Router support",
+  "description": "Several BootstrapVue components support rendering <router-link> components compatible with Vue-Router and Nuxt.",
   "slug": "router-links"
 }
diff --git a/docs/markdown/reference/size-props/meta.json b/docs/markdown/reference/size-props/meta.json
@@ -1,4 +1,5 @@
 {
   "title": "Size props and classes",
+  "description": "Bootstrap V4 CSS provides several classes that control the sizing of elements, of which some of these have been translated into props on components.",
   "slug": "size-props"
 }
diff --git a/docs/markdown/reference/spacing-classes/meta.json b/docs/markdown/reference/spacing-classes/meta.json
@@ -1,3 +1,4 @@
 {
-  "title": "Spacing classes"
+  "title": "Spacing classes",
+  "descripton": "Bootstrap V4 CSS includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance."
 }
diff --git a/docs/markdown/reference/starter-templates/meta.json b/docs/markdown/reference/starter-templates/meta.json
@@ -1,3 +1,4 @@
 {
-  "title": "Starter Templates"
+  "title": "Starter Templates",
+  "description": "There are several ways you can create your app, from basic client side HTML all the way up to using a build system and compilers."
 }
diff --git a/docs/markdown/reference/theming/meta.json b/docs/markdown/reference/theming/meta.json
@@ -1,4 +1,5 @@
 {
   "title": "Theming Bootstrap",
+  "description": "Theming is accomplished by Sass variables, Sass maps, and custom CSS. There’s no dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.",
   "slug": "theming"
 }
diff --git a/docs/markdown/reference/utility-classes/meta.json b/docs/markdown/reference/utility-classes/meta.json
@@ -1,4 +1,5 @@
 {
   "title": "Utility Classes",
+  "description": "Bootstrap V4 CSS provides various utility classes to control color, spacing, flex-box, text alignment, floating, position, responsive display/hiding and much more.",
   "slug": "utility-classes"
 }
diff --git a/docs/markdown/reference/validation/meta.json b/docs/markdown/reference/validation/meta.json
@@ -1,4 +1,5 @@
 {
   "title": "Form Validation",
+  "description": "BootstrapVue does not include form validation by default; we leave that up to the many existing form validation plugins. Included here are some examples of validation plugins and how they may be integrated.",
   "slug": "validation"
 }
diff --git a/docs/pages/play.vue b/docs/pages/play.vue
@@ -231,8 +231,25 @@ export default {
     }
   },
   head() {
+    const title = 'Online Playground | BootstrapVue'
+    const description = 'Interactively play and test BootstrapVue components online.'
     return {
-      title: 'Playground - BootstrapVue'
+      title: title,
+      meta: [
+        {
+          hid: 'og:title',
+          name: 'og:title',
+          property: 'og:title',
+          content: title
+        },
+        {
+          hid: 'og:description',
+          name: 'og:description',
+          property: 'og:description',
+          content: description
+        },
+        { hid: 'description', name: 'description', content: description }
+      ]
     }
   },
   computed: {
diff --git a/docs/plugins/docs-mixin.js b/docs/plugins/docs-mixin.js
@@ -2,6 +2,7 @@
  * docs-mixin: used by any page under /docs path
  */
 import { scrollTo, offsetTop } from '~/utils'
+import { bvDescription } from '~/content'
 
 // @vue/component
 export default {
@@ -13,13 +14,64 @@ export default {
 
   computed: {
     content() {
+      // NOTE: is this computed prop used anymore?
       return (this.$route.params.slug && this._content[this.$route.params.slug]) || {}
+    },
+    headTitle() {
+      const routeName = this.$route.name
+      let title = ''
+      let section = ''
+      if (this.meta && this.meta.title) {
+        title = this.meta.title
+      }
+      if (routeName === 'docs-components-slug') {
+        section = 'Components'
+      } else if (routeName === 'docs-directives-slug') {
+        section = 'Directives'
+      } else if (routeName === 'docs-reference-slug') {
+        section = 'Reference'
+      } else if (routeName === 'docs-misc-slug') {
+        section = 'Misc'
+      }
+      return [title, section, 'BootstrapVue'].filter(Boolean).join(' | ')
+    },
+    headMeta() {
+      const meta = [
+        {
+          hid: 'og:title',
+          name: 'og:title',
+          property: 'og:title',
+          content: this.headTitle
+        }
+      ]
+      if (this.meta && this.meta.description) {
+        const desc = this.meta.description
+        meta.push({
+          hid: 'description',
+          name: 'description',
+          content: desc
+        })
+        meta.push({
+          hid: 'og:description',
+          name: 'og:description',
+          property: 'og:description',
+          content: desc
+        })
+      } else if (bvDescription) {
+        meta.push({
+          hid: 'description',
+          name: 'description',
+          content: bvDescription
+        })
+      }
+      return meta
     }
   },
 
   head() {
     return {
-      title: `${(this.meta && this.meta.title) || 'Docs'} - BootstrapVue`
+      title: this.headTitle,
+      meta: this.headMeta
     }
   },
 
diff --git a/src/components/alert/package.json b/src/components/alert/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Alert",
+    "description": "Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.",
     "components": [
       {
         "component": "BAlert",
diff --git a/src/components/badge/package.json b/src/components/badge/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Badge",
+    "description": "Small and adaptive tag for adding context to just about any content.",
     "components": [
       "BBadge"
     ]
diff --git a/src/components/breadcrumb/package.json b/src/components/breadcrumb/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Breadcrumb",
+    "description": "Indicate the current page’s location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content.",
     "components": [
       "BBreadcrumb",
       {
diff --git a/src/components/button-group/package.json b/src/components/button-group/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Button Group",
+    "description": "Group a series of buttons together on a single line with <b-button-group>.",
     "components": [
       {
         "component": "BButtonGroup",
diff --git a/src/components/button-toolbar/package.json b/src/components/button-toolbar/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Button Toolbar",
+    "description": "Group a series of <b-button-group> and/or <b-input-group> together on a single line, with optional keyboard navigation.",
     "components": [
       {
         "component": "BButtonToolbar",
diff --git a/src/components/button/package.json b/src/components/button/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Button",
+    "description": "Use Bootstrap Vue’s <b-button> component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.",
     "components": [
       {
         "component": "BButton",
diff --git a/src/components/card/package.json b/src/components/card/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Card",
+    "description": "A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.",
     "components": [
       {
         "component": "BCard",
diff --git a/src/components/carousel/package.json b/src/components/carousel/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Carousel",
+    "description": "The <b-carousel> component is a slideshow for cycling through a series of content, built with CSS 3D transforms. It works with a series of images, text, or custom markup.",
     "components": [
       {
         "component": "BCarousel",
diff --git a/src/components/collapse/package.json b/src/components/collapse/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Collapse",
+    "description": "Easily toggle content visibility on your pages. Includes support for making accordions.",
     "components": [
       {
         "component": "BCollapse",
diff --git a/src/components/dropdown/package.json b/src/components/dropdown/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Dropdown",
+    "description": "Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.",
     "components": [
       {
         "component": "BDropdown",
diff --git a/src/components/embed/package.json b/src/components/embed/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Embed",
+    "description": "Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.",
     "components": [
       "BEmbed"
     ]
diff --git a/src/components/form-checkbox/package.json b/src/components/form-checkbox/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Form Checkbox",
+    "description": "Custom checkbox input and checkbox group to replace the browser default checkbox input, built on top of semantic and accessible markup. Optionally supports switch styling.",
     "components": [
       {
         "component": "BFormCheckboxGroup",
diff --git a/src/components/form-file/package.json b/src/components/form-file/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Form File",
+    "description": "Customized, cross-browser consistent, file input control that supports single file, multiple files, and directory upload.",
     "components": [
       {
         "component": "BFormFile",
diff --git a/src/components/form-group/package.json b/src/components/form-group/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Form Group",
+    "description": "Easily add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text and invalid/valid feedback text, as well as visual (color) contextual state feedback.",
     "components": [
       {
         "component": "BFormGroup",
diff --git a/src/components/form-input/package.json b/src/components/form-input/package.json
@@ -3,6 +3,7 @@
   "version": "1.1.0",
   "meta": {
     "title": "Form Input",
+    "description": "Create various type inputs such as: text, password, number, url, email, search, range, date and more.",
     "components": [
       {
         "component": "BFormInput",
diff --git a/src/components/form-radio/package.json b/src/components/form-radio/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Form Radio",
+    "description": "Cross browser consistent radio inputs and ragio groups, using Bootstrap's custom radio input to replace the browser default radio input.",
     "components": [
       {
         "component": "BFormRadioGroup",
diff --git a/src/components/form-select/package.json b/src/components/form-select/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Form Select",
+    "description": "Custom <select> component using cross-browser custom styles. Optionally generate <option> entries based on an array, array of objects.",
     "components": [
       {
         "component": "BFormSelect",
diff --git a/src/components/form-textarea/package.json b/src/components/form-textarea/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Form Textarea",
+    "description": "Create multi-line text inputs with support for auto height sizing, minimum and maximum number of rows, and contextual validation states.",
     "components": [
       {
         "component": "BFormTextarea",
diff --git a/src/components/form/package.json b/src/components/form/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Form",
+    "description": "Form component and form helper components that optionally supports inline form styles and validation states",
     "slug": "form",
     "components": [
       {
diff --git a/src/components/image/package.json b/src/components/image/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Image",
+    "description": "Create responsive images, optionally adding lightweight styles to them — all via props. Support for rounded images, thumbnail styling, alignment, and even the ability to create blank images with an optional solid background color, and lazy loaded images.",
     "components": [
       "BImg",
       "BImgLazy"
diff --git a/src/components/input-group/package.json b/src/components/input-group/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Input Group",
+    "description": "Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.",
     "components": [
       {
         "component": "BInputGroup",
diff --git a/src/components/jumbotron/package.json b/src/components/jumbotron/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Jumbotron",
+    "description": "A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.",
     "components": [
       {
         "component": "BJumbotron",
diff --git a/src/components/layout/package.json b/src/components/layout/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Layout and Grid System",
+    "description": "Use the powerful mobile-first flexbox grid (via the <b-container>, <b-row>, <b-form-row> and <b-col> components) to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, CSS Sass variables and mixins, and dozens of predefined classes.",
     "slug": "layout",
     "components": [
       "BContainer",
diff --git a/src/components/link/package.json b/src/components/link/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Link",
+    "desscription": "Use BootstrapVue's custom <b-link> component for generating a standard <a> link or <router-link>. <b-link> supports the disabled state and click event propagation.",
     "components": [
       {
         "component": "BLink",
diff --git a/src/components/list-group/package.json b/src/components/list-group/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "List group",
+    "description": "List groups are a flexible and powerful component for displaying a series of content. List group items can be modified to support just about any content within. They can also be used as navigation via various props.",
     "components": [
       "BListGroup",
       "BListGroupItem"
diff --git a/src/components/media/package.json b/src/components/media/package.json
diff --git a/src/components/modal/package.json b/src/components/modal/package.json
diff --git a/src/components/nav/package.json b/src/components/nav/package.json
diff --git a/src/components/navbar/package.json b/src/components/navbar/package.json
diff --git a/src/components/pagination-nav/package.json b/src/components/pagination-nav/package.json
diff --git a/src/components/pagination/package.json b/src/components/pagination/package.json
diff --git a/src/components/popover/package.json b/src/components/popover/package.json
diff --git a/src/components/progress/package.json b/src/components/progress/package.json
diff --git a/src/components/spinner/package.json b/src/components/spinner/package.json
diff --git a/src/components/table/package.json b/src/components/table/package.json
diff --git a/src/components/tabs/package.json b/src/components/tabs/package.json
diff --git a/src/components/tooltip/package.json b/src/components/tooltip/package.json
diff --git a/src/directives/popover/package.json b/src/directives/popover/package.json
diff --git a/src/directives/scrollspy/package.json b/src/directives/scrollspy/package.json
diff --git a/src/directives/tooltip/package.json b/src/directives/tooltip/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "title": "Changelog"`
	`2`	`+ "title": "Changelog",`
	`3`	`+ "description": "All notable changes to BootstrapVue are documented in this page."`
`3`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "title": "Contributing"`
	`2`	`+ "title": "Contributing",`
	`3`	`+ "description": "Information on contributing to the BootstrapVue project."`
`3`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"title": "Settings",`
	`3`	`+ "description": "Configuring BootstrapVue",`
`3`	`4`	`"new": true`
`4`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "title": "Color Variants"`
	`2`	`+ "title": "Color Variants",`
	`3`	`+ "description": "Color variants available when using the default Bootstrap V4 CSS and their mappings to CSS classes."`
`3`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"title": "Component img src resolving",`
	`3`	`+ "description": "Using project relative image URLs for BootstrapVue custom components with vue-loader",`
`3`	`4`	`"slug": "images"`
`4`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"title": "Router support",`
	`3`	`+ "description": "Several BootstrapVue components support rendering <router-link> components compatible with Vue-Router and Nuxt.",`
`3`	`4`	`"slug": "router-links"`
`4`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"title": "Size props and classes",`
	`3`	`+ "description": "Bootstrap V4 CSS provides several classes that control the sizing of elements, of which some of these have been translated into props on components.",`
`3`	`4`	`"slug": "size-props"`
`4`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "title": "Spacing classes"`
	`2`	`+ "title": "Spacing classes",`
	`3`	`+ "descripton": "Bootstrap V4 CSS includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance."`
`3`	`4`	`}`