From f5b02256bcb4bcd473134393aa5b281326a6c772 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 15 Oct 2024 22:24:13 +0800
Subject: [PATCH] chore: add carbon ads

---
 apps/www/.vitepress/config.mts                |  4 +
 .../.vitepress/theme/components/CarbonAds.vue | 83 +++++++++++++++++++
 .../theme/components/TableOfContent.vue       |  4 +-
 3 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/.vitepress/theme/components/CarbonAds.vue

diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index 31f28b8f..a1d702e0 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -50,6 +50,10 @@ export default defineConfig({
       pattern: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/:path',
       text: 'Edit this page on GitHub',
     },
+    carbonAds: {
+      code: 'CW7DK27U',
+      placement: 'wwwshadcn-vuecom',
+    },
   },
 
   srcDir: path.resolve(__dirname, '../src'),
diff --git a/apps/www/.vitepress/theme/components/CarbonAds.vue b/apps/www/.vitepress/theme/components/CarbonAds.vue
new file mode 100644
index 00000000..b3d4a6a2
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/CarbonAds.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { onMounted, ref, watch } from 'vue'
+
+const { page, theme } = useData()
+const carbonOptions = theme.value.carbonAds
+const container = ref()
+
+let isInitialized = false
+
+function init() {
+  if (!isInitialized) {
+    isInitialized = true
+    const s = document.createElement('script')
+    s.id = '_carbonads_js'
+    s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}`
+    s.async = true
+    container.value.appendChild(s)
+  }
+}
+
+watch(() => page.value.relativePath, () => {
+  if (isInitialized) {
+    ;(window as any)._carbonads?.refresh()
+  }
+})
+
+// no need to account for option changes during dev, we can just
+// refresh the page
+if (carbonOptions) {
+  onMounted(() => {
+    // @ts-expect-error ignoring env
+    if (import.meta.env.DEV)
+      return
+
+    // if the page is loaded when aside is active, load carbon directly.
+    // otherwise, only load it if the page resizes to wide enough. this avoids
+    // loading carbon at all on mobile where it's never shown
+    init()
+  })
+}
+</script>
+
+<template>
+  <div
+    ref="container"
+    class="carbon-ads"
+  />
+</template>
+
+<style scoped>
+.carbon-ads {
+  @apply !mt-6 w-full flex justify-center items-center p-2 rounded-xl min-h-[256px] text-center leading-[18px] text-xs font-medium bg-card/50 border border-muted;
+}
+
+.carbon-ads :deep(img) {
+  @apply mx-auto rounded-md;
+}
+
+.carbon-ads :deep(.carbon-text) {
+  @apply block mx-auto pt-3 text-[var(--vp-carbon-ads-text-color)] transition-colors duration-200;
+}
+
+.carbon-ads :deep(.carbon-text:hover) {
+  @apply text-[var(--vp-carbon-ads-hover-text-color)];
+}
+
+.carbon-ads :deep(.carbon-poweredby) {
+  @apply block pt-1.5 text-[11px] font-medium text-[var(--vp-carbon-ads-poweredby-color)] uppercase transition-colors duration-200;
+}
+
+.carbon-ads :deep(.carbon-poweredby:hover) {
+  @apply text-[var(--vp-carbon-ads-hover-poweredby-color)];
+}
+
+.carbon-ads :deep(> div) {
+  @apply hidden;
+}
+
+.carbon-ads :deep(> div:first-of-type) {
+  @apply block;
+}
+</style>
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index a46284b7..fc52678b 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -5,6 +5,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/regis
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { onContentUpdated } from 'vitepress'
 import { shallowRef } from 'vue'
+import CarbonAds from '../components/CarbonAds.vue'
 import TableOfContentTree from './TableOfContentTree.vue'
 
 const headers = shallowRef<TableOfContents>()
@@ -24,7 +25,7 @@ function getHeadingsWithHierarchy(divId: string) {
     const level = Number.parseInt(heading.tagName.charAt(1))
     if (!heading.id) {
       const newId = heading.textContent
-        .replaceAll(/[^a-z0-9 ]/gi, '')
+        ?.replaceAll(/[^a-z0-9 ]/gi, '')
         .replaceAll(' ', '-')
         .toLowerCase()
       heading.id = `${newId}`
@@ -63,6 +64,7 @@ onContentUpdated(() => {
           On This Page
         </p>
         <TableOfContentTree :tree="headers" :level="1" />
+        <CarbonAds />
       </div>
     </ScrollArea>
   </div>