direct thought/story url
This commit is contained in:
neutrino2211
156
src/app/stories/[slug]/page.tsx
Normal file
156
src/app/stories/[slug]/page.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { loadStories } from '@/utils/mdxLoader';
|
||||
import { formatReadingTime } from '@/utils/readingTime';
|
||||
|
||||
interface StoryPageProps {
|
||||
params: {
|
||||
slug: string;
|
||||
};
|
||||
}
|
||||
|
||||
import fs from 'fs';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const storiesDirectory = process.cwd() + '/src/content/stories';
|
||||
|
||||
try {
|
||||
const filenames = fs.readdirSync(storiesDirectory);
|
||||
return filenames.map((filename: string) => ({
|
||||
slug: filename.replace(/\.mdx$/, ''),
|
||||
}));
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: StoryPageProps) {
|
||||
const story = await getStoryBySlug(params.slug);
|
||||
|
||||
if (!story) {
|
||||
return {
|
||||
title: 'Story Not Found',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${story.title} | Mainasara Tsowa`,
|
||||
description: story.excerpt,
|
||||
openGraph: {
|
||||
title: `${story.title} | Mainasara Tsowa`,
|
||||
description: story.excerpt,
|
||||
url: `https://mainasara.dev/stories/${params.slug}`,
|
||||
},
|
||||
twitter: {
|
||||
title: `${story.title} | Mainasara Tsowa`,
|
||||
description: story.excerpt,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function getStoryBySlug(slug: string) {
|
||||
const stories = await loadStories();
|
||||
return stories.find(story => story.id === slug.replace(/[^a-zA-Z0-9]/g, '-'));
|
||||
}
|
||||
|
||||
export default async function StoryPage({ params }: StoryPageProps) {
|
||||
const story = await getStoryBySlug(params.slug);
|
||||
|
||||
if (!story) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50 font-mono">
|
||||
<div className="max-w-4xl mx-auto px-6 py-12">
|
||||
<header className="text-center mb-16">
|
||||
<div className="mb-8">
|
||||
<div className="w-32 h-32 mx-auto bg-black rounded-full flex items-center justify-center border-4 border-yellow-300">
|
||||
<div className="text-4xl font-bold text-yellow-300">📝</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
|
||||
Mini Stories
|
||||
</h1>
|
||||
<p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
|
||||
Capturing moments in brief narratives
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<nav className="mb-16">
|
||||
<div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
|
||||
<ul className="flex flex-wrap justify-center gap-4 md:gap-8">
|
||||
<li>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-black font-bold hover:bg-green-200 px-4 py-2 transition-colors border-2 border-black hover:border-green-400"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/digital-art"
|
||||
className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400"
|
||||
>
|
||||
Digital Art
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/stories"
|
||||
className="border-yellow-200 bg-yellow-300 px-4 py-2 border-2 text-black"
|
||||
>
|
||||
All Stories
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/thoughts"
|
||||
className="text-black font-bold hover:bg-teal-200 px-4 py-2 transition-colors border-2 border-black hover:border-teal-400"
|
||||
>
|
||||
Thoughts
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<article className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 uppercase mb-4">
|
||||
{story.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex gap-4 text-sm mb-6">
|
||||
<span className="bg-yellow-200 text-black px-3 py-1 border-2 border-black font-bold">
|
||||
{formatReadingTime(story.readTime)} read
|
||||
</span>
|
||||
<span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
|
||||
{new Date(story.createdAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<div className="text-gray-800 leading-relaxed whitespace-pre-line">
|
||||
{story.content}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer className="mt-20 text-center">
|
||||
<div className="bg-black text-white p-4 font-bold">
|
||||
<p className="text-sm uppercase">Built with brutalist pastels</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
159
src/app/thoughts/[slug]/page.tsx
Normal file
159
src/app/thoughts/[slug]/page.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { loadThoughts } from '@/utils/mdxLoader';
|
||||
import { formatReadingTime } from '@/utils/readingTime';
|
||||
|
||||
interface ThoughtPageProps {
|
||||
params: {
|
||||
slug: string;
|
||||
};
|
||||
}
|
||||
|
||||
import fs from 'fs';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const thoughtsDirectory = process.cwd() + '/src/content/thoughts';
|
||||
|
||||
try {
|
||||
const filenames = fs.readdirSync(thoughtsDirectory);
|
||||
return filenames.map((filename: string) => ({
|
||||
slug: filename.replace(/\.mdx$/, ''),
|
||||
}));
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: ThoughtPageProps) {
|
||||
const thought = await getThoughtBySlug(params.slug);
|
||||
|
||||
if (!thought) {
|
||||
return {
|
||||
title: 'Thought Not Found',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${thought.title} | Mainasara Tsowa`,
|
||||
description: thought.excerpt,
|
||||
openGraph: {
|
||||
title: `${thought.title} | Mainasara Tsowa`,
|
||||
description: thought.excerpt,
|
||||
url: `https://mainasara.dev/thoughts/${params.slug}`,
|
||||
},
|
||||
twitter: {
|
||||
title: `${thought.title} | Mainasara Tsowa`,
|
||||
description: thought.excerpt,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function getThoughtBySlug(slug: string) {
|
||||
const thoughts = await loadThoughts();
|
||||
return thoughts.find(thought => thought.id === slug.replace(/[^a-zA-Z0-9]/g, '-'));
|
||||
}
|
||||
|
||||
export default async function ThoughtPage({ params }: ThoughtPageProps) {
|
||||
const thought = await getThoughtBySlug(params.slug);
|
||||
|
||||
if (!thought) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-teal-50 via-green-50 to-blue-50 font-mono">
|
||||
<div className="max-w-4xl mx-auto px-6 py-12">
|
||||
<header className="text-center mb-16">
|
||||
<div className="mb-8">
|
||||
<div className="w-32 h-32 mx-auto bg-black rounded-full flex items-center justify-center border-4 border-teal-300">
|
||||
<div className="text-4xl font-bold text-teal-300">🌸</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
|
||||
Thoughts
|
||||
</h1>
|
||||
<p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
|
||||
Reflections on technology and life
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<nav className="mb-16">
|
||||
<div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
|
||||
<ul className="flex flex-wrap justify-center gap-4 md:gap-8">
|
||||
<li>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-black font-bold hover:bg-green-200 px-4 py-2 transition-colors border-2 border-black hover:border-green-400"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/digital-art"
|
||||
className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400"
|
||||
>
|
||||
Digital Art
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/stories"
|
||||
className="text-black font-bold hover:bg-yellow-200 px-4 py-2 transition-colors border-2 border-black hover:border-yellow-400"
|
||||
>
|
||||
Stories
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/thoughts"
|
||||
className="border-teal-200 bg-teal-300 px-4 py-2 border-2 text-black"
|
||||
>
|
||||
All Thoughts
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<article className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 uppercase mb-4">
|
||||
{thought.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex gap-4 text-sm mb-6">
|
||||
<span className="bg-teal-200 text-black px-3 py-1 border-2 border-black font-bold">
|
||||
{thought.category}
|
||||
</span>
|
||||
<span className="bg-teal-200 text-black px-3 py-1 border-2 border-black font-bold">
|
||||
{formatReadingTime(thought.readTime)} read
|
||||
</span>
|
||||
<span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
|
||||
{new Date(thought.createdAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<div className="text-gray-800 leading-relaxed whitespace-pre-line">
|
||||
{thought.content}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer className="mt-20 text-center">
|
||||
<div className="bg-black text-white p-4 font-bold">
|
||||
<p className="text-sm uppercase">Built with brutalist pastels</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user