feat: @vuepress/theme-vue

packages/@vuepress/theme-vue/components/BuySellAds.vue

+<script>
+/* global _bsa */
+const ID = 'bsa-cpc-script'
+
+export default {
+  render (h) {
+    return h('div', { class: 'bsa-cpc-wrapper' }, [
+      h('div', { ref: 'ads', class: 'bsa-cpc' })
+    ])
+  },
+  mounted () {
+    if (!document.getElementById(ID)) {
+      const s = document.createElement('script')
+      s.id = ID
+      s.src = `//m.servedby-buysellads.com/monetization.js`
+      document.head.appendChild(s)
+      s.onload = () => {
+        this.load()
+      }
+    } else {
+      this.load()
+    }
+  },
+  watch: {
+    '$route' (to, from) {
+      if (to.path !== from.path) {
+        this.$refs.ads.innerHTML = ''
+        this.load()
+      }
+    }
+  },
+  methods: {
+    load () {
+      if (typeof _bsa !== 'undefined' && _bsa) {
+        _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
+          target: '.bsa-cpc',
+          align: 'horizontal',
+          disable_css: 'true'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.bsa-cpc-wrapper
+  font-size 0.95rem
+  max-width $contentWidth
+  margin 0px auto
+  padding 1rem 2rem 0
+  margin-bottom -1rem
+
+@media (max-width: $MQMobileNarrow)
+  .bsa-cpc-wrapper
+    padding 0 1.5rem
+
+.bsa-cpc
+  font-size .9em
+  background-color #f8f8f8
+  border-radius 6px
+  a
+    &._default_
+      text-align left
+      display block
+      padding 10px 15px 12px
+      margin-bottom 20px
+      color #666
+      font-weight 400
+      line-height 18px
+      .default-image
+        img
+          height 20px
+          border-radius 3px
+          vertical-align middle
+          position relative
+          top -1px
+      .default-title
+        font-weight 600
+      .default-description
+        &:after
+          font-size 0.85em
+          content "Sponsored"
+          color #1C90F3
+          border 1px solid #1C90F3
+          border-radius 3px
+          padding 0 4px 1px
+          margin-left 6px
+  .default-ad
+    display none
+
+.bsa-cpc a._default_ .default-image,
+.bsa-cpc a._default_ .default-title,
+.bsa-cpc a._default_ .default-description
+  display inline
+  vertical-align middle
+  margin-right 6px
+</style>

packages/@vuepress/theme-vue/components/CarbonAds.vue

+<script>
+export default {
+  render (h) {
+    return h('div', { class: 'carbon-ads' })
+  },
+  mounted () {
+    this.load()
+  },
+  watch: {
+    '$route' (to, from) {
+      if (
+        to.path !== from.path &&
+        // Only reload if the ad has been loaded
+        // otherwise it's possible that the script is appended but
+        // the ads are not loaded yet. This would result in duplicated ads.
+        this.$el.querySelector('#carbonads')
+      ) {
+        this.$el.innerHTML = ''
+        this.load()
+      }
+    }
+  },
+  methods: {
+    load () {
+      const s = document.createElement('script')
+      s.id = '_carbonads_js'
+      s.src = `//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg`
+      this.$el.appendChild(s)
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.carbon-ads
+  min-height 102px
+  padding 1.5rem 1.5rem 0
+  margin-bottom -0.5rem
+  font-size 0.75rem
+  a
+    color #444
+    font-weight normal
+    display inline
+  .carbon-img
+    float left
+    margin-right 1rem
+    border 1px solid $borderColor
+    img
+      display block
+  .carbon-poweredby
+    color #999
+    display block
+    margin-top 0.5em
+
+@media (max-width: $MQMobile)
+  .carbon-ads
+    .carbon-img img
+      width 100px
+      height 77px
+</style>

packages/@vuepress/theme-vue/index.js

+module.exports = {
+  extend: '@vuepress/theme-default'
+}

packages/@vuepress/theme-vue/layouts/Layout.vue

+<template>
+  <Layout>
+    <CarbonAds slot="sidebar-top"/>
+    <BuySellAds slot="page-bottom"/>
+  </Layout>
+</template>
+
+<script>
+import Layout from '@parent-theme/layouts/Layout.vue'
+import CarbonAds from '../components/CarbonAds.vue'
+import BuySellAds from '../components/BuySellAds.vue'
+
+export default {
+  components: {
+    Layout,
+    CarbonAds,
+    BuySellAds
+  },
+
+  mounted () {
+    console.log('mounted')
+  }
+}
+</script>

packages/@vuepress/theme-vue/package.json

+{
+  "private": true,
+  "name": "@vuepress/theme-vue",
+  "version": "1.0.0-alpha.17",
+  "description": "VuePress theme for official Vue projects",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vuepress.git"
+  },
+  "keywords": [
+    "documentation",
+    "vue",
+    "vuepress",
+    "generator"
+  ],
+  "author": "Evan You",
+  "maintainers": [
+    {
+      "name": "ULIVZ",
+      "email": "chl814@foxmail.com"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuejs/vuepress/issues"
+  },
+  "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/theme-vue#readme",
+  "dependencies": {
+    "@vuepress/theme-default": "^1.0.0-alpha.17"
+  }
+}