feat: replace about and experience sections with v2

app/page.tsx

@@ -1,8 +1,8 @@
 import type { NextPage, Metadata } from "next";
 
-import About from "../components/about";
+import AboutV2 from "../components/about-v2";
+import ExperienceV2 from "../components/experience-v2";
 import Projects from "../components/projects";
-import Experience from "../components/experience";
 
 export const metadata: Metadata = {
   title: "Yuta Kusuno Portfolio",
@@ -12,14 +12,11 @@ const Home: NextPage = () => {
   return (
     <>
       <section id="about">
-        <About />
+        <AboutV2 />
       </section>
       <section id="experience">
-        <Experience />
+        <ExperienceV2 />
       </section>
-      {/* <section id="skills">
-        <Skills />
-      </section> */}
       <section id="projects">
         <Projects />
       </section>

components/about-v2.tsx

@@ -0,0 +1,26 @@
+import { Container } from "@chakra-ui/react";
+
+import { NotionProfilePage } from "./notion-profile-page";
+import { notion } from "../lib/notion";
+import { notionAboutPageId } from "../lib/config";
+
+const AboutV2 = async () => {
+  if (!notionAboutPageId) return null;
+
+  const rootNotionPageId = notionAboutPageId;
+  const recordMap = await notion.getPage(rootNotionPageId);
+
+  return (
+    <Container
+      minHeight="100vh"
+      justifyContent="center"
+      alignItems="center"
+      display="flex"
+      pt={50}
+    >
+      <NotionProfilePage recordMap={recordMap} rootPageId={rootNotionPageId} />
+    </Container>
+  );
+};
+
+export default AboutV2;

components/experience-v2.tsx

@@ -0,0 +1,26 @@
+import { Container } from "@chakra-ui/react";
+
+import { NotionProfilePage } from "./notion-profile-page";
+import { notion } from "../lib/notion";
+import { notionExperiencePageId } from "../lib/config";
+
+const ExperienceV2 = async () => {
+  if (!notionExperiencePageId) return null;
+
+  const rootNotionPageId = notionExperiencePageId;
+  const recordMap = await notion.getPage(rootNotionPageId);
+
+  return (
+    <Container
+      minHeight="100vh"
+      justifyContent="center"
+      alignItems="center"
+      display="flex"
+      pt={50}
+    >
+      <NotionProfilePage recordMap={recordMap} rootPageId={rootNotionPageId} />
+    </Container>
+  );
+};
+
+export default ExperienceV2;

components/notion-profile-page.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useColorMode } from "@chakra-ui/react";
+import { NotionRenderer } from "react-notion-x";
+import { ExtendedRecordMap } from "notion-types";
+import "react-notion-x/src/styles.css";
+
+export const NotionProfilePage = ({
+  recordMap,
+  rootPageId,
+}: {
+  recordMap: ExtendedRecordMap;
+  rootPageId: string;
+}) => {
+  const { colorMode } = useColorMode();
+
+  if (!recordMap) return null;
+
+  return (
+    <NotionRenderer
+      recordMap={recordMap}
+      darkMode={colorMode === "dark"}
+      rootPageId={rootPageId}
+    />
+  );
+};

components/projects.tsx

@@ -51,7 +51,7 @@ const Projects: NextPage = () => {
 
   return (
     <Container minHeight="80vh" pt={50}>
-      <Heading fontSize={"3xl"} pb={10}>
+      <Heading fontSize={"2xl"} pb={10}>
         Projects
       </Heading>
 

lib/config.ts

@@ -0,0 +1,7 @@
+export const notionAboutPageId = process.env.NOTION_ABOUT_PAGE_ID;
+
+export const notionExperiencePageId = process.env.NOTION_EXPERIENCE_PAGE_ID;
+
+export const notionBlogDatabaseId = process.env.NOTION_BLOG_DATABASE_ID;
+
+export const notionAuthToken = process.env.NOTION_AUTH_TOKEN;

lib/notion.ts

@@ -1,7 +1,8 @@
 import { NotionAPI } from "notion-client";
+import { notionAuthToken } from "./config";
 
 export const notion = new NotionAPI({
-  authToken: process.env.NOTION_AUTH_TOKEN,
+  authToken: notionAuthToken,
 });
 
 export function getRecordMap(id: string) {

lib/posts.ts

@@ -1,9 +1,10 @@
 import { getRecordMap } from "./notion";
 import { Post } from "../types/post";
+import { notionBlogDatabaseId } from "./config";
 
 export async function getAllPostsFromNotion() {
   const allPosts: Post[] = [];
-  const recordMap = await getRecordMap(process.env.NOTION_BLOG_DATABASE_ID!);
+  const recordMap = await getRecordMap(notionBlogDatabaseId!);
   const { block, collection } = recordMap;
   const schema = Object.values(collection)[0].value.schema;
   const propertyMap: Record<string, string> = {};