Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 88fe9e9

Browse files
Enable cover heights in gbo
1 parent eea8f1e commit 88fe9e9

File tree

5 files changed

+49
-9
lines changed

5 files changed

+49
-9
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { PageCover } from './PageCover';
1717
import { PageFooterNavigation } from './PageFooterNavigation';
1818
import { PageHeader } from './PageHeader';
1919
import { PreservePageLayout } from './PreservePageLayout';
20+
import { hasVisibleCover } from './coverHeight';
2021

2122
const LINK_PREVIEW_MAX_COUNT = 100;
2223

@@ -32,6 +33,7 @@ export function PageBody(props: {
3233
const { customization } = context;
3334

3435
const contentFullWidth = document ? hasFullWidthBlock(document) : false;
36+
const visibleCover = hasVisibleCover(page.cover);
3537

3638
// Render link previews only if there are less than LINK_PREVIEW_MAX_COUNT links in the document.
3739
const withLinkPreviews = document
@@ -60,7 +62,7 @@ export function PageBody(props: {
6062
)}
6163
>
6264
<PreservePageLayout siteWidthWide={siteWidthWide} />
63-
{page.cover && page.layout.cover && page.layout.coverSize === 'hero' ? (
65+
{visibleCover && page.layout.cover && page.layout.coverSize === 'hero' ? (
6466
<PageCover as="hero" page={page} cover={page.cover} context={context} />
6567
) : null}
6668

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { tcls } from '@/lib/tailwind';
88

99
import { assert } from 'ts-essentials';
1010
import { PageCoverImage } from './PageCoverImage';
11+
import { getCoverHeight } from './coverHeight';
1112
import defaultPageCoverSVG from './default-page-cover.svg';
1213

1314
const defaultPageCover = defaultPageCoverSVG as StaticImageData;
@@ -22,6 +23,12 @@ export async function PageCover(props: {
2223
context: GitBookSiteContext;
2324
}) {
2425
const { as, page, cover, context } = props;
26+
const height = getCoverHeight(cover);
27+
28+
if (height <= 0) {
29+
return null;
30+
}
31+
2532
const [resolved, resolvedDark] = await Promise.all([
2633
cover.ref ? resolveContentRef(cover.ref, context) : null,
2734
cover.refDark ? resolveContentRef(cover.refDark, context) : null,
@@ -78,8 +85,10 @@ export async function PageCover(props: {
7885
<div
7986
id="page-cover"
8087
data-full={String(as === 'full')}
88+
style={{ height: `${height}px` }}
8189
className={tcls(
8290
'overflow-hidden',
91+
'shrink-0',
8392
// Negative margin to balance the container padding
8493
'-mx-4',
8594
as === 'full'

‎packages/gitbook/src/components/PageBody/PageCoverImage.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,8 @@ export function PageCoverImage({ imgs, y }: { imgs: Images; y: number }) {
4848
sizes={imgs.light.sizes}
4949
fetchPriority="high"
5050
alt="Page cover"
51-
className={tcls('w-full', 'object-cover', imgs.dark ? 'dark:hidden' : '')}
51+
className={tcls('h-full','w-full', 'object-cover', imgs.dark ? 'dark:hidden' : '')}
5252
style={{
53-
aspectRatio: `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}`,
5453
objectPosition: `50% ${getTop(container, y, imgs.light)}`,
5554
}}
5655
/>
@@ -61,9 +60,8 @@ export function PageCoverImage({ imgs, y }: { imgs: Images; y: number }) {
6160
sizes={imgs.dark.sizes}
6261
fetchPriority="low"
6362
alt="Page cover"
64-
className={tcls('w-full', 'object-cover', 'dark:inline', 'hidden')}
63+
className={tcls('h-full','w-full', 'object-cover', 'dark:inline', 'hidden')}
6564
style={{
66-
aspectRatio: `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}`,
6765
objectPosition: `50% ${getTop(container, y, imgs.dark)}`,
6866
}}
6967
/>
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type { RevisionPageDocumentCover } from '@gitbook/api';
2+
3+
export const DEFAULT_COVER_HEIGHT = 240;
4+
export const MIN_COVER_HEIGHT = 10;
5+
export const MAX_COVER_HEIGHT = 700;
6+
7+
type CoverWithHeight = RevisionPageDocumentCover & { height?: number | null };
8+
9+
export function clampCoverHeight(value: number): number {
10+
return Math.min(MAX_COVER_HEIGHT, Math.max(MIN_COVER_HEIGHT, value));
11+
}
12+
13+
export function normalizeCoverHeight(height: number | null | undefined): number {
14+
if (typeof height !== 'number' || Number.isNaN(height)) {
15+
return DEFAULT_COVER_HEIGHT;
16+
}
17+
18+
return clampCoverHeight(height);
19+
}
20+
21+
export function getCoverHeight(cover: RevisionPageDocumentCover | null | undefined): number {
22+
if (!cover) {
23+
return 0;
24+
}
25+
26+
return normalizeCoverHeight((cover as CoverWithHeight).height);
27+
}
28+
29+
export function hasVisibleCover(cover: RevisionPageDocumentCover | null | undefined): boolean {
30+
return getCoverHeight(cover) > 0;
31+
}

‎packages/gitbook/src/components/SitePage/SitePage.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import React from 'react';
1111

1212
import { PageAside } from '@/components/PageAside';
1313
import { PageBody, PageCover } from '@/components/PageBody';
14+
import { hasVisibleCover } from '@/components/PageBody/coverHeight';
1415
import { getPagePath } from '@/lib/pages';
1516
import { isPageIndexable, isSiteIndexable } from '@/lib/seo';
1617

@@ -169,10 +170,9 @@ export async function getSitePageData(props: SitePageProps) {
169170
const { page, ancestors } = pageTarget;
170171

171172
const withTopHeader = customization.header.preset !== CustomizationHeaderPreset.None;
172-
const withFullPageCover = !!(
173-
page.cover &&
174-
page.layout.cover &&
175-
page.layout.coverSize === 'full'
173+
const visibleCover = hasVisibleCover(page.cover);
174+
const withFullPageCover = Boolean(
175+
visibleCover && page.layout.cover && page.layout.coverSize === 'full'
176176
);
177177
const withPageFeedback = customization.feedback.enabled;
178178

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /