From 7003cc49b6b01ec5907503f20bdcd15d16c546f8 Mon Sep 17 00:00:00 2001 From: Angelo Abdoelsamath Date: Tue, 21 Apr 2020 16:04:12 +0200 Subject: [PATCH 1/6] Added bookmark block --- src/block.tsx | 33 ++++++++++++++++ src/styles.css | 103 +++++++++++++++++++++++++++++++++++++++++++++++++ src/types.ts | 16 +++++++- 3 files changed, 151 insertions(+), 1 deletion(-) diff --git a/src/block.tsx b/src/block.tsx index fb25a67..f899dbe 100644 --- a/src/block.tsx +++ b/src/block.tsx @@ -179,6 +179,39 @@ export const Block: React.FC = props => { ); + case "bookmark": + return ( +
+ +
+
+
+ {renderChildText(blockValue.properties.title)} +
+
+ {renderChildText(blockValue.properties.description)} +
+
+ +
{renderChildText(blockValue.properties.link)}
+
+
+
+
+
+ +
+
+
+
+ +
+ ); default: if (process.env.NODE_ENV !== "production") { console.log("Unsupported type " + block?.value?.type); diff --git a/src/styles.css b/src/styles.css index 25feb48..a4f9eda 100644 --- a/src/styles.css +++ b/src/styles.css @@ -242,7 +242,110 @@ h3 { display: flex; } +.notion-bookmark { + display: block; + color: inherit; + text-decoration: none; + flex-grow: 1; + min-width: 0px; +} + +.notion-bookmark-inner { + user-select: none; + transition: background 120ms ease-in 0s; + cursor: pointer; + width: 100%; + display: flex; + flex-wrap: wrap-reverse; + align-items: stretch; + text-align: left; + overflow: hidden; + border: 1px solid rgba(55, 53, 47, 0.16); + border-radius: 3px; + position: relative; + color: inherit; + fill: inherit; +} + +.notion-bookmark-inner > div:first-child { + flex: 4 1 180px; + padding: 12px 14px 14px; + overflow: hidden; + text-align: left; +} + +.notion-bookmark-title { + font-size: 14px; + line-height: 20px; + color: rgb(55, 53, 47); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-height: 24px; + margin-bottom: 2px; +} + +.notion-bookmark-description { + font-size: 12px; + line-height: 16px; + color: rgba(55, 53, 47, 0.6); + height: 32px; + overflow: hidden; +} + +.notion-bookmark-link { + display: flex; + margin-top: 6px; +} + +.notion-bookmark-link > img { + width: 16px; + height: 16px; + min-width: 16px; + margin-right: 6px; +} + +.notion-bookmark-link > div { + font-size: 12px; + line-height: 16px; + color: rgb(55, 53, 47); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.notion-bookmark-inner > div:last-child { + flex: 1 1 180px; + display: block; + position: relative; +} + +.notion-bookmark-inner > div:last-child > div { + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; +} + +.notion-bookmark-inner > div:last-child > div > div { + width: 100%; + height: 100%; +} + +.notion-bookmark-inner > div:last-child img { + display: block; + object-fit: cover; + border-radius: 1px; + width: 100%; + height: 100%; +} + @media (max-width: 640px) { + .notion-bookmark-inner > div:last-child { + display: none; + } + .notion-row { flex-direction: column; } diff --git a/src/types.ts b/src/types.ts index 4dfd5a8..0b1b7fe 100644 --- a/src/types.ts +++ b/src/types.ts @@ -106,6 +106,19 @@ export interface BaseTextValueType extends BaseValueType { }; } +interface BookmarkValueType extends BaseValueType { + type: "bookmark"; + properties: { + link: DecorationType[]; + title: DecorationType[]; + description: DecorationType[]; + }; + format: { + bookmark_icon: string; + bookmark_cover: string; + }; +} + interface TextValueType extends BaseTextValueType { type: "text"; } @@ -223,7 +236,8 @@ export type BlockValueType = | ImageValueType | VideoValueType | EmbedValueType - | CalloutValueType; + | CalloutValueType + | BookmarkValueType; export interface BlockType { role: string; From dfcc34fcc95d72fa33b0e163ffa0590affcc3f18 Mon Sep 17 00:00:00 2001 From: Angelo Abdoelsamath Date: Thu, 23 Apr 2020 11:07:16 +0200 Subject: [PATCH 2/6] Removed inner div --- src/block.tsx | 4 +--- src/styles.css | 5 ----- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/src/block.tsx b/src/block.tsx index f899dbe..417e326 100644 --- a/src/block.tsx +++ b/src/block.tsx @@ -203,9 +203,7 @@ export const Block: React.FC = props => {
-
- -
+
diff --git a/src/styles.css b/src/styles.css index a4f9eda..b6ebac9 100644 --- a/src/styles.css +++ b/src/styles.css @@ -328,11 +328,6 @@ h3 { bottom: 0px; } -.notion-bookmark-inner > div:last-child > div > div { - width: 100%; - height: 100%; -} - .notion-bookmark-inner > div:last-child img { display: block; object-fit: cover; From 353dcffa42758c5ae36244db555f22c6de7900d5 Mon Sep 17 00:00:00 2001 From: Angelo Abdoelsamath Date: Thu, 23 Apr 2020 11:10:26 +0200 Subject: [PATCH 3/6] removed another inner div --- src/block.tsx | 4 +--- src/styles.css | 13 +++++-------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/block.tsx b/src/block.tsx index 417e326..306e42e 100644 --- a/src/block.tsx +++ b/src/block.tsx @@ -202,9 +202,7 @@ export const Block: React.FC = props => {
-
- -
+
diff --git a/src/styles.css b/src/styles.css index b6ebac9..fda7dad 100644 --- a/src/styles.css +++ b/src/styles.css @@ -320,20 +320,17 @@ h3 { position: relative; } -.notion-bookmark-inner > div:last-child > div { - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; -} - .notion-bookmark-inner > div:last-child img { display: block; object-fit: cover; border-radius: 1px; width: 100%; height: 100%; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; } @media (max-width: 640px) { From ffeb77de16cc77b08e2a3a6df9d00a88457dee21 Mon Sep 17 00:00:00 2001 From: Angelo Abdoelsamath Date: Thu, 23 Apr 2020 11:30:03 +0200 Subject: [PATCH 4/6] Minimized css and html --- src/block.tsx | 26 ++++++++++++-------------- src/styles.css | 41 +++++++++-------------------------------- 2 files changed, 21 insertions(+), 46 deletions(-) diff --git a/src/block.tsx b/src/block.tsx index 306e42e..906c6d0 100644 --- a/src/block.tsx +++ b/src/block.tsx @@ -188,22 +188,20 @@ export const Block: React.FC = props => { className="notion-bookmark" href={blockValue.properties.link[0][0]} > -
-
-
- {renderChildText(blockValue.properties.title)} -
-
- {renderChildText(blockValue.properties.description)} -
-
- -
{renderChildText(blockValue.properties.link)}
-
+
+
+ {renderChildText(blockValue.properties.title)}
-
- +
+ {renderChildText(blockValue.properties.description)}
+
+ +
{renderChildText(blockValue.properties.link)}
+
+
+
+
diff --git a/src/styles.css b/src/styles.css index fda7dad..66f9f1d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -243,41 +243,25 @@ h3 { } .notion-bookmark { - display: block; - color: inherit; text-decoration: none; - flex-grow: 1; - min-width: 0px; -} - -.notion-bookmark-inner { - user-select: none; - transition: background 120ms ease-in 0s; - cursor: pointer; - width: 100%; - display: flex; - flex-wrap: wrap-reverse; - align-items: stretch; - text-align: left; - overflow: hidden; border: 1px solid rgba(55, 53, 47, 0.16); border-radius: 3px; - position: relative; - color: inherit; - fill: inherit; + display: flex; + overflow: hidden; + user-select: none; } -.notion-bookmark-inner > div:first-child { +.notion-bookmark > div:first-child { flex: 4 1 180px; padding: 12px 14px 14px; overflow: hidden; text-align: left; + color: rgb(55, 53, 47); } .notion-bookmark-title { font-size: 14px; line-height: 20px; - color: rgb(55, 53, 47); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -288,7 +272,7 @@ h3 { .notion-bookmark-description { font-size: 12px; line-height: 16px; - color: rgba(55, 53, 47, 0.6); + opacity: 0.6; height: 32px; overflow: hidden; } @@ -314,27 +298,20 @@ h3 { text-overflow: ellipsis; } -.notion-bookmark-inner > div:last-child { +.notion-bookmark > div:last-child { flex: 1 1 180px; - display: block; position: relative; } -.notion-bookmark-inner > div:last-child img { - display: block; +.notion-bookmark > div:last-child img { object-fit: cover; - border-radius: 1px; width: 100%; height: 100%; position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; } @media (max-width: 640px) { - .notion-bookmark-inner > div:last-child { + .notion-bookmark > div:last-child { display: none; } From ed720b15c5139d06098fa26a14f9d35851b363ff Mon Sep 17 00:00:00 2001 From: Timo Lins Date: Mon, 27 Apr 2020 11:43:04 +0200 Subject: [PATCH 5/6] Add className & text content utilities --- src/utils.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/utils.ts diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..dacb804 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,8 @@ +import { DecorationType } from "./types"; + +export const classNames = (...classes: Array) => + classes.filter(a => !!a).join(" "); + +export const getTextContent = (text: DecorationType[]) => { + return text.reduce((prev, current) => prev + current[0], ""); +}; From d57316d45a192944529340095bee9e3d4477b102 Mon Sep 17 00:00:00 2001 From: Timo Lins Date: Mon, 27 Apr 2020 11:45:22 +0200 Subject: [PATCH 6/6] Improve bookmark styling - Hide image when inside column - Add support for custom background colors - Add alt tags to images --- src/block.tsx | 25 ++++++++++++++++++++----- src/styles.css | 11 ++++++++--- src/types.ts | 1 + 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/block.tsx b/src/block.tsx index 906c6d0..f1776ba 100644 --- a/src/block.tsx +++ b/src/block.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { DecorationType, BlockType, ContentValueType } from "./types"; import Asset from "./components/asset"; import Code from "./components/code"; +import { classNames, getTextContent } from "./utils"; export const renderChildText = (properties: DecorationType[]) => { return properties.map(([text, decorations], i) => { @@ -171,7 +172,11 @@ export const Block: React.FC = props => { case "callout": return (
{blockValue.format.page_icon}
- diff --git a/src/styles.css b/src/styles.css index bbedab5..f214488 100644 --- a/src/styles.css +++ b/src/styles.css @@ -246,6 +246,7 @@ h3 { } .notion-bookmark { + margin: 4px 0; text-decoration: none; border: 1px solid rgba(55, 53, 47, 0.16); border-radius: 3px; @@ -301,20 +302,24 @@ h3 { text-overflow: ellipsis; } -.notion-bookmark > div:last-child { +.notion-bookmark-image { flex: 1 1 180px; position: relative; } -.notion-bookmark > div:last-child img { +.notion-bookmark-image img { object-fit: cover; width: 100%; height: 100%; position: absolute; } +.notion-column .notion-bookmark-image { + display: none; +} + @media (max-width: 640px) { - .notion-bookmark > div:last-child { + .notion-bookmark-image { display: none; } diff --git a/src/types.ts b/src/types.ts index 0b1b7fe..cf4ad0c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -114,6 +114,7 @@ interface BookmarkValueType extends BaseValueType { description: DecorationType[]; }; format: { + block_color?: string; bookmark_icon: string; bookmark_cover: string; };