From 77163e4b76a45ccdcf8d90a19ffb52b075ed3a3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Wed, 17 Jan 2024 16:36:59 +0100
Subject: [PATCH] docs: add carbon ads

---
 docs/components/AdsCarbon.vue | 45 +++++++++++++++++++++++++++++++++++
 docs/pages/[...slug].vue      |  6 +++--
 2 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/AdsCarbon.vue

diff --git a/docs/components/AdsCarbon.vue b/docs/components/AdsCarbon.vue
new file mode 100644
index 000000000..fdb8d0e91
--- /dev/null
+++ b/docs/components/AdsCarbon.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const carbonads = ref(null)
+
+onMounted(() => {
+  if (carbonads.value) {
+    const script = document.createElement('script')
+    script.setAttribute('type', 'text/javascript')
+    script.setAttribute('src', 'https://cdn.carbonads.com/carbon.js?serve=CWYIPK7W&placement=contentnuxtcom')
+    script.setAttribute('id', '_carbonads_js')
+    carbonads.value.appendChild(script)
+  }
+})
+</script>
+
+<template>
+  <div ref="carbonads" class="carbon" />
+</template>
+
+<style lang="postcss">
+.carbon > #carbonads {
+  @apply relative border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-gray-700 w-full transition-colors min-h-[220px];
+
+  &:hover {
+    .carbon-text {
+      @apply text-gray-700 dark:text-gray-200;
+    }
+  }
+
+  .carbon-img {
+    @apply flex justify-center p-2 w-full;
+
+    & > img {
+      @apply !max-w-full w-full rounded;
+    }
+  }
+
+  .carbon-text {
+    @apply flex px-2 text-sm text-gray-500 dark:text-gray-400 transition-colors text-center w-full;
+  }
+
+  .carbon-poweredby {
+    @apply block text-xs text-center text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 pt-1 pb-2 px-2 transition-colors;
+  }
+}
+</style>
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index 31f9e91bd..2bb43e4af 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -91,10 +91,12 @@ const ecosystemLinks = [
       <UDocsToc :links="page.body.toc.links">
         <template #bottom>
           <div class="hidden !mt-6 lg:block space-y-6">
-            <UDivider v-if="page.body?.toc?.links?.length" dashed />
+            <UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
             <UPageLinks title="Community" :links="communityLinks" />
-            <UDivider dashed />
+            <UDivider type="dashed" />
             <UPageLinks title="Ecosystem" :links="ecosystemLinks" />
+            <UDivider type="dashed" />
+            <AdsCarbon />
           </div>
         </template>
       </UDocsToc>