fix: re-implement sidebar advertisements

docs/.vuepress/client.ts

@@ -1,4 +1,5 @@
 import { defineClientConfig } from '@vuepress/client'
+import Layout from './layouts/Layout.vue'
 
 // @ts-expect-error monaco editor doesn't have types for the workers
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
@@ -8,6 +9,9 @@ import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 
 export default defineClientConfig({
+  layouts: {
+    Layout
+  },
   enhance({ router }) {
     self.MonacoEnvironment = {
       getWorker(_, label) {

docs/.vuepress/layouts/Layout.vue

@@ -0,0 +1,15 @@
+<template>
+  <ParentLayout>
+    <template #sidebar-top>
+      <Suspense>
+        <CarbonAds />
+        <template #fallback>Loading ads...</template>
+      </Suspense>
+    </template>
+  </ParentLayout>
+</template>
+
+<script setup>
+import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
+import CarbonAds from './components/CarbonAds.vue'
+</script>

docs/.vuepress/layouts/components/CarbonAds.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="carbon-ads" ref="carbonAdsElementRef"></div>
+</template>
+
+<script setup lang="ts">
+import { isNullish } from '@sapphire/utilities'
+import { onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const SCRIPT_ID = '_carbonads_js'
+const ACCOUNT_ID = 'CE7IC27U'
+const PLACEMENT = 'fusejsio'
+
+const route = useRoute()
+
+const carbonAdsElementRef = ref<HTMLDivElement>()
+
+async function loadCarbonAds() {
+  const s = document.createElement('script')
+  s.id = SCRIPT_ID
+  s.src = `//cdn.carbonads.com/carbon.js?serve=${ACCOUNT_ID}&placement=${PLACEMENT}`
+  carbonAdsElementRef.value.appendChild(s)
+}
+
+onMounted(() => {
+  loadCarbonAds()
+})
+
+watch(route, () => {
+  if (!isNullish(document.querySelector('#carbonads'))) {
+    carbonAdsElementRef.value.innerHTML = ''
+    loadCarbonAds()
+  }
+})
+</script>
+
+<style lang="css">
+.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(--c-border);
+}
+
+html.dark .carbon-ads .carbon-img {
+  border-color: var(--c-border-dark);
+}
+
+.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>

docs/.vuepress/theme/components/CarbonAds.vue

@@ -1,64 +0,0 @@
-<script>
-const SCRIPT_ID = '_carbonads_js'
-const ACCOUNT_ID = 'CE7IC27U'
-const PLACEMENT = 'fusejsio'
-
-export default {
-  name: 'CarbonAds',
-  watch: {
-    $route(to, from) {
-      if (
-        to.fullPath !== from.fullPath &&
-        // Only reload if the ad has been loaded
-        // otherwise it's possible that the script is appended but
-        // the ads are not loaded yet. This would result in duplicated ads.
-        this.$el.querySelector('#carbonads')
-      ) {
-        this.$el.innerHTML = ''
-        this.load()
-      }
-    }
-  },
-  mounted() {
-    this.load()
-  },
-  methods: {
-    load() {
-      const s = document.createElement('script')
-      s.id = SCRIPT_ID
-      s.src = `//cdn.carbonads.com/carbon.js?serve=${ACCOUNT_ID}&placement=${PLACEMENT}`
-      this.$el.appendChild(s)
-    }
-  },
-  render(h) {
-    return h('div', { class: 'carbon-ads' })
-  }
-}
-</script>
-
-<style lang="stylus">
-.carbon-ads
-  min-height 102px
-  padding 1.5rem 1.5rem 0
-  margin-bottom -0.5rem
-  font-size 0.75rem
-  a
-    color #444
-    font-weight normal
-    display inline
-  .carbon-img
-    float left
-    margin-right 1rem
-    border 1px solid $borderColor
-    img
-      display block
-  .carbon-poweredby
-    color #999
-    display block
-    margin-top 0.5em
-@media (max-width: $MQMobile)
-  .carbon-ads
-    .carbon-img img
-      width 100px
-      height 77px
-</style>

docs/.vuepress/theme/index.js

@@ -1,5 +0,0 @@
-const { path } = require('@vuepress/shared-utils')
-
-module.exports = (options = {}, context) => ({
-  extend: '@vuepress/theme-default'
-})

docs/.vuepress/theme/layouts/Layout.vue

@@ -1,55 +0,0 @@
-<template>
-  <ParentLayout>
-    <!-- <template #sidebar-top>
-      <Version />
-    </template> -->
-    <template #sidebar-top>
-      <CarbonAds />
-      <!-- <div>
-        <ins
-          class="adsbygoogle"
-          style="display: block; text-align: center;"
-          data-ad-layout="in-article"
-          data-ad-format="fluid"
-          data-ad-client="ca-pub-3734944050099256"
-          data-ad-slot="8461402236"
-        ></ins>
-        <script>
-          ;(adsbygoogle = window.adsbygoogle || []).push({})
-        </script>
-      </div> -->
-    </template>
-    <!-- <template #sidebar-bottom>
-      <Donate />
-    </template> -->
-    <!-- <template #page-bottom>
-      <BuySellAds />
-    </template> -->
-    <template #page-bottom>
-      <!-- <DonateLink /> -->
-    </template>
-  </ParentLayout>
-</template>
-
-<script>
-import ParentLayout from '@parent-theme/layouts/Layout.vue'
-import CarbonAds from '@theme/components/CarbonAds.vue'
-// import AdUnit from '@theme/components/AdUnit.vue'
-// import Donate from '@theme/components/Donate.vue'
-// import DonateLink from '@theme/components/DonateLink.vue'
-// import BuySellAds from '@theme/components/BuySellAds.vue'
-// import Version from '@theme/components/Version.vue'
-
-export default {
-  name: 'Layout',
-  components: {
-    ParentLayout,
-    // Version
-    CarbonAds
-    // AdUnit,
-    // Donate,
-    // DonateLink
-    // BuySellAds
-  }
-}
-</script>