docs: add Carbon ads

docs/components/ad.js

@@ -0,0 +1,45 @@
+export default {
+  name: 'BVDAd',
+  props: {
+    id: {
+      type: String,
+      default: '_carbonads_js'
+    },
+    url: {
+      type: String,
+      default: '//cdn.carbonads.com/carbon.js?serve=CE7ITK77&placement=bootstrap-vuejsorg'
+    },
+    positionAfter: {
+      type: String,
+      default: null
+    }
+  },
+  mounted() {
+    this.setPosition()
+  },
+  methods: {
+    setPosition() {
+      if (!this.positionAfter || typeof document === 'undefined') {
+        return
+      }
+      // Move the ad to the correct position, if possible
+      const $body = document.body
+      const $referenceNode = $body.querySelector(this.positionAfter)
+      if ($referenceNode) {
+        // IE 11 doesn't support the `node.after()` method, and appears
+        // that the polyfill doesn't polyfill this method
+        $referenceNode.insertAdjacentElement('afterend', this.$el)
+      }
+    }
+  },
+  render(h) {
+    return h('script', {
+      attrs: {
+        id: this.id,
+        async: 'async',
+        type: 'text/javascript',
+        src: this.url
+      }
+    })
+  }
+}

docs/layouts/docs.js

@@ -1,9 +1,10 @@
+import Ad from '~/components/ad'
 import DocBreadcrumbs from '~/components/doc-breadcrumbs.vue'
 import Feedback from '~/components/feedback'
-import Header from '~/components/header'
 import Footer from '~/components/footer'
-import Search from '~/components/search'
+import Header from '~/components/header'
 import QuickLinks from '~/components/quick-links.vue'
+import Search from '~/components/search'
 import Sidebar from '~/components/sidebar.vue'
 import Toc from '~/components/toc.vue'
 
@@ -41,6 +42,7 @@ export default {
         h(Feedback, { class: ['float-right', 'mt-2', 'mb-0', 'mb-lg-2'] }),
         h('div', { class: ['clearfix', 'd-block'] }),
         h(QuickLinks, { class: 'd-xl-none' }),
+        h(Ad, { props: { positionAfter: '.bd-lead' } }),
         h('nuxt')
       ]
     )

docs/nuxt.config.js

@@ -241,7 +241,12 @@ module.exports = {
     ]
   },
 
-  plugins: ['~/plugins/bootstrap-vue.js', '~/plugins/play.js', '~/plugins/docs.js'],
+  plugins: [
+    '~/plugins/bootstrap-vue.js',
+    '~/plugins/ads.js',
+    '~/plugins/play.js',
+    '~/plugins/docs.js'
+  ],
 
   buildModules: ['@nuxtjs/google-analytics'],
   modules: ['@nuxtjs/pwa'],

docs/pages/index.vue

@@ -181,6 +181,8 @@
             </b-btn>
           </b-col>
         </b-row>
+
+        <BVAd></BVAd>
       </b-container>
     </section>
 
@@ -663,10 +665,14 @@ $bv-angle-padding-md: 6rem;
 
 <script>
 import { version, bootstrapVersion, vueVersion } from '~/content'
+import BVAd from '~/components/ad'
 import BVDContributors from '~/components/contributors'
 
 export default {
-  components: { BVDContributors },
+  components: {
+    BVAd,
+    BVDContributors
+  },
   data() {
     return {
       isIE: false,

docs/plugins/ads.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import BVAd from '~/components/ad'
+
+Vue.component('BVAd', BVAd)