Merge branch 'main' into brett/RND-5227-site-tabs

Author: BrettJephson

packages/gitbook/src/components/Ads/Ad.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { SiteAds, SiteAdsStatus } from '@gitbook/api';
 import * as React from 'react';
 
 import { t, useLanguage } from '@/intl/client';
@@ -21,6 +22,7 @@ export function Ad({
     spaceId,
     placement,
     ignore,
+    siteAdsStatus,
     style,
     mode = 'auto',
 }: {
@@ -29,6 +31,7 @@ export function Ad({
     placement: string;
     ignore: boolean;
     style?: ClassValue;
+    siteAdsStatus?: SiteAds['status'];
     mode?: 'classic' | 'auto' | 'cover';
 }) {
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -70,8 +73,14 @@ export function Ad({
 
         let cancelled = false;
 
-        const preview = new URL(window.location.href).searchParams.has('ads_preview');
+        const previewParam = new URL(window.location.href).searchParams.get('ads_preview');
+        const preview = !!previewParam;
         const realZoneId = preview ? PREVIEW_ZONE_ID : zoneId;
+        const showPlaceholderAd =
+            previewParam === 'placeholder' ||
+            (siteAdsStatus &&
+                (siteAdsStatus === SiteAdsStatus.Pending ||
+                    siteAdsStatus === SiteAdsStatus.InReview));
 
         if (!realZoneId) {
             return;
@@ -83,6 +92,7 @@ export function Ad({
                 ignore: ignore || preview,
                 zoneId: realZoneId,
                 mode,
+                source: showPlaceholderAd ? 'placeholder' : 'live',
             });
 
             if (cancelled) {
@@ -97,7 +107,7 @@ export function Ad({
         return () => {
             cancelled = true;
         };
-    }, [visible, zoneId, ignore, placement, mode]);
+    }, [visible, zoneId, ignore, placement, mode, siteAdsStatus]);
 
     const viaUrl = new URL('https://www.gitbook.com');
     viaUrl.searchParams.set('utm_source', 'content');

packages/gitbook/src/components/Ads/assets/ad-rainbow.svg

@@ -5,6 +5,7 @@ import { headers } from 'next/headers';
 import { AdClassicRendering } from './AdClassicRendering';
 import { AdCoverRendering } from './AdCoverRendering';
 import { AdPixels } from './AdPixels';
+import adRainbow from './assets/ad-rainbow.svg';
 import { AdItem, AdsResponse } from './types';
 
 interface FetchAdOptions {
@@ -16,6 +17,12 @@ interface FetchAdOptions {
     placement: string;
     /** If true, we'll not track it as an impression */
     ignore: boolean;
+    /**
+     * Source of the ad (live: from the platform, placeholder: static placeholder)
+     *
+     * Defaults to live.
+     * */
+    source?: 'live' | 'placeholder';
 }
 
 /**
@@ -24,8 +31,9 @@ interface FetchAdOptions {
  * and properly access user-agent and IP.
  */
 export async function renderAd(options: FetchAdOptions) {
-    const { mode } = options;
-    const result = await fetchAd(options);
+    const { mode, source = 'live' } = options;
+
+    const result = source === 'live' ? await fetchAd(options) : getPlaceholderAd();
     if (!result || !result.ad.description || !result.ad.statlink) {
         return null;
     }
@@ -49,15 +57,7 @@ async function fetchAd({
     placement,
     ignore,
 }: FetchAdOptions): Promise<{ ad: AdItem; ip: string } | null> {
-    const headersSet = headers();
-    const ip =
-        headersSet.get('x-gitbook-ipv4') ??
-        headersSet.get('x-gitbook-ip') ??
-        headersSet.get('cf-pseudo-ipv4') ??
-        headersSet.get('cf-connecting-ip') ??
-        headersSet.get('x-forwarded-for') ??
-        '';
-    const userAgent = headersSet.get('user-agent') ?? '';
+    const { ip, userAgent } = getUserAgentAndIp();
 
     const url = new URL(`https://srv.buysellads.com/ads/${zoneId}.json`);
     url.searchParams.set('segment', `placement:${placement}`);
@@ -78,3 +78,49 @@ async function fetchAd({
 
     return null;
 }
+
+function getPlaceholderAd(): { ad: AdItem; ip: string } {
+    const { ip } = getUserAgentAndIp();
+
+    return {
+        ad: {
+            active: '1',
+            ad_via_link: '',
+            bannerid: '',
+            creativeid: '',
+            description:
+                'Your docs could be this good.\nPublish incredible open source docs for free with GitBook',
+            evenodd: '0',
+            external_id: '',
+            height: '0',
+            i: '0',
+            identifier: '',
+            longimp: '',
+            longlink: '',
+            num_slots: '1',
+            rendering: 'carbon',
+            smallImage: adRainbow.src,
+            statimp: '',
+            statlink: 'https://www.gitbook.com/solutions/open-source',
+            timestamp: Date.now().toString(),
+            width: '0',
+            zoneid: '',
+            zonekey: '',
+        },
+        ip,
+    };
+}
+
+function getUserAgentAndIp() {
+    const headersSet = headers();
+    const ip =
+        headersSet.get('x-gitbook-ipv4') ??
+        headersSet.get('x-gitbook-ip') ??
+        headersSet.get('cf-pseudo-ipv4') ??
+        headersSet.get('cf-connecting-ip') ??
+        headersSet.get('x-forwarded-for') ??
+        '';
+    const userAgent = headersSet.get('user-agent') ?? '';
+
+    return { ip, userAgent };
+}

packages/gitbook/src/components/Ads/renderAd.tsx

@@ -190,6 +190,7 @@ export async function PageAside(props: {
                 }
                 placement="page.aside"
                 spaceId={space.id}
+                siteAdsStatus={site?.ads && site.ads.status ? site.ads.status : undefined}
                 ignore={process.env.NODE_ENV !== 'production'}
                 style={tcls('mt-4')}
             />