add 1depth in topbar

Shubidumdu · Jan 6, 2024 · a3ba3dc · a3ba3dc
1 parent d109863
commit a3ba3dc
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 63 deletions.
diff --git a/src/app/components/Background.tsx b/src/app/components/Background.tsx
@@ -1,12 +1,18 @@
-const IFRAME_SRC = 'https://shubidumdu.github.io/sketchbook/pages/ocean/';
+type BackgroundType = 'ocean' | 'cloud' | 'bunny' | 'pollock';
 
-const Background = () => {
+const IFRAME_BASE_URL = 'https://shubidumdu.github.io/sketchbook/pages/';
+
+type BackgroundProps = {
+  type?: BackgroundType;
+};
+
+const Background = ({ type = 'ocean' }: BackgroundProps) => {
   return (
     <iframe
       id="background"
       title="background"
       className="w-full h-full fixed top-0 left-0 z-[-99]"
-      src={IFRAME_SRC}
+      src={`${IFRAME_BASE_URL}/${type}`}
     />
   );
 };

diff --git a/src/app/components/Comment.tsx b/src/app/components/Comment.tsx
@@ -39,7 +39,7 @@ const Comment = () => {
 
   return (
     <div
-      className="[&>.utterances]:max-w-full container m-auto rounded max-sm:rounded-none p-4 font-mono mt-4"
+      className="[&>.utterances]:max-w-4xl container m-auto rounded max-sm:rounded-none p-4 font-mono mt-4"
       ref={commentRef}
     />
   );

diff --git a/src/app/components/Post.tsx b/src/app/components/Post.tsx
@@ -52,7 +52,7 @@ const Post = ({ post, base }: PostProps) => {
   if (!parsedMarkDown) return null;
 
   return (
-    <div className="container m-auto rounded max-sm:rounded-none p-4 font-mono bg-white shadow">
+    <div className="container m-auto max-w-4xl rounded max-sm:rounded-none p-4 font-mono bg-white shadow">
       <div className="flex justify-between">
         <h3 className="text-gray-400 text-xs">{post.attributes.createdAt}</h3>
         <div>

diff --git a/src/app/components/TopBar.tsx b/src/app/components/TopBar.tsx
@@ -1,14 +1,42 @@
+'use client';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import React from 'react';
 
+const PATHS = [
+  {
+    path: '/posts',
+    label: 'Posts',
+  },
+  {
+    path: '/sketchbook',
+    label: 'Sketchbook',
+  },
+] as const;
+
 const TopBar = () => {
+  const pathname = usePathname();
+
   return (
-    <header className="bg-white font-mono w-full h-12 flex justify-center items-center drop-shadow-md z-50 fixed top-0">
+    <header className="bg-white font-mono w-full h-12 flex justify-between items-center drop-shadow-md z-50 fixed top-0 p-6">
       <Link href="/">
         <h1 className="text-xl font-bold text-gray-600 hover:text-gray-800 transition-all">
-          Shubidumdu&apos;s Devlog
+          Shubidumdu
         </h1>
       </Link>
+      <div className="flex gap-4">
+        {PATHS.map(({ path, label }, index) => (
+          <Link href={path} key={index}>
+            <h2
+              className={`text-l text-gray-600 hover:text-gray-800 hover:underline underline-offset-2 transition-all ${
+                pathname.includes(path) ? 'text-gray-800 font-bold' : ''
+              }`}
+            >
+              {label}
+            </h2>
+          </Link>
+        ))}
+      </div>
     </header>
   );
 };

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,6 @@ import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { ReactNode } from 'react';
-import Background from './components/Background';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -13,10 +12,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="ko">
-      <body className={inter.className}>
-        <Background />
-        {children}
-      </body>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,70 +1,27 @@
-import PostCardList from './components/PostCardList';
-import TopBar from './components/TopBar';
-import { resolve } from 'path';
-import { readFile, readdir } from 'fs/promises';
-import fm from 'front-matter';
-import { MdAttributes } from './posts/[postId]/page';
-import { PostCardProps } from './components/PostCard';
+import { redirect } from 'next/navigation';
 import { Metadata } from 'next';
 
-const getPosts = async () => {
-  const postNames = (await readdir(resolve(process.cwd(), 'src/posts'))).map(
-    (file) => file.split('.')[0],
-  );
-  const postPaths = postNames.map((postName) =>
-    resolve(process.cwd(), `src/posts/${postName}.md`),
-  );
-
-  const postsPromises = postPaths.map(async (postPath, index) => {
-    const data = await readFile(postPath, 'utf-8');
-    const content = fm<MdAttributes>(data);
-    const post: PostCardProps = {
-      ...content.attributes,
-      id: postNames[index],
-    };
-    return post;
-  });
-
-  const posts = await Promise.all(postsPromises);
-  posts.sort((a, b) => {
-    // Desc order by createdAt
-    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-  });
-  return posts;
-};
-
 export const metadata: Metadata = {
-  metadataBase: new URL('https://shubidumdu.github.io/devlog/'),
-  title: "Shubidumdu's Devlog",
+  metadataBase: new URL('https://shubidumdu.github.io/'),
+  title: 'Shubidumdu',
   description:
-    'Shubidumdu의 개발 블로그입니다. 개발 중 마주친 문제 및 그에 대한 해결과, 어떤 것의 구현에 대한 과정을 기록합니다.',
+    '레트로, 신스팝, 디스코, 호러 따위를 좋아하는 프론트엔드 개발자 Shubidumdu입니다.',
   authors: [
     {
       name: 'Shubidumdu',
       url: 'https://github.com/Shubidumdu',
     },
   ],
   colorScheme: 'light',
-  keywords: ['Shubidumdu', 'Devlog', 'Blog', '개발 블로그', '개발', '블로그'],
+  keywords: ['Shubidumdu', 'Frontend', 'Developer'],
   openGraph: {
-    title: "Shubidumdu's Devlog",
+    title: 'Shubidumdu',
     description:
-      'Shubidumdu의 개발 블로그입니다. 개발 중 마주친 문제 및 그에 대한 해결과, 어떤 것의 구현에 대한 과정을 기록합니다.',
+      '레트로, 신스팝, 디스코, 호러 따위를 좋아하는 프론트엔드 개발자 Shubidumdu입니다.',
     images: './ogImage.png',
   },
 };
 
 export default async function Home() {
-  const posts = await getPosts();
-
-  return (
-    <>
-      <TopBar />
-      <main className="container font-mono my-0 mx-auto mt-16 mb-32">
-        <div>
-          <PostCardList posts={posts} />
-        </div>
-      </main>
-    </>
-  );
+  redirect('/posts');
 }
diff --git a/src/app/posts/[postId]/page.tsx b/src/app/posts/[postId]/page.tsx
@@ -6,6 +6,7 @@ import Post from '@/app/components/Post';
 import TopBar from '@/app/components/TopBar';
 import { Metadata } from 'next';
 import Comment from '@/app/components/Comment';
+import Background from '@/app/components/Background';
 
 type PageProps = {
   params: {
@@ -88,6 +89,7 @@ const Page = async ({ params }: PageProps) => {
   return (
     <>
       <TopBar />
+      <Background />
       <main className="flex flex-col min-h-full mt-16 mb-32 sm:p-4">
         <Post post={post} base={`${BASE_URL}/${postId}/`} />
         <Comment />

diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
@@ -0,0 +1,72 @@
+import PostCardList from '../components/PostCardList';
+import TopBar from '../components/TopBar';
+import { resolve } from 'path';
+import { readFile, readdir } from 'fs/promises';
+import fm from 'front-matter';
+import { MdAttributes } from '../posts/[postId]/page';
+import { PostCardProps } from '../components/PostCard';
+import { Metadata } from 'next';
+import Background from '../components/Background';
+
+const getPosts = async () => {
+  const postNames = (await readdir(resolve(process.cwd(), 'src/posts'))).map(
+    (file) => file.split('.')[0],
+  );
+  const postPaths = postNames.map((postName) =>
+    resolve(process.cwd(), `src/posts/${postName}.md`),
+  );
+
+  const postsPromises = postPaths.map(async (postPath, index) => {
+    const data = await readFile(postPath, 'utf-8');
+    const content = fm<MdAttributes>(data);
+    const post: PostCardProps = {
+      ...content.attributes,
+      id: postNames[index],
+    };
+    return post;
+  });
+
+  const posts = await Promise.all(postsPromises);
+  posts.sort((a, b) => {
+    // Desc order by createdAt
+    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+  });
+  return posts;
+};
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://shubidumdu.github.io/devlog/'),
+  title: "Shubidumdu's Posts",
+  description:
+    '개발 중 마주친 문제 및 그에 대한 해결과, 어떤 것의 구현에 대한 과정을 기록합니다.',
+  authors: [
+    {
+      name: 'Shubidumdu',
+      url: 'https://github.com/Shubidumdu',
+    },
+  ],
+  colorScheme: 'light',
+  keywords: ['Shubidumdu', 'Devlog', 'Blog', '개발 블로그', '개발', '블로그'],
+  openGraph: {
+    title: "Shubidumdu's Posts",
+    description:
+      '개발 중 마주친 문제 및 그에 대한 해결과, 어떤 것의 구현에 대한 과정을 기록합니다.',
+    images: './ogImage.png',
+  },
+};
+
+export default async function Home() {
+  const posts = await getPosts();
+
+  return (
+    <>
+      <TopBar />
+      <Background />
+      <main className="container font-mono my-0 mx-auto mt-16 mb-32">
+        <div>
+          <PostCardList posts={posts} />
+        </div>
+      </main>
+    </>
+  );
+}