From 82c9bd815fec63211f72a1d4c308375c68e76460 Mon Sep 17 00:00:00 2001
From: Ashish Agarwal <code.with.aasheesh@gmail.com>
Date: Fri, 26 Apr 2024 02:03:56 +0530
Subject: [PATCH] Hm

---
 .../blog/[postSlug]/components/Article.jsx    | 65 +++++++++++++++++
 src/app/blog/[postSlug]/page.js               | 72 ++-----------------
 2 files changed, 72 insertions(+), 65 deletions(-)
 create mode 100644 src/app/blog/[postSlug]/components/Article.jsx

diff --git a/src/app/blog/[postSlug]/components/Article.jsx b/src/app/blog/[postSlug]/components/Article.jsx
new file mode 100644
index 0000000..a32eeaa
--- /dev/null
+++ b/src/app/blog/[postSlug]/components/Article.jsx
@@ -0,0 +1,65 @@
+import Image from "next/image";
+
+export const Article = ({ post }) => {
+  
+  return (
+    <div className="max-w-5xl xl:max-w-7xl xl:grid xl:grid-cols-[2fr_1fr] gap-12 mt-12 mb-24">
+      <aside className="mb-12 xl:order-2">
+        <Image
+          width="984"
+          height="554"
+          className="w-full rounded h-auto mb-6 xl:mb-12"
+          src={post.coverImage.url}
+          alt=""
+        />
+      </aside>
+      <article className="w-full xl:order-1 mx-auto">
+        <h1 className="text-4xl font-bold mb-8">{post.title}</h1>
+        <div className="max-w-3xl flex items-center gap-4 mb-8">
+          <Image
+            width="48"
+            height="48"
+            className="w-12 h-auto rounded-full"
+            src={post.author.profilePicture}
+            alt=""
+          />
+          <div>
+            <p className="text-lg font-bold mb-[.1rem]">{post.author.name}</p>
+            <ul className="flex gap-3">
+              <li className="text-sm">
+                <a
+                  className="hover:underline hover:text-blue-500"
+                  href="https://twitter.com/@ashishagr2024"
+                >
+                  Twitter
+                </a>{" "}
+                <a
+                  className="hover:underline hover:text-blue-500"
+                  href="https://github.com/ashishagarwal2023"
+                >
+                  GitHub
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <p className="italic text-zinc-300 mb-6">
+          Published on
+          {` `}
+          {new Date(post.publishedAt).toLocaleDateString("en-us", {
+            weekday: "long",
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}
+        </p>
+        <div
+          className="prose max-w-3xl prose-img:rounded text-white article_contents"
+          dangerouslySetInnerHTML={{
+            __html: post.content.html,
+          }}
+        />
+      </article>
+    </div>
+  );
+}
diff --git a/src/app/blog/[postSlug]/page.js b/src/app/blog/[postSlug]/page.js
index 8226188..9f279d1 100644
--- a/src/app/blog/[postSlug]/page.js
+++ b/src/app/blog/[postSlug]/page.js
@@ -1,20 +1,19 @@
-import Image from "next/image";
 import { getPostBySlug, getAllPostSlugs } from "@/lib/posts";
+import { Article } from "./components/Article";
 
 export async function generateStaticParams() {
   const slugs = await getAllPostSlugs();
   return slugs.map((slug) => ({
-    postSlug: slug
+    postSlug: slug,
   }));
 }
 
-export async function generateMetadata({
-  params,
-}) {
+export async function generateMetadata({ params }) {
   const post = await getPostBySlug(params.postSlug);
   return {
     title: `${post.title} - Ashish Agarwal`,
-    description: post.seo?.description || `Read ${post.title} on Ashish Agarwal's Blog`,
+    description:
+      post.seo?.description || `Read ${post.title} on Ashish Agarwal's Blog`,
   };
 }
 
@@ -22,64 +21,7 @@ export default async function Post({ params }) {
   const post = await getPostBySlug(params.postSlug);
   return (
     <>
-      <div className="max-w-5xl xl:max-w-7xl xl:grid xl:grid-cols-[2fr_1fr] gap-12 mt-12 mb-24">
-        <aside className="mb-12 xl:order-2">
-          <Image
-            width="984"
-            height="554"
-            className="w-full rounded h-auto mb-6 xl:mb-12"
-            src={post.coverImage.url}
-            alt=""
-          />
-        </aside>
-        <article className="w-full xl:order-1 mx-auto">
-          <h1 className="text-4xl font-bold mb-8">{post.title}</h1>
-          <div className="max-w-3xl flex items-center gap-4 mb-8">
-            <Image
-              width="48"
-              height="48"
-              className="w-12 h-auto rounded-full"
-              src={post.author.profilePicture}
-              alt=""
-            />
-            <div>
-              <p className="text-lg font-bold mb-[.1rem]">{post.author.name}</p>
-              <ul className="flex gap-3">
-                <li className="text-sm">
-                  <a
-                    className="hover:underline hover:text-blue-500"
-                    href="https://twitter.com/@ashishagr2024"
-                  >
-                    Twitter
-                  </a> {" "}
-                  <a
-                    className="hover:underline hover:text-blue-500"
-                    href="https://github.com/ashishagarwal2023"
-                  >
-                    GitHub
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <p className="italic text-zinc-300 mb-6">
-            Published on
-            {` `}
-            {new Date(post.publishedAt).toLocaleDateString("en-us", {
-              weekday: "long",
-              year: "numeric",
-              month: "short",
-              day: "numeric",
-            })}
-          </p>
-          <div
-            className="prose max-w-3xl prose-img:rounded text-white article_contents"
-            dangerouslySetInnerHTML={{
-              __html: post.content.html,
-            }}
-          />
-        </article>
-      </div>
+      <Article post={post} />
     </>
   );
-}
\ No newline at end of file
+}