feat: add Carbon Ads Top Bar and Sidebar placements

.changeset/smart-lilies-invent.md

@@ -0,0 +1,5 @@
+---
+'@node-core/ui-components': minor
+---
+
+Adds a footer slot to the metabar

apps/site/components/CarbonAds/Sidebar.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import classNames from 'classnames';
+
+import useCarbonAd, { adColors } from '#site/hooks/useCarbonAd';
+
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+const CarbonSidebar: FC = () => {
+  const { ad, ref } = useCarbonAd('CWBI6KJU', '(min-width: 1280px)');
+
+  if (!ad) {
+    return null;
+  }
+
+  return (
+    <aside
+      ref={ref}
+      className={styles.sideBar}
+      style={adColors(ad)}
+      aria-label="Advertisement"
+    >
+      <a
+        href={ad.statlink}
+        target="_blank"
+        rel="sponsored noopener"
+        className={styles.sideBarLink}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={ad.largeImage} alt={ad.company} className={styles.image} />
+        <span className={styles.sideBarBody}>
+          {ad.title && <strong>{ad.title}</strong>}
+          <span>{ad.description}</span>
+          <span className={styles.sideBarCta}>{ad.callToAction}</span>
+        </span>
+      </a>
+
+      <a
+        href={ad.ad_via_link}
+        className={classNames(styles.badge, styles.overlay)}
+      >
+        Ad
+      </a>
+    </aside>
+  );
+};
+
+export default CarbonSidebar;

apps/site/components/CarbonAds/TopBar.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import useCarbonAd, { adColors } from '#site/hooks/useCarbonAd';
+
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+const CarbonTopBar: FC = () => {
+  const { ad, ref } = useCarbonAd('CWBI6KJY');
+
+  if (!ad) {
+    return null;
+  }
+
+  return (
+    <aside
+      ref={ref}
+      className={styles.topBar}
+      style={adColors(ad)}
+      aria-label="Advertisement"
+    >
+      <a
+        href={ad.statlink}
+        target="_blank"
+        rel="sponsored noopener"
+        className={styles.topBarLink}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={ad.image} alt={ad.company} className={styles.logo} />
+        <span>{ad.description}</span>
+        <span className={styles.cta}>{ad.callToAction}</span>
+      </a>
+
+      <a href={ad.ad_via_link} className={styles.badge}>
+        Ad
+      </a>
+    </aside>
+  );
+};
+
+export default CarbonTopBar;

apps/site/components/CarbonAds/index.module.css

@@ -0,0 +1,113 @@
+@reference "../../styles/index.css";
+
+.topBar,
+.sideBar {
+  @apply relative
+    bg-(--ad-bg)
+    text-(color:--ad-text)
+    dark:bg-(--ad-bg-dark)
+    dark:text-(color:--ad-text-dark);
+
+  & a {
+    @apply text-inherit
+      no-underline;
+  }
+}
+
+.badge {
+  @apply shrink-0
+    rounded-sm
+    border
+    border-current
+    px-1.5
+    text-xs
+    leading-4
+    opacity-70
+    hover:opacity-100;
+}
+
+.topBar {
+  @apply mb-4
+    flex
+    items-center
+    gap-3
+    rounded-md
+    px-4
+    py-2
+    text-sm;
+}
+
+.topBarLink {
+  @apply flex
+    flex-1
+    items-center
+    gap-3;
+}
+
+.logo {
+  @apply size-8
+    shrink-0
+    rounded-sm;
+}
+
+.cta {
+  @apply hidden
+    shrink-0
+    rounded-md
+    bg-(--ad-cta-bg)
+    px-3
+    py-1
+    text-xs
+    font-semibold
+    whitespace-nowrap
+    text-(color:--ad-cta-text)
+    sm:block
+    dark:bg-(--ad-cta-bg-dark)
+    dark:text-(color:--ad-cta-text-dark);
+}
+
+.sideBar {
+  @apply w-44
+    shrink-0
+    overflow-hidden
+    rounded-lg;
+}
+
+.sideBarLink {
+  @apply flex
+    flex-col;
+}
+
+.image {
+  @apply aspect-square
+    w-full
+    object-cover;
+}
+
+.sideBarBody {
+  @apply flex
+    flex-col
+    items-start
+    gap-1
+    p-3.5
+    text-xs;
+}
+
+.sideBarCta {
+  @apply mt-2
+    rounded-full
+    border
+    border-current
+    px-3
+    py-1
+    font-semibold;
+}
+
+.overlay {
+  @apply absolute
+    top-2
+    right-2
+    border-transparent
+    bg-neutral-950/50
+    text-white;
+}

apps/site/components/MetaBar.tsx

@@ -6,6 +6,7 @@ import { defaultLocale } from '@node-core/website-i18n';
 import { useFormatter, useLocale, useTranslations } from 'next-intl';
 
 import AvatarGroup from '#site/components/AvatarGroup';
+import CarbonSidebar from '#site/components/CarbonAds/Sidebar';
 import Link from '#site/components/Link';
 import useClientContext from '#site/hooks/useClientContext';
 import useMediaQuery from '#site/hooks/useMediaQuery';
@@ -74,6 +75,7 @@ const MetaBar: FC = () => {
         ),
       }}
       headings={{ items: headings }}
+      footer={<CarbonSidebar />}
     />
   );
 };

apps/site/hooks/useCarbonAd.ts

@@ -0,0 +1,90 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+
+import useMediaQuery from '#site/hooks/useMediaQuery';
+import {
+  CARBON_ADS_COUNT_IMPRESSIONS,
+  CARBON_ADS_URL,
+} from '#site/next.constants.mjs';
+
+import type { CSSProperties } from 'react';
+
+export type CarbonAd = Record<string, string>;
+
+export const adColors = (ad: CarbonAd) =>
+  ({
+    '--ad-bg': ad.backgroundColor,
+    '--ad-bg-dark': ad.backgroundColorDark ?? ad.backgroundColor,
+    '--ad-text': ad.textColor,
+    '--ad-text-dark': ad.textColorDark ?? ad.textColor,
+    '--ad-cta-bg': ad.ctaBackgroundColor,
+    '--ad-cta-bg-dark': ad.ctaBackgroundColorDark ?? ad.ctaBackgroundColor,
+    '--ad-cta-text': ad.ctaTextColor,
+    '--ad-cta-text-dark': ad.ctaTextColorDark ?? ad.ctaTextColor,
+  }) as CSSProperties;
+
+const useCarbonAd = (zone: string, media?: string) => {
+  const [ad, setAd] = useState<CarbonAd | null>(null);
+  const ref = useRef<HTMLElement>(null);
+  // Layouts persist across navigations, so refetch per page
+  const pathname = usePathname();
+  const matches = useMediaQuery(media ?? 'all');
+
+  useEffect(() => {
+    if (!matches) {
+      return;
+    }
+
+    const controller = new AbortController();
+    const url = new URL(`${zone}.json`, CARBON_ADS_URL);
+
+    if (!CARBON_ADS_COUNT_IMPRESSIONS) {
+      url.searchParams.set('ignore', 'yes');
+    }
+
+    fetch(url, { signal: controller.signal })
+      .then(response => (response.ok ? response.json() : null))
+      .then(data => data?.ads?.[0]?.statlink && setAd(data.ads[0]))
+      .catch(() => {});
+
+    return () => {
+      controller.abort();
+      setAd(null);
+    };
+  }, [zone, matches, pathname]);
+
+  useEffect(() => {
+    if (!ad?.statview || !ref.current) {
+      return;
+    }
+
+    let timer: ReturnType<typeof setTimeout>;
+
+    const observer = new IntersectionObserver(
+      entries => {
+        clearTimeout(timer);
+
+        if (entries.at(-1)!.intersectionRatio >= 0.5) {
+          timer = setTimeout(() => {
+            new Image().src = ad.statview;
+            observer.disconnect();
+          }, 1000);
+        }
+      },
+      { threshold: 0.5 }
+    );
+
+    observer.observe(ref.current);
+
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
+  }, [ad]);
+
+  return { ad, ref };
+};
+
+export default useCarbonAd;

apps/site/layouts/About.tsx

@@ -1,6 +1,7 @@
 import Article from '@node-core/ui-components/Containers/Article';
 
 import Breadcrumbs from '#site/components/Breadcrumbs';
+import CarbonTopBar from '#site/components/CarbonAds/TopBar';
 import Footer from '#site/components/Footer';
 import MetaBar from '#site/components/MetaBar';
 import NavBar from '#site/components/NavBar';
@@ -17,6 +18,8 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
 
       <div>
         <main id="main" tabIndex={-1}>
+          <CarbonTopBar />
+
           {children}
         </main>
 

apps/site/layouts/ArticlePage.tsx

@@ -1,5 +1,6 @@
 import Article from '@node-core/ui-components/Containers/Article';
 
+import CarbonTopBar from '#site/components/CarbonAds/TopBar';
 import Footer from '#site/components/Footer';
 import MetaBar from '#site/components/MetaBar';
 import NavBar from '#site/components/NavBar';
@@ -16,6 +17,8 @@ const ArticlePageLayout: FC<PropsWithChildren> = ({ children }) => (
 
       <div>
         <main id="main" tabIndex={-1}>
+          <CarbonTopBar />
+
           {children}
         </main>
 

apps/site/layouts/Blog.tsx

@@ -3,6 +3,7 @@ import { useTranslations } from 'next-intl';
 import { getClientContext } from '#site/client-context';
 import BlogHeader from '#site/components/Blog/BlogHeader';
 import BlogCategories from '#site/components/BlogCategories';
+import CarbonTopBar from '#site/components/CarbonAds/TopBar';
 import Footer from '#site/components/Footer';
 import NavBar from '#site/components/NavBar';
 import { getBlogData } from '#site/util/blog';
@@ -55,6 +56,8 @@ const BlogLayout: FC = () => {
 
       <div className={styles.blogLayout}>
         <main id="main" tabIndex={-1}>
+          <CarbonTopBar />
+
           <BlogHeader category={blogData.category} />
 
           <BlogCategories

apps/site/layouts/Post.tsx

@@ -3,6 +3,7 @@ import Preview from '@node-core/ui-components/Common/Preview';
 import { getClientContext } from '#site/client-context';
 import AvatarGroup from '#site/components/AvatarGroup';
 import BlogCrossLinks from '#site/components/BlogCrossLinks';
+import CarbonTopBar from '#site/components/CarbonAds/TopBar';
 import EOLAlert from '#site/components/EOL/EOLAlert';
 import Footer from '#site/components/Footer';
 import MetaBar from '#site/components/MetaBar';
@@ -32,6 +33,8 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
           <main id="main" tabIndex={-1}>
             {type === 'vulnerability' && <EOLAlert />}
 
+            <CarbonTopBar />
+
             <h1>{frontmatter.title}</h1>
 
             <section>