Add support for custom pages in example

timolins · timolins · commit 25f60c3b16de · 2020-05-21T23:37:58.000+02:00
diff --git a/example/pages/[pageId].tsx b/example/pages/[pageId].tsx
@@ -0,0 +1,59 @@
+import { NotionRenderer, BlockMapType } from "react-notion";
+import Head from "next/head";
+import fetch from "node-fetch";
+
+export async function getServerSideProps(context) {
+  const pageId = context.params?.pageId.split("-").reverse()[0];
+
+  if (!pageId) {
+    return;
+  }
+
+  const data: BlockMapType = await fetch(
+    `https://notion-api.splitbee.io/v1/page/${pageId}`
+  ).then(res => res.json());
+
+  return {
+    props: {
+      blockMap: data
+    }
+  };
+}
+
+const NotionPage = ({ blockMap }) => {
+  if (!blockMap || Object.keys(blockMap).length === 0) {
+    return (
+      <div>
+        <h3>No data found.</h3>
+        <div> Make sure the pageId is valid.</div>
+        <div>Only public pages are supported in this example.</div>
+      </div>
+    );
+  }
+
+  const title =
+    blockMap[Object.keys(blockMap)[0]]?.value.properties.title[0][0];
+
+  return (
+    <div
+      style={{
+        maxWidth: 708,
+        margin: "0 auto",
+        padding: "0 8px",
+        fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"`
+      }}
+    >
+      <Head>
+        <title>{title}</title>
+      </Head>
+      <NotionRenderer blockMap={blockMap} />
+      <style jsx>{`
+        div :global(.notion-code) {
+          box-sizing: border-box;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default NotionPage;
diff --git a/example/pages/index.tsx b/example/pages/index.tsx
@@ -23,6 +23,9 @@ const Home = ({ blockMap }) => (
       fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"`
     }}
   >
+    <Head>
+      <title>react-notion example</title>
+    </Head>
     <NotionRenderer blockMap={blockMap} />
   </div>
 );
diff --git a/example/yarn.lock b/example/yarn.lock
