feat: carbond ads

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() {

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>

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>