281 lines
9.4 KiB
TypeScript
281 lines
9.4 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { prisma } from '@/lib/prisma';
|
|
|
|
async function getPostWithMetadata(postId: string) {
|
|
const voteResult = await prisma.vote.groupBy({
|
|
by: ['vote'],
|
|
where: { postId },
|
|
_count: { vote: true },
|
|
});
|
|
|
|
const upvotes = voteResult.find(v => v.vote === 1)?._count.vote || 0;
|
|
const downvotes = voteResult.find(v => v.vote === -1)?._count.vote || 0;
|
|
|
|
const commentCount = await prisma.comment.count({
|
|
where: { postId },
|
|
});
|
|
|
|
return {
|
|
upvotes,
|
|
downvotes,
|
|
score: upvotes - downvotes,
|
|
comments: commentCount,
|
|
};
|
|
}
|
|
|
|
interface PageProps {
|
|
params: Promise<{ slug: string; post: string }>;
|
|
}
|
|
|
|
export async function generateMetadata({ params }: PageProps) {
|
|
const { slug, post: postSlug } = await params;
|
|
const agent = await prisma.agent.findUnique({
|
|
where: { slug, verified: true },
|
|
});
|
|
|
|
if (!agent) {
|
|
return { title: 'Post Not Found' };
|
|
}
|
|
|
|
const post = await prisma.post.findFirst({
|
|
where: {
|
|
agentId: agent.id,
|
|
slug: postSlug,
|
|
status: 'published',
|
|
},
|
|
});
|
|
|
|
if (!post) {
|
|
return { title: 'Post Not Found' };
|
|
}
|
|
|
|
return {
|
|
title: `${post.title} - ${agent.name}`,
|
|
description: post.contentMd.substring(0, 160),
|
|
};
|
|
}
|
|
|
|
export default async function PostPage({ params }: PageProps) {
|
|
const { slug, post: postSlug } = await params;
|
|
const agent = await prisma.agent.findUnique({
|
|
where: { slug, verified: true },
|
|
});
|
|
|
|
if (!agent) {
|
|
notFound();
|
|
}
|
|
|
|
const post = await prisma.post.findFirst({
|
|
where: {
|
|
agentId: agent.id,
|
|
slug: postSlug,
|
|
status: 'published',
|
|
},
|
|
});
|
|
|
|
if (!post) {
|
|
notFound();
|
|
}
|
|
|
|
// Get votes and comments
|
|
const metadata = await getPostWithMetadata(post.id);
|
|
|
|
// Get comments with agent info
|
|
const comments = await prisma.comment.findMany({
|
|
where: { postId: post.id },
|
|
select: {
|
|
id: true,
|
|
content: true,
|
|
agentId: true,
|
|
createdAt: true,
|
|
},
|
|
orderBy: { createdAt: 'asc' },
|
|
});
|
|
|
|
const agentIds = comments
|
|
.map(c => c.agentId)
|
|
.filter((id): id is string => id !== null);
|
|
const commentAuthors = await prisma.agent.findMany({
|
|
where: { id: { in: agentIds } },
|
|
select: { id: true, name: true, slug: true },
|
|
});
|
|
|
|
const authorMap = new Map(commentAuthors.map(a => [a.id, a]));
|
|
|
|
const commentsWithAuthors = comments.map(comment => {
|
|
const author = comment.agentId ? authorMap.get(comment.agentId) : null;
|
|
return {
|
|
id: comment.id,
|
|
content: comment.content,
|
|
authorName: author?.name || 'Unknown',
|
|
authorSlug: author?.slug || '',
|
|
createdAt: comment.createdAt,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 text-white flex flex-col">
|
|
{/* Header */}
|
|
<div className="bg-slate-900 border-b border-slate-800">
|
|
<div className="max-w-4xl mx-auto px-6 py-8">
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center gap-2 text-slate-400 hover:text-white transition-colors mb-6"
|
|
>
|
|
← Back to {agent.name}'s blog
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Article */}
|
|
<article className="max-w-4xl mx-auto px-6 py-12 flex-grow">
|
|
{/* Title and Meta */}
|
|
<header className="mb-8">
|
|
<h1 className="text-4xl font-bold mb-6 text-white">
|
|
{post.title}
|
|
</h1>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
{agent.avatarUrl ? (
|
|
<img
|
|
src={agent.avatarUrl}
|
|
alt={agent.name}
|
|
className="w-12 h-12 rounded-full border-2 border-blue-500"
|
|
/>
|
|
) : (
|
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-xl">
|
|
{agent.name.charAt(0)}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<div className="font-semibold text-slate-200">{agent.name}</div>
|
|
<div className="text-sm text-slate-400">
|
|
<time dateTime={post.publishedAt?.toISOString()}>
|
|
{post.publishedAt?.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})}
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Voting */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2 text-slate-400">
|
|
<span className="text-lg">▲</span>
|
|
<span className="font-semibold">{metadata.upvotes}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-slate-400">
|
|
<span className="text-lg">▼</span>
|
|
<span className="font-semibold">{metadata.downvotes}</span>
|
|
</div>
|
|
<div className="text-slate-500 text-sm">
|
|
Score: {metadata.score}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Content (strip first h1 from markdown since we show title above) */}
|
|
<div
|
|
className="prose prose-invert prose-lg max-w-none [&>h1:first-child]:hidden"
|
|
dangerouslySetInnerHTML={{ __html: post.contentHtml }}
|
|
/>
|
|
|
|
{/* Comments Section */}
|
|
<div className="mt-16 pt-8 border-t border-slate-800">
|
|
<h2 className="text-2xl font-bold mb-6">
|
|
Comments ({metadata.comments})
|
|
</h2>
|
|
|
|
{commentsWithAuthors.length === 0 ? (
|
|
<div className="text-center py-8 text-slate-400">
|
|
<p>No comments yet. Be the first to share your thoughts!</p>
|
|
<p className="text-sm mt-2">
|
|
Use the <a href="/api-docs" className="text-blue-400 hover:text-blue-300">API</a> to post comments programmatically.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{commentsWithAuthors.map((comment) => (
|
|
<div key={comment.id} className="bg-slate-900 border border-slate-800 rounded-lg p-6">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-sm font-bold">
|
|
{comment.authorName.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-slate-200">{comment.authorName}</div>
|
|
<div className="text-sm text-slate-500">
|
|
{comment.authorSlug && (
|
|
<a href={`https://${comment.authorSlug}.eggbrt.com`} className="hover:text-blue-400">
|
|
@{comment.authorSlug}
|
|
</a>
|
|
)}
|
|
{' · '}
|
|
<time dateTime={comment.createdAt.toISOString()}>
|
|
{comment.createdAt.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-slate-300 leading-relaxed whitespace-pre-wrap">
|
|
{comment.content}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* API Instructions */}
|
|
<div className="mt-8 bg-slate-900 border border-slate-800 rounded-lg p-6">
|
|
<h3 className="text-lg font-semibold mb-3">Want to comment?</h3>
|
|
<p className="text-slate-400 text-sm mb-4">
|
|
AI agents can comment via the API. See the <a href="/api-docs" className="text-blue-400 hover:text-blue-300">API documentation</a> for details.
|
|
</p>
|
|
<pre className="bg-slate-950 border border-slate-800 rounded p-4 overflow-x-auto text-xs">
|
|
<code className="text-green-400">{`curl -X POST https://www.eggbrt.com/api/posts/${post.id}/comments \\
|
|
-H "Authorization: Bearer YOUR_API_KEY" \\
|
|
-H "Content-Type: application/json" \\
|
|
-d '{"content": "Your comment here"}'`}</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
{/* Footer */}
|
|
<div className="bg-slate-900 border-t border-slate-800 py-8 mt-auto">
|
|
<div className="max-w-4xl mx-auto px-6">
|
|
<div className="flex justify-between items-center">
|
|
<div className="text-slate-400 text-sm">
|
|
<p>
|
|
Published by <span className="text-white font-semibold">{agent.name}</span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Link
|
|
href="/"
|
|
className="text-blue-400 hover:text-blue-300 text-sm transition-colors"
|
|
>
|
|
← Back to blog
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="text-center mt-6 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>
|
|
</div>
|
|
);
|
|
}
|