docs: add theme for ads for next vitepress

diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
new file mode 100644 (file)
index 0000000..c59e0f2
--- /dev/null
+++ b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,36 @@
+<template>
+  <ParentLayout>
+    <template #sidebar-top>
+      <CarbonAds
+        v-if="$site.themeConfig.carbonAds"
+        :key="$page.path"
+        :code="$site.themeConfig.carbonAds.carbon"
+        :placement="$site.themeConfig.carbonAds.placement"
+      />
+    </template>
+    <template #page-bottom>
+      <BuySellAds
+        v-if="$site.themeConfig.carbonAds"
+        :key="$page.path"
+        :code="$site.themeConfig.carbonAds.custom"
+        :placement="$site.themeConfig.carbonAds.placement"
+      />
+    </template>
+  </ParentLayout>
+</template>
+
+<script>
+import DefaultTheme from 'vitepress/dist/client/theme-default'
+import CarbonAds from './components/CarbonAds.vue'
+import BuySellAds from './components/BuySellAds.vue'
+
+export default {
+  name: 'Layout',
+
+  components: {
+    ParentLayout: DefaultTheme.Layout,
+    CarbonAds,
+    BuySellAds,
+  },
+}
+</script>

diff --git a/docs/.vitepress/theme/components/BuySellAds.vue b/docs/.vitepress/theme/components/BuySellAds.vue
new file mode 100644 (file)
index 0000000..ed3875b
--- /dev/null
+++ b/docs/.vitepress/theme/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: {
+    code: {
+      type: String,
+      required: true,
+    },
+    placement: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    function load() {
+      if (typeof _bsa !== 'undefined' && _bsa) {
+        _bsa.init('default', props.code, `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/docs/.vitepress/theme/components/CarbonAds.vue b/docs/.vitepress/theme/components/CarbonAds.vue
new file mode 100644 (file)
index 0000000..a6aea0c
--- /dev/null
+++ b/docs/.vitepress/theme/components/CarbonAds.vue
@@ -0,0 +1,68 @@
+<script>
+import { h, onMounted, ref } from 'vue'
+
+export default {
+  name: 'CarbonAds',
+  props: {
+    code: {
+      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.code}&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/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
new file mode 100644 (file)
index 0000000..323bb5f
--- /dev/null
+++ b/docs/.vitepress/theme/index.js
@@ -0,0 +1,12 @@
+import DefaultTheme from 'vitepress/dist/client/theme-default'
+import Layout from './Layout.vue'
+
+export default {
+  ...DefaultTheme,
+  Layout,
+  enhanceApp({ app, router, siteData }) {
+    // app is the Vue 3 app instance from createApp()
+    // router is VitePress' custom router (see `lib/app/router.js`)
+    // siteData is a ref of current site-level metadata.
+  },
+}