feat: add mapImageUrl config option

transitive-bullshit · transitive-bullshit · commit 7fb71984942f · 2020-07-21T08:39:09.000-04:00
diff --git a/src/block.tsx b/src/block.tsx
@@ -4,18 +4,14 @@ import {
   BlockType,
   ContentValueType,
   BlockMapType,
-  MapPageUrl
+  MapPageUrl,
+  MapImageUrl
 } from "./types";
 import Asset from "./components/asset";
 import Code from "./components/code";
 import PageIcon from "./components/page-icon";
 import PageHeader from "./components/page-header";
-import {
-  classNames,
-  getTextContent,
-  getListNumber,
-  toNotionImageUrl
-} from "./utils";
+import { classNames, getTextContent, getListNumber } from "./utils";
 
 export const renderChildText = (properties: DecorationType[]) => {
   return properties?.map(([text, decorations], i) => {
@@ -62,6 +58,7 @@ interface Block {
   level: number;
   blockMap: BlockMapType;
   mapPageUrl: MapPageUrl;
+  mapImageUrl: MapImageUrl;
 
   fullPage?: boolean;
   zoom?: any;
@@ -75,7 +72,8 @@ export const Block: React.FC<Block> = props => {
     fullPage,
     blockMap,
     zoom,
-    mapPageUrl
+    mapPageUrl,
+    mapImageUrl
   } = props;
   const blockValue = block?.value;
 
@@ -101,12 +99,16 @@ export const Block: React.FC<Block> = props => {
             <div className="notion notion-app">
               <div className="notion-cursor-listener">
                 <div className="notion-frame">
-                  <PageHeader blockMap={blockMap} mapPageUrl={mapPageUrl} />
+                  <PageHeader
+                    blockMap={blockMap}
+                    mapPageUrl={mapPageUrl}
+                    mapImageUrl={mapImageUrl}
+                  />
 
                   <div className="notion-scroller">
                     {page_cover && (
                       <img
-                        src={toNotionImageUrl(page_cover)}
+                        src={mapImageUrl(page_cover)}
                         alt={getTextContent(blockValue.properties.title)}
                         className="notion-page-cover"
                         style={{
@@ -129,6 +131,7 @@ export const Block: React.FC<Block> = props => {
                           }
                           block={block}
                           big
+                          mapImageUrl={mapImageUrl}
                         />
                       )}
 
@@ -152,7 +155,7 @@ export const Block: React.FC<Block> = props => {
           <a className="notion-page-link" href={mapPageUrl(blockValue.id)}>
             {blockValue.format && (
               <div className="notion-page-icon">
-                <PageIcon block={block} />
+                <PageIcon block={block} mapImageUrl={mapImageUrl} />
               </div>
             )}
             <div className="notion-page-text">
@@ -243,7 +246,7 @@ export const Block: React.FC<Block> = props => {
           className="notion-asset-wrapper"
           style={{ width: value.format.block_width }}
         >
-          <Asset block={block} zoom={zoom} />
+          <Asset block={block} zoom={zoom} mapImageUrl={mapImageUrl} />
 
           {value.properties.caption && (
             <figcaption className="notion-image-caption">
@@ -373,7 +376,7 @@ export const Block: React.FC<Block> = props => {
           )}
         >
           <div>
-            <PageIcon block={block} />
+            <PageIcon block={block} mapImageUrl={mapImageUrl} />
           </div>
           <div className="notion-callout-text">
             {renderChildText(blockValue.properties.title)}
diff --git a/src/components/asset.tsx b/src/components/asset.tsx
@@ -1,10 +1,13 @@
 import * as React from "react";
-import { BlockType, ContentValueType } from "../types";
-import { toNotionImageUrl } from "../utils";
+import { BlockType, ContentValueType, MapImageUrl } from "../types";
 
 const types = ["video", "image", "embed"];
 
-const Asset: React.FC<{ block: BlockType; zoom?: any }> = ({ block, zoom }) => {
+const Asset: React.FC<{
+  block: BlockType;
+  mapImageUrl: MapImageUrl;
+  zoom?: any;
+}> = ({ block, mapImageUrl, zoom }) => {
   const zoomRef = React.useRef(zoom ? zoom.clone() : null);
   const value = block.value as ContentValueType;
   const type = block.value.type;
@@ -36,7 +39,7 @@ const Asset: React.FC<{ block: BlockType; zoom?: any }> = ({ block, zoom }) => {
     );
   }
 
-  const src = toNotionImageUrl(value.properties.source[0][0]);
+  const src = mapImageUrl(value.properties.source[0][0]);
 
   function attachZoom(image: any) {
     if (zoomRef.current) {
diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
@@ -1,14 +1,19 @@
 import * as React from "react";
 
-import { BlockMapType, MapPageUrl } from "../types";
+import { BlockMapType, MapPageUrl, MapImageUrl } from "../types";
 import PageIcon from "./page-icon";
 
 interface PageHeaderProps {
   blockMap: BlockMapType;
   mapPageUrl: MapPageUrl;
+  mapImageUrl: MapImageUrl;
 }
 
-const PageHeader: React.FC<PageHeaderProps> = ({ blockMap, mapPageUrl }) => {
+const PageHeader: React.FC<PageHeaderProps> = ({
+  blockMap,
+  mapPageUrl,
+  mapImageUrl
+}) => {
   const blockIds = Object.keys(blockMap);
   const activePageId = blockIds[0];
 
@@ -69,6 +74,7 @@ const PageHeader: React.FC<PageHeaderProps> = ({ blockMap, mapPageUrl }) => {
                   <PageIcon
                     className="notion-nav-icon"
                     block={breadcrumb.block}
+                    mapImageUrl={mapImageUrl}
                   />
                 )}
 
diff --git a/src/components/page-icon.tsx b/src/components/page-icon.tsx
@@ -3,9 +3,10 @@ import {
   BlockType,
   PageValueType,
   BlockValueType,
-  CalloutValueType
+  CalloutValueType,
+  MapImageUrl
 } from "../types";
-import { toNotionImageUrl, getTextContent, classNames } from "../utils";
+import { getTextContent, classNames } from "../utils";
 
 const isIconBlock = (
   value: BlockValueType
@@ -15,19 +16,25 @@ const isIconBlock = (
 
 interface AssetProps {
   block: BlockType;
+  mapImageUrl: MapImageUrl;
   big?: boolean;
   className?: string;
 }
 
-const PageIcon: React.FC<AssetProps> = ({ block, className, big }) => {
+const PageIcon: React.FC<AssetProps> = ({
+  block,
+  className,
+  big,
+  mapImageUrl
+}) => {
   if (!isIconBlock(block.value)) {
     return null;
   }
   const icon = block.value.format?.page_icon;
   const title = block.value.properties?.title;
 
   if (icon?.includes("http")) {
-    const url = toNotionImageUrl(icon);
+    const url = mapImageUrl(icon);
 
     return (
       <img
diff --git a/src/renderer.tsx b/src/renderer.tsx
@@ -1,32 +1,25 @@
 import React from "react";
 import mediumZoom from "medium-zoom";
-import { BlockMapType, MapPageUrl } from "./types";
+import { BlockMapType, MapPageUrl, MapImageUrl } from "./types";
 import { Block } from "./block";
+import { defaultMapImageUrl, defaultMapPageUrl } from "utils";
 
 export interface NotionRendererProps {
   blockMap: BlockMapType;
   fullPage?: boolean;
   mapPageUrl?: MapPageUrl;
-  rootPageId?: string;
+  mapImageUrl?: MapImageUrl;
 
   currentId?: string;
   level?: number;
   zoom?: any;
 }
 
-const defaultMapPageUrl = (rootPageId?: string) => (pageId = "") => {
-  pageId = pageId.replace(/-/g, "");
-
-  if (rootPageId && pageId === rootPageId) {
-    return "/";
-  } else {
-    return `/${pageId}`;
-  }
-};
-
 export const NotionRenderer: React.FC<NotionRendererProps> = ({
   level = 0,
   currentId,
+  mapPageUrl = defaultMapPageUrl,
+  mapImageUrl = defaultMapImageUrl,
   ...props
 }) => {
   const { blockMap } = props;
@@ -40,7 +33,6 @@ export const NotionRenderer: React.FC<NotionRendererProps> = ({
     return null;
   }
 
-  const mapPageUrl = props.mapPageUrl || defaultMapPageUrl(props.rootPageId);
   const zoom =
     props.zoom ||
     (typeof window !== "undefined" &&
@@ -57,6 +49,7 @@ export const NotionRenderer: React.FC<NotionRendererProps> = ({
       block={currentBlock}
       zoom={zoom}
       mapPageUrl={mapPageUrl}
+      mapImageUrl={mapImageUrl}
       {...props}
     >
       {currentBlock?.value?.content?.map(contentId => (
@@ -66,6 +59,7 @@ export const NotionRenderer: React.FC<NotionRendererProps> = ({
           level={level + 1}
           zoom={zoom}
           mapPageUrl={mapPageUrl}
+          mapImageUrl={mapImageUrl}
           {...props}
         />
       ))}
diff --git a/src/types.ts b/src/types.ts
@@ -322,3 +322,4 @@ export interface LoadPageChunkData {
 }
 
 export type MapPageUrl = (pageId: string) => string;
+export type MapImageUrl = (image: string) => string;
diff --git a/src/utils.ts b/src/utils.ts
@@ -43,11 +43,14 @@ export const getListNumber = (blockId: string, blockMap: BlockMapType) => {
   return group.indexOf(blockId) + 1;
 };
 
-export const toNotionImageUrl = (url: string) => {
-  const notionImageUrl = `https://www.notion.so${
-    url.startsWith("/image") ? url : `/image/${encodeURIComponent(url)}`
+export const defaultMapImageUrl = (image: string = "") => {
+  return `https://www.notion.so${
+    image.startsWith("/image") ? image : `/image/${encodeURIComponent(image)}`
   }`;
+};
+
+export const defaultMapPageUrl = (pageId: string = "") => {
+  pageId = pageId.replace(/-/g, "");
 
-  // Our proxy uses Cloudflare's global CDN to cache these image assets
-  return `https://ssfy.io/${encodeURIComponent(notionImageUrl)}`;
+  return `/${pageId}`;
 };

Original file line number	Diff line number	Diff line change
`@@ -322,3 +322,4 @@ export interface LoadPageChunkData {`
`322`	`322`	`}`
`323`	`323`
`324`	`324`	`export type MapPageUrl = (pageId: string) => string;`
	`325`	`+export type MapImageUrl = (image: string) => string;`