feat: add native support for carbon ads (#86)

Co-authored-by: Kia King Ishii <[email protected]>

docs/.vitepress/config.js

@@ -11,6 +11,12 @@ module.exports = {
     editLinkText: 'Edit this page on GitHub',
     lastUpdated: 'Last Updated',
 
+    carbonAds: {
+      carbon: 'CEBDT27Y',
+      custom: 'CKYD62QM',
+      placement: 'vuejsorg'
+    },
+
     nav: [
       { text: 'Guide', link: '/' },
       { text: 'Config Reference', link: '/config/basics' },
@@ -55,7 +61,10 @@ function getConfigSidebar() {
   return [
     {
       text: 'App Config',
-      children: [{ text: 'Basics', link: '/config/basics' }]
+      children: [
+        { text: 'Basics', link: '/config/basics' },
+        { text: 'Carbon Ads', link: '/config/carbon-ads' }
+      ]
     }
   ]
 }

docs/config/carbon-ads.md

@@ -0,0 +1,13 @@
+# Carbon Ads
+
+VitePress has built in native support for [Carbon Ads](https://www.carbonads.net). By defining the Carbon Ads credentials in config, VitePress will display ads on the page.
+
+```js
+module.exports = {
+  carbonAds: {
+    carbon: 'your-carbon-key',
+    custom: 'your-carbon-custom',
+    placement: 'your-carbon-placement'
+  }
+}
+```

src/client/theme-default/Layout.vue

@@ -34,10 +34,26 @@
     <main v-else>
       <Page>
         <template #top>
+          <slot name="page-top-ads">
+            <CarbonAds
+              v-if="$site.themeConfig.carbonAds"
+              :key="'carbon' + $page.path"
+              :code="$site.themeConfig.carbonAds.carbon"
+              :placement="$site.themeConfig.carbonAds.placement"
+            />
+          </slot>
           <slot name="page-top" />
         </template>
         <template #bottom>
           <slot name="page-bottom" />
+          <slot name="page-bottom-ads">
+            <BuySellAds
+              v-if="$site.themeConfig.carbonAds"
+              :key="'custom' + $page.path"
+              :code="$site.themeConfig.carbonAds.custom"
+              :placement="$site.themeConfig.carbonAds.placement"
+            />
+          </slot>
         </template>
       </Page>
     </main>
@@ -53,6 +69,8 @@ import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
 import { useRoute, useSiteData, useSiteDataByRoute } from 'vitepress'
+import CarbonAds from './components/CarbonAds.vue'
+import BuySellAds from './components/BuySellAds.vue'
 
 const route = useRoute()
 const siteData = useSiteData()

src/client/theme-default/components/BuySellAds.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="buy-sell-ads">
+    <div class="bsa-cpc" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, onMounted } from 'vue'
+
+// global _bsa
+const ID = 'bsa-cpc-script'
+
+declare global {
+  var _bsa: BSA | undefined
+
+  interface BSA {
+    init(
+      name: string,
+      code: string,
+      placement: string,
+      options: {
+        target: string
+        align: string
+        disable_css?: 'true' | 'false'
+      }
+    ): void
+  }
+}
+
+const { code, placement } = defineProps<{
+  code: string
+  placement: string
+}>()
+
+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()
+  }
+})
+
+function load() {
+  if (typeof _bsa !== 'undefined' && _bsa) {
+    _bsa.init('default', code, `placement:${placement}`, {
+      target: '.bsa-cpc',
+      align: 'horizontal',
+      disable_css: 'true'
+    })
+  }
+}
+</script>
+
+<style scoped>
+.buy-sell-ads {
+  margin: 0 auto;
+  padding-top: 2rem;
+  font-size: .85rem;
+}
+
+.bsa-cpc {
+  border-radius: 6px;
+  background-color: #f8f8f8;
+}
+
+.bsa-cpc ::v-deep(a._default_) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  padding: 12px;
+  text-decoration: none;
+  line-height: 1.4;
+  font-weight: 400;
+  color: var(--c-text-light);
+}
+
+@media (min-width: 512px) {
+  .bsa-cpc ::v-deep(a._default_) {
+    flex-wrap: nowrap;
+  }
+}
+
+.bsa-cpc ::v-deep(.default-ad) {
+  display: none;
+}
+
+.bsa-cpc ::v-deep(a._default_ .default-image) {
+  flex-shrink: 0;
+  margin-right: 12px;
+  width: 24px;
+}
+
+.bsa-cpc ::v-deep(a._default_ .default-image img) {
+  border-radius: 4px;
+  height: 24px;
+  vertical-align: middle;
+}
+
+.bsa-cpc ::v-deep(._default_::after) {
+  border: 1px solid #1c90f3;
+  border-radius: 4px;
+  margin-top: 8px;
+  margin-left: 36px;
+  padding: 0 8px;
+  line-height: 22px;
+  font-size: .85em;
+  font-weight: 500;
+  color: #1c90f3;
+  content: 'Sponsored';
+}
+
+@media (min-width: 512px) {
+  .bsa-cpc ::v-deep(._default_::after) {
+    margin-top: 0px;
+    margin-left: 12px;
+  }
+}
+
+.bsa-cpc ::v-deep(.default-text) {
+  flex-grow: 1;
+  align-self: center;
+  width: calc(100% - 36px);
+}
+
+@media (min-width: 512px) {
+  .bsa-cpc ::v-deep(.default-text) {
+    width: auto;
+  }
+}
+
+.bsa-cpc ::v-deep(.default-title) {
+  font-weight: 600;
+}
+
+.bsa-cpc ::v-deep(.default-description) {
+  padding-left: 8px;
+}
+</style>

src/client/theme-default/components/CarbonAds.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="carbon-ads" ref="el" />
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref, onMounted } from 'vue'
+
+const { code, placement } = defineProps<{
+  code: string
+  placement: string
+}>()
+
+const el = ref()
+
+onMounted(() => {
+  const s = document.createElement('script')
+  s.id = '_carbonads_js'
+  s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
+  el.value.appendChild(s)
+})
+</script>
+
+<style scoped>
+.carbon-ads {
+  padding: 1.75rem 0 0;
+  border-radius: 4px;
+  margin: 0 auto;
+  max-width: 280px;
+  font-size: .75rem;
+  background-color: rgba(255, 255, 255, .8);
+}
+
+.carbon-ads::after {
+  clear: both;
+  display: block;
+  content: "";
+}
+
+@media (min-width: 420px) {
+  .carbon-ads {
+    position: relative;
+    right: -8px;
+    z-index: 1;
+    float: right;
+    margin: -8px -8px 24px 24px;
+    padding: 8px;
+    width: 146px;
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 1400px) {
+  .carbon-ads {
+    position: fixed;
+    top: auto;
+    right: 8px;
+    bottom: 8px;
+    float: none;
+    margin: 0;
+  }
+}
+
+.carbon-ads ::v-deep(.carbon-img) {
+  float: left;
+  margin-right: .75rem;
+  max-width: 100px;
+  border: 1px solid var(--c-divider);
+}
+
+@media (min-width: 420px) {
+  .carbon-ads ::v-deep(.carbon-img) {
+    float: none;
+    display: block;
+    margin-right: 0;
+    max-width: 130px;
+  }
+}
+
+.carbon-ads ::v-deep(.carbon-img img) {
+  display: block;
+  width: 100%;
+}
+
+@media (min-width: 420px) {
+  .carbon-ads ::v-deep(.carbon-text) {
+    padding-top: 8px;
+  }
+}
+
+.carbon-ads ::v-deep(.carbon-text) {
+  display: block;
+  font-weight: 400;
+  color: var(--c-text-light);
+}
+
+.carbon-ads ::v-deep(.carbon-poweredby) {
+  display: block;
+  padding-top: 2px;
+  font-weight: 400;
+  color: var(--c-text-lighter);
+}
+</style>

src/client/theme-default/styles/custom-blocks.css

@@ -4,6 +4,7 @@
   margin: 1rem 0;
   border-left: .5rem solid;
   padding: .1rem 1.5rem;
+  overflow-x: auto;
 }
 
 .custom-block.tip {

src/client/theme-default/styles/vars.css

@@ -13,6 +13,7 @@
 
   --c-text-light-1: #2c3e50;
   --c-text-light-2: #476582;
+  --c-text-light-3: #90a4b7;
 
   --c-brand: #3eaf7c;
   --c-brand-light: #4abf8a;
@@ -45,6 +46,7 @@
 
   --c-text: var(--c-text-light-1);
   --c-text-light: var(--c-text-light-2);
+  --c-text-lighter: var(--c-text-light-3);
 
   --c-bg: var(--c-white);