splitbee
diff --git a/Diff for: ‎README.md
+4 b/Diff for: ‎README.md
+4
diff --git a/Diff for: ‎example/pages/[pageId].tsx
+59 b/Diff for: ‎example/pages/[pageId].tsx
+59
diff --git a/Diff for: ‎example/pages/index.tsx
+3 b/Diff for: ‎example/pages/index.tsx
+3
@@ -2,11 +2,14 @@
 
 ![npm version](https://badgen.net/npm/v/react-notion) ![npm version](https://badgen.net/david/dep/splitbee/react-notion) ![minzipped sized](https://badgen.net/bundlephobia/minzip/react-notion)
 
+
 A React renderer for Notion pages.
 Use Notion as CMS for your blog, documentation or personal site.
 
 _This packages doesn't handle the communication with the API. Check out [notion-api-worker](https://github.com/splitbee/notion-api-worker) for an easy solution_.
 
+<sub>Created by <a href="https://twitter.com/timolins">Timo Lins</a> & <a href="https://twitter.com/linstobias">Tobias Lins</a> with the help of all <a href="https://github.com/splitbee/react-notion/graphs/contributors">contributors</a> ❤️</sub>
+
 ## Features
 
 ⚡️ **Fast** – Up to 10x faster than Notion\*
@@ -118,3 +121,4 @@ Most common block types are supported. We happily accept pull requests to add su
 - [Tobias Lins](https://tobi.sh) – Idea, Code
 - [Timo Lins](https://timo.sh) – Code, Documentation
 - [samwightt](https://github.com/samwightt) – Inspiration & API Typings
+- [All people that contributed 💕](https://github.com/splitbee/react-notion/graphs/contributors) 
@@ -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;
@@ -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>
 );