diff --git a/.changeset/serious-pumas-clap.md b/.changeset/serious-pumas-clap.md new file mode 100644 index 000000000..6cbb2ba56 --- /dev/null +++ b/.changeset/serious-pumas-clap.md @@ -0,0 +1,5 @@ +--- +'gitbook': patch +--- + +Support new coverDefinitionDark for cards & image type diff --git a/bun.lock b/bun.lock index 3c27da78d..4a7aba3a2 100644 --- a/bun.lock +++ b/bun.lock @@ -246,7 +246,7 @@ "react-dom": "^19.0.0", }, "catalog": { - "@gitbook/api": "^0.132.0", + "@gitbook/api": "^0.133.0", }, "packages": { "@ai-sdk/provider": ["@ai-sdk/provider@1.1.0", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-0M+qjp+clUD0R1E5eWQFhxEvWLNaOtGQRUaBn8CUABnSKredagq92hUS9VjOzGsTm37xLfpaxl97AVtbeOsHew=="], @@ -611,7 +611,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.132.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-1kuYIHiQIFzcSbKZ0JkzfSKujWFHyM4OAT3P0JENekBffwEinUMqblkJZNQmWA4QhBYi0QT8bJA6OCda4Xx0oA=="], + "@gitbook/api": ["@gitbook/api@0.133.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-Xi/A8NROQIj1haDA2XYr9b2+suUviyEVjplSslmwA2HyZnFNlkTaB1W0CwpVrZF8FZsfi3fZekQECOF34RLDDA=="], "@gitbook/cache-tags": ["@gitbook/cache-tags@workspace:packages/cache-tags"], diff --git a/package.json b/package.json index df2e60ef0..d415e3599 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "workspaces": { "packages": ["packages/*"], "catalog": { - "@gitbook/api": "^0.132.0" + "@gitbook/api": "^0.133.0" } }, "patchedDependencies": { diff --git a/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx b/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx index a78806037..378335336 100644 --- a/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx +++ b/packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx @@ -1,18 +1,16 @@ +import { LinkBox, LinkOverlay } from '@/components/primitives'; +import { Image } from '@/components/utils'; +import { type ResolvedContentRef, resolveContentRef } from '@/lib/references'; +import { tcls } from '@/lib/tailwind'; import { type ContentRef, type DocumentTableViewCards, SiteInsightsLinkPosition, } from '@gitbook/api'; - -import { LinkBox, LinkOverlay } from '@/components/primitives'; -import { Image } from '@/components/utils'; -import { resolveContentRef } from '@/lib/references'; -import { tcls } from '@/lib/tailwind'; - import { RecordColumnValue } from './RecordColumnValue'; import type { TableRecordKV, TableViewProps } from './Table'; import { RecordCardStyles } from './styles'; -import { getRecordValue } from './utils'; +import { getRecordCardCovers } from './utils'; export async function RecordCard( props: TableViewProps & { @@ -21,25 +19,21 @@ export async function RecordCard( ) { const { view, record, context, block, isOffscreen } = props; - const coverFile = view.coverDefinition - ? getRecordValue(record[1], view.coverDefinition)?.[0] - : null; + const { dark, light } = getRecordCardCovers(record[1], view); const targetRef = view.targetDefinition ? (record[1].values[view.targetDefinition] as ContentRef) : null; - const [cover, target] = await Promise.all([ - coverFile && context.contentContext - ? resolveContentRef({ kind: 'file', file: coverFile }, context.contentContext) - : null, + const [lightCover, darkCover, target] = await Promise.all([ + light && context.contentContext ? resolveContentRef(light, context.contentContext) : null, + dark && context.contentContext ? resolveContentRef(dark, context.contentContext) : null, targetRef && context.contentContext ? resolveContentRef(targetRef, context.contentContext) : null, ]); - const coverIsSquareOrPortrait = - cover?.file?.dimensions && - cover.file?.dimensions?.width / cover.file?.dimensions?.height <= 1; + const darkCoverIsSquareOrPortrait = isSquareOrPortrait(darkCover); + const lightCoverIsSquareOrPortrait = isSquareOrPortrait(lightCover); const body = (
- {cover ? ( + {lightCover ? ( Cover{body}
; } + +/** + * Check if a file is square or portrait. + */ +function isSquareOrPortrait(contentRef: ResolvedContentRef | null) { + const file = contentRef?.file; + + if (!file || !file.dimensions) { + return false; + } + + return file.dimensions?.width / file.dimensions?.height <= 1; +} diff --git a/packages/gitbook/src/components/DocumentView/Table/RecordColumnValue.tsx b/packages/gitbook/src/components/DocumentView/Table/RecordColumnValue.tsx index f4e31052e..9dc1c7d9f 100644 --- a/packages/gitbook/src/components/DocumentView/Table/RecordColumnValue.tsx +++ b/packages/gitbook/src/components/DocumentView/Table/RecordColumnValue.tsx @@ -174,7 +174,6 @@ export async function RecordColumnValue( ( ); } + case 'image': { + const image = context.contentContext + ? await resolveContentRef(value as ContentRef, context.contentContext) + : null; + + if (!image) { + return null; + } + + return ( + + + {image.text} + {image.text} + + + ); + } default: assertNever(definition); } diff --git a/packages/gitbook/src/components/DocumentView/Table/utils.ts b/packages/gitbook/src/components/DocumentView/Table/utils.ts index 1fc95b357..53f6d5a12 100644 --- a/packages/gitbook/src/components/DocumentView/Table/utils.ts +++ b/packages/gitbook/src/components/DocumentView/Table/utils.ts @@ -1,4 +1,11 @@ -import type { ContentRef, DocumentTableDefinition, DocumentTableRecord } from '@gitbook/api'; +import type { + ContentRef, + ContentRefFile, + ContentRefURL, + DocumentTableDefinition, + DocumentTableRecord, + DocumentTableViewCards, +} from '@gitbook/api'; import assertNever from 'assert-never'; /** @@ -12,6 +19,57 @@ export function getRecordValue { + if (!view.coverDefinition) { + return null; + } + + const value = getRecordValue(record, view.coverDefinition) as + | ContentRefFile + | ContentRefURL + | string[]; + + if (Array.isArray(value)) { + if (value.length === 0) { + return null; + } + + if (typeof value[0] === 'string') { + return { kind: 'file', file: value[0] }; + } + } + + return value as ContentRefFile | ContentRefURL; + })(), + dark: (() => { + if (!view.coverDefinitionDark) { + return null; + } + + const value = getRecordValue(record, view.coverDefinitionDark) as + | ContentRefFile + | ContentRefURL; + + if (!value) { + return null; + } + + return value; + })(), + }; +} + /** * Get the text alignment for a column. */