fix: Orgnize directories/files name

app/blog/[slug]/not-found.tsx

@@ -1,13 +1,15 @@
-import Link from "next/link";
+import Link from 'next/link';
 
-export default function NotFound() {
+const NotFound = () => {
   return (
     <div>
       <h2>Post Not Found</h2>
-      <Link href="/blog">
+      <Link href='/blog'>
         <span>&larr;</span>
         <span>Go to list page</span>
       </Link>
     </div>
   );
-}
+};
+
+export default NotFound;

app/blog/[slug]/page.tsx

@@ -1,20 +1,16 @@
-import { Metadata } from "next";
-import Link from "next/link";
-import { notFound } from "next/navigation";
+import { Metadata } from 'next';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
 
-import { getRecordMap } from "../../../lib/notion";
-import { getAllPostsFromNotion } from "../../../lib/posts";
-import { Post } from "../../../types/post";
-import { PostPageContainer } from "../../../components/posts/custom-container";
+import { getRecordMap } from '../../../lib/notion';
+import { getPostsFromNotion } from '../../../lib/posts';
+import PostView from '../../../components/posts/post-view';
+import type { Post } from '../../../types/post';
 
-export default async function PostPage({
-  params: { slug },
-}: {
-  params: { slug: string };
-}) {
-  const allPosts = await getAllPostsFromNotion();
+const PostPage = async ({ params: { slug } }: { params: { slug: string } }) => {
+  const posts = await getPostsFromNotion();
 
-  const post = allPosts.find((p) => p.slug === slug);
+  const post = posts.find((p) => p.slug === slug);
   if (!post) {
     return notFound();
   }
@@ -23,15 +19,15 @@ export default async function PostPage({
     return (
       <article data-revalidated-at={new Date().getTime()}>
         <h2>Post Not Found</h2>
-        <Link href="/blog">
+        <Link href='/blog'>
           <span>&larr;</span>
           <span>Go to list page</span>
         </Link>
       </article>
     );
   }
 
-  const relatedPosts: Post[] = allPosts.filter(
+  const relatedPosts: Post[] = posts.filter(
     (p) =>
       p.slug !== slug &&
       p.published &&
@@ -41,33 +37,31 @@ export default async function PostPage({
   const recordMap = await getRecordMap(post.id);
 
   return (
-    <PostPageContainer
-      post={post}
-      recordMap={recordMap}
-      relatedPosts={relatedPosts}
-    />
+    <PostView post={post} recordMap={recordMap} relatedPosts={relatedPosts} />
   );
-}
+};
 
-export async function generateStaticParams() {
-  const allPosts = await getAllPostsFromNotion();
+export const generateStaticParams = async () => {
+  const posts = await getPostsFromNotion();
 
-  return allPosts.map((post) => ({
+  return posts.map((post) => ({
     slug: post.slug,
   }));
-}
+};
 
-export async function generateMetadata({
+export const generateMetadata = async ({
   params: { slug },
 }: {
   params: { slug: string };
-}): Promise<Metadata> {
-  const allPosts = await getAllPostsFromNotion();
-  const post = allPosts.find((p) => p.slug === slug);
+}): Promise<Metadata> => {
+  const posts = await getPostsFromNotion();
+  const post = posts.find((p) => p.slug === slug);
 
   return post
     ? {
         title: post.title,
       }
     : {};
-}
+};
+
+export default PostPage;

app/blog/page.tsx

@@ -1,10 +1,10 @@
-import { PostListContainer } from '../../components/posts/custom-container';
-import { getAllPostsFromNotion } from '../../lib/posts';
+import PostList from '../../components/posts/post-list';
+import { getPostsFromNotion } from '../../lib/posts';
 
 const Blog = async () => {
-  const posts = await getAllPostsFromNotion();
+  const posts = await getPostsFromNotion();
 
-  return <PostListContainer posts={posts} />;
+  return <PostList posts={posts} />;
 };
 
 export default Blog;

app/layout.tsx

@@ -1,25 +1,21 @@
-import { Analytics } from "@vercel/analytics/react";
-import { SpeedInsights } from "@vercel/speed-insights/next";
-import CustomProviders from "../components/custom-providers";
-import "./globals.css";
+import { Analytics } from '@vercel/analytics/react';
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import CustomProvider from '../components/custom-provider';
+import './globals.css';
 
-const theme = "dark";
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  // NOTE: suppressHydrationWarning is a hack to avoid warnings
-  // see: https://legacy.reactjs.org/docs/dom-elements.html#suppresshydrationwarning:~:text=It%20only%20works%20one%20level%20deep
+// NOTE: suppressHydrationWarning is a hack to avoid warnings
+// see: https://legacy.reactjs.org/docs/dom-elements.html#suppresshydrationwarning:~:text=It%20only%20works%20one%20level%20deep
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html suppressHydrationWarning lang="en">
+    <html suppressHydrationWarning lang='en'>
       <head />
       <body>
-        <CustomProviders theme={theme}>{children}</CustomProviders>
+        <CustomProvider theme={'dark'}>{children}</CustomProvider>
         <Analytics />
         <SpeedInsights />
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;

app/not-found.tsx

@@ -1,12 +1,12 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 const NotFound = () => {
   return (
     <>
       <h2>Not Found</h2>
       <p>Could not find requested resource</p>
       <div>
-        <Link href="/">Go back to Home</Link>
+        <Link href='/'>Go back to Home</Link>
       </div>
     </>
   );

app/page.tsx

@@ -1,23 +1,23 @@
-import type { NextPage, Metadata } from "next";
+import type { NextPage, Metadata } from 'next';
 
-import About from "../components/about";
-import Experience from "../components/experience";
-import Projects from "../components/projects";
+import About from '../components/about';
+import Experience from '../components/experience';
+import Projects from '../components/projects';
 
 export const metadata: Metadata = {
-  title: "Yuta Kusuno Portfolio",
+  title: 'Yuta Kusuno',
 };
 
 const Home: NextPage = () => {
   return (
     <>
-      <section id="about">
+      <section id='about'>
         <About />
       </section>
-      <section id="experience">
+      <section id='experience'>
         <Experience />
       </section>
-      <section id="projects">
+      <section id='projects'>
         <Projects />
       </section>
     </>

components/about.tsx

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

components/custom-providers.tsx → components/custom-provider.tsx

@@ -7,7 +7,7 @@ import { ThemeProvider as NextThemeProvider } from 'next-themes';
 import Navbar from './navbar';
 import Footer from './footer';
 
-const CustomProviders = (props: {
+const CustomProvider = (props: {
   theme: string;
   children: React.ReactNode;
 }) => {
@@ -26,4 +26,4 @@ const CustomProviders = (props: {
   );
 };
 
-export default CustomProviders;
+export default CustomProvider;

components/experience.tsx

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

components/navbar.tsx

@@ -1,18 +1,18 @@
-import { useEffect } from "react";
-import { Flex, Button, useColorMode, ButtonGroup } from "@chakra-ui/react";
-import { MoonIcon, SunIcon } from "@chakra-ui/icons";
-import NextLink from "next/link";
+import { useEffect } from 'react';
+import { Flex, Button, useColorMode, ButtonGroup } from '@chakra-ui/react';
+import { MoonIcon, SunIcon } from '@chakra-ui/icons';
+import NextLink from 'next/link';
 
 type PageList = {
   name: string;
   path: string;
 };
 
 const pageList: Array<PageList> = [
-  { name: "About", path: "/#about" },
-  { name: "Experience", path: "/#experience" },
-  { name: "Projects", path: "/#projects" },
-  { name: "Blog", path: "/blog" },
+  { name: 'About', path: '/#about' },
+  { name: 'Experience', path: '/#experience' },
+  { name: 'Projects', path: '/#projects' },
+  { name: 'Blog', path: '/blog' },
 ];
 
 const Navbar = (props: { theme: string }) => {
@@ -28,24 +28,24 @@ const Navbar = (props: { theme: string }) => {
 
   return (
     <Flex
-      position="fixed"
-      as="header"
-      minWidth="100vw"
-      justifyContent="right"
+      position='fixed'
+      as='header'
+      minWidth='100vw'
+      justifyContent='right'
       p={2}
       // To apply backdropBlur, set backdropFilter prop value to "auto"
-      backdropFilter="auto"
-      backdropBlur="sm"
+      backdropFilter='auto'
+      backdropBlur='sm'
       zIndex={2147483647}
     >
-      <ButtonGroup rounded={"md"} variant="ghost" size="sm">
+      <ButtonGroup rounded={'md'} variant='ghost' size='sm'>
         {pageList.map((item, idx) => (
           <Button key={idx} href={item.path} as={NextLink}>
             {item.name}
           </Button>
         ))}
         <Button onClick={toggleColorMode}>
-          {colorMode === "light" ? <MoonIcon /> : <SunIcon />}
+          {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
         </Button>
       </ButtonGroup>
     </Flex>