💸 Add Carbon Ads on the documentation website (#527)

apps/www/src/app/(docs)/introduction/page.tsx

@@ -1,3 +1,4 @@
+import { CarbonAds } from '@/components/carbon-ads'
 import { CommandCopy } from '@/components/command-copy'
 import { DocsPageHeader } from '@/components/docs-page-header'
 import { components } from '@/components/ui/components'
@@ -46,6 +47,13 @@ export default async function IntroductionPage() {
           }}
         />
       </div>
+      <aside className="hidden text-sm xl:block">
+        <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
+          <div className="my-10">
+            <CarbonAds />
+          </div>
+        </div>
+      </aside>
     </main>
   )
 }

apps/www/src/app/(docs)/react-hook/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
+import { CarbonAds } from '@/components/carbon-ads'
 import { DocsPageHeader } from '@/components/docs-page-header'
 import { DocsPager } from '@/components/paper'
 import { Mdx } from '@/components/remote-mdx'
@@ -83,11 +84,15 @@ const PostLayout = ({ params }: { params: { slug: string } }) => {
         <hr className="my-4 md:my-6" />
         <DocsPager slug={post.slug} />
       </div>
-      <div className="hidden text-sm xl:block">
+      <aside className="hidden text-sm xl:block">
         <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
           <DashboardTableOfContents toc={toc} />
+
+          <div className="my-10">
+            <CarbonAds />
+          </div>
         </div>
-      </div>
+      </aside>
     </main>
   )
 }

apps/www/src/app/globals.css

@@ -95,4 +95,18 @@
       'rlig' 1,
       'calt' 1;
   }
+
+  /* Override the default styles for the Carbon Ads block */
+  .carbon-wrap * {
+    --carbon-bg-primary: hsl(var(--background));
+    --carbon-bg-secondary: hsl(var(--border));
+    --carbon-text-color: hsl(var(--foreground));
+
+    .carbon-responsive-wrap {
+      @apply !rounded-md;
+    }
+    .carbon-poweredby {
+      @apply !opacity-100 !text-muted-foreground;
+    }
+  }
 }

apps/www/src/components/carbon-ads.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+// TODO: We can't use usehooks-ts's useScript because it mounts the script in the document.body, maybe provide a way to specify the mount point
+const useScript = (scriptUrl: string, scriptId: string) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const existingScript = document.getElementById(scriptId)
+
+    if (!existingScript) {
+      const script = document.createElement('script')
+
+      script.setAttribute('async', '')
+      script.setAttribute('type', 'text/javascript')
+      script.setAttribute('src', scriptUrl)
+      script.setAttribute('id', scriptId)
+
+      ref.current?.appendChild(script)
+    }
+
+    return () => {
+      if (existingScript) {
+        existingScript.remove()
+      }
+    }
+  }, [scriptUrl, scriptId])
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.style.setProperty('--carbon-bg-primary', 'red', 'important')
+    }
+  }, [])
+
+  return ref
+}
+
+export function CarbonAds() {
+  const ref = useScript(
+    '//cdn.carbonads.com/carbon.js?serve=CWYIEKJU&placement=usehooks-tscom&format=cover',
+    '_carbonads_js',
+  )
+
+  return <div className="carbon-wrap" ref={ref} />
+}