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/__tests__/useCarbonAd.test.jsx

@@ -0,0 +1,127 @@
+import assert from 'node:assert/strict';
+import { beforeEach, describe, it, mock } from 'node:test';
+
+import { act, render } from '@testing-library/react';
+
+mock.module('next/navigation', {
+  namedExports: { usePathname: () => '/en/about' },
+});
+
+const { default: useCarbonAd } = await import('#site/hooks/useCarbonAd');
+
+const ad = {
+  company: 'Company',
+  statlink: 'https://srv.buysellads.com/ads/click/x/1',
+  statview: 'https://srv.buysellads.com/ads/view/x/1',
+};
+
+let requests;
+let observers;
+let beacons;
+
+class FakeIntersectionObserver {
+  constructor(callback) {
+    this.callback = callback;
+    observers.push(this);
+  }
+
+  observe() {}
+
+  disconnect() {
+    this.disconnected = true;
+  }
+}
+
+const intersect = ratio =>
+  act(() => {
+    for (const observer of observers.filter(o => !o.disconnected)) {
+      observer.callback([{ intersectionRatio: ratio }]);
+    }
+  });
+
+// Lets pending fetch promises and their React state updates settle
+const flush = () => act(() => new Promise(resolve => setTimeout(resolve, 0)));
+
+const Probe = () => {
+  const { ad, ref } = useCarbonAd('CWBI6KJY');
+
+  return ad ? <div ref={ref}>{ad.company}</div> : null;
+};
+
+const renderAd = async t => {
+  render(<Probe />);
+  await flush();
+
+  t.mock.timers.enable({ apis: ['setTimeout'] });
+};
+
+beforeEach(() => {
+  requests = [];
+  observers = [];
+  beacons = [];
+
+  mock.method(globalThis, 'fetch', async url => {
+    requests.push(new URL(url));
+
+    return { ok: true, json: async () => ({ ads: [ad] }) };
+  });
+
+  window.matchMedia = () => ({
+    matches: true,
+    addEventListener() {},
+    removeEventListener() {},
+  });
+
+  globalThis.IntersectionObserver = FakeIntersectionObserver;
+
+  globalThis.Image = class {
+    set src(value) {
+      beacons.push(value);
+    }
+  };
+});
+
+describe('useCarbonAd', () => {
+  it('does not count impressions outside production', async () => {
+    render(<Probe />);
+    await flush();
+
+    assert.equal(requests.length, 1);
+    assert.equal(requests[0].searchParams.get('ignore'), 'yes');
+  });
+
+  it('sends the view beacon after the ad was at least 50% visible for one second', async t => {
+    await renderAd(t);
+
+    intersect(0.5);
+    t.mock.timers.tick(999);
+
+    assert.deepEqual(beacons, []);
+
+    t.mock.timers.tick(1);
+
+    assert.deepEqual(beacons, [ad.statview]);
+  });
+
+  it('does not send the view beacon when the ad stops being visible within one second', async t => {
+    await renderAd(t);
+
+    intersect(1);
+    t.mock.timers.tick(500);
+    intersect(0.4);
+    t.mock.timers.tick(5000);
+
+    assert.deepEqual(beacons, []);
+  });
+
+  it('sends the view beacon only once per ad', async t => {
+    await renderAd(t);
+
+    for (let i = 0; i < 3; i++) {
+      intersect(1);
+      t.mock.timers.tick(1000);
+    }
+
+    assert.equal(beacons.length, 1);
+  });
+});