diff --git a/docs/content/index.js b/docs/content/index.js
index 732c98a3e56..14ce6e52655 100644
--- 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
index da7dc7ee8e7..ae6d0caab54 100644
--- 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
index dfe2a9d700c..526db62d42d 100644
--- 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
index 7968c6fd08a..52d310d2c68 100644
--- 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
index d93754be747..a432750fbf8 100644
--- 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
index 0bce2161759..c30704300db 100644
--- 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 `
` 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 `
` 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
index 355329da561..3bf8f5f52dd 100644
--- 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
index bb3289eaa7a..ddbb93de9fa 100644
--- 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 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
index c627c99917d..0f1f3f561bd 100644
--- 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
index 5e508b94de2..e8118d82500 100644
--- 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
index 472606ba0c8..39136ced1da 100644
--- 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
index 7fc3d1273a8..b7a89c814df 100644
--- 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
index aeb88b25ac4..e07fb25c2ef 100644
--- 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
index bd2cbe42bd7..59fb7a37df7 100644
--- 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
index 4c5ad158d47..6660373aba2 100644
--- 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
index 9bd69540dfd..6aa01454b33 100644
--- 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
index 8d700258a10..d0496c36133 100644
--- 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
index ddf6f3845c5..2f3f34c3909 100644
--- 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
index bcc4541740b..8344a6814d8 100644
--- 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
index 85783c19a1d..7ffa9d20704 100644
--- 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 .",
"components": [
{
"component": "BButtonGroup",
diff --git a/src/components/button-toolbar/package.json b/src/components/button-toolbar/package.json
index 8ad561860bc..f0c3578d716 100644
--- 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 and/or 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
index 9de9e85822e..f7ee6cc21f8 100644
--- 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 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
index 3192b0ce32e..4785356d003 100644
--- 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
index ef13e023aab..60ed915ee3f 100644
--- 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 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
index 832587a5589..a7b236b7a91 100644
--- 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
index fb7655378e2..02604392285 100644
--- 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
index 5c7f6a7509f..3f4efeacf9e 100644
--- 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
index b6dca3758b9..78fee753a87 100644
--- 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
index 68cb4db2bc3..760895bd0d3 100644
--- 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
index 39e26bad3c4..49c62160272 100644
--- 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
index cdb9444349d..e9cf8df4ecf 100644
--- 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
index bc23ae2955c..c5159bbfaa8 100644
--- 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
index ea6ca779aa1..4fbbe10cc3e 100644
--- 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