블로그가 질릴 쯤엔 전면 리팩토링을 합니다 (#1)

* react19, next15로 업데이트

* 게스트북에 무한스크롤 적용

* velite 적용 (#2)

* velite 적용

* Permalink 사용으로 블로그 링크 개선 및 사이트맵 수정

* biome 적용 (#3)

* Remove rehype-code-titles from dependencies in package.json and pnpm-lock.yaml

* 스타일 변경

* 폰트 변경

Author: MiryangJung

.eslintrc.json

@@ -35,7 +35,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# contentlayer
-.contentlayer
+.env
 
-.env
+# velite generated files
+.velite
+public/static

.gitignore

@@ -3,7 +3,10 @@
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.defaultFormatter": "biomejs.biome",
+  "editor.codeActionsOnSave": {
+		"source.organizeImports.biome": "explicit"
+	},
   "editor.formatOnSave": true,
   "typescript.preferences.autoImportFileExcludePatterns": [
     "@radix-ui/*",
@@ -13,8 +16,4 @@
   "editor.quickSuggestions": {
     "strings": true
   },
-  "github.copilot.enable": {
-    "*": true,
-    "markdown": true
-  }
 }

.vscode/settings.json

@@ -1,27 +1,32 @@
 import { cn } from "@/components/ui/utils";
-import { useMDXComponent } from "next-contentlayer/hooks";
+import * as runtime from "react/jsx-runtime";
 
 interface Props {
-  code: string;
+	code: string;
 }
 
 const components = {
-  a: ({ className, ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
-    <a
-      target="_blank"
-      rel="noopener"
-      {...props}
-      className={cn([className, "text-[#ff8b9e] dark:text-[#feb3a6]"])}
-    />
-  ),
+	a: ({ className, ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
+		<a
+			target="_blank"
+			rel="noopener"
+			{...props}
+			className={cn([className, "text-primary"])}
+		/>
+	),
+};
+
+const useMDXComponent = (code: string) => {
+	const fn = new Function(code);
+	return fn({ ...runtime }).default;
 };
 
 export function Mdx({ code }: Props) {
-  const Component = useMDXComponent(code);
+	const Component = useMDXComponent(code);
 
-  return (
-    <div className="prose prose-slate dark:prose-invert flex-1">
-      <Component components={components} />
-    </div>
-  );
+	return (
+		<div className="prose prose-slate dark:prose-invert flex-1">
+			<Component components={components} />
+		</div>
+	);
 }

app/blog/[slug]/components/mdx.tsx

@@ -1,14 +1,14 @@
 import Link from "next/link";
 
 export default function Supplement() {
-  return (
-    <div className="p-2 border-l-4 border-[#AFF4C6]">
-      <Link
-        href="/guestbook"
-        className="font-bold underline underline-offset-4 text-[#AFF4C6]"
-      >
-        🍵 방명록에 한 줄 남기고 가기 🍵
-      </Link>
-    </div>
-  );
+	return (
+		<div className="px-3 py-2 bg-primary w-fit">
+			<Link
+				href="/guestbook"
+				className="font-medium text-sm text-white"
+			>
+				방명록에 한 줄 남기고 가기
+			</Link>
+		</div>
+	);
 }

app/blog/[slug]/components/supplement.tsx

@@ -1,5 +1,5 @@
 import PageLayout from "@/components/page-layout";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <PageLayout>{children}</PageLayout>;
+	return <PageLayout>{children}</PageLayout>;
 }

app/blog/[slug]/layout.tsx

@@ -1,58 +1,54 @@
-import { notFound } from "next/navigation";
-import { allBlogs } from "contentlayer/generated";
+import metadata from "@/util/metadata";
 import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { blogPosts } from "#site/content";
 import { Mdx } from "./components/mdx";
-import metadata from "@/util/metadata";
 import Supplement from "./components/supplement";
 
 interface Props {
-  params: {
-    slug: string;
-  };
+	params: {
+		slug: string;
+	};
 }
 
-export default async function DocPage({ params }: Props) {
-  const post = await getDocFromParams({ params });
-
-  if (!post) {
-    notFound();
-  }
-
-  return (
-    <div className="flex flex-col mt-5 gap-1">
-      <h1 className="break-all text-3xl font-black bg-gradient-to-r from-slate-600 via-slate-300 to-slate-700 inline-block text-transparent bg-clip-text">
-        {post.title}
-      </h1>
-      <time className="text-gray-500 text-sm mt-2 ml-auto">{post.date}</time>
-      <Mdx code={post.body.code} />
-      <Supplement />
-    </div>
-  );
+export default function DocPage({ params }: Props) {
+	const post = getPageBySlug(params.slug);
+
+	if (!post) {
+		notFound();
+	}
+
+	return (
+		<div className="flex flex-col mt-5 gap-2">
+			<h1 className="text-5xl font-black text-primary break-keep">{post.title}</h1>
+			<time className="text-primary font-medium text-sm mt-2 mb-10 ml-auto">{post.date}</time>
+			<Mdx code={post.body} />
+			<Supplement />
+		</div>
+	);
 }
 
-async function getDocFromParams({ params }: Props) {
-  const doc = allBlogs.find((doc) => doc.slug === params.slug);
-
-  return doc ?? null;
+function getPageBySlug(slug: string) {
+	return blogPosts.find((page) => page.slug === slug);
 }
 
 export async function generateStaticParams() {
-  return allBlogs.map((doc) => ({
-    slug: doc.slug,
-  }));
+	return blogPosts.map((doc) => ({
+		slug: doc.slug,
+	}));
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const doc = await getDocFromParams({ params });
-
-  if (!doc) {
-    return {};
-  }
-
-  return metadata({
-    title: doc.title,
-    description: doc.description,
-    path: `/blog/${doc.slug}`,
-    image: `/${doc.thumbnailUrl}`,
-  });
+	const doc = getPageBySlug(params.slug);
+
+	if (!doc) {
+		return {};
+	}
+
+	return metadata({
+		title: doc.title,
+		description: doc.description,
+		path: doc.permalink,
+		image: `${doc.thumbnailUrl}`,
+	});
 }

app/blog/[slug]/page.tsx

@@ -1,38 +1,40 @@
 import PageLayout from "@/components/page-layout";
-import { allBlogs } from "contentlayer/generated";
 import Image from "next/image";
 import Link from "next/link";
+import { blogPosts } from "#site/content";
 
 export default function BlogPage() {
-  return (
-    <PageLayout
-      title="Blog"
-      description="공유하고 싶거나 다시 보고 싶은 기술들을 정리합니다."
-    >
-      {allBlogs
-        .sort((a, b) => Number(new Date(b.date)) - Number(new Date(a.date)))
-        .map((blog) => (
-          <Link
-            href={`/blog/${blog.slug}`}
-            key={blog.slug}
-            className="flex py-5 items-start justify-between gap-2"
-          >
-            <div className="flex flex-col gap-1 flex-1">
-              <span className="font-bold text-lg break-all line-clamp-2">
-                {blog.title}
-              </span>
-              <span className="break-all">{blog.description}</span>
-              <time className="text-xs text-gray-500 mt-1">{blog.date}</time>
-            </div>
-            <Image
-              width={150}
-              height={150}
-              src={blog.thumbnailUrl}
-              alt={blog.title}
-              className="object-cover w-32 h-24 rounded"
-            />
-          </Link>
-        ))}
-    </PageLayout>
-  );
+	return (
+		<PageLayout
+			title="Blog"
+			description="공유하고 싶거나 다시 보고 싶은 기술들을 정리합니다."
+		>
+			<div className="flex flex-col">
+				{blogPosts
+					.sort((a, b) => Number(new Date(b.date)) - Number(new Date(a.date)))
+					.map((blog) => (
+						<Link
+							href={`${blog.permalink}`}
+							key={blog.slug}
+							className="flex py-5 items-center justify-between gap-2 border-b last:border-none"
+						>
+							<div className="flex flex-col gap-1 flex-1">
+								<span className="font-semibold text-lg break-all line-clamp-2 text-primary">
+									{blog.title}
+								</span>
+								<span className="break-all">{blog.description}</span>
+								<time className="text-xs mt-1">{blog.date}</time>
+							</div>
+							<Image
+								width={150}
+								height={150}
+								src={blog.thumbnailUrl}
+								alt={blog.title}
+								className="object-cover w-28 h-28"
+							/>
+						</Link>
+					))}
+			</div>
+		</PageLayout>
+	);
 }

app/blog/page.tsx

@@ -1,10 +1,10 @@
 export default function HomeBanner() {
-  return (
-    <div className="flex flex-col gap-2 h-[300px] rounded-lg p-6 bg-no-repeat bg-center bg-[url('/home/dark.gif')]">
-      <h1 className="text-xl font-black text-white">Miryang Jung</h1>
-      <span className="text-white">
-        Lazy Frontend Engineer who likes to travel
-      </span>
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-2 h-[300px] rounded-lg p-6 bg-no-repeat bg-center bg-[url('/home/dark.gif')]">
+			<h1 className="text-xl font-black text-white">Miryang Jung</h1>
+			<span className="text-white">
+				Lazy Frontend Engineer who likes to travel
+			</span>
+		</div>
+	);
 }

app/components/banner.tsx

@@ -1,24 +1,29 @@
-import { allBlogs } from "@/.contentlayer/generated";
 import Link from "next/link";
+import { blogPosts } from "#site/content";
 
 export default function RecentPosts() {
-  return (
-    <>
-      <h2 className="mt-5 text-2xl font-bold">최근 게시물</h2>
-      {allBlogs
-        .sort((a, b) => Number(new Date(b.date)) - Number(new Date(a.date)))
-        .slice(0, 5)
-        .map((blog) => (
-          <Link
-            href={`/blog/${blog.slug}`}
-            key={blog.slug}
-            className="flex flex-col gap-1 flex-1"
-          >
-            <span className="font-bold text-lg break-keep"> {blog.title}</span>
-            <span>{blog.description}</span>
-            <time className="text-xs text-gray-500 mt-1">{blog.date}</time>
-          </Link>
-        ))}
-    </>
-  );
+	return (
+		<>
+			<h2 className="mt-5 text-5xl font-medium text-primary">
+				Recent <span className="font-black">Posts</span>
+			</h2>
+			<div className="flex flex-col">
+				{blogPosts
+					.sort((a, b) => Number(new Date(b.date)) - Number(new Date(a.date)))
+					.slice(0, 5)
+					.map((blog) => (
+						<Link
+							href={`${blog.permalink}`}
+							key={blog.slug}
+							className="flex flex-col gap-1 flex-1 border-b last:border-none py-5"
+						>
+							<span className="font-bold text-lg break-keep text-primary">
+								{blog.title}
+							</span>
+							<span className="text-primary">{blog.description}</span>
+						</Link>
+					))}
+			</div>
+		</>
+	);
 }

app/components/recent-posts.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import * as React from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
+import type { ThemeProviderProps } from "next-themes/dist/types";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }

app/components/theme-provider.tsx

@@ -1,16 +1,16 @@
 "use server";
 
 import supabase from "@/util/supabase";
-import { GuestbookFormValues } from "../components/form";
 import { revalidatePath } from "next/cache";
+import type { GuestbookFormValues } from "../components/form";
 
 export default async function insertGuestbookAction(data: GuestbookFormValues) {
-  // !TODO 에러처리
-  await supabase.from("guestbook").insert({
-    ...data,
-    created_at: new Date().toISOString(),
-  });
+	// !TODO 에러처리
+	await supabase.from("guestbook").insert({
+		...data,
+		created_at: new Date().toISOString(),
+	});
 
-  revalidatePath("/guestbook");
-  return true;
+	revalidatePath("/guestbook");
+	return true;
 }