[DO NOT MERGE] 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,59 @@
+'use client';
+
+import classNames from 'classnames';
+
+import useCarbonAd, { adColors } from '#site/hooks/useCarbonAd';
+import useClientContext from '#site/hooks/useClientContext';
+
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+const CarbonSidebar: FC = () => {
+  const { frontmatter } = useClientContext();
+
+  // Must match where each layout's grid gives the MetaBar a right-hand column
+  const media =
+    frontmatter.layout === 'blog-post'
+      ? '(min-width: 896px)'
+      : '(min-width: 1280px)';
+
+  const { ad, ref } = useCarbonAd('CWBI6KJU', media);
+
+  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,44 @@
+'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, loading, ref } = useCarbonAd('CWBI6KJY');
+
+  if (!ad) {
+    return loading ? (
+      <aside aria-hidden="true" className={styles.topBarPlaceholder} />
+    ) : 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,127 @@
+@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
+    lg:min-h-14;
+}
+
+/* Matches the banner's minimum height, so that it doesn't shift the page when it loads */
+.topBarPlaceholder {
+  @apply mb-4
+    hidden
+    lg:block
+    lg:h-14;
+
+  /* While hidden, it still stops the next heading from matching `first:mt-0` in markdown.css */
+  & + :is(h1, h2, h3, h4, h5, h6) {
+    @apply max-lg:mt-0;
+  }
+}
+
+.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 />}
     />
   );
 };