114 blogs home page design

scripts/generate-rss.js

@@ -6,6 +6,7 @@ const { format } = require("date-fns");
 const xmlFormat = require("xml-formatter");
 
 const BLOGS_DIR = path.join(process.cwd(), "_blogs");
+const CASE_STUDIES_DIR = path.join(process.cwd(), "_case-studies");
 const OUTPUT_FILE = path.join(process.cwd(), "public", "rss.xml");
 
 function escapeXML(str) {
@@ -18,9 +19,30 @@ function escapeXML(str) {
 }
 
 function generateRSS() {
-  const files = fs.readdirSync(BLOGS_DIR);
+  let blogFiles = [];
+  let caseStudyFiles = [];
 
-  const posts = files.map((file) => {
+  try {
+    if (fs.existsSync(BLOGS_DIR)) {
+      blogFiles = fs.readdirSync(BLOGS_DIR);
+    } else {
+      console.warn("Blogs directory does not exist:", BLOGS_DIR);
+    }
+  } catch (error) {
+    console.error("Error reading blogs directory:", error);
+  }
+
+  try {
+    if (fs.existsSync(CASE_STUDIES_DIR)) {
+      caseStudyFiles = fs.readdirSync(CASE_STUDIES_DIR);
+    } else {
+      console.warn("Case studies directory does not exist:", CASE_STUDIES_DIR);
+    }
+  } catch (error) {
+    console.error("Error reading case studies directory:", error);
+  }
+
+  const posts = blogFiles.map((file) => {
     const filePath = path.join(BLOGS_DIR, file);
     const content = fs.readFileSync(filePath, "utf-8");
     const { data } = matter(content);
@@ -32,15 +54,27 @@ function generateRSS() {
     };
   });
 
-  const rssItems = posts
+  const caseStudies = caseStudyFiles.map((file) => {
+    const filePath = path.join(CASE_STUDIES_DIR, file);
+    const content = fs.readFileSync(filePath, "utf-8");
+    const { data } = matter(content);
+    return {
+      title: data.title,
+      description: data.excerpt,
+      link: `https://umairjibran.com/case-studies/${file.replace(/\.md$/, "")}`,
+      pubDate: data.date,
+    };
+  });
+
+  const rssItems = [...posts, ...caseStudies]
     .map(
       (post) =>
         `<item><title>${escapeXML(post.title)}</title><link>${escapeXML(post.link)}</link><description>${escapeXML(post.description)}</description><pubDate>${new Date(post.pubDate).toUTCString()}</pubDate><guid>${post.link}</guid></item>`,
     )
     .join("");
 
   const rssFeed =
-    `<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Umair Jibran's Blog</title><link>https://umairjibran.com/blogs</link><description>Latest articles from Umair Jibran's blog.</description><atom:link rel="self" href="https://umairjibran.com/rss.xml" /><language>en-us</language><lastBuildDate>${new Date().toUTCString()}</lastBuildDate>${rssItems}</channel></rss>`.trim();
+    `<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Umair Jibran's Writings</title><link>https://umairjibran.com/writings</link><description>Latest articles from Umair Jibran's writings.</description><atom:link rel="self" href="https://umairjibran.com/rss.xml" /><language>en-us</language><lastBuildDate>${new Date().toUTCString()}</lastBuildDate>${rssItems}</channel></rss>`.trim();
 
   fs.writeFileSync(OUTPUT_FILE, xmlFormat(rssFeed), "utf-8");
   console.log(`RSS feed generated at ${OUTPUT_FILE}`);

src/app/writing/[slug]/page.tsx

@@ -0,0 +1,73 @@
+import { getAllBlog, getAllCaseStudies } from "@/lib/api";
+import { notFound } from "next/navigation";
+import markdownToHtml from "@/lib/markdownToHtml";
+import { StoryBody } from "@/components/StoryBody";
+import { RelatedStories } from "@/components/RelatedStories";
+
+export default async function StoryPage({ params }: { params: { slug: string } }) {
+    const allStories = [
+        ...getAllBlog(),
+        ...getAllCaseStudies()
+    ];
+
+    // Find the story in either blogs or case studies
+    const story = allStories.find(story => story.slug === params.slug);
+
+    if (!story) {
+        notFound();
+    }
+
+    const content = await markdownToHtml(story.content || "");
+
+    return (
+        <main>
+            {/* Header with gradient */}
+            <div className="bg-gradient-to-br from-gray-900 to-gray-800 text-white py-16 mb-4">
+                <article className="max-w-4xl mx-auto px-4">
+                    <header>
+                        <div className="flex items-center gap-2 text-sm text-gray-300 mb-4">
+                            <span className="inline-flex items-center rounded-md bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-500/20">
+                                {story.type.replace("-", " ")}
+                            </span>
+                            <time dateTime={story.date}>{new Date(story.date).toLocaleDateString('en-US', {
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric'
+                            })}</time>
+                        </div>
+                        <h1 className="text-4xl font-bold mb-4">{story.title}</h1>
+                        <p className="text-xl text-gray-300">{story.excerpt}</p>
+                    </header>
+                </article>
+            </div>
+
+            {/* Content with sidebar */}
+            <div className="max-w-6xl mx-auto px-4">
+                <div className="flex flex-col lg:flex-row gap-12">
+                    {/* Main content */}
+                    <div className="flex-grow">
+                        <StoryBody content={content} />
+                    </div>
+
+                    {/* Sidebar */}
+                    <div className="lg:w-80 flex-shrink-0">
+                        <div className="sticky top-8">
+                            <RelatedStories currentStory={story} allStories={allStories} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}
+
+export async function generateStaticParams() {
+    const allContent = [
+        ...getAllBlog(),
+        ...getAllCaseStudies()
+    ];
+
+    return allContent.map((story) => ({
+        slug: story.slug,
+    }));
+}