From 5f70ed73b94f6aacf03398dbb361cae8df1c9785 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Mon, 18 Mar 2024 11:04:28 +0100
Subject: [PATCH] Fix page cover display (#291)

* Fix page cover display

Make it always looks good with the recommended size of 1990x480.

* Take maximum size on mobile

* Stabilize visual testing
---
 e2e/pages.spec.ts                          |  6 +++++
 src/components/PageBody/PageCover.tsx      | 30 ++++++++++++++--------
 src/components/primitives/DateRelative.tsx |  7 ++++-
 src/components/utils/Image.tsx             |  2 +-
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/e2e/pages.spec.ts b/e2e/pages.spec.ts
index 56d1f9998..035e7ede8 100644
--- a/e2e/pages.spec.ts
+++ b/e2e/pages.spec.ts
@@ -404,6 +404,12 @@ for (const testCase of testCases) {
                 }
                 await argosScreenshot(page, `${testCase.name} - ${testEntry.name}`, {
                     viewports: ['macbook-13', 'iphone-x', 'ipad-2'],
+                    argosCSS: `
+                        /* Hide Intercom */
+                        .intercom-lightweight-app {
+                            display: none !important;
+                        }
+                    `,
                 });
             });
         }
diff --git a/src/components/PageBody/PageCover.tsx b/src/components/PageBody/PageCover.tsx
index 6ed1b3605..7d1acf18d 100644
--- a/src/components/PageBody/PageCover.tsx
+++ b/src/components/PageBody/PageCover.tsx
@@ -1,12 +1,14 @@
 import { RevisionPageDocument, RevisionPageDocumentCover } from '@gitbook/api';
 
-import { Image } from '@/components/utils';
+import { Image, ImageSize } from '@/components/utils';
 import { ContentRefContext, resolveContentRef } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 
 import defaultPageCover from './default-page-cover.svg';
 import { PAGE_COVER_HEIGHT } from '../layout';
 
+const PAGE_COVER_SIZE: ImageSize = { width: 1990, height: 480 };
+
 /**
  * Cover for the page.
  */
@@ -22,23 +24,29 @@ export async function PageCover(props: {
     return (
         <div
             className={tcls(
-                PAGE_COVER_HEIGHT,
                 'overflow-hidden',
+                '-mx-4',
                 // Negative margin to balance the container padding
                 as === 'full'
-                    ? ['-mx-4', 'sm:-mx-6', 'md:-mx-8']
-                    : ['max-w-3xl', 'mx-auto', 'rounded-md', 'mb-8'],
+                    ? ['sm:-mx-6', 'md:-mx-8', 'lg:ml-0', '-lg:mr-8']
+                    : ['sm:mx-auto', 'max-w-3xl', 'sm:rounded-md', 'mb-8'],
             )}
         >
             <Image
                 alt="Page cover image"
                 sources={{
-                    light: {
-                        src: resolved?.href ?? defaultPageCover.src,
-                        size: resolved
-                            ? resolved?.fileDimensions
-                            : { width: defaultPageCover.width, height: defaultPageCover.height },
-                    },
+                    light: resolved
+                        ? {
+                              src: resolved.href,
+                              size: resolved.fileDimensions,
+                          }
+                        : {
+                              src: defaultPageCover.src,
+                              size: {
+                                  width: defaultPageCover.width,
+                                  height: defaultPageCover.height,
+                              },
+                          },
                 }}
                 resize={
                     // When using the default cover, we don't want to resize as it's a SVG
@@ -59,13 +67,13 @@ export async function PageCover(props: {
                 ]}
                 className={tcls(
                     'w-full',
-                    'h-full',
                     'object-cover',
                     'object-center',
                     as === 'full'
                         ? ['[mask-image:linear-gradient(rgba(0,0,0,1),_rgba(0,0,0,0.5))]']
                         : null,
                 )}
+                inlineStyle={{ aspectRatio: `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}` }}
             />
         </div>
     );
diff --git a/src/components/primitives/DateRelative.tsx b/src/components/primitives/DateRelative.tsx
index 9544720f6..dc6f87417 100644
--- a/src/components/primitives/DateRelative.tsx
+++ b/src/components/primitives/DateRelative.tsx
@@ -28,7 +28,12 @@ export function DateRelative(props: { value: string }) {
     const date = new Date(value);
     const diff = now - date.getTime();
     return (
-        <time suppressHydrationWarning={true} dateTime={value} title={date.toLocaleString()}>
+        <time
+            data-visual-test="transparent"
+            suppressHydrationWarning={true}
+            dateTime={value}
+            title={date.toLocaleString()}
+        >
             {formatDiff(language.locale, diff)}
         </time>
     );
diff --git a/src/components/utils/Image.tsx b/src/components/utils/Image.tsx
index 64388f990..5575c57ce 100644
--- a/src/components/utils/Image.tsx
+++ b/src/components/utils/Image.tsx
@@ -7,7 +7,7 @@ import { ClassValue, tcls } from '@/lib/tailwind';
 import { PolymorphicComponentProp } from './types';
 import { Zoom } from './Zoom';
 
-type ImageSize = { width: number; height: number };
+export type ImageSize = { width: number; height: number };
 
 type ImageSource = {
     src: string;