fix: re-implement sidebar advertisements

Author: favna

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/theme/components/AdUnit.vue docs/.vuepress/layouts/components/AdUnit.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>