make reusable, major revamp on all page.tsx

tkokhing · tkokhing · commit ae0823a593d0 · 2025-05-09T09:07:22.000+08:00
diff --git a/src/app/_components/coverpage.tsx b/src/app/_components/coverpage.tsx
@@ -13,14 +13,14 @@ export default function Index() {
           <p>Fell in love in programming when I first crosspath with it back in polytechnic during the 90s. Had fair amount of chances to nurture it, during Uni and some projects in the military. Now that I retired after serving for more than two decades, so here I come...</p>
           <h1><strong>Changes that I observed</strong></h1>	
           <h2>Well ...</h2>	
-          <ul className="space-y-4 ml-4">
+          <div className="space-y-4 ml-4">
           <p>1. Programming or coding - Nobody called it coding back then, or at least not where I am from LOL.</p>
           <p>2. Good program is called "strong algorithm" then.</p>
           <p>3. Scripts are owned - You can even sell it and definitely there isn't GitHub, GitLab, Bitbucket or ...</p>
           <p>4. Learning has becomes a breeze - besides the above, there are YouTube and more! You even need to pay to get a IDE!</p>
           <p>5. Colourful IDE - Simply love this. It was all plaintext mono-colour. Missing a bracket, GBY!</p>
           <p>6. Syntax - Learned python on my own and I simply wonder why do we still need to end with a ";" these days?!?</p>
-          </ul>
+          </div>
         </div>
         <p>Learning never stops 🏃!</p>
 
diff --git a/src/app/blog/posts/[slug]/page.tsx b/src/app/blog/posts/[slug]/page.tsx
@@ -1,22 +1,22 @@
-// pull from private repo: [tkokhing/blog_post]
-import { Metadata } from "next";
+// pull from private repo: [tkokhing/blog_post/_posts] MDX_FOLDER
 import { notFound } from "next/navigation";
-import { getAllPosts, getPostBySlug } from "@/lib/api";
-import { CMS_NAME } from "@/lib/constants";
 import Container from "@/app/_components/container";
 import { PostHeader } from "@/app/_components/post-header";
 import { PostBody } from "@/app/_components/post-body";
+import { getPostBySlug } from "@/lib/api";
+import { generatePageMetadata } from "@/lib/generatePageMetadata";
+import { generatePageStaticParams } from "@/lib/generatePageStaticParams";
 
-export default async function Post(props: Params) {
-  const params = await props.params;
-  const post = getPostBySlug(params.slug, "_posts");
-  if (!post) {
-    return notFound();
-  }
+const MDX_FOLDER = "_posts"; 
+
+export default async function Post({ params }: { params: { slug: string } }) {
+  const post = getPostBySlug(params.slug, MDX_FOLDER);
+  if (!post) return notFound();
+ 
   return (
     <main>
       <Container>
-      <article className="mb-32">
+        <article className="mb-32">
           <PostHeader
             title={post.title}
             coverImage={post.coverImage}
@@ -32,35 +32,10 @@ export default async function Post(props: Params) {
   );
 }
 
-type Params = {
-  params: Promise<{
-    slug: string;
-  }>;
-};
-
-export async function generateMetadata(props: Params): Promise<Metadata> {
-  const params = await props.params;
-  const post = getPostBySlug(params.slug, "_posts");
-
-  if (!post) {
-    return notFound();
-  }
-
-  const title = `${post.title} | Next.js Blog Example with ${CMS_NAME}`;
-
-  return {
-    title,
-    openGraph: {
-      title,
-      images: [post.ogImage.url],
-    },
-  };
+export async function generateMetadata({ params }: { params: { slug: string } }) {
+  return generatePageMetadata(params.slug, MDX_FOLDER);
 }
 
 export async function generateStaticParams() {
-  const posts = getAllPosts("_posts");
-
-  return posts.map((post) => ({
-    slug: post.slug,
-  }));
+  return generatePageStaticParams(MDX_FOLDER);
 }
diff --git a/src/app/topics/AtoZ/[slug]/page.tsx b/src/app/topics/AtoZ/[slug]/page.tsx
@@ -1,22 +1,22 @@
-// pull from private repo: [tkokhing/topic_post]
-import { Metadata } from "next";
+// pull from private repo: [tkokhing/topic_post/_topics] MDX_FOLDER
 import { notFound } from "next/navigation";
-import { getAllPosts, getPostBySlug } from "@/lib/api";
-import { CMS_NAME } from "@/lib/constants";
 import Container from "@/app/_components/container";
 import { PostHeader } from "@/app/_components/post-header";
 import { PostBody } from "@/app/_components/post-body";
+import { getPostBySlug } from "@/lib/api";
+import { generatePageMetadata } from "@/lib/generatePageMetadata";
+import { generatePageStaticParams } from "@/lib/generatePageStaticParams";
 
-export default async function Post(props: Params) {
-  const params = await props.params;
-  const post = getPostBySlug(params.slug, "_topics");
-  if (!post) {
-    return notFound();
-  }
+const MDX_FOLDER = "_topics"; 
+
+export default async function Post({ params }: { params: { slug: string } }) {
+  const post = getPostBySlug(params.slug, MDX_FOLDER);
+  if (!post) return notFound();
+ 
   return (
     <main>
       <Container>
-      <article className="mb-32">
+        <article className="mb-32">
           <PostHeader
             title={post.title}
             coverImage={post.coverImage}
@@ -32,35 +32,10 @@ export default async function Post(props: Params) {
   );
 }
 
-type Params = {
-  params: Promise<{
-    slug: string;
-  }>;
-};
-
-export async function generateMetadata(props: Params): Promise<Metadata> {
-  const params = await props.params;
-  const post = getPostBySlug(params.slug, "_topics");
-
-  if (!post) {
-    return notFound();
-  }
-
-  const title = `${post.title} | Next.js Blog Example with ${CMS_NAME}`;
-
-  return {
-    title,
-    openGraph: {
-      title,
-      images: [post.ogImage.url],
-    },
-  };
+export async function generateMetadata({ params }: { params: { slug: string } }) {
+  return generatePageMetadata(params.slug, MDX_FOLDER);
 }
 
 export async function generateStaticParams() {
-  const posts = getAllPosts("_topics");
-
-  return posts.map((post) => ({
-    slug: post.slug,
-  }));
+  return generatePageStaticParams(MDX_FOLDER);
 }
diff --git a/src/app/topics/AtoZ/terrified-by-linux/[slug]/page.tsx b/src/app/topics/AtoZ/terrified-by-linux/[slug]/page.tsx
@@ -1,33 +1,31 @@
-// pull from private repo: [tkokhing/linux_post]
-import { Metadata } from "next";
+// pull from private repo: [tkokhing/linux_post/_linux] MDX_FOLDER
 import { notFound } from "next/navigation";
-import { getAllPosts, getPostBySlug } from "@/lib/api";
-import { CMS_NAME } from "@/lib/constants";
 import Container from "@/app/_components/container";
 import { PostHeader } from "@/app/_components/post-header";
 import { PostBody } from "@/app/_components/post-body";
+import { getPostBySlug } from "@/lib/api";
+import { generatePageMetadata } from "@/lib/generatePageMetadata";
+import { generatePageStaticParams } from "@/lib/generatePageStaticParams";
 
 import Alert from "@/app/_components/blog_frame/alert";
 import Note from "@/app/_components/blog_frame/note";
 import Tip from "@/app/_components/blog_frame/tip";
 
+const MDX_FOLDER = "_linux"; 
 
-export default async function Post(props: Params) {
-  const params = await props.params;
-  const post = getPostBySlug(params.slug, "_linux");
+export default async function Post({ params }: { params: { slug: string } }) {
+  const post = getPostBySlug(params.slug, MDX_FOLDER);
   const LinuxBlogComponents = {
     Tip,
     Note,
     Alert,
   };
-
-  if (!post) {
-    return notFound();
-  }
+  if (!post) return notFound();
+ 
   return (
     <main>
       <Container>
-      <article className="mb-32">
+        <article className="mb-32">
           <PostHeader
             title={post.title}
             coverImage={post.coverImage}
@@ -43,35 +41,10 @@ export default async function Post(props: Params) {
   );
 }
 
-type Params = {
-  params: Promise<{
-    slug: string;
-  }>;
-};
-
-export async function generateMetadata(props: Params): Promise<Metadata> {
-  const params = await props.params;
-  const post = getPostBySlug(params.slug, "_linux");
-
-  if (!post) {
-    return notFound();
-  }
-
-  const title = `${post.title} | Next.js Blog Example with ${CMS_NAME}`;
-
-  return {
-    title,
-    openGraph: {
-      title,
-      images: [post.ogImage.url],
-    },
-  };
+export async function generateMetadata({ params }: { params: { slug: string } }) {
+  return generatePageMetadata(params.slug, MDX_FOLDER);
 }
 
 export async function generateStaticParams() {
-  const posts = getAllPosts("_linux");
-
-  return posts.map((post) => ({
-    slug: post.slug,
-  }));
+  return generatePageStaticParams(MDX_FOLDER);
 }
diff --git a/src/lib/api.ts b/src/lib/api.ts
@@ -8,22 +8,22 @@ function useBasePath(): string {
   return process.env.GITHUB_ACTIONS ? REPO_NAME : '';
 }
 
-function postsDirectory(subPath: string): string{
-  fs.readdir((join(process.cwd(), subPath)), (err) => {
+function postsDirectory(mdx_folder: string): string{
+  fs.readdir((join(process.cwd(), mdx_folder)), (err) => {
     if (err) {
       console.error('Error reading directory:', err);
     }
   })
-  return join(process.cwd(), subPath);
+  return join(process.cwd(), mdx_folder);
 }
 
-function getPostSlugs(subPath: string) {
-  return fs.readdirSync(postsDirectory(subPath));
+function getPostSlugs(mdx_folder: string) {
+  return fs.readdirSync(postsDirectory(mdx_folder));
 }
 
-export function getPostBySlug(slug: string, subPath: string){
+export function getPostBySlug(slug: string, mdx_folder: string){
   const realSlug = slug.replace(/\.mdx?$/, "");
-  const fullPath = join(postsDirectory(subPath), `${realSlug}.mdx`);
+  const fullPath = join(postsDirectory(mdx_folder), `${realSlug}.mdx`);
   const fileContents = fs.readFileSync(fullPath, "utf8");
   const { data, content } = matter(fileContents);
   const BASE_PATH = useBasePath();
@@ -35,8 +35,8 @@ export function getPostBySlug(slug: string, subPath: string){
   return { ...data, slug: realSlug, content } as Post;
 }
 
-export function getAllPosts(subPath: string): Post[] {
-  const slugs = getPostSlugs(subPath);
-  const posts = slugs.map((slug) => getPostBySlug(slug, subPath));
+export function getAllPosts(mdx_folder: string): Post[] {
+  const slugs = getPostSlugs(mdx_folder);
+  const posts = slugs.map((slug) => getPostBySlug(slug, mdx_folder));
   return posts.sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
 }
diff --git a/src/lib/generatePageMetadata.ts b/src/lib/generatePageMetadata.ts
@@ -0,0 +1,26 @@
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getPostBySlug } from "@/lib/api";
+
+export async function generatePageMetadata(slug: string, mdx_folder: string): Promise<Metadata> {
+  const post = getPostBySlug(slug, mdx_folder);
+  if (!post) return notFound();
+
+  const title = `${post.title}`;
+  return {
+    title,
+    description: post.excerpt,
+    openGraph: {
+      title,
+      description: post.excerpt,
+      images: [post.ogImage.url ?? "/img/logo/t.png"],
+      type: "article",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description: post.excerpt,
+      images: [post.ogImage.url ?? "/img/logo/t.png"],
+    },
+  };
+}
diff --git a/src/lib/generatePageStaticParams.ts b/src/lib/generatePageStaticParams.ts
@@ -0,0 +1,6 @@
+import { getAllPosts } from "@/lib/api";
+
+export function generatePageStaticParams(mdx_folder: string) {
+  const posts = getAllPosts(mdx_folder);
+  return posts.map((post) => ({ slug: post.slug }));
+}
