From 7b50d8f2157b11dd8827264a575c8362ce3d8fd5 Mon Sep 17 00:00:00 2001 From: Claire Chabas Date: Tue, 30 Sep 2025 13:29:17 +0200 Subject: [PATCH 1/5] Support image frame --- .../src/components/DocumentView/Caption.tsx | 12 ++- .../src/components/DocumentView/Images.tsx | 95 +++++++++++++------ 2 files changed, 75 insertions(+), 32 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx index 73c4b546d7..a3e60a23a4 100644 --- a/packages/gitbook/src/components/DocumentView/Caption.tsx +++ b/packages/gitbook/src/components/DocumentView/Caption.tsx @@ -24,6 +24,7 @@ export function Caption( wrapperStyle?: ClassValue; block: DocumentBlockImage | DocumentBlockDrawing | DocumentBlockEmbed | DocumentBlockFile; withBorder?: boolean; + withFrame?: boolean; } & DocumentContextProps ) { const { @@ -33,6 +34,7 @@ export function Caption( context, fit = false, withBorder = false, + withFrame = false, wrapperStyle = [ 'relative', 'overflow-hidden', @@ -44,6 +46,7 @@ export function Caption( withBorder ? 'rounded-corners:rounded-sm circular-corners:rounded-2xl after:border-tint-subtle after:border after:rounded circular-corners:after:rounded-2xl rounded-corners:after:rounded-sm dark:after:mix-blend-plus-lighter after:pointer-events-none' : null, + withFrame && 'p-2', ], style, } = props; @@ -62,7 +65,14 @@ export function Caption( return (
{children}
-
+
) { const { document, block, style, context, isEstimatedOffscreen } = props; - const isMultipleImages = block.nodes.length > 1; - const { align = 'center' } = block.data; + const hasMultipleImages = block.nodes.length > 1; + const { align = 'center', withFrame } = block.data; return (
) { align === 'center' && 'justify-center', align === 'right' && 'justify-end', align === 'left' && 'justify-start', - isMultipleImages && ['grid', 'grid-flow-col'] + hasMultipleImages && ['grid', 'grid-flow-col'], + withFrame && ['rounded-2xl', 'border', 'border-neutral'] )} > {block.nodes.map((node: any, _i: number) => ( @@ -36,6 +37,7 @@ export function Images(props: BlockProps) { siblings={block.nodes.length} context={context} isEstimatedOffscreen={isEstimatedOffscreen} + withFrame={withFrame} /> ))}
@@ -62,8 +64,9 @@ async function ImageBlock(props: { context: DocumentContext; siblings: number; isEstimatedOffscreen: boolean; + withFrame?: boolean; }) { - const { block, context, isEstimatedOffscreen } = props; + const { block, context, isEstimatedOffscreen, withFrame } = props; const [src, darkSrc] = await Promise.all([ context.contentContext ? resolveContentRef(block.data.ref, context.contentContext) : null, @@ -77,33 +80,63 @@ async function ImageBlock(props: { } return ( - - {block.data.alt - +
+ {/* Frame grid */} + {withFrame && ( +
+ )} + + {/* Shadow overlay */} + {withFrame && ( +
+ )} + + + {block.data.alt + +
); } From 6a10fbd7374a9e9f7053143a22b222592ac908d6 Mon Sep 17 00:00:00 2001 From: Claire Chabas Date: Tue, 30 Sep 2025 15:20:38 +0200 Subject: [PATCH 2/5] Update styles --- .../src/components/DocumentView/Caption.tsx | 2 +- .../src/components/DocumentView/Images.tsx | 19 ++++++++++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx index a3e60a23a4..92e8f45c46 100644 --- a/packages/gitbook/src/components/DocumentView/Caption.tsx +++ b/packages/gitbook/src/components/DocumentView/Caption.tsx @@ -70,7 +70,7 @@ export function Caption( 'text-xs', 'text-center', 'text-tint', - withFrame ? 'mt-0.5 mb-2.5' : 'mt-2' + withFrame ? 'mt-1 mb-2.5' : 'mt-2' )} > ) { align === 'right' && 'justify-end', align === 'left' && 'justify-start', hasMultipleImages && ['grid', 'grid-flow-col'], - withFrame && ['rounded-2xl', 'border', 'border-neutral'] + withFrame && [ + 'rounded-2xl', + 'border', + 'border-neutral', + 'relative', + 'overflow-hidden', + ] )} > {block.nodes.map((node: any, _i: number) => ( @@ -85,13 +91,16 @@ async function ImageBlock(props: { {withFrame && (
@@ -102,8 +111,8 @@ async function ImageBlock(props: {
)} From 209b646537aa7bc3e2188fd7efb692c100e2a2cd Mon Sep 17 00:00:00 2001 From: Claire Chabas Date: Wed, 1 Oct 2025 17:52:34 +0200 Subject: [PATCH 3/5] update styles --- .../gitbook/src/components/DocumentView/Caption.tsx | 2 +- .../gitbook/src/components/DocumentView/Images.tsx | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx index 92e8f45c46..4f2f95265c 100644 --- a/packages/gitbook/src/components/DocumentView/Caption.tsx +++ b/packages/gitbook/src/components/DocumentView/Caption.tsx @@ -70,7 +70,7 @@ export function Caption( 'text-xs', 'text-center', 'text-tint', - withFrame ? 'mt-1 mb-2.5' : 'mt-2' + withFrame ? 'mt-0.5 mb-2.5' : 'mt-2.5' )} > ) { withFrame && [ 'rounded-2xl', 'border', - 'border-neutral', + 'border-[rgb(234,235,238)]', + 'dark:border-[rgb(45,50,58)]', 'relative', 'overflow-hidden', ] @@ -96,8 +97,8 @@ async function ImageBlock(props: { '-left-0.5', 'right-px', 'bottom-px', - 'opacity-50', - 'dark:opacity-20', + 'opacity-40', + 'dark:opacity-[0.1]', 'bg-[length:24px_24px,24px_24px]', 'bg-[linear-gradient(to_right,_rgb(234,235,238)_1px,_transparent_1px),linear-gradient(to_bottom,_rgb(234,235,238)_1px,_transparent_1px)]', 'dark:bg-[linear-gradient(to_right,_rgb(122,128,139)_1px,_transparent_1px),linear-gradient(to_bottom,_rgb(122,128,139)_1px,_transparent_1px)]', @@ -111,8 +112,8 @@ async function ImageBlock(props: {
)} From 95c0eae656ecf1d23c27aa0848cbf7331bc796ab Mon Sep 17 00:00:00 2001 From: Claire Chabas Date: Wed, 1 Oct 2025 18:06:24 +0200 Subject: [PATCH 4/5] Update gitbook api --- bun.lock | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/bun.lock b/bun.lock index 8006498aec..666e898b21 100644 --- a/bun.lock +++ b/bun.lock @@ -304,7 +304,7 @@ "react-dom": "^19.0.0", }, "catalog": { - "@gitbook/api": "0.143.1", + "@gitbook/api": "0.143.2", "bidc": "^0.0.2", }, "packages": { @@ -676,7 +676,7 @@ "@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@6.6.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="], - "@gitbook/api": ["@gitbook/api@0.143.1", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-5k7PnMe9W8EhmSejqayCbAIIJDGB4C2m+o6+dD+asmlv+6jE/LqoxuAvbP8o+kG83tMnbsr5I5d73B/9cAYbag=="], + "@gitbook/api": ["@gitbook/api@0.143.2", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-ZIQwIgX+artl0o20ftnzeJyM9icwQ6pFeM55AG/lEdeFbMuUGxTfSnZ90+8Aou8l/3ELR3/tOkU2SAvyKc+ATw=="], "@gitbook/browser-types": ["@gitbook/browser-types@workspace:packages/browser-types"], diff --git a/package.json b/package.json index 360eb24ccf..36f4634955 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "workspaces": { "packages": ["packages/*"], "catalog": { - "@gitbook/api": "0.143.1", + "@gitbook/api": "0.143.2", "bidc": "^0.0.2" } }, From 8b891e7ac392ee8a154f45c13b8f7aab2bd2c68b Mon Sep 17 00:00:00 2001 From: Claire Chabas Date: Thu, 2 Oct 2025 09:54:05 +0200 Subject: [PATCH 5/5] update caption spacing --- packages/gitbook/src/components/DocumentView/Caption.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx index 4f2f95265c..a3e60a23a4 100644 --- a/packages/gitbook/src/components/DocumentView/Caption.tsx +++ b/packages/gitbook/src/components/DocumentView/Caption.tsx @@ -70,7 +70,7 @@ export function Caption( 'text-xs', 'text-center', 'text-tint', - withFrame ? 'mt-0.5 mb-2.5' : 'mt-2.5' + withFrame ? 'mt-0.5 mb-2.5' : 'mt-2' )} >