Page cover dark-mode specific (#3287)

Author: SamyPesse

.changeset/forty-readers-mix.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Support dark-mode specific page cover image

bun.lock

@@ -26,7 +26,7 @@
       "name": "@gitbook/cache-tags",
       "version": "0.3.1",
       "dependencies": {
-        "@gitbook/api": "^0.118.0",
+        "@gitbook/api": "^0.119.0",
         "assert-never": "^1.2.1",
       },
       "devDependencies": {
@@ -51,7 +51,7 @@
       "name": "gitbook",
       "version": "0.12.0",
       "dependencies": {
-        "@gitbook/api": "^0.118.0",
+        "@gitbook/api": "^0.119.0",
         "@gitbook/cache-do": "workspace:*",
         "@gitbook/cache-tags": "workspace:*",
         "@gitbook/colors": "workspace:*",
@@ -150,7 +150,7 @@
       "name": "gitbook-v2",
       "version": "0.3.0",
       "dependencies": {
-        "@gitbook/api": "^0.118.0",
+        "@gitbook/api": "^0.119.0",
         "@gitbook/cache-tags": "workspace:*",
         "@opennextjs/cloudflare": "1.1.0",
         "@sindresorhus/fnv1a": "^3.1.0",
@@ -209,7 +209,7 @@
       "name": "@gitbook/react-contentkit",
       "version": "0.7.0",
       "dependencies": {
-        "@gitbook/api": "^0.118.0",
+        "@gitbook/api": "^0.119.0",
         "@gitbook/icons": "workspace:*",
         "classnames": "^2.5.1",
       },
@@ -267,7 +267,7 @@
   },
   "overrides": {
     "@codemirror/state": "6.4.1",
-    "@gitbook/api": "^0.118.0",
+    "@gitbook/api": "^0.119.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
   },
@@ -632,7 +632,7 @@
 
     "@fortawesome/fontawesome-svg-core": ["@fortawesome/[email protected]", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="],
 
-    "@gitbook/api": ["@gitbook/api@0.118.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-5bpvXyGNsMOn1Ee7uzohDz/yOgxpVyLZMLu6THYwbG9UeY6BFsWISeqTw03COCX42rVLU5zFReDxRTb7lfZtCw=="],
+    "@gitbook/api": ["@gitbook/api@0.119.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-l2gfJ5+1HT3Sj1OQCh72lUOGU9LV9WbDjgKPjxIFz+NgOhSest1bJ3JhmHP66Xd4ETpmm0YQqnq4y18wKRMjBQ=="],
 
     "@gitbook/cache-do": ["@gitbook/cache-do@workspace:packages/cache-do"],
 

package.json

@@ -10,7 +10,7 @@
     "packageManager": "[email protected]",
     "overrides": {
         "@codemirror/state": "6.4.1",
-        "@gitbook/api": "^0.118.0",
+        "@gitbook/api": "^0.119.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },

packages/cache-tags/package.json

@@ -10,7 +10,7 @@
     },
     "version": "0.3.1",
     "dependencies": {
-        "@gitbook/api": "^0.118.0",
+        "@gitbook/api": "^0.119.0",
         "assert-never": "^1.2.1"
     },
     "devDependencies": {

packages/gitbook-v2/package.json

@@ -3,7 +3,7 @@
     "version": "0.3.0",
     "private": true,
     "dependencies": {
-        "@gitbook/api": "^0.118.0",
+        "@gitbook/api": "^0.119.0",
         "@gitbook/cache-tags": "workspace:*",
         "@opennextjs/cloudflare": "1.1.0",
         "@sindresorhus/fnv1a": "^3.1.0",

packages/gitbook/e2e/internal.spec.ts

@@ -5,6 +5,7 @@ import {
     CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationSidebarListStyle,
+    CustomizationThemeMode,
 } from '@gitbook/api';
 import { expect } from '@playwright/test';
 import jwt from 'jsonwebtoken';
@@ -681,6 +682,16 @@ const testCases: TestsCase[] = [
                 url: 'page-options/page-with-cover',
                 run: waitForCookiesDialog,
             },
+            {
+                name: 'With cover for dark mode',
+                url: `page-options/page-with-dark-cover${getCustomizationURL({
+                    themes: {
+                        default: CustomizationThemeMode.Dark,
+                        toggeable: false,
+                    },
+                })}`,
+                run: waitForCookiesDialog,
+            },
             {
                 name: 'With hero cover',
                 url: 'page-options/page-with-hero-cover',

packages/gitbook/package.json

@@ -16,7 +16,7 @@
         "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static/icons && rm -rf ./public/~gitbook/static/math"
     },
     "dependencies": {
-        "@gitbook/api": "^0.118.0",
+        "@gitbook/api": "^0.119.0",
         "@gitbook/cache-do": "workspace:*",
         "@gitbook/cache-tags": "workspace:*",
         "@gitbook/colors": "workspace:*",

packages/gitbook/src/components/PageBody/PageCover.tsx

@@ -22,6 +22,7 @@ export async function PageCover(props: {
 }) {
     const { as, page, cover, context } = props;
     const resolved = cover.ref ? await resolveContentRef(cover.ref, context) : null;
+    const resolvedDark = cover.refDark ? await resolveContentRef(cover.refDark, context) : null;
 
     return (
         <div
@@ -58,6 +59,12 @@ export async function PageCover(props: {
                                   height: defaultPageCover.height,
                               },
                           },
+                    dark: resolvedDark
+                        ? {
+                              src: resolvedDark.href,
+                              size: resolvedDark.file?.dimensions,
+                          }
+                        : null,
                 }}
                 resize={
                     // When using the default cover, we don't want to resize as it's a SVG

packages/react-contentkit/package.json

@@ -10,7 +10,7 @@
     },
     "dependencies": {
         "classnames": "^2.5.1",
-        "@gitbook/api": "^0.118.0",
+        "@gitbook/api": "^0.119.0",
         "@gitbook/icons": "workspace:*"
     },
     "peerDependencies": {