docs: carbon ads

docs/components/ads/Ads.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const { $ads } = useNuxtApp()
+</script>
+
+<template>
+<div class="space-y-3">
+  <AdsFallback v-if="$ads.adBlocked.value" />
+  <AdsCarbon v-else :key="$route.path" />
+</div>
+</template>

docs/components/ads/AdsFallback.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="nui-support-nuxt">
+    <div>
+      <p class="pt-2 m-0 font-bold sm:text-sm text-gray-900 dark:text-white">
+        Unlighthouse needs you!
+      </p>
+      <p class="pb-2 m-0 leading-normal text-gray-600 dark:text-white sm:text-xs">
+        By allowing unlighthouse.dev on your Ad-Blocker, you support our work and help us financially.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.nui-support-nuxt {
+  @apply py-2 px-4 rounded-md bg-gray-100 dark:bg-white dark:bg-opacity-10 flex flex-row w-full items-center mt-4;
+}
+
+@screen sm {
+  .nui-support-nuxt {
+    @apply flex-col w-40 mt-0;
+  }
+}
+</style>

docs/components/ads/Carbon.vue

@@ -0,0 +1,110 @@
+<template>
+<div ref="carbonads" class="Carbon border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-white/5" />
+</template>
+
+<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=CW7DTKJL&placement=unlighthousedev')
+    script.setAttribute('id', '_carbonads_js')
+    carbonads.value.appendChild(script)
+  }
+})
+</script>
+
+<style lang="postcss">
+.dark .Carbon {
+  min-height: 220px;
+  .carbon-text {
+    @apply text-gray-400;
+
+    &:hover {
+      @apply text-gray-200;
+    }
+  }
+}
+
+.light .Carbon {
+  .carbon-text {
+    @apply text-gray-600;
+
+    &:hover {
+      @apply text-gray-800;
+    }
+  }
+}
+
+.Carbon {
+  @apply p-3 flex flex-col max-w-full;
+
+  @screen sm {
+    @apply max-w-xs;
+  }
+
+  @screen lg {
+    @apply mt-0;
+  }
+
+  #carbonads span {
+    @apply flex flex-col justify-between;
+
+    .carbon-wrap {
+      @apply flex flex-col;
+
+      flex: 1;
+
+      @media (min-width: 320px) {
+        @apply flex-row;
+      }
+
+      @screen lg {
+        @apply flex-col;
+      }
+
+      .carbon-img {
+        @apply flex items-start justify-center mb-4;
+
+        @media (min-width: 320px) {
+          @apply mb-0;
+        }
+
+        @screen lg {
+          @apply mb-4;
+        }
+      }
+
+      .carbon-text {
+        @apply flex-1 text-sm w-full m-0 text-left block;
+
+        &:hover {
+          @apply no-underline;
+        }
+
+        @media (min-width: 320px) {
+          @apply ml-4;
+        }
+
+        @screen lg {
+          @apply ml-0;
+        }
+      }
+    }
+  }
+
+  img {
+    @apply w-full;
+  }
+
+  & .carbon-poweredby {
+    @apply ml-2 text-xs text-right text-gray-400 block pt-2;
+
+    &:hover {
+      @apply no-underline text-gray-500;
+    }
+  }
+}
+</style>

docs/pages/[...slug].vue

@@ -90,12 +90,11 @@ defineOgImageScreenshot()
 
             <template #right>
               <UDocsToc :links="page.body?.toc?.links || []">
-                <template #top>
-                  <UPageLinks title="Repo Links" :links="repoLinks" />
-                  <UDivider dashed />
-                </template>
                 <template #bottom>
                   <div class="hidden !mt-6 lg:block space-y-6">
+                    <Ads />
+                    <UPageLinks title="Repo Links" :links="repoLinks" />
+                    <UDivider dashed />
                     <UDivider v-if="page.body?.toc?.links?.length" dashed />
                     <UPageLinks title="Community" :links="communityLinks" />
                     <UDivider dashed />

docs/plugins/adblock.ts

@@ -0,0 +1,26 @@
+export default defineNuxtPlugin(() => {
+  const adBlocked = ref(false)
+
+  onNuxtReady(async () => {
+    if (await adsBlocked()) {
+      adBlocked.value = true
+    }
+  })
+
+  const adsBlocked = async () => {
+    return await $fetch('https://cdn.carbonads.com/carbon.js?serve=CWYD553E&placement=nuxtcom', {
+      method: 'HEAD',
+      mode: 'no-cors'
+    })
+      .then(() => false)
+      .catch(() => true)
+  }
+
+  return {
+    provide: {
+      ads: {
+        adBlocked
+      }
+    }
+  }
+})