MapPictureUrl

Author: benjaminbarbe

src/block.tsx

@@ -6,6 +6,7 @@ import {
   BlockMapType,
   MapPageUrl,
   MapImageUrl,
+  MapPictureUrl,
   CustomBlockComponents,
   BlockValueProp,
   CustomDecoratorComponents,
@@ -89,6 +90,7 @@ interface Block {
   blockMap: BlockMapType;
   mapPageUrl: MapPageUrl;
   mapImageUrl: MapImageUrl;
+  mapPictureUrl?: MapPictureUrl;
 
   fullPage?: boolean;
   hideHeader?: boolean;
@@ -106,6 +108,7 @@ export const Block: React.FC<Block> = props => {
     blockMap,
     mapPageUrl,
     mapImageUrl,
+    mapPictureUrl,
     customBlockComponents,
     customDecoratorComponents
   } = props;
@@ -308,7 +311,7 @@ export const Block: React.FC<Block> = props => {
           <figure
             className="notion-asset-wrapper"
           >
-            <Asset block={block} mapImageUrl={mapImageUrl} />
+            <Asset block={block} mapImageUrl={mapImageUrl} mapPictureUrl={mapPictureUrl} />
 
             {value.properties.caption && (
               <figcaption className="notion-image-caption">

src/components/asset.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
-import { ThumbnailValueType, BlockType, ContentValueType, MapImageUrl } from "../types";
+import { ThumbnailValueType, BlockType, ContentValueType, MapImageUrl, MapPictureUrl } from "../types";
 
 const types = ["video", "image", "embed", "figma"];
 const reponsiveWidth = [213, 320, 640, 768, 1024, 1366, 1600, 1920, 2560];
 
 const Asset: React.FC<{
   block: BlockType;
   mapImageUrl: MapImageUrl;
-}> = ({ block, mapImageUrl }) => {
+  mapPictureUrl?: MapPictureUrl;
+}> = ({ block, mapImageUrl, mapPictureUrl }) => {
   const value = block.value as ContentValueType;
   const type = block.value.type;
 
@@ -43,16 +44,45 @@ const Asset: React.FC<{
   }
 
   if (block.value.type === "image") {
-    const src = mapImageUrl(value.properties.source[0][0], block);
     const caption = value.properties.caption?.[0][0];
+    const title = value.properties.title?.[0][0];
     const style: any = {};
 
-    let thumbnails: ThumbnailValueType[] = [];
-
     if (block_aspect_ratio) {
       style["aspectRatio"] = `${1 / aspectRatio}`;
     }
 
+    if (mapPictureUrl) {
+      const [coverUrl, coverSrcSets, coverStyles] = mapPictureUrl(value.properties.source[0][0], block);
+
+      if (coverUrl) {
+        Object.assign(style, coverStyles);
+
+        return (
+          <picture>
+            {coverSrcSets.map((src: any) => (
+              <source
+                key={src.type}
+                srcSet={src.srcSet}
+                type={src.type}
+                sizes="(min-width: 1280px) 40vw, (min-width: 1024px) 60vw, (min-width: 768px) 80vw, 100vw"
+              />
+            ))}
+            <img
+              src={coverUrl}
+              loading="lazy"
+              decoding="async"
+              alt={caption || title}
+              style={style}
+            />
+          </picture>
+        );
+      }
+    }
+    const src = mapImageUrl(value.properties.source[0][0], block);
+
+    let thumbnails: ThumbnailValueType[] = [];
+
     const blockWidth = value.format?.block_width;
 
     reponsiveWidth.forEach(width => {
@@ -84,7 +114,7 @@ const Asset: React.FC<{
         />
         <img
           src={thumbnails[0].src}
-          alt={caption}
+          alt={caption || title}
           loading="lazy"
           decoding="async"
           style={style}

src/renderer.tsx

@@ -3,6 +3,7 @@ import {
   BlockMapType,
   MapPageUrl,
   MapImageUrl,
+  MapPictureUrl,
   CustomBlockComponents,
   CustomDecoratorComponents
 } from "./types";
@@ -15,6 +16,7 @@ export interface NotionRendererProps {
   hideHeader?: boolean;
   mapPageUrl?: MapPageUrl;
   mapImageUrl?: MapImageUrl;
+  mapPictureUrl?: MapPictureUrl;
 
   currentId?: string;
   level?: number;
@@ -27,6 +29,7 @@ export const NotionRenderer: React.FC<NotionRendererProps> = ({
   currentId,
   mapPageUrl = defaultMapPageUrl,
   mapImageUrl = defaultMapImageUrl,
+  mapPictureUrl,
   ...props
 }) => {
   const { blockMap } = props;
@@ -47,6 +50,7 @@ export const NotionRenderer: React.FC<NotionRendererProps> = ({
       block={currentBlock}
       mapPageUrl={mapPageUrl}
       mapImageUrl={mapImageUrl}
+      mapPictureUrl={mapPictureUrl}
       {...props}
     >
       {currentBlock?.value?.content?.map(contentId => (
@@ -56,6 +60,7 @@ export const NotionRenderer: React.FC<NotionRendererProps> = ({
           level={level + 1}
           mapPageUrl={mapPageUrl}
           mapImageUrl={mapImageUrl}
+          mapPictureUrl={mapPictureUrl}
           {...props}
         />
       ))}

src/types.ts

@@ -203,6 +203,7 @@ export interface ContentValueType extends BaseValueType {
   properties: {
     source: string[][];
     caption?: DecorationType[];
+    title?: DecorationType[];
   };
   format?: {
     block_width: number;
@@ -347,6 +348,7 @@ export interface LoadPageChunkData {
 
 export type MapPageUrl = (pageId: string) => string;
 export type MapImageUrl = (image: string, block?: BlockType) => string;
+export type MapPictureUrl = (image: string, block?: BlockType) => any;
 
 export type BlockValueProp<T> = Extract<BlockValueType, { type: T }>;