From 3d768eea15f729243a11f1b5bb9d9be21af3226a Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 2 Dec 2020 12:44:49 +0100
Subject: [PATCH 1/3] feat: add carbon ads

---
 src/.vuepress/config.js                       |   5 +
 src/.vuepress/theme/components/BuySellAds.vue | 115 ++++++++++++++++++
 src/.vuepress/theme/components/CarbonAds.vue  |  84 +++++++++++++
 src/.vuepress/theme/layouts/Layout.vue        |  52 +++++---
 4 files changed, 240 insertions(+), 16 deletions(-)
 create mode 100644 src/.vuepress/theme/components/BuySellAds.vue
 create mode 100644 src/.vuepress/theme/components/CarbonAds.vue

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 620537f225..48df04a228 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -417,6 +417,11 @@ module.exports = {
       indexName: 'vuejs-v3',
       appId: 'BH4D9OD16A',
       apiKey: 'bc6e8acb44ed4179c30d0a45d6140d3f'
+    },
+    carbonAds: {
+      carbon: 'CEBICK3I',
+      custom: 'CEBICK3M',
+      placement: 'routervuejsorg'
     }
   },
   plugins: [
diff --git a/src/.vuepress/theme/components/BuySellAds.vue b/src/.vuepress/theme/components/BuySellAds.vue
new file mode 100644
index 0000000000..17df4bd167
--- /dev/null
+++ b/src/.vuepress/theme/components/BuySellAds.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="bsa-cpc-wrapper">
+    <div class="bsa-cpc"></div>
+  </div>
+</template>
+
+<script>
+/* global _bsa */
+const ID = 'bsa-cpc-script'
+
+export default {
+  name: 'BuySellAds',
+  props: {
+    code: {
+      type: String,
+      required: true
+    },
+    placement: {
+      type: String,
+      required: true
+    }
+  },
+
+  methods: {
+    load() {
+      if (typeof _bsa !== 'undefined' && _bsa) {
+        _bsa.init('default', this.code, `placement:${this.placement}`, {
+          target: '.bsa-cpc',
+          align: 'horizontal',
+          disable_css: 'true'
+        })
+      }
+    }
+  },
+
+  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()
+    }
+  }
+}
+</script>
+
+<style>
+.bsa-cpc-wrapper {
+  font-size: 0.95rem;
+  /* from Page.vue */
+  max-width: 50rem;
+  margin: 0px auto;
+  padding: 1rem 2rem 0;
+  margin-bottom: -1rem;
+}
+@media (max-width: 419px) {
+  .bsa-cpc-wrapper {
+    padding: 0 1.5rem;
+  }
+}
+.bsa-cpc {
+  font-size: 0.9em;
+  background-color: #f8f8f8;
+  border-radius: 6px;
+}
+
+.bsa-cpc .default-text {
+  display: inline;
+}
+
+.bsa-cpc a._default_ {
+  text-align: left;
+  display: block;
+  text-decoration: none;
+  padding: 10px 15px 12px;
+  margin-bottom: 20px;
+  color: #666;
+  font-weight: 400;
+  line-height: 18px;
+}
+.bsa-cpc a._default_ .default-image img {
+  height: 20px;
+  border-radius: 3px;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+.bsa-cpc a._default_ .default-title {
+  font-weight: 600;
+}
+.bsa-cpc a._default_ .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;
+}
+.bsa-cpc .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>
diff --git a/src/.vuepress/theme/components/CarbonAds.vue b/src/.vuepress/theme/components/CarbonAds.vue
new file mode 100644
index 0000000000..8864e44b1b
--- /dev/null
+++ b/src/.vuepress/theme/components/CarbonAds.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="carbon-ads"></div>
+</template>
+
+<script>
+export default {
+  name: 'CarbonAds',
+  props: {
+    code: {
+      type: String,
+      required: true
+    },
+    placement: {
+      type: String,
+      required: true
+    }
+  },
+
+  mounted() {
+    const s = document.createElement('script')
+    s.id = '_carbonads_js'
+    s.src = `//cdn.carbonads.com/carbon.js?serve=${this.code}&placement=${this.placement}`
+    this.$el.appendChild(s)
+  }
+}
+</script>
+
+<style>
+.carbon-ads {
+  min-height: 102px;
+  padding: 1.5rem 1.5rem 0;
+  margin-bottom: -0.5rem;
+  font-size: 0.75rem;
+
+  width: 125px;
+  position: fixed;
+  z-index: 1;
+  bottom: 22px;
+  right: 14px;
+  padding: 10px;
+  /* background-color: #fff; */
+  /* border-radius: 3px; */
+  /* font-size: 13px; */
+}
+
+@media screen and (max-width: 1300px) {
+  .carbon-ads {
+    position: relative;
+    top: 87px;
+    right: 12px;
+    float: right;
+    padding: 0 0 20px 30px;
+  }
+}
+
+.carbon-ads a {
+  color: #444;
+  font-weight: normal;
+  display: inline;
+}
+
+.carbon-ads .carbon-img {
+  float: left;
+  margin-right: 1rem;
+  border: 1px solid var(--border-color);
+}
+
+.carbon-ads .carbon-img img {
+  display: block;
+}
+
+.carbon-ads .carbon-poweredby {
+  color: #999;
+  display: block;
+  margin-top: 0.5em;
+}
+
+@media (max-width: 719px) {
+  .carbon-ads .carbon-img img {
+    width: 100px;
+    height: 77px;
+  }
+}
+</style>
diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue
index 990da117c3..669ddfd529 100644
--- a/src/.vuepress/theme/layouts/Layout.vue
+++ b/src/.vuepress/theme/layouts/Layout.vue
@@ -5,7 +5,11 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
   >
-    <VueMasteryBanner v-if="isBannerOpen" @close-banner="closeBanner" ref='vueMasteryBanner'/>
+    <VueMasteryBanner
+      v-if="isBannerOpen"
+      @close-banner="closeBanner"
+      ref="vueMasteryBanner"
+    />
     <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
 
     <div class="sidebar-mask" @click="toggleSidebar(false)" />
@@ -13,6 +17,12 @@
     <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
       <template #top>
         <slot name="sidebar-top" />
+        <!-- <CarbonAds
+          v-if="$site.themeConfig.carbonAds"
+          :key="'ca:' + $page.path"
+          :code="$site.themeConfig.carbonAds.carbon"
+          :placement="$site.themeConfig.carbonAds.placement"
+        /> -->
       </template>
       <template #bottom>
         <slot name="sidebar-bottom" />
@@ -27,6 +37,12 @@
       </template>
       <template #bottom>
         <slot name="page-bottom" />
+        <!-- <BuySellAds
+          v-if="$site.themeConfig.carbonAds"
+          :key="'bsa:' + $page.path"
+          :code="$site.themeConfig.carbonAds.custom"
+          :placement="$site.themeConfig.carbonAds.placement"
+        /> -->
       </template>
     </Page>
   </div>
@@ -38,6 +54,8 @@ import Navbar from '@theme/components/Navbar.vue'
 import Page from '@theme/components/Page.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
 import VueMasteryBanner from '@theme/components/sponsors/VueMasteryBanner.vue'
+import BuySellAds from '@theme/components/BuySellAds.vue'
+import CarbonAds from '@theme/components/CarbonAds.vue'
 import { resolveSidebarItems } from '../util'
 
 export default {
@@ -48,13 +66,15 @@ export default {
     Page,
     Sidebar,
     Navbar,
-    VueMasteryBanner
+    VueMasteryBanner,
+    BuySellAds,
+    CarbonAds
   },
 
-  data () {
+  data() {
     return {
       isSidebarOpen: false,
-      isBannerOpen:  true,
+      isBannerOpen: true,
       isMenuFixed: false,
       nameStorage: 'vuemastery-black-firday-2020-banner',
       menuPosition: 0
@@ -62,7 +82,7 @@ export default {
   },
 
   computed: {
-    shouldShowNavbar () {
+    shouldShowNavbar() {
       const { themeConfig } = this.$site
       const { frontmatter } = this.$page
       if (frontmatter.navbar === false || themeConfig.navbar === false) {
@@ -77,7 +97,7 @@ export default {
       )
     },
 
-    shouldShowSidebar () {
+    shouldShowSidebar() {
       const { frontmatter } = this.$page
       return (
         !frontmatter.home &&
@@ -86,7 +106,7 @@ export default {
       )
     },
 
-    sidebarItems () {
+    sidebarItems() {
       return resolveSidebarItems(
         this.$page,
         this.$page.regularPath,
@@ -95,7 +115,7 @@ export default {
       )
     },
 
-    pageClasses () {
+    pageClasses() {
       const userPageClass = this.$page.frontmatter.pageClass
       return [
         {
@@ -110,7 +130,7 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     this.$router.afterEach(() => {
       this.isSidebarOpen = false
     })
@@ -124,20 +144,20 @@ export default {
   },
 
   methods: {
-    toggleSidebar (to) {
+    toggleSidebar(to) {
       this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
       this.$emit('toggle-sidebar', this.isSidebarOpen)
     },
 
     // side swipe
-    onTouchStart (e) {
+    onTouchStart(e) {
       this.touchStart = {
         x: e.changedTouches[0].clientX,
         y: e.changedTouches[0].clientY
       }
     },
 
-    onTouchEnd (e) {
+    onTouchEnd(e) {
       const dx = e.changedTouches[0].clientX - this.touchStart.x
       const dy = e.changedTouches[0].clientY - this.touchStart.y
       if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
@@ -161,7 +181,7 @@ export default {
       this.isMenuFixed = this.isUnderBanner()
     },
 
-    closeBanner (e) {
+    closeBanner(e) {
       // Remove events
       this.toggleBannerEvents(false)
       // Hide the banner
@@ -192,9 +212,9 @@ export default {
 
     toggleBannerEvents(on) {
       // Add or remove event listerners attached to the DOM
-      let method = on ? "addEventListener" : "removeEventListener"
-      window[method]("resize", this.getMenuPosition)
-      window[method]("scroll", this.fixMenuAfterBanner)
+      let method = on ? 'addEventListener' : 'removeEventListener'
+      window[method]('resize', this.getMenuPosition)
+      window[method]('scroll', this.fixMenuAfterBanner)
     }
   }
 }

From 0adedc469f89f68f135396d29f1ca6656f1977d3 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 2 Dec 2020 12:51:32 +0100
Subject: [PATCH 2/3] refactor: add computed

---
 src/.vuepress/config.js                |  6 +++---
 src/.vuepress/theme/layouts/Layout.vue | 28 +++++++++++++++-----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 48df04a228..1045fe4336 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -419,9 +419,9 @@ module.exports = {
       apiKey: 'bc6e8acb44ed4179c30d0a45d6140d3f'
     },
     carbonAds: {
-      carbon: 'CEBICK3I',
-      custom: 'CEBICK3M',
-      placement: 'routervuejsorg'
+      carbon: 'CEBDT27Y',
+      custom: 'CKYD62QM',
+      placement: 'vuejsorg'
     }
   },
   plugins: [
diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue
index 669ddfd529..11bac943b3 100644
--- a/src/.vuepress/theme/layouts/Layout.vue
+++ b/src/.vuepress/theme/layouts/Layout.vue
@@ -17,12 +17,6 @@
     <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
       <template #top>
         <slot name="sidebar-top" />
-        <!-- <CarbonAds
-          v-if="$site.themeConfig.carbonAds"
-          :key="'ca:' + $page.path"
-          :code="$site.themeConfig.carbonAds.carbon"
-          :placement="$site.themeConfig.carbonAds.placement"
-        /> -->
       </template>
       <template #bottom>
         <slot name="sidebar-bottom" />
@@ -33,16 +27,22 @@
 
     <Page v-else :sidebar-items="sidebarItems">
       <template #top>
+        <CarbonAds
+          v-if="adsConfig"
+          :key="'ca:' + $page.path"
+          :code="adsConfig.carbon"
+          :placement="adsConfig.placement"
+        />
         <slot name="page-top" />
       </template>
       <template #bottom>
-        <slot name="page-bottom" />
-        <!-- <BuySellAds
-          v-if="$site.themeConfig.carbonAds"
+        <BuySellAds
+          v-if="adsConfig"
           :key="'bsa:' + $page.path"
-          :code="$site.themeConfig.carbonAds.custom"
-          :placement="$site.themeConfig.carbonAds.placement"
-        /> -->
+          :code="adsConfig.custom"
+          :placement="adsConfig.placement"
+        />
+        <slot name="page-bottom" />
       </template>
     </Page>
   </div>
@@ -127,6 +127,10 @@ export default {
         },
         userPageClass
       ]
+    },
+
+    adsConfig() {
+      return this.$site.themeConfig.carbonAds
     }
   },
 

From a6a9bbd633ca2d1cff1a0eab29f756f8c5bb123b Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 2 Dec 2020 13:24:32 +0100
Subject: [PATCH 3/3] refactor: background for style

---
 src/.vuepress/theme/components/CarbonAds.vue |  3 ++-
 src/.vuepress/theme/layouts/Layout.vue       | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/.vuepress/theme/components/CarbonAds.vue b/src/.vuepress/theme/components/CarbonAds.vue
index 8864e44b1b..c9c8f1f7f9 100644
--- a/src/.vuepress/theme/components/CarbonAds.vue
+++ b/src/.vuepress/theme/components/CarbonAds.vue
@@ -38,8 +38,9 @@ export default {
   bottom: 22px;
   right: 14px;
   padding: 10px;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.8);
   /* background-color: #fff; */
-  /* border-radius: 3px; */
   /* font-size: 13px; */
 }
 
diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue
index 11bac943b3..b5780ce39b 100644
--- a/src/.vuepress/theme/layouts/Layout.vue
+++ b/src/.vuepress/theme/layouts/Layout.vue
@@ -223,3 +223,19 @@ export default {
   }
 }
 </script>
+
+<style>
+/* add a placeholder to give space to ads so they don't overlap with content */
+@media screen and (max-width: 1376px) {
+  .content__default::before {
+    content: '';
+    position: relative;
+    display: block;
+    float: right;
+    height: 221px;
+    padding: 0 0 20px 30px;
+    margin-top: 20px;
+    margin-right: -24px;
+  }
+}
+</style>