- {stories.map((story) => (
-
- ))}
+
+
+ {/* Main continuous timeline */}
+
+
+
+ {sortedKeys.map((key, groupIndex) => (
+
+ {/* Month marker */}
+
+
+ {/* Month bullet */}
+
+ {/* Month label */}
+
+
+ {groupedStories[key].month} {groupedStories[key].year}
+
+
+
+
+
+ {groupedStories[key].stories.map((story) => (
+
+
+ ))}
+
+
+ ))}
+
);
diff --git a/src/components/RelatedStories.tsx b/src/components/RelatedStories.tsx
new file mode 100644
index 0000000..1748af1
--- /dev/null
+++ b/src/components/RelatedStories.tsx
@@ -0,0 +1,102 @@
+import { Story } from "@/types/story";
+import Link from "next/link";
+
+type Props = {
+ currentStory: Story;
+ allStories: Story[];
+};
+
+type RelatedStoryResult = {
+ story: Story;
+ matchingTag?: string;
+};
+
+function findRelatedStory(stories: Story[], currentStory: Story, type: "blog" | "case-study"): RelatedStoryResult | null {
+ // Filter stories by type and exclude current story
+ const typeStories = stories.filter(s => s.type === type && s.slug !== currentStory.slug);
+ if (typeStories.length === 0) return null;
+
+ // Try to find a story with matching tags
+ if (currentStory.tags && currentStory.tags.length > 0) {
+ const relatedByTags = typeStories.map(story => {
+ const matchingTags = story.tags?.filter(tag => currentStory.tags.includes(tag)) || [];
+ return {
+ story,
+ matchingTags,
+ matchingCount: matchingTags.length
+ };
+ })
+ .sort((a, b) => b.matchingCount - a.matchingCount);
+
+ if (relatedByTags[0].matchingCount > 0) {
+ return {
+ story: relatedByTags[0].story,
+ matchingTag: relatedByTags[0].matchingTags[0]
+ };
+ }
+ }
+
+ // If no matching tags, return the latest story
+ return { story: typeStories[0] };
+}
+
+export function RelatedStories({ currentStory, allStories }: Props) {
+ const relatedBlog = findRelatedStory(allStories, currentStory, "blog");
+ const relatedCaseStudy = findRelatedStory(allStories, currentStory, "case-study");
+
+ if (!relatedBlog && !relatedCaseStudy) return null;
+
+ return (
+
+ Related Stories
+
+ {relatedBlog && (
+
+
From the Blog
+
+
+
+
+ blog
+
+ {relatedBlog.matchingTag && (
+
+ {relatedBlog.matchingTag}
+
+ )}
+
+
+ {relatedBlog.story.title}
+
+
{relatedBlog.story.excerpt}
+
+
+
+
From Case Studies
+
+
+
+
+ case study
+
+ {relatedCaseStudy.matchingTag && (
+
+ {relatedCaseStudy.matchingTag}
+
+ )}
+
+
+ {relatedCaseStudy.story.title}
+
+
{relatedCaseStudy.story.excerpt}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/StoryBody.tsx b/src/components/StoryBody.tsx
index d8cf992..01f2623 100644
--- a/src/components/StoryBody.tsx
+++ b/src/components/StoryBody.tsx
@@ -7,7 +7,7 @@ type Props = {
export function StoryBody({ content }: Props) {
return (
-
+
);
diff --git a/src/components/StoryHeader.tsx b/src/components/StoryHeader.tsx
deleted file mode 100644
index 57913d6..0000000
--- a/src/components/StoryHeader.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Avatar from "@/components/Avatar";
-import CoverImage from "@/components/CoverImage";
-import DateFormatter from "@/components/DateFormatter";
-import { BlogTitle } from "@/components/BlogTitle";
-import { Author } from "@/types/author";
-
-type Props = {
- title: string;
- coverImage: string;
- date: string;
- author: Author;
-};
-
-export function StoryHeader({ title, coverImage, date, author }: Props) {
- return (
- <>
-
{title}
-
-
-
-
-
- );
-}
diff --git a/src/components/StoryPreview.tsx b/src/components/StoryPreview.tsx
index 80522c6..b6b2147 100644
--- a/src/components/StoryPreview.tsx
+++ b/src/components/StoryPreview.tsx
@@ -1,8 +1,7 @@
+'use client';
+
import { Author } from "@/types/author";
import Link from "next/link";
-import CoverImage from "@/components/CoverImage";
-import DateFormatter from "@/components/DateFormatter";
-import Avatar from "@/components/Avatar";
type Props = {
title: string;
@@ -12,6 +11,7 @@ type Props = {
author: Author;
slug: string;
type: "blog" | "case-study";
+ tags?: string[];
};
export function StoryPreview({
@@ -22,25 +22,50 @@ export function StoryPreview({
author,
slug,
type,
+ tags = [],
}: Props) {
const root = type === "blog" ? "/blogs" : "/case-studies";
+ const day = new Date(date).getDate();
+
return (
-
-
-
-
-
-
-
+
+ {/* Left side - metadata */}
+
+ {day}
-
- {excerpt}
-
-
+
+ {/* Timeline dot */}
+
+
+ {/* Right side - content */}
+
+
+
+
+ {type.replace("-", " ")}
+
+ {tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+ {title}
+
+
+ {excerpt}
+
+
+
);
}
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..eb97163
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+ const { pathname } = request.nextUrl
+
+ // Redirect /blogs and /case-studies to /writing
+ if (pathname === '/blogs' || pathname === '/case-studies') {
+ return NextResponse.redirect(new URL('/writing', request.url))
+ }
+
+ // Redirect individual blog posts and case studies
+ if (pathname.startsWith('/blogs/') || pathname.startsWith('/case-studies/')) {
+ const slug = pathname.split('/').pop()
+ return NextResponse.redirect(new URL(`/writing/${slug}`, request.url))
+ }
+
+ return NextResponse.next()
+}
+
+export const config = {
+ matcher: [
+ '/blogs',
+ '/blogs/:path*',
+ '/case-studies',
+ '/case-studies/:path*',
+ ],
+}
\ No newline at end of file