Improve bookmark styling

- Hide image when inside column
- Add support for custom background colors
-  Add alt tags to images

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,7 +172,11 @@ 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">
@@ -185,7 +190,11 @@ export const Block: React.FC<Block> = props => {
           <a
             target="_blank"
             rel="noopener noreferrer"
-            className="notion-bookmark"
+            className={classNames(
+              "notion-bookmark",
+              blockValue.format.block_color &&
+                `notion-${blockValue.format.block_color}`
+            )}
             href={blockValue.properties.link[0][0]}
           >
             <div>
@@ -196,12 +205,18 @@ export const Block: React.FC<Block> = props => {
                 {renderChildText(blockValue.properties.description)}
               </div>
               <div className="notion-bookmark-link">
-                <img src={blockValue.format.bookmark_icon} />
+                <img
+                  src={blockValue.format.bookmark_icon}
+                  alt={getTextContent(blockValue.properties.title)}
+                />
                 <div>{renderChildText(blockValue.properties.link)}</div>
               </div>
             </div>
-            <div>
-              <img src={blockValue.format.bookmark_cover} />
+            <div className="notion-bookmark-image">
+              <img
+                src={blockValue.format.bookmark_cover}
+                alt={getTextContent(blockValue.properties.title)}
+              />
             </div>
           </a>
         </div>

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;
   }
 

src/types.ts

@@ -114,6 +114,7 @@ interface BookmarkValueType extends BaseValueType {
     description: DecorationType[];
   };
   format: {
+    block_color?: string;
     bookmark_icon: string;
     bookmark_cover: string;
   };