Add blogs in website

Signed-off-by: Amrish Kushwaha <askmaurya48@gmail.com>

Author: isamrish

app/blog/[slug]/page.tsx

@@ -0,0 +1,130 @@
+import { getBlogMetadata, getAllBlogsMetadata } from '@/lib/blogs';
+import { Metadata } from 'next';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const metadata = getBlogMetadata(slug);
+  
+  // Read and parse the MDX file
+  const blogsDirectory = path.join(process.cwd(), 'content/blog');
+  const filePath = path.join(blogsDirectory, `${metadata.filename}.mdx`);
+  const fileContents = fs.readFileSync(filePath, 'utf8');
+  const { content } = matter(fileContents);
+
+  return (
+    <article className="max-w-4xl mx-auto py-8">
+      <header className="mb-8 border-b pb-6">
+        <h1 className="text-xl font-bold mb-4 text-foreground">
+          {metadata.title}
+        </h1>
+        <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+          <time dateTime={metadata.date}>
+            {new Date(metadata.date).toLocaleDateString("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            })}
+          </time>
+          <span className="px-2 py-1 bg-muted rounded-full text-xs">
+            {metadata.category}
+          </span>
+        </div>
+      </header>
+
+      <div className="text-muted-foreground leading-relaxed">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            h1: ({ children }) => (
+              <h1 className="text-xl font-semibold text-foreground mb-4 mt-8">
+                {children}
+              </h1>
+            ),
+            h2: ({ children }) => (
+              <h2 className="text-lg font-semibold text-foreground mb-3 mt-6">
+                {children}
+              </h2>
+            ),
+            h3: ({ children }) => (
+              <h3 className="text-base font-semibold text-foreground mb-2 mt-4">
+                {children}
+              </h3>
+            ),
+            p: ({ children }) => (
+              <p className="text-muted-foreground leading-relaxed mb-4">
+                {children}
+              </p>
+            ),
+            ul: ({ children }) => (
+              <ul className="list-disc list-inside mb-4 text-muted-foreground">
+                {children}
+              </ul>
+            ),
+            ol: ({ children }) => (
+              <ol className="list-decimal list-inside mb-4 text-muted-foreground">
+                {children}
+              </ol>
+            ),
+            li: ({ children }) => <li className="mb-1">{children}</li>,
+            code: ({ children }) => (
+              <code className="bg-muted px-1 py-0.5 rounded text-sm font-mono">
+                {children}
+              </code>
+            ),
+            pre: ({ children }) => (
+              <pre className="bg-muted p-4 rounded-lg overflow-x-auto mb-4">
+                {children}
+              </pre>
+            ),
+            blockquote: ({ children }) => (
+              <blockquote className="border-l-4 border-muted pl-4 italic text-muted-foreground/80 mb-4">
+                {children}
+              </blockquote>
+            ),
+            a: ({ href, children }) => (
+              <a
+                href={href}
+                className="text-primary hover:text-primary/80 underline transition-colors"
+              >
+                {children}
+              </a>
+            ),
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
+    </article>
+  );
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const metadata = getBlogMetadata(slug);
+  
+  return {
+    title: metadata.title,
+    description: `${metadata.category} blog from ${metadata.date}`,
+    keywords: metadata.tags,
+  };
+}
+
+export function generateStaticParams() {
+  const blogs = getAllBlogsMetadata();
+  return blogs.map(blog => ({ slug: blog.slug }));
+}
+
+export const dynamicParams = false;

app/blog/blog-client.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import Head from "../../src/components/Head";
+import { Search } from "../../src/components/Search";
+import { AllPosts } from "../../src/components/AllPosts";
+import { usePosts } from "../../src/graphql/allPostsQuery";
+import { searchByPostsOrTags } from "../../src/utils/search";
+import { BlogMetadata } from "@/lib/blogs";
+
+function convertBlogToPost(blog: BlogMetadata) {
+  return {
+    title: blog.title,
+    date: new Date(blog.date),
+    tags: blog.tags || [],
+    featured_image: null,
+    excerpt: `Local blog post in category: ${blog.category}`,
+    slug: `/blog/${blog.slug}`,
+    category: blog.category,
+    filename: blog.filename
+  };
+}
+
+interface BlogClientPageProps {
+  mdxBlogs: BlogMetadata[];
+}
+
+const BlogClientPage = ({ mdxBlogs }: BlogClientPageProps) => {
+  const [search, setSearch] = React.useState("");
+  
+  const jsonPosts = usePosts();
+  
+  const mdxPosts = mdxBlogs.map(convertBlogToPost);
+  
+  const allPosts = [...mdxPosts, ...jsonPosts].sort((a, b) => 
+    new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+  
+  const searchedPosts = searchByPostsOrTags(allPosts, search);
+
+  return (
+    <>
+      <Head title="Blog List" />
+      <div className="max-w-4xl mx-auto py-8">
+        <h2 className="text-2xl pt-4">Blog</h2>
+        <p>
+          <strong className="bold">Notes:</strong> Currently listed the posts
+          which I have written on other platforms such as medium and my website,
+          as well as local blog posts.
+        </p>
+        <Search search={search} setSearch={setSearch} />
+        <AllPosts posts={searchedPosts} search={search} />
+      </div>
+    </>
+  );
+};
+
+export default BlogClientPage;

app/blog/blogs-client.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { Search } from "../../src/components/Search";
+import { BlogMetadata } from "@/lib/blogs";
+
+interface BlogsClientComponentProps {
+  blogs: BlogMetadata[];
+}
+
+export const BlogsClientComponent = ({ blogs }: BlogsClientComponentProps) => {
+  const [search, setSearch] = React.useState("");
+  
+  // Filter blogs based on search
+  const filteredBlogs = blogs.filter(blog => 
+    (blog.title?.toLowerCase() || '').includes(search.toLowerCase()) ||
+    (blog.category?.toLowerCase() || '').includes(search.toLowerCase()) ||
+    (blog.tags || []).some(tag => tag?.toLowerCase().includes(search.toLowerCase()))
+  );
+
+  return (
+    <div className="max-w-4xl mx-auto py-8">
+      <h2 className="text-3xl font-bold mb-4">Blog</h2>
+      <p className="text-muted-foreground mb-6">
+        <strong>Notes:</strong> Currently listed the posts which I have written on other platforms such as medium and my website.
+      </p>
+      
+      <Search search={search} setSearch={setSearch} />
+      
+      <div className="space-y-6 mt-8">
+        {filteredBlogs.map((blog) => (
+          <article key={blog.slug} className="border rounded-lg p-6 hover:shadow-md transition-shadow">
+            <Link href={`/blog/${blog.slug}`} className="block">
+              <h3 className="text-xl font-semibold mb-2 hover:text-primary transition-colors">
+                {blog.title}
+              </h3>
+              <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground mb-3">
+                <time dateTime={blog.date}>
+                  {new Date(blog.date).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                  })}
+                </time>
+                <span className="px-2 py-1 bg-muted rounded-full text-xs">
+                  {blog.category}
+                </span>
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {blog.tags.map(tag => (
+                  <span key={tag} className="px-2 py-1 bg-muted/50 rounded-full text-xs">
+                    #{tag}
+                  </span>
+                ))}
+              </div>
+            </Link>
+          </article>
+        ))}
+        
+        {filteredBlogs.length === 0 && (
+          <p className="text-center text-muted-foreground py-8">
+            No blogs found matching your search.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};

app/blog/page.tsx

@@ -1,32 +1,10 @@
-"use client";
+import { getAllBlogsMetadata } from "@/lib/blogs";
+import BlogClientPage from "./blog-client.tsx";
 
-import * as React from "react";
-import Head from "../../src/components/Head";
-import { Search } from "../../src/components/Search";
-import { AllPosts } from "../../src/components/AllPosts";
-import { usePosts } from "../../src/graphql/allPostsQuery";
-import { searchByPostsOrTags } from "../../src/utils/search";
+const BlogPage = async () => {
+  const mdxBlogs = getAllBlogsMetadata();
 
-const BlogPage = () => {
-  const [search, setSearch] = React.useState("");
-  const posts = usePosts();
-  let searchedPosts = searchByPostsOrTags(posts, search);
-  React.useEffect(() => {
-    searchedPosts = searchByPostsOrTags(posts, search);
-  }, [search]);
-
-  return (
-    <>
-      <Head title="Blog List" />
-      <h2 className="text-2xl pt-4">Blog</h2>
-      <p>
-        <strong className="bold">Notes:</strong> Currently listed the posts
-        which I have written on other platforms such as medium and my website.
-      </p>
-      <Search search={search} setSearch={setSearch} />
-      <AllPosts posts={searchedPosts} search={search} />
-    </>
-  );
+  return <BlogClientPage mdxBlogs={mdxBlogs} />;
 };
 
 export default BlogPage;