From d865a202e1b5340b6ff012cc7299dae88c4083ae Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 14 Sep 2020 15:55:34 +0200
Subject: [PATCH 1/4] feat: carbond ads

---
 src/client/theme-default/Layout.vue           | 23 ++++++-
 .../theme-default/components/CarbonAds.vue    | 68 +++++++++++++++++++
 .../theme-default/components/SideBar.vue      |  4 ++
 3 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src/client/theme-default/components/CarbonAds.vue

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index fb446a38cdba..6f0493fb6712 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -5,7 +5,22 @@
       <ToggleSideBarButton @toggle="toggleSidebar" />
     </header>
     <aside :class="{ open }">
-      <SideBar/>
+      <SideBar>
+        <template #top>
+          <slot name="sidebar-top">
+            <!-- <CarbonAds
+              v-if="$site.themeConfig.carbonAds"
+              :key="$page.title"
+              :serve="$site.themeConfig.carbonAds.serve"
+              :placement="$site.themeConfig.carbonAds.placement"
+            /> -->
+            Hello
+          </slot>
+        </template>
+        <template #bottom>
+          <slot name="sidebar-bottom" />
+        </template>
+      </SideBar>
     </aside>
     <div
       class="sidebar-mask"
@@ -20,18 +35,20 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import NavBar from './components/NavBar.vue'
 import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
+import CarbonAds from './components/CarbonAds.vue'
 
 export default {
   components: {
     NavBar,
     ToggleSideBarButton,
     SideBar,
-    Page
+    Page,
+    CarbonAds
   },
 
   setup() {
diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue
new file mode 100644
index 000000000000..ee3f7a62b48b
--- /dev/null
+++ b/src/client/theme-default/components/CarbonAds.vue
@@ -0,0 +1,68 @@
+<script>
+import { h, onMounted, ref } from 'vue'
+
+export default {
+  name: 'CarbonAds',
+  props: {
+    serve: {
+      type: String,
+      required: true
+    },
+    placement: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props) {
+    const el = ref()
+
+    onMounted(() => {
+      const s = document.createElement('script')
+      s.id = '_carbonads_js'
+      s.src = `//cdn.carbonads.com/carbon.js?serve=${props.serve}&placement=${props.placement}`
+      el.value.appendChild(s)
+    })
+
+    return () => h('div', { class: 'carbon-ads', ref: el })
+  }
+}
+</script>
+
+<style>
+.carbon-ads {
+  min-height: 102px;
+  padding: 1.5rem 1.5rem 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.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/client/theme-default/components/SideBar.vue b/src/client/theme-default/components/SideBar.vue
index cdb9e4f97316..97025fec6cfa 100644
--- a/src/client/theme-default/components/SideBar.vue
+++ b/src/client/theme-default/components/SideBar.vue
@@ -1,9 +1,13 @@
 <template>
   <NavBarLinks class="show-mobile" />
 
+  <slot name="top" />
+
   <ul class="sidebar">
     <SideBarItem v-for="item of items" :item="item" />
   </ul>
+
+  <slot name="bottom" />
 </template>
 
 <script src="./SideBar"></script>

From 2478b53c078ca89a8cf58ce169f1c4fed6ea475d Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 14 Sep 2020 17:16:18 +0200
Subject: [PATCH 2/4] feat: add buysellads

---
 src/client/theme-default/Layout.vue           |  27 ++++-
 .../theme-default/components/BuySellAds.vue   | 109 ++++++++++++++++++
 src/client/theme-default/components/Page.vue  |   5 +-
 3 files changed, 135 insertions(+), 6 deletions(-)
 create mode 100644 src/client/theme-default/components/BuySellAds.vue

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 6f0493fb6712..878fd676dd86 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -8,13 +8,13 @@
       <SideBar>
         <template #top>
           <slot name="sidebar-top">
-            <!-- <CarbonAds
+            <!-- use the title to force a new ad for every navigation -->
+            <CarbonAds
               v-if="$site.themeConfig.carbonAds"
               :key="$page.title"
               :serve="$site.themeConfig.carbonAds.serve"
               :placement="$site.themeConfig.carbonAds.placement"
-            /> -->
-            Hello
+            />
           </slot>
         </template>
         <template #bottom>
@@ -28,7 +28,22 @@
       @click="toggleSidebar(false)"
     />
     <main>
-      <Page />
+      <Page>
+        <template #top>
+          <slot name="page-top" />
+        </template>
+        <template #bottom>
+          <slot name="page-bottom">
+            <!-- use the title to force a new ad for every navigation -->
+            <BuySellAds
+              v-if="$site.themeConfig.carbonAds"
+              :key="$page.title"
+              :serve="$site.themeConfig.carbonAds.serve"
+              :placement="$site.themeConfig.carbonAds.placement"
+            />
+          </slot>
+        </template>
+      </Page>
     </main>
   </div>
   <Debug />
@@ -41,6 +56,7 @@ import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
 import CarbonAds from './components/CarbonAds.vue'
+import BuySellAds from './components/BuySellAds.vue'
 
 export default {
   components: {
@@ -48,7 +64,8 @@ export default {
     ToggleSideBarButton,
     SideBar,
     Page,
-    CarbonAds
+    CarbonAds,
+    BuySellAds
   },
 
   setup() {
diff --git a/src/client/theme-default/components/BuySellAds.vue b/src/client/theme-default/components/BuySellAds.vue
new file mode 100644
index 000000000000..1eb747aad41b
--- /dev/null
+++ b/src/client/theme-default/components/BuySellAds.vue
@@ -0,0 +1,109 @@
+<script>
+import { h, onMounted } from 'vue'
+
+/* global _bsa */
+const ID = 'bsa-cpc-script'
+
+export default {
+  name: 'BuySellAds',
+  props: {
+    serve: {
+      type: String,
+      required: true
+    },
+    placement: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props) {
+    function load() {
+      if (typeof _bsa !== 'undefined' && _bsa) {
+        _bsa.init('default', props.serve, `placement:${props.placement}`, {
+          target: '.bsa-cpc',
+          align: 'horizontal',
+          disable_css: 'true'
+        })
+      }
+    }
+
+    onMounted(() => {
+      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 = () => {
+          load()
+        }
+      } else {
+        load()
+      }
+    })
+
+    return () =>
+      h('div', { class: 'bsa-cpc-wrapper' }, [h('div', { class: 'bsa-cpc' })])
+  }
+}
+</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 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/client/theme-default/components/Page.vue b/src/client/theme-default/components/Page.vue
index bf496041ece8..68e66c419314 100644
--- a/src/client/theme-default/components/Page.vue
+++ b/src/client/theme-default/components/Page.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="content">
+    <slot name="top" />
     <Content />
     <NextAndPrevLinks />
     <PageEdit />
+    <slot name="bottom" />
   </div>
 </template>
 
@@ -10,7 +12,7 @@
 import NextAndPrevLinks from './NextAndPrevLinks.vue'
 import PageEdit from './PageEdit.vue'
 export default {
-  components:{ NextAndPrevLinks, PageEdit }
+  components: { NextAndPrevLinks, PageEdit }
 }
 </script>
 
@@ -18,6 +20,7 @@ export default {
 .content {
   margin: 0 auto;
   padding: 0.025rem 2.5rem 2rem;
+  /* if this is moved to a variable, add it to BuySellAds.vue */
   max-width: 50rem;
 }
 

From 4ab40bf26b1aa054a6dd48e4265907cc56ee549e Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 17 Sep 2020 19:18:47 +0200
Subject: [PATCH 3/4] refactor: remove ad components

---
 src/client/theme-default/Layout.vue           |  26 +----
 .../theme-default/components/BuySellAds.vue   | 109 ------------------
 .../theme-default/components/CarbonAds.vue    |  68 -----------
 3 files changed, 3 insertions(+), 200 deletions(-)
 delete mode 100644 src/client/theme-default/components/BuySellAds.vue
 delete mode 100644 src/client/theme-default/components/CarbonAds.vue

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 878fd676dd86..c75b2ad6990d 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -7,15 +7,7 @@
     <aside :class="{ open }">
       <SideBar>
         <template #top>
-          <slot name="sidebar-top">
-            <!-- use the title to force a new ad for every navigation -->
-            <CarbonAds
-              v-if="$site.themeConfig.carbonAds"
-              :key="$page.title"
-              :serve="$site.themeConfig.carbonAds.serve"
-              :placement="$site.themeConfig.carbonAds.placement"
-            />
-          </slot>
+          <slot name="sidebar-top" />
         </template>
         <template #bottom>
           <slot name="sidebar-bottom" />
@@ -33,15 +25,7 @@
           <slot name="page-top" />
         </template>
         <template #bottom>
-          <slot name="page-bottom">
-            <!-- use the title to force a new ad for every navigation -->
-            <BuySellAds
-              v-if="$site.themeConfig.carbonAds"
-              :key="$page.title"
-              :serve="$site.themeConfig.carbonAds.serve"
-              :placement="$site.themeConfig.carbonAds.placement"
-            />
-          </slot>
+          <slot name="page-bottom" />
         </template>
       </Page>
     </main>
@@ -55,17 +39,13 @@ import NavBar from './components/NavBar.vue'
 import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
-import CarbonAds from './components/CarbonAds.vue'
-import BuySellAds from './components/BuySellAds.vue'
 
 export default {
   components: {
     NavBar,
     ToggleSideBarButton,
     SideBar,
-    Page,
-    CarbonAds,
-    BuySellAds
+    Page
   },
 
   setup() {
diff --git a/src/client/theme-default/components/BuySellAds.vue b/src/client/theme-default/components/BuySellAds.vue
deleted file mode 100644
index 1eb747aad41b..000000000000
--- a/src/client/theme-default/components/BuySellAds.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script>
-import { h, onMounted } from 'vue'
-
-/* global _bsa */
-const ID = 'bsa-cpc-script'
-
-export default {
-  name: 'BuySellAds',
-  props: {
-    serve: {
-      type: String,
-      required: true
-    },
-    placement: {
-      type: String,
-      required: true
-    }
-  },
-
-  setup(props) {
-    function load() {
-      if (typeof _bsa !== 'undefined' && _bsa) {
-        _bsa.init('default', props.serve, `placement:${props.placement}`, {
-          target: '.bsa-cpc',
-          align: 'horizontal',
-          disable_css: 'true'
-        })
-      }
-    }
-
-    onMounted(() => {
-      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 = () => {
-          load()
-        }
-      } else {
-        load()
-      }
-    })
-
-    return () =>
-      h('div', { class: 'bsa-cpc-wrapper' }, [h('div', { class: 'bsa-cpc' })])
-  }
-}
-</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 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/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue
deleted file mode 100644
index ee3f7a62b48b..000000000000
--- a/src/client/theme-default/components/CarbonAds.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script>
-import { h, onMounted, ref } from 'vue'
-
-export default {
-  name: 'CarbonAds',
-  props: {
-    serve: {
-      type: String,
-      required: true
-    },
-    placement: {
-      type: String,
-      required: true
-    }
-  },
-
-  setup(props) {
-    const el = ref()
-
-    onMounted(() => {
-      const s = document.createElement('script')
-      s.id = '_carbonads_js'
-      s.src = `//cdn.carbonads.com/carbon.js?serve=${props.serve}&placement=${props.placement}`
-      el.value.appendChild(s)
-    })
-
-    return () => h('div', { class: 'carbon-ads', ref: el })
-  }
-}
-</script>
-
-<style>
-.carbon-ads {
-  min-height: 102px;
-  padding: 1.5rem 1.5rem 0;
-  margin-bottom: 0.5rem;
-  font-size: 0.75rem;
-}
-
-.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>

From f0df1eee1e38c3143ff8281e460c668a38c9f365 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva@users.noreply.github.com>
Date: Thu, 17 Sep 2020 19:20:41 +0200
Subject: [PATCH 4/4] Update src/client/theme-default/Layout.vue

---
 src/client/theme-default/Layout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index c75b2ad6990d..5b777afc64d6 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import NavBar from './components/NavBar.vue'
 import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'