Add support for page links

tobiaslins · tobiaslins · commit 0f53569cb83d · 2020-05-23T16:47:11.000+02:00
diff --git a/example/pages/[pageId].tsx b/example/pages/[pageId].tsx
@@ -3,7 +3,7 @@ import Head from "next/head";
 import fetch from "node-fetch";
 
 export async function getServerSideProps(context) {
-  const pageId = context.params?.pageId.split("-").reverse()[0];
+  const pageId = context.params?.pageId;
 
   if (!pageId) {
     return;
@@ -46,7 +46,10 @@ const NotionPage = ({ blockMap }) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <NotionRenderer blockMap={blockMap} />
+      <NotionRenderer
+        blockMap={blockMap}
+        mapPageUrl={id => `/${title}--${id}`}
+      />
       <style jsx>{`
         div :global(.notion-code) {
           box-sizing: border-box;
diff --git a/src/block.tsx b/src/block.tsx
@@ -44,18 +44,39 @@ export const renderChildText = (properties: DecorationType[]) => {
   });
 };
 
+export type MapPageUrl = (pageId: string) => string;
+
 interface Block {
   block: BlockType;
   parentBlock: BlockType;
   level: number;
+  mapPageUrl?: MapPageUrl;
 }
 
 export const Block: React.FC<Block> = props => {
   const { block, parentBlock, children } = props;
   const blockValue = block?.value;
-  switch (blockValue.type) {
+  switch (blockValue?.type) {
     case "page":
-      return <div className="notion">{children}</div>;
+      if (props.level === 0) return <div className="notion">{children}</div>;
+      else {
+        if (!blockValue.properties) return null;
+        return (
+          <a
+            className="notion-page-link"
+            href={props.mapPageUrl?.(blockValue.id) || `/${blockValue.id}`}
+          >
+            {blockValue.format && (
+              <div className="notion-page-icon">
+                {blockValue.format.page_icon}
+              </div>
+            )}
+            <div className="notion-page-text">
+              {renderChildText(blockValue.properties.title)}
+            </div>
+          </a>
+        );
+      }
     case "header":
       if (!blockValue.properties) return null;
       return (
@@ -90,7 +111,7 @@ export const Block: React.FC<Block> = props => {
       );
     case "bulleted_list":
     case "numbered_list":
-      const isTopLevel = block.value.type !== parentBlock.value.type;
+      const isTopLevel = block.value.type !== parentBlock?.value?.type;
       const itemPosition =
         1 + (parentBlock.value.content?.indexOf(block.value.id) || 0);
       const wrapList = (content: React.ReactNode) =>
diff --git a/src/renderer.tsx b/src/renderer.tsx
@@ -1,35 +1,39 @@
 import React from "react";
 import { BlockMapType } from "./types";
-import { Block } from "./block";
+import { Block, MapPageUrl } from "./block";
 
-interface NotionRendererProps {
+export interface NotionRendererProps {
   blockMap: BlockMapType;
   currentId?: string;
   level?: number;
+  mapPageUrl?: MapPageUrl;
 }
 
 export const NotionRenderer: React.FC<NotionRendererProps> = ({
   level = 0,
   currentId,
-  blockMap
+  blockMap,
+  mapPageUrl
 }) => {
   const id = currentId || Object.keys(blockMap)[0];
   const currentBlock = blockMap[id];
+  if (!currentBlock) return null;
   const parentBlock = blockMap[currentBlock.value.parent_id];
-
   return (
     <Block
       key={id}
       level={level}
       block={currentBlock}
       parentBlock={parentBlock}
+      mapPageUrl={mapPageUrl}
     >
       {currentBlock?.value?.content?.map(contentId => (
         <NotionRenderer
           key={contentId}
           currentId={contentId}
           blockMap={blockMap}
           level={level + 1}
+          mapPageUrl={mapPageUrl}
         />
       ))}
     </Block>
diff --git a/src/styles.css b/src/styles.css
@@ -122,6 +122,7 @@ h3 {
   fill: inherit;
   margin-top: 1.1em;
   margin-bottom: 1px;
+  padding: 3px 2px;
 }
 .notion-h3 {
   font-weight: 600;
@@ -152,6 +153,33 @@ h3 {
   text-decoration-color: inherit;
 }
 
+.notion-page-link {
+  display: flex;
+  color: rgb(55, 53, 47);
+  text-decoration: none;
+  height: 30px;
+  margin: 1px 0px;
+  transition: background 120ms ease-in 0s;
+}
+.notion-page-link:hover {
+  background: rgba(55, 53, 47, 0.08);
+}
+
+.notion-page-icon {
+  padding: 0px 5px;
+  margin-right: 4px;
+  margin-top: 2px;
+}
+.notion-page-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  line-height: 1.3;
+  border-bottom: 1px solid rgba(55, 53, 47, 0.16);
+  margin: 4px 0px;
+}
+
 .notion-inline-code {
   color: #eb5757;
   padding: 0.2em 0.4em;
