From 07ad0d3909246d64d51c679fb3472d9ddea8620a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samy=20Pess=C3=A9?= Date: Wed, 1 Nov 2023 13:41:14 -0400 Subject: [PATCH] Try more blocks --- README.md | 46 +++++++++++++----- bun.lockb | Bin 178455 -> 178535 bytes package.json | 1 + src/components/DocumentView/Block.tsx | 23 +++++++-- src/components/DocumentView/Blocks.tsx | 7 ++- src/components/DocumentView/Divider.tsx | 9 ++++ src/components/DocumentView/DocumentView.tsx | 10 +++- src/components/DocumentView/Drawing.tsx | 9 ++++ .../DocumentView/Expandable/Expandable.tsx | 9 +++- src/components/DocumentView/Hint.tsx | 9 +++- src/components/DocumentView/ListItem.tsx | 31 +++++++++--- src/components/DocumentView/ListOrdered.tsx | 3 +- src/components/DocumentView/ListTasks.tsx | 17 +++++++ src/components/DocumentView/ListUnordered.tsx | 3 +- src/components/DocumentView/Quote.tsx | 3 +- .../DocumentView/Table/RecordColumnValue.tsx | 1 + src/components/DocumentView/Tabs/Tabs.tsx | 12 +++-- 17 files changed, 156 insertions(+), 37 deletions(-) create mode 100644 src/components/DocumentView/Divider.tsx create mode 100644 src/components/DocumentView/Drawing.tsx create mode 100644 src/components/DocumentView/ListTasks.tsx diff --git a/README.md b/README.md index 6b7d51ee7..1fb611c64 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,39 @@ # GitBook -## TODOs +Next.js application to render GitBook published content. -- OG cover image - - [ ] Redirect to the customization one if any -- Favicon - - [ ] Redirect to the customization one if any - - [ ] Render one -- Blocks - - [ ] Code block syntax highlighting -- Theme - - [ ] Toggler -- Page feedback -- Edit on GitHub -- Header links +## Development + +#### Installation + +Clone the repository and use [Bun](https://bun.sh/) to install dependencies and run the local development server. + +``` +bun install +``` + +#### Configuration + +To develop and test a GitBook space locally, first create a [GitBook API token](https://app.gitbook.com/account/developer) and put it in a `.env.local` file: + +``` +GITBOOK_TOKEN=gb_api_abc +``` + +#### Start the local server + +Run the Next.js development server. + +``` +bun dev +``` + +Then open the space in your web browser: `http://localhost:3000//`. + +#### Other commands + +- `bun format`: format the code +- `bun lint`: lint the code ## Differences diff --git a/bun.lockb b/bun.lockb index 04d173326971cdd166e81b2a2ab50cb1f5da9fe3..63783f752bb29453a4a230d7b29e5a8b1f6c3c19 100755 GIT binary patch delta 9650 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 extends DocumentContextProps { block: Block; + ancestorBlocks: AncestorBlock[]; style?: ClassValue; } @@ -77,6 +88,8 @@ export function Block(props: BlockProps) { return ; case 'list-unordered': return ; + case 'list-tasks': + return ; case 'list-item': return ; case 'code': @@ -101,7 +114,11 @@ export function Block(props: BlockProps) { return ; case 'file': return ; + case 'divider': + return ; + case 'drawing': + return ; default: - return
Unsupported block {block.type}
; + assertNever(block); } } diff --git a/src/components/DocumentView/Blocks.tsx b/src/components/DocumentView/Blocks.tsx index a37457e5b..de9064908 100644 --- a/src/components/DocumentView/Blocks.tsx +++ b/src/components/DocumentView/Blocks.tsx @@ -1,12 +1,15 @@ -import { Block } from './Block'; +import { AncestorBlock, Block, SupportedBlock } from './Block'; import { DocumentContextProps } from './DocumentView'; import { tcls, ClassValue } from '@/lib/tailwind'; -export function Blocks( +export function Blocks( props: DocumentContextProps & { /** Blocks to render */ nodes: T[]; + /** Ancestors of the blocks */ + ancestorBlocks: AncestorBlock[]; + /** HTML tag to use */ tag?: Tag; diff --git a/src/components/DocumentView/Divider.tsx b/src/components/DocumentView/Divider.tsx new file mode 100644 index 000000000..94e85d430 --- /dev/null +++ b/src/components/DocumentView/Divider.tsx @@ -0,0 +1,9 @@ +import { DocumentBlockDivider } from '@gitbook/api'; +import { BlockProps } from './Block'; +import { tcls } from '@/lib/tailwind'; + +export function Divider(props: BlockProps) { + const { style } = props; + + return
; +} diff --git a/src/components/DocumentView/DocumentView.tsx b/src/components/DocumentView/DocumentView.tsx index 835f24dd8..334c30372 100644 --- a/src/components/DocumentView/DocumentView.tsx +++ b/src/components/DocumentView/DocumentView.tsx @@ -18,5 +18,13 @@ export function DocumentView( ) { const { document, style, ...context } = props; - return ; + return ( + + ); } diff --git a/src/components/DocumentView/Drawing.tsx b/src/components/DocumentView/Drawing.tsx new file mode 100644 index 000000000..a77815e30 --- /dev/null +++ b/src/components/DocumentView/Drawing.tsx @@ -0,0 +1,9 @@ +import { DocumentBlockDrawing } from '@gitbook/api'; +import { BlockProps } from './Block'; +import { tcls } from '@/lib/tailwind'; + +export function Drawing(props: BlockProps) { + const { style } = props; + + return
TODO
; +} diff --git a/src/components/DocumentView/Expandable/Expandable.tsx b/src/components/DocumentView/Expandable/Expandable.tsx index d7a67b752..29e4dff55 100644 --- a/src/components/DocumentView/Expandable/Expandable.tsx +++ b/src/components/DocumentView/Expandable/Expandable.tsx @@ -6,7 +6,7 @@ import { DocumentBlockExpandable } from '@gitbook/api'; import { Inlines } from '../Inlines'; export function Expandable(props: BlockProps) { - const { block, style, context } = props; + const { block, style, ancestorBlocks, context } = props; const title = getNodeFragmentByType(block, 'expandable-title'); const body = getNodeFragmentByType(block, 'expandable-body'); @@ -16,7 +16,12 @@ export function Expandable(props: BlockProps) { - + ); } diff --git a/src/components/DocumentView/Hint.tsx b/src/components/DocumentView/Hint.tsx index c08001fcb..80d9b18ee 100644 --- a/src/components/DocumentView/Hint.tsx +++ b/src/components/DocumentView/Hint.tsx @@ -9,7 +9,7 @@ import IconCheckInCircle from '@geist-ui/icons/checkInCircle'; import { getBlockTextStyle } from './spacing'; export function Hint(props: BlockProps) { - const { block, style, ...contextProps } = props; + const { block, style, ancestorBlocks, ...contextProps } = props; const hintStyle = HINT_STYLES[block.data.style]; const firstLine = getBlockTextStyle(block.nodes[0]); @@ -40,7 +40,12 @@ export function Hint(props: BlockProps) { > - + ); } diff --git a/src/components/DocumentView/ListItem.tsx b/src/components/DocumentView/ListItem.tsx index 5659b39ff..4ce8e8f9f 100644 --- a/src/components/DocumentView/ListItem.tsx +++ b/src/components/DocumentView/ListItem.tsx @@ -1,18 +1,33 @@ import { tcls } from '@/lib/tailwind'; import { BlockProps } from './Block'; import { Blocks } from './Blocks'; -import { DocumentBlockListItem } from '@gitbook/api'; +import { DocumentBlockListItem, DocumentBlockTaskListItem } from '@gitbook/api'; -export function ListItem(props: BlockProps) { - const { block, ...contextProps } = props; +export function ListItem(props: BlockProps) { + const { block, ancestorBlocks, ...contextProps } = props; + + const isTaskList = ancestorBlocks[ancestorBlocks.length - 1]?.type === 'list-tasks'; return (
  • - + {isTaskList ? ( +
    + + +
    + ) : ( + + )}
    • ); } diff --git a/src/components/DocumentView/ListOrdered.tsx b/src/components/DocumentView/ListOrdered.tsx index c8690402b..8eb5254b6 100644 --- a/src/components/DocumentView/ListOrdered.tsx +++ b/src/components/DocumentView/ListOrdered.tsx @@ -3,13 +3,14 @@ import { BlockProps } from './Block'; import { Blocks } from './Blocks'; export function ListOrdered(props: BlockProps) { - const { block, style, ...contextProps } = props; + const { block, style, ancestorBlocks, ...contextProps } = props; return ( ); diff --git a/src/components/DocumentView/ListTasks.tsx b/src/components/DocumentView/ListTasks.tsx new file mode 100644 index 000000000..5cfe2a36d --- /dev/null +++ b/src/components/DocumentView/ListTasks.tsx @@ -0,0 +1,17 @@ +import { DocumentBlockListTasks, DocumentBlockListUnordered } from '@gitbook/api'; +import { BlockProps } from './Block'; +import { Blocks } from './Blocks'; + +export function ListTasks(props: BlockProps) { + const { block, style, ancestorBlocks, ...contextProps } = props; + + return ( + + ); +} diff --git a/src/components/DocumentView/ListUnordered.tsx b/src/components/DocumentView/ListUnordered.tsx index 711bcb8ff..5d60cac9a 100644 --- a/src/components/DocumentView/ListUnordered.tsx +++ b/src/components/DocumentView/ListUnordered.tsx @@ -3,13 +3,14 @@ import { BlockProps } from './Block'; import { Blocks } from './Blocks'; export function ListUnordered(props: BlockProps) { - const { block, style, ...contextProps } = props; + const { block, style, ancestorBlocks, ...contextProps } = props; return ( ); diff --git a/src/components/DocumentView/Quote.tsx b/src/components/DocumentView/Quote.tsx index b7e6130c3..7e0e7f91f 100644 --- a/src/components/DocumentView/Quote.tsx +++ b/src/components/DocumentView/Quote.tsx @@ -3,13 +3,14 @@ import { Blocks } from './Blocks'; import { DocumentBlockQuote } from '@gitbook/api'; export function Quote(props: BlockProps) { - const { block, style, ...contextProps } = props; + const { block, style, ancestorBlocks, ...contextProps } = props; return ( ); diff --git a/src/components/DocumentView/Table/RecordColumnValue.tsx b/src/components/DocumentView/Table/RecordColumnValue.tsx index e3265867c..2deeacfff 100644 --- a/src/components/DocumentView/Table/RecordColumnValue.tsx +++ b/src/components/DocumentView/Table/RecordColumnValue.tsx @@ -34,6 +34,7 @@ export async function RecordColumnValue( return ( ) { - const { block, style, context } = props; + const { block, ancestorBlocks, style, context } = props; return ( ({ id: tab.key!, - title: tab.data.title, - children: , + title: tab.data.title ?? '', + children: ( + + ), }))} style={style} />