From b8e7822767d476dc190c0c514682af5f021b9e0d Mon Sep 17 00:00:00 2001 From: Tobias Lins Date: Mon, 29 Jun 2020 11:49:01 +0200 Subject: [PATCH 1/3] Add support for collections We currently just support tables + basic support for gallery view --- src/block.tsx | 78 +++++++++++++++++++++++++++++++++++++++++++++ src/styles.css | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/types.ts | 36 ++++++++++++++++++++- 3 files changed, 198 insertions(+), 1 deletion(-) diff --git a/src/block.tsx b/src/block.tsx index 7d5b643..5f83906 100644 --- a/src/block.tsx +++ b/src/block.tsx @@ -267,6 +267,84 @@ export const Block: React.FC = props => { {renderChildText(blockValue.properties.title)} ); + case "collection_view": + if (!block) return null; + const collectionView = block?.collection?.types[0]; + + return ( +
+

+ {renderChildText(block.collection?.title!)} +

+ {collectionView?.type === "table" && ( +
+ + + + {collectionView.format?.table_properties + ?.filter(p => p.visible) + .map(gp => ( + + ))} + + + + {block?.collection?.data.map(row => ( + + {collectionView.format?.table_properties + ?.filter(p => p.visible) + .map(gp => ( + + ))} + + ))} + +
+ {block.collection?.schema[gp.property].name} +
+ { + renderChildText( + row[block.collection?.schema[gp.property].name!] + )! + } +
+
+ )} + {collectionView?.type === "gallery" && ( +
+ {block.collection?.data.map((row, i) => ( +
+
+ {collectionView.format?.gallery_properties + ?.filter(p => p.visible) + .map((gp, idx) => ( +

+ {getTextContent( + row[block.collection?.schema[gp.property].name!] + )} +

+ ))} +
+
+ ))} +
+ )} +
+ ); case "callout": return (
div { margin-left: 1.1em; } + +.notion-table, +.notion-th, +.notion-td { + border: 1px solid rgba(55, 53, 47, 0.09); + border-collapse: collapse; +} + +.notion-table { + border-left: none; + border-right: none; + border-spacing: 0px; + white-space: nowrap; +} + +.notion-th, +.notion-td { + font-weight: normal; + padding: 0.25em 0.5em; + line-height: 1.5; + min-height: 1.5em; + text-align: left; + font-size: 14px; +} + +.notion-td.notion-bold { + font-weight: 500; +} + +.notion-th { + color: rgba(55, 53, 47, 0.6); + font-size: 14px; +} + +.notion-td:first-child, +.notion-th:first-child { + border-left: 0; +} + +.notion-td:last-child, +.notion-th:last-child { + border-right: 0; +} + +.notion-gallery { + display: grid; + position: relative; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + grid-auto-rows: 1fr; + gap: 16px; + border-top: 1px solid rgba(55, 53, 47, 0.16); + padding-top: 16px; + padding-bottom: 4px; +} +.notion-gallery-card { + display: block; + color: inherit; + text-decoration: none; + box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, + rgba(15, 15, 15, 0.1) 0px 2px 4px; + border-radius: 3px; + background: white; + overflow: hidden; + transition: background 100ms ease-out 0s; + position: static; + height: 100%; +} + +.notion-gallery-content { + padding: 8px 10px 6px; + font-size: 12px; + white-space: nowrap; +} + +.notion-gallery-data.is-first { + white-space: nowrap; + word-break: break-word; + caret-color: rgb(55, 53, 47); + font-size: 14px; + line-height: 1.5; + min-height: 21px; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/src/types.ts b/src/types.ts index e82f0ba..b3e1636 100644 --- a/src/types.ts +++ b/src/types.ts @@ -223,6 +223,33 @@ interface CodeValueType extends BaseValueType { language: DecorationType[]; }; } +interface CollectionValueType extends ContentValueType { + type: "collection_view"; +} + +interface TableGalleryType extends BaseValueType { + type: "gallery"; + format: { + gallery_cover: { + type: "page_cover"; + }; + gallery_cover_aspect: "cover"; + gallery_properties: Array<{ visible: boolean; property: string }>; + }; +} +interface TableCollectionType extends BaseValueType { + type: "table"; + format: { + table_wrap: boolean; + table_properties: Array<{ + visible: boolean; + property: string; + width: number; + }>; + }; +} + +export type CollectionViewType = TableGalleryType | TableCollectionType; /** * The different block values a block can have. @@ -246,11 +273,18 @@ export type BlockValueType = | EmbedValueType | CalloutValueType | BookmarkValueType - | ToggleValueType; + | ToggleValueType + | CollectionValueType; export interface BlockType { role: string; value: BlockValueType; + collection?: { + title: DecorationType[]; + types: CollectionViewType[]; + data: Array<{ [key: string]: DecorationType[] }>; + schema: { [key: string]: { name: string; type: string } }; + }; } export interface NotionUserType { From 457ec8ad23b08d172bb5d7f39fad16494b59e372 Mon Sep 17 00:00:00 2001 From: Tobias Lins Date: Wed, 1 Jul 2020 15:24:37 +0200 Subject: [PATCH 2/3] Minor styling fixes --- package.json | 2 +- src/styles.css | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index 7671f5d..bbb78ac 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.6.1", + "version": "0.7.1", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/src/styles.css b/src/styles.css index bc3150a..0d6a120 100644 --- a/src/styles.css +++ b/src/styles.css @@ -121,9 +121,6 @@ font-size: 1.875em; margin-top: 1.4em; } -.notion-h1:first-of-type { - margin-top: 0; -} .notion-h2 { font-size: 1.5em; margin-top: 1.1em; From 589491a3b2b637020d7a395663763e5009d7b045 Mon Sep 17 00:00:00 2001 From: Tobias Lins Date: Thu, 2 Jul 2020 12:10:12 +0200 Subject: [PATCH 3/3] Fix code blocks #15 Available in beta --- package.json | 2 +- src/components/code.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index bbb78ac..0563caf 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.7.1", + "version": "0.7.2", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/src/components/code.tsx b/src/components/code.tsx index 878757d..8504514 100644 --- a/src/components/code.tsx +++ b/src/components/code.tsx @@ -9,10 +9,12 @@ const Code: React.FC<{ code: string; language: string }> = ({ const prismLanguage = languages[language.toLowerCase()] || languages.javascript; + const langClass = `language-${language.toLowerCase()}`; + return ( - 
+