Merge branch 'master' of github.com:splitbee/react-notion

Author: timolins

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,14 +172,55 @@ export const Block: React.FC<Block> = props => {
     case "callout":
       return (
         <div
-          className={`notion-callout notion-${blockValue.format.block_color}_co`}
+          className={classNames(
+            "notion-callout",
+            blockValue.format.block_color &&
+              `notion-${blockValue.format.block_color}_co`
+          )}
         >
           <div>{blockValue.format.page_icon}</div>
           <div className="notion-callout-text">
             {renderChildText(blockValue.properties.title)}
           </div>
         </div>
       );
+    case "bookmark":
+      return (
+        <div className="notion-row">
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            className={classNames(
+              "notion-bookmark",
+              blockValue.format.block_color &&
+                `notion-${blockValue.format.block_color}`
+            )}
+            href={blockValue.properties.link[0][0]}
+          >
+            <div>
+              <div className="notion-bookmark-title">
+                {renderChildText(blockValue.properties.title)}
+              </div>
+              <div className="notion-bookmark-description">
+                {renderChildText(blockValue.properties.description)}
+              </div>
+              <div className="notion-bookmark-link">
+                <img
+                  src={blockValue.format.bookmark_icon}
+                  alt={getTextContent(blockValue.properties.title)}
+                />
+                <div>{renderChildText(blockValue.properties.link)}</div>
+              </div>
+            </div>
+            <div className="notion-bookmark-image">
+              <img
+                src={blockValue.format.bookmark_cover}
+                alt={getTextContent(blockValue.properties.title)}
+              />
+            </div>
+          </a>
+        </div>
+      );
     default:
       if (process.env.NODE_ENV !== "production") {
         console.log("Unsupported type " + block?.value?.type);

src/styles.css

@@ -245,7 +245,84 @@ h3 {
   display: flex;
 }
 
+.notion-bookmark {
+  margin: 4px 0;
+  text-decoration: none;
+  border: 1px solid rgba(55, 53, 47, 0.16);
+  border-radius: 3px;
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+}
+
+.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;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 24px;
+  margin-bottom: 2px;
+}
+
+.notion-bookmark-description {
+  font-size: 12px;
+  line-height: 16px;
+  opacity: 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-image {
+  flex: 1 1 180px;
+  position: relative;
+}
+
+.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-image {
+    display: none;
+  }
+
   .notion-row {
     flex-direction: column;
   }

src/types.ts

@@ -106,6 +106,20 @@ export interface BaseTextValueType extends BaseValueType {
   };
 }
 
+interface BookmarkValueType extends BaseValueType {
+  type: "bookmark";
+  properties: {
+    link: DecorationType[];
+    title: DecorationType[];
+    description: DecorationType[];
+  };
+  format: {
+    block_color?: string;
+    bookmark_icon: string;
+    bookmark_cover: string;
+  };
+}
+
 interface TextValueType extends BaseTextValueType {
   type: "text";
 }
@@ -223,7 +237,8 @@ export type BlockValueType =
   | ImageValueType
   | VideoValueType
   | EmbedValueType
-  | CalloutValueType;
+  | CalloutValueType
+  | BookmarkValueType;
 
 export interface BlockType {
   role: string;

src/utils.ts

@@ -0,0 +1,8 @@
+import { DecorationType } from "./types";
+
+export const classNames = (...classes: Array<string | undefined | false>) =>
+  classes.filter(a => !!a).join(" ");
+
+export const getTextContent = (text: DecorationType[]) => {
+  return text.reduce((prev, current) => prev + current[0], "");
+};