Merge branch 'main' into main

GitbookIO · Aug 29, 2024 · f94aaf0 · f94aaf0
2 parents 9475167 + 160ae3d
commit f94aaf0
Show file tree

Hide file tree

Showing 51 changed files with 604 additions and 246 deletions.
diff --git a/.changeset/beige-crabs-attack.md b/.changeset/beige-crabs-attack.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Avoid multiple <h1> in the page by using a <div> for the title in the header
diff --git a/.changeset/clean-balloons-travel.md b/.changeset/clean-balloons-travel.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+RND-3532: drop down menu for hidden links at small screen size
diff --git a/.changeset/cold-knives-judge.md b/.changeset/cold-knives-judge.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Change dark mode shadow for multi-space search toolbar
diff --git a/.changeset/ninety-starfishes-refuse.md b/.changeset/ninety-starfishes-refuse.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Use url hash to open Expandable and scroll to anchor
diff --git a/.changeset/odd-beds-walk.md b/.changeset/odd-beds-walk.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix margin for paragraphs in quote blocks
diff --git a/.changeset/rare-maps-call.md b/.changeset/rare-maps-call.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Optimize images rendered in community ads
diff --git a/.changeset/red-bats-chew.md b/.changeset/red-bats-chew.md
@@ -0,0 +1,5 @@
+---
+'@gitbook/react-contentkit': patch
+---
+
+Fix rendering of webframe with SSR causing wrong communication between frame and renderer
diff --git a/.changeset/shy-buttons-relate.md b/.changeset/shy-buttons-relate.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Add optional env `GITBOOK_INTEGRATIONS_HOST` to configure the host serving the integrations
diff --git a/.changeset/tender-onions-jog.md b/.changeset/tender-onions-jog.md
@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Update Scalar client to latest version
diff --git a/.changeset/unlucky-balloons-explain.md b/.changeset/unlucky-balloons-explain.md
@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Update rendering of community ads to match new API response, and make it possible to preview ads.
diff --git a/.changeset/weak-hairs-compete.md b/.changeset/weak-hairs-compete.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix "ip" being passed to BSA for community ads
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -158,6 +158,24 @@ jobs:
               env:
                   PUPPETEER_SKIP_DOWNLOAD: 1
             - run: bun unit
+    build-oss:
+        # CI to check that the repository builds correctly on a machine without the credentials
+        runs-on: ubuntu-latest
+        name: Build (Open Source)
+        env:
+            NPMRC_FONT_AWESOME_TOKEN: ''
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+            - name: Setup bun
+              uses: oven-sh/setup-bun@v1
+              with:
+                  bun-version: 1.1.18
+            - name: Install dependencies
+              run: bun install --frozen-lockfile
+              env:
+                  PUPPETEER_SKIP_DOWNLOAD: 1
+            - run: bun run build
     typecheck:
         runs-on: ubuntu-latest
         name: Typecheck

diff --git a/README.md b/README.md
@@ -106,7 +106,7 @@ On the con side, you become responsible for the reliability of your published si
 
 Distributed under the [GNU GPLv3 License](https://github.com/GitBookIO/gitbook/blob/main/LICENSE).
 
-If you plan to distribute the code, you must the source code public to comply with GNU GPLv3. To clone in a private repository, acquire a [commercial license](https://www.gitbook.com/pricing).
+If you plan to distribute the code, you must make the source code public to comply with the GNU GPLv3. To clone in a private repository, acquire a [commercial license](https://www.gitbook.com/pricing).
 
 See `LICENSE` for more information.
 

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts
@@ -424,6 +424,17 @@ const testCases: TestsCase[] = [
             },
         ],
     },
+    {
+        name: 'Ads',
+        baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
+        tests: [
+            {
+                name: 'Without previewed ads',
+                url: 'text-page?ads_preview=1',
+                run: waitForCookiesDialog,
+            },
+        ],
+    },
     {
         name: 'Share links',
         baseUrl: 'https://gitbook.gitbook.io/gbo-tests-share-links/',

diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json
@@ -3,7 +3,7 @@
     "version": "0.3.0",
     "private": true,
     "scripts": {
-        "dev": "env-cmd -f ../../.env.local next dev",
+        "dev": "env-cmd --silent -f ../../.env.local next dev",
         "build": "next build",
         "build:cloudflare": "next-on-pages",
         "start": "next start",
@@ -15,7 +15,7 @@
         "copy:icons": "gitbook-icons ./public/~gitbook/static/icons"
     },
     "dependencies": {
-        "@gitbook/api": "^0.59.0",
+        "@gitbook/api": "^0.60.0",
         "@gitbook/icons": "workspace:*",
         "@gitbook/react-math": "workspace:*",
         "@gitbook/react-openapi": "workspace:*",

diff --git a/packages/gitbook/src/components/Ads/Ad.tsx b/packages/gitbook/src/components/Ads/Ad.tsx
@@ -1,13 +1,15 @@
 'use client';
 
-import { Icon } from '@gitbook/icons';
 import * as React from 'react';
 
 import { ClassValue, tcls } from '@/lib/tailwind';
 
-import { AdClassicRendering } from './AdClassicRendering';
-import { AdCoverRendering } from './AdCoverRendering';
-import { AdItem, AdsResponse } from './types';
+import { renderAd } from './renderAd';
+
+/**
+ * Zone ID provided by BuySellAds for the preview.
+ */
+const PREVIEW_ZONE_ID = 'CVAIKKQM';
 
 /**
  * Fetch and render the Ad placement.
@@ -21,7 +23,7 @@ export function Ad({
     style,
     mode = 'auto',
 }: {
-    zoneId: string;
+    zoneId: string | null;
     spaceId: string;
     placement: string;
     ignore: boolean;
@@ -30,8 +32,7 @@ export function Ad({
 }) {
     const containerRef = React.useRef<HTMLDivElement>(null);
     const [visible, setVisible] = React.useState(false);
-    const [failed, setFailed] = React.useState(false);
-    const [ad, setAd] = React.useState<AdItem | undefined>(undefined);
+    const [ad, setAd] = React.useState<React.ReactNode | undefined>(undefined);
 
     // Observe the container visibility
     React.useEffect(() => {
@@ -68,39 +69,35 @@ export function Ad({
 
         let cancelled = false;
 
-        (async () => {
-            const url = new URL(`https://srv.buysellads.com/ads/${zoneId}.json`);
-            url.searchParams.set('segment', `placement:${placement}`);
-            url.searchParams.set('v', 'true');
-            if (ignore) {
-                url.searchParams.set('ignore', 'true');
-            }
+        const preview = new URL(window.location.href).searchParams.has('ads_preview');
+        const realZoneId = preview ? PREVIEW_ZONE_ID : zoneId;
 
-            try {
-                const res = await fetch(url);
-                const json: AdsResponse = await res.json();
+        if (!realZoneId) {
+            return;
+        }
 
-                if (cancelled) {
-                    return;
-                }
+        (async () => {
+            const result = await renderAd({
+                spaceId,
+                placement,
+                ignore: ignore || preview,
+                zoneId: realZoneId,
+                mode,
+            });
+
+            if (cancelled) {
+                return;
+            }
 
-                const first = json.ads[0];
-                if (first && 'active' in first) {
-                    setAd(first);
-                }
-            } catch (error) {
-                console.error(
-                    'Failed to fetch ad, it might have been blocked by a ad-blocker',
-                    error,
-                );
-                setFailed(true);
+            if (result) {
+                setAd(result);
             }
         })();
 
         return () => {
             cancelled = true;
         };
-    }, [visible, zoneId, ignore, placement]);
+    }, [visible, spaceId, zoneId, ignore, placement, mode]);
 
     const viaUrl = new URL('https://www.gitbook.com');
     viaUrl.searchParams.set('utm_source', 'content');
@@ -109,92 +106,7 @@ export function Ad({
 
     return (
         <div ref={containerRef} className={tcls(style)}>
-            {ad && ad.description && ad.statlink ? (
-                <>
-                    {mode === 'classic' || !('callToAction' in ad) ? (
-                        <AdClassicRendering ad={ad} />
-                    ) : (
-                        <AdCoverRendering ad={ad} />
-                    )}
-                    {ad.pixel ? <AdPixels rawPixel={ad.pixel} /> : null}
-                    <p
-                        className={tcls(
-                            'mt-2',
-                            'mr-2',
-                            'text-xs',
-                            'text-right',
-                            'text-dark/5',
-                            'dark:text-light/5',
-                        )}
-                    >
-                        <a
-                            target="_blank"
-                            href={viaUrl.toString()}
-                            className={tcls('hover:underline')}
-                        >
-                            Ads via GitBook
-                        </a>
-                    </p>
-                </>
-            ) : failed ? (
-                <AdBlockerPlaceholder />
-            ) : null}
-        </div>
-    );
-}
-
-/**
- * Render attribution or verification pixels.
- * https://docs.buysellads.com/ad-serving-api#pixels
- */
-function AdPixels({ rawPixel }: { rawPixel: string }) {
-    const pixels = rawPixel.split('||');
-    const time = String(Math.round(Date.now() / 1e4) | 0);
-
-    return (
-        <div className={tcls('hidden')}>
-            {pixels.map((pixel, index) => {
-                return (
-                    <img
-                        key={index}
-                        src={pixel.replace('[timestamp]', time)}
-                        width="1"
-                        height="1"
-                        style={{ display: 'none' }}
-                        alt="Ads tracking pixel"
-                    />
-                );
-            })}
-        </div>
-    );
-}
-
-/**
- * Placeholder when visitor has an ad-blocker.
- */
-function AdBlockerPlaceholder() {
-    return (
-        <div
-            className={tcls(
-                'flex',
-                'flex-col',
-                'gap-3',
-                'bg-light-2',
-                'text-dark/7',
-                'dark:bg-dark-2',
-                'dark:text-light/7',
-                'rounded-lg',
-                'p-4',
-            )}
-        >
-            <div className={tcls('flex', 'flex-row', 'gap-2', 'items-center')}>
-                <Icon icon="heart" className={tcls('size-4', 'text-primary-500')} />
-                <p className={tcls('text-xs', 'font-semibold')}>Ad disabled</p>
-            </div>
-            <p className={tcls('text-xs')}>
-                {`It looks like you're using an adblocker. Whitelist this site to help support this
-                project.`}
-            </p>
+            {ad ? ad : null}
         </div>
     );
 }
diff --git a/packages/gitbook/src/components/Ads/AdClassicRendering.tsx b/packages/gitbook/src/components/Ads/AdClassicRendering.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 
+import { getResizedImageURL } from '@/lib/images';
 import { tcls } from '@/lib/tailwind';
 
 import { AdItem } from './types';
 
 /**
  * Classic rendering for an ad.
  */
-export function AdClassicRendering({ ad }: { ad: AdItem }) {
+export async function AdClassicRendering({ ad }: { ad: AdItem }) {
     return (
         <a
             className={tcls(
@@ -29,14 +30,21 @@ export function AdClassicRendering({ ad }: { ad: AdItem }) {
         >
             {'smallImage' in ad ? (
                 <div>
-                    <img alt="Ads logo" className={tcls('rounded-md')} src={ad.smallImage} />
+                    <img
+                        alt="Ads logo"
+                        className={tcls('rounded-md')}
+                        src={await getResizedImageURL(ad.smallImage, { width: 192, dpr: 2 })}
+                    />
                 </div>
             ) : (
                 <div
                     className={tcls('px-6', 'py-4', 'rounded-md')}
                     style={{ backgroundColor: ad.backgroundColor }}
                 >
-                    <img alt="Ads logo" src={ad.logo} />
+                    <img
+                        alt="Ads logo"
+                        src={await getResizedImageURL(ad.logo, { width: 192 - 48, dpr: 2 })}
+                    />
                 </div>
             )}
             <div className={tcls('flex', 'flex-col')}>