chore: add carbon ads

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'),

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>

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>