-
Notifications
You must be signed in to change notification settings - Fork 4k
RND-6843: columns block #3257
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
RND-6843: columns block #3257
Changes from all commits
Commits
Show all changes
27 commits
Select commit
Hold shift + click to select a range
4219611
feat: add Columns block
BrettJephson 734fdab
update api version
BrettJephson 411c8ed
chore: format
BrettJephson 2040557
Merge branch 'main' into brett/RND-6843-columns-block
BrettJephson 5a10398
add columns block skeleton
BrettJephson 2f13cdd
Merge branch 'main' into brett/RND-6843-columns-block
BrettJephson e135899
Merge branch 'main' into brett/RND-6843-columns-block
BrettJephson 40969c0
feat: add Columns block
BrettJephson 2274ff7
update api version
BrettJephson 1871025
chore: format
BrettJephson 2e5ff8a
add columns block skeleton
BrettJephson ec56296
mobile
BrettJephson a27041b
wip width
BrettJephson 95466e8
Update @gitbook/api
emmerich 8a192e5
wip
BrettJephson 7c4071b
Merge branch 'brett/RND-6843-columns-block' of github.com:GitbookIO/g…
BrettJephson 677520f
Columns with width settings
BrettJephson df53ef6
chore: formatting
BrettJephson 5e15a4d
fix typescript
BrettJephson d03578c
Merge branch 'main' into brett/RND-6843-columns-block
BrettJephson c3cfbe6
chore: format
BrettJephson 21abc41
Merge remote-tracking branch 'origin/main' into brett/RND-6843-column…
emmerich a6e0f91
Revert bun.lock
emmerich 97bde38
Fix format
emmerich c7e2ad3
Merge branch 'main' into brett/RND-6843-columns-block
emmerich ac8c916
Comment
emmerich de4fea3
Default to full width
emmerich File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
"gitbook-v2": patch | ||
"gitbook": patch | ||
--- | ||
|
||
Adds Columns layout block to GBO |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
packages/gitbook/src/components/DocumentView/Columns/Columns.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import { type ClassValue, tcls } from '@/lib/tailwind'; | ||
import type { DocumentBlockColumns, Length } from '@gitbook/api'; | ||
import type { BlockProps } from '../Block'; | ||
import { Blocks } from '../Blocks'; | ||
|
||
export function Columns(props: BlockProps<DocumentBlockColumns>) { | ||
const { block, style, ancestorBlocks, document, context } = props; | ||
return ( | ||
<div className={tcls('flex flex-col gap-x-8 md:flex-row', style)}> | ||
{block.nodes.map((columnBlock) => { | ||
const width = columnBlock.data.width; | ||
const { className, style } = transformLengthToCSS(width); | ||
return ( | ||
<Column key={columnBlock.key} className={className} style={style}> | ||
<Blocks | ||
key={columnBlock.key} | ||
nodes={columnBlock.nodes} | ||
document={document} | ||
ancestorBlocks={[...ancestorBlocks, block, columnBlock]} | ||
context={context} | ||
blockStyle="flip-heading-hash" | ||
style="w-full space-y-4" | ||
/> | ||
</Column> | ||
); | ||
})} | ||
</div> | ||
); | ||
} | ||
|
||
export function Column(props: { | ||
children?: React.ReactNode; | ||
className?: ClassValue; | ||
style?: React.CSSProperties; | ||
}) { | ||
return ( | ||
<div className={tcls('flex-col', props.className)} style={props.style}> | ||
{props.children} | ||
</div> | ||
); | ||
} | ||
|
||
function transformLengthToCSS(length: Length | undefined) { | ||
if (!length) { | ||
return { className: ['md:w-full'] }; // default to full width if no length is specified | ||
} | ||
|
||
if (typeof length === 'number') { | ||
return { style: undefined }; // not implemented yet with non-percentage lengths | ||
} | ||
|
||
if (length.unit === '%') { | ||
return { | ||
className: [ | ||
'md:flex-shrink-0', | ||
COLUMN_WIDTHS[Math.round(length.value * 0.01 * (COLUMN_WIDTHS.length - 1))], | ||
], | ||
}; | ||
} | ||
|
||
return { style: undefined }; // not implemented yet with non-percentage lengths | ||
} | ||
|
||
// Tailwind CSS classes for column widths. | ||
// The index of the array corresponds to the percentage width of the column. | ||
const COLUMN_WIDTHS = [ | ||
'md:w-0', | ||
'md:w-1/12', | ||
'md:w-2/12', | ||
'md:w-3/12', | ||
'md:w-4/12', | ||
'md:w-5/12', | ||
'md:w-6/12', | ||
'md:w-7/12', | ||
'md:w-8/12', | ||
'md:w-9/12', | ||
'md:w-10/12', | ||
'md:w-11/12', | ||
'md:w-full', | ||
]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './Columns'; |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.