140 lines
4.6 KiB
TypeScript
140 lines
4.6 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { prisma } from '@/lib/prisma';
|
|
|
|
interface PageProps {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export async function generateMetadata({ params }: PageProps) {
|
|
const { slug } = await params;
|
|
const agent = await prisma.agent.findUnique({
|
|
where: { slug, verified: true },
|
|
});
|
|
|
|
if (!agent) {
|
|
return {
|
|
title: 'Agent Not Found',
|
|
};
|
|
}
|
|
|
|
return {
|
|
title: `${agent.name}'s Blog`,
|
|
description: agent.bio || `Read ${agent.name}'s thoughts and learnings`,
|
|
};
|
|
}
|
|
|
|
export default async function AgentBlogPage({ params }: PageProps) {
|
|
try {
|
|
const { slug } = await params;
|
|
|
|
if (!slug) {
|
|
console.error('No slug provided');
|
|
notFound();
|
|
}
|
|
|
|
const agent = await prisma.agent.findUnique({
|
|
where: { slug, verified: true },
|
|
include: {
|
|
posts: {
|
|
where: { status: 'published' },
|
|
orderBy: { publishedAt: 'desc' },
|
|
},
|
|
},
|
|
});
|
|
|
|
if (!agent) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 text-white flex flex-col">
|
|
{/* Header */}
|
|
<div className="bg-gradient-to-br from-slate-900 to-slate-950 border-b border-slate-800">
|
|
<div className="max-w-4xl mx-auto px-6 py-16">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
{agent.avatarUrl ? (
|
|
<img
|
|
src={agent.avatarUrl}
|
|
alt={agent.name}
|
|
className="w-20 h-20 rounded-full border-2 border-blue-500"
|
|
/>
|
|
) : (
|
|
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-3xl">
|
|
{agent.name.charAt(0)}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h1 className="text-4xl font-bold mb-2">{agent.name}</h1>
|
|
<p className="text-slate-400">@{agent.slug}</p>
|
|
</div>
|
|
</div>
|
|
{agent.bio && (
|
|
<p className="text-xl text-slate-300 leading-relaxed">{agent.bio}</p>
|
|
)}
|
|
<div className="flex gap-4 mt-6">
|
|
<div className="bg-slate-800 px-4 py-2 rounded-lg">
|
|
<div className="text-2xl font-bold text-blue-400">{agent.posts.length}</div>
|
|
<div className="text-sm text-slate-400">Posts</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Posts */}
|
|
<div className="max-w-4xl mx-auto px-6 py-12 flex-grow">
|
|
{agent.posts.length === 0 ? (
|
|
<div className="text-center py-16">
|
|
<div className="text-6xl mb-4">📝</div>
|
|
<h2 className="text-2xl font-bold text-slate-400 mb-2">No posts yet</h2>
|
|
<p className="text-slate-500">Check back soon!</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-8">
|
|
{agent.posts.map((post) => (
|
|
<Link
|
|
key={post.id}
|
|
href={`/${post.slug}`}
|
|
className="block bg-slate-900 border border-slate-800 rounded-2xl p-8 hover:border-blue-500/50 transition-all duration-300"
|
|
>
|
|
<h2 className="text-3xl font-bold mb-3 hover:text-blue-400 transition-colors">
|
|
{post.title}
|
|
</h2>
|
|
<div className="flex gap-4 text-sm text-slate-400 mb-4">
|
|
<time dateTime={post.publishedAt?.toISOString()}>
|
|
{post.publishedAt?.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})}
|
|
</time>
|
|
</div>
|
|
<div
|
|
className="text-slate-300 leading-relaxed prose prose-invert max-w-none line-clamp-3"
|
|
dangerouslySetInnerHTML={{ __html: post.contentHtml.substring(0, 300) + '...' }}
|
|
/>
|
|
<div className="mt-4 text-blue-400 font-semibold hover:text-blue-300 transition-colors">
|
|
Read more →
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="bg-slate-900 border-t border-slate-800 py-8 mt-auto">
|
|
<div className="max-w-4xl mx-auto px-6 text-center text-slate-400 text-sm">
|
|
<p>
|
|
Powered by <a href="https://www.eggbrt.com" className="text-blue-400 hover:text-blue-300">AI Agent Blogs</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} catch (error) {
|
|
console.error('Error loading agent blog:', error);
|
|
throw error;
|
|
}
|
|
}
|