feat: enhance blog detail page with engagement features including likes and comments
This commit is contained in:
poyrazavsever
@@ -1,6 +1,7 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { BlogDetailContent } from "@/components/blog-detail-content";
|
||||
import { getBlogDetailBySlug } from "@/data/blog-detail";
|
||||
import { getBlogEngagementBySlug } from "@/data/blog-engagement";
|
||||
|
||||
type BlogDetailPageProps = {
|
||||
params: Promise<{ slug: string }>;
|
||||
@@ -9,10 +10,11 @@ type BlogDetailPageProps = {
|
||||
export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
|
||||
const { slug } = await params;
|
||||
const post = getBlogDetailBySlug(slug);
|
||||
const engagement = getBlogEngagementBySlug(slug);
|
||||
|
||||
if (!post) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return <BlogDetailContent post={post} />;
|
||||
return <BlogDetailContent post={post} engagement={engagement} />;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { Badge, Card, Typography } from "poyraz-ui/atoms";
|
||||
import {
|
||||
ArticleCard,
|
||||
@@ -68,6 +70,7 @@ export function BlogContent() {
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+359
-121
@@ -5,13 +5,26 @@ import Link from "next/link";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||||
import { Badge, Card, Typography } from "poyraz-ui/atoms";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Textarea,
|
||||
Typography,
|
||||
} from "poyraz-ui/atoms";
|
||||
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "poyraz-ui/molecules";
|
||||
import type { BlogDetail } from "@/data/blog-detail";
|
||||
import type { BlogComment, BlogEngagement } from "@/data/blog-engagement";
|
||||
|
||||
type BlogDetailContentProps = {
|
||||
post: BlogDetail;
|
||||
engagement: BlogEngagement;
|
||||
};
|
||||
|
||||
function MermaidBlock({ chart }: { chart: string }) {
|
||||
@@ -71,9 +84,16 @@ function MermaidBlock({ chart }: { chart: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
export function BlogDetailContent({ post }: BlogDetailContentProps) {
|
||||
export function BlogDetailContent({ post, engagement }: BlogDetailContentProps) {
|
||||
const scrollerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [liked, setLiked] = useState(false);
|
||||
const [likeCount, setLikeCount] = useState(engagement.likes);
|
||||
const [comments, setComments] = useState<BlogComment[]>(engagement.comments);
|
||||
const [commentSheetOpen, setCommentSheetOpen] = useState(false);
|
||||
const [githubAuthed, setGithubAuthed] = useState(false);
|
||||
const [draft, setDraft] = useState("");
|
||||
const [replyTo, setReplyTo] = useState<{ id: string; author: string } | null>(null);
|
||||
|
||||
const progressWidth = useMemo(() => `${Math.min(100, Math.max(0, progress))}%`, [progress]);
|
||||
|
||||
@@ -90,128 +110,346 @@ export function BlogDetailContent({ post }: BlogDetailContentProps) {
|
||||
setProgress((el.scrollTop / scrollable) * 100);
|
||||
};
|
||||
|
||||
const toggleLike = () => {
|
||||
setLiked((prev) => {
|
||||
const next = !prev;
|
||||
setLikeCount((count) => (next ? count + 1 : Math.max(0, count - 1)));
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleReplyClick = (id: string, author: string) => {
|
||||
setReplyTo({ id, author });
|
||||
setCommentSheetOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmitComment = () => {
|
||||
if (!githubAuthed) return;
|
||||
const content = draft.trim();
|
||||
if (!content) return;
|
||||
|
||||
if (replyTo) {
|
||||
setComments((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === replyTo.id
|
||||
? {
|
||||
...item,
|
||||
replies: [
|
||||
...item.replies,
|
||||
{
|
||||
id: `reply-${Date.now()}`,
|
||||
author: "You (GitHub)",
|
||||
avatar: "/logo/logo.jpeg",
|
||||
date: "Just now",
|
||||
content,
|
||||
likes: 0,
|
||||
},
|
||||
],
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
setReplyTo(null);
|
||||
} else {
|
||||
setComments((prev) => [
|
||||
{
|
||||
id: `comment-${Date.now()}`,
|
||||
author: "You (GitHub)",
|
||||
avatar: "/logo/logo.jpeg",
|
||||
date: "Just now",
|
||||
content,
|
||||
likes: 0,
|
||||
replies: [],
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
}
|
||||
|
||||
setDraft("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scrollerRef}
|
||||
onScroll={handleScroll}
|
||||
className="relative h-full overflow-y-auto rounded-sm border border-border"
|
||||
>
|
||||
<div className="sticky top-0 z-20 h-1 w-full bg-border">
|
||||
<div
|
||||
className="h-full bg-red-600 transition-[width] duration-100"
|
||||
style={{ width: progressWidth }}
|
||||
/>
|
||||
<>
|
||||
<div className="fixed top-0 left-0 z-50 h-1 w-full bg-border/70">
|
||||
<div className="h-full bg-red-600 transition-[width] duration-100" style={{ width: progressWidth }} />
|
||||
</div>
|
||||
|
||||
<article className="space-y-5 p-5 md:p-6">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="inline-flex items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
← Back to blog
|
||||
</Link>
|
||||
|
||||
<header className="space-y-3">
|
||||
<Badge className="rounded-sm">{post.category}</Badge>
|
||||
<Typography variant="h2" className="leading-tight">
|
||||
{post.title}
|
||||
</Typography>
|
||||
<Typography variant="small" className="text-muted-foreground">
|
||||
{post.author} - {post.date} - {post.readTime}
|
||||
</Typography>
|
||||
<Typography variant="p" className="text-muted-foreground">
|
||||
{post.excerpt}
|
||||
</Typography>
|
||||
</header>
|
||||
|
||||
<Card className="relative aspect-[16/8] overflow-hidden rounded-sm border-border">
|
||||
<Image
|
||||
src={post.coverImage}
|
||||
alt={post.title}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<section className="space-y-4">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
h2: ({ children }) => (
|
||||
<Typography variant="h3" className="mt-6">
|
||||
{children}
|
||||
</Typography>
|
||||
),
|
||||
h3: ({ children }) => (
|
||||
<Typography variant="large" className="mt-4 text-foreground">
|
||||
{children}
|
||||
</Typography>
|
||||
),
|
||||
p: ({ children }) => (
|
||||
<Typography variant="p" className="text-sm leading-relaxed">
|
||||
{children}
|
||||
</Typography>
|
||||
),
|
||||
li: ({ children }) => (
|
||||
<li className="ml-5 list-disc text-sm leading-relaxed text-foreground">{children}</li>
|
||||
),
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="border-l-2 border-red-600 pl-3 text-sm text-muted-foreground">
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
table: ({ children }) => (
|
||||
<div className="my-3 overflow-x-auto rounded-sm border border-border">
|
||||
<table className="min-w-full border-collapse text-sm">{children}</table>
|
||||
</div>
|
||||
),
|
||||
thead: ({ children }) => <thead className="bg-muted/40">{children}</thead>,
|
||||
tr: ({ children }) => <tr className="border-b border-border">{children}</tr>,
|
||||
th: ({ children }) => (
|
||||
<th className="px-3 py-2 text-left font-semibold text-foreground">{children}</th>
|
||||
),
|
||||
td: ({ children }) => (
|
||||
<td className="px-3 py-2 align-top text-foreground">{children}</td>
|
||||
),
|
||||
code: ({ className, children }) => {
|
||||
const match = /language-(\w+)/.exec(className ?? "");
|
||||
const codeText = String(children).replace(/\n$/, "");
|
||||
const language = match?.[1] ?? "";
|
||||
|
||||
if (!match) {
|
||||
return (
|
||||
<code className="rounded-sm bg-muted px-1.5 py-0.5 text-[13px]">
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
if (language === "mermaid") {
|
||||
return <MermaidBlock chart={codeText} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<SyntaxHighlighter
|
||||
language={language}
|
||||
style={vscDarkPlus}
|
||||
customStyle={{
|
||||
borderRadius: "0.25rem",
|
||||
marginTop: "0.5rem",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
showLineNumbers
|
||||
>
|
||||
{codeText}
|
||||
</SyntaxHighlighter>
|
||||
);
|
||||
},
|
||||
}}
|
||||
<div
|
||||
ref={scrollerRef}
|
||||
onScroll={handleScroll}
|
||||
className="relative h-full overflow-y-auto rounded-sm border border-border"
|
||||
>
|
||||
<article className="space-y-5 p-5 md:p-6">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="inline-flex items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
{post.markdown}
|
||||
</ReactMarkdown>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
{"<- Back to blog"}
|
||||
</Link>
|
||||
|
||||
<header className="space-y-3">
|
||||
<Badge className="rounded-sm">{post.category}</Badge>
|
||||
<Typography variant="h2" className="leading-tight">
|
||||
{post.title}
|
||||
</Typography>
|
||||
<Typography variant="small" className="text-muted-foreground">
|
||||
{post.author} - {post.date} - {post.readTime}
|
||||
</Typography>
|
||||
<Typography variant="p" className="text-muted-foreground">
|
||||
{post.excerpt}
|
||||
</Typography>
|
||||
</header>
|
||||
|
||||
<Card className="relative aspect-[16/8] overflow-hidden rounded-sm border-border">
|
||||
<Image
|
||||
src={post.coverImage}
|
||||
alt={post.title}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={liked ? "default" : "outline"}
|
||||
className="h-9 w-9 rounded-sm p-0"
|
||||
onClick={toggleLike}
|
||||
aria-label={`Like post (${likeCount})`}
|
||||
title={`Like (${likeCount})`}
|
||||
>
|
||||
<Icon icon={liked ? "mdi:heart" : "mdi:heart-outline"} width={18} height={18} />
|
||||
</Button>
|
||||
|
||||
<Sheet open={commentSheetOpen} onOpenChange={setCommentSheetOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="h-9 w-9 rounded-sm p-0"
|
||||
aria-label={`Open comments (${comments.length})`}
|
||||
title={`Comments (${comments.length})`}
|
||||
>
|
||||
<Icon icon="mdi:comment-outline" width={18} height={18} />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
|
||||
<SheetContent side="right" className="flex h-dvh w-full max-w-xl flex-col p-0">
|
||||
<div className="border-b border-border px-4 py-3">
|
||||
<SheetTitle>Comments</SheetTitle>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3 p-4">
|
||||
<div className="min-h-0 flex-1 space-y-3 overflow-y-auto pr-1">
|
||||
{comments.map((item) => (
|
||||
<Card key={item.id} className="overflow-visible rounded-sm border-border p-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<Avatar className="h-8 w-8 rounded-sm">
|
||||
<AvatarImage src={item.avatar} alt={item.author} />
|
||||
<AvatarFallback className="rounded-sm bg-muted text-xs">
|
||||
{item.author.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Typography variant="small" className="font-semibold text-foreground">
|
||||
{item.author}
|
||||
</Typography>
|
||||
<Typography variant="small" className="text-muted-foreground">
|
||||
{item.date}
|
||||
</Typography>
|
||||
</div>
|
||||
<Typography variant="small" className="mt-1 text-muted-foreground">
|
||||
{item.content}
|
||||
</Typography>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<Button type="button" variant="outline" size="sm" className="rounded-sm">
|
||||
Like ({item.likes})
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="rounded-sm"
|
||||
onClick={() => handleReplyClick(item.id, item.author)}
|
||||
>
|
||||
Reply
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{item.replies.length > 0 ? (
|
||||
<div className="mt-3 grid gap-2 border-l border-border pl-3">
|
||||
{item.replies.map((reply) => (
|
||||
<Card key={reply.id} className="rounded-sm border-border p-2.5">
|
||||
<div className="flex items-start gap-2">
|
||||
<Avatar className="h-7 w-7 rounded-sm">
|
||||
<AvatarImage src={reply.avatar} alt={reply.author} />
|
||||
<AvatarFallback className="rounded-sm bg-muted text-[10px]">
|
||||
{reply.author.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Typography
|
||||
variant="small"
|
||||
className="font-semibold text-foreground"
|
||||
>
|
||||
{reply.author}
|
||||
</Typography>
|
||||
<Typography variant="small" className="text-muted-foreground">
|
||||
{reply.date}
|
||||
</Typography>
|
||||
</div>
|
||||
<Typography variant="small" className="mt-1 text-muted-foreground">
|
||||
{reply.content}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!githubAuthed ? (
|
||||
<Card className="rounded-sm border-border p-3">
|
||||
<Typography variant="small" className="text-muted-foreground">
|
||||
You need to sign in with GitHub before posting comments.
|
||||
</Typography>
|
||||
<Button
|
||||
type="button"
|
||||
className="mt-2 rounded-sm"
|
||||
onClick={() => setGithubAuthed(true)}
|
||||
>
|
||||
Continue with GitHub
|
||||
</Button>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{replyTo ? (
|
||||
<Card className="rounded-sm border-border p-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<Typography variant="small" className="text-muted-foreground">
|
||||
Replying to {replyTo.author}
|
||||
</Typography>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="rounded-sm"
|
||||
onClick={() => setReplyTo(null)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
<Card className="rounded-sm border-border p-3">
|
||||
<Textarea
|
||||
value={draft}
|
||||
onChange={(event) => setDraft(event.target.value)}
|
||||
placeholder={githubAuthed ? "Write your comment..." : "Sign in with GitHub first"}
|
||||
className="min-h-24 rounded-sm"
|
||||
disabled={!githubAuthed}
|
||||
/>
|
||||
<div className="mt-2 flex justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
className="rounded-sm"
|
||||
onClick={handleSubmitComment}
|
||||
disabled={!githubAuthed || !draft.trim()}
|
||||
>
|
||||
Post Comment
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
<section className="space-y-4">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
h2: ({ children }) => (
|
||||
<Typography variant="h3" className="mt-6">
|
||||
{children}
|
||||
</Typography>
|
||||
),
|
||||
h3: ({ children }) => (
|
||||
<Typography variant="large" className="mt-4 text-foreground">
|
||||
{children}
|
||||
</Typography>
|
||||
),
|
||||
p: ({ children }) => (
|
||||
<Typography variant="p" className="text-sm leading-relaxed">
|
||||
{children}
|
||||
</Typography>
|
||||
),
|
||||
li: ({ children }) => (
|
||||
<li className="ml-5 list-disc text-sm leading-relaxed text-foreground">{children}</li>
|
||||
),
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="border-l-2 border-red-600 pl-3 text-sm text-muted-foreground">
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
table: ({ children }) => (
|
||||
<div className="my-3 overflow-x-auto rounded-sm border border-border">
|
||||
<table className="min-w-full border-collapse text-sm">{children}</table>
|
||||
</div>
|
||||
),
|
||||
thead: ({ children }) => <thead className="bg-muted/40">{children}</thead>,
|
||||
tr: ({ children }) => <tr className="border-b border-border">{children}</tr>,
|
||||
th: ({ children }) => (
|
||||
<th className="px-3 py-2 text-left font-semibold text-foreground">{children}</th>
|
||||
),
|
||||
td: ({ children }) => <td className="px-3 py-2 align-top text-foreground">{children}</td>,
|
||||
code: ({ className, children }) => {
|
||||
const match = /language-(\w+)/.exec(className ?? "");
|
||||
const codeText = String(children).replace(/\n$/, "");
|
||||
const language = match?.[1] ?? "";
|
||||
|
||||
if (!match) {
|
||||
return (
|
||||
<code className="rounded-sm bg-muted px-1.5 py-0.5 text-[13px]">
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
if (language === "mermaid") {
|
||||
return <MermaidBlock chart={codeText} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<SyntaxHighlighter
|
||||
language={language}
|
||||
style={vscDarkPlus}
|
||||
customStyle={{
|
||||
borderRadius: "0.25rem",
|
||||
marginTop: "0.5rem",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
showLineNumbers
|
||||
>
|
||||
{codeText}
|
||||
</SyntaxHighlighter>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{post.markdown}
|
||||
</ReactMarkdown>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
export type BlogReply = {
|
||||
id: string;
|
||||
author: string;
|
||||
avatar: string;
|
||||
date: string;
|
||||
content: string;
|
||||
likes: number;
|
||||
};
|
||||
|
||||
export type BlogComment = {
|
||||
id: string;
|
||||
author: string;
|
||||
avatar: string;
|
||||
date: string;
|
||||
content: string;
|
||||
likes: number;
|
||||
replies: BlogReply[];
|
||||
};
|
||||
|
||||
export type BlogEngagement = {
|
||||
slug: string;
|
||||
likes: number;
|
||||
comments: BlogComment[];
|
||||
};
|
||||
|
||||
export const BLOG_ENGAGEMENT: BlogEngagement[] = [
|
||||
{
|
||||
slug: "building-minimal-design-systems",
|
||||
likes: 184,
|
||||
comments: [
|
||||
{
|
||||
id: "comment-1",
|
||||
author: "Merve K.",
|
||||
avatar: "/avatars/berat.png",
|
||||
date: "2 days ago",
|
||||
content:
|
||||
"The constraints-first point is very practical. We had the same issue with variant explosion.",
|
||||
likes: 12,
|
||||
replies: [
|
||||
{
|
||||
id: "reply-1",
|
||||
author: "Poyraz Avsever",
|
||||
avatar: "/logo/logo.jpeg",
|
||||
date: "1 day ago",
|
||||
content:
|
||||
"Exactly. Once defaults are strong, most edge cases disappear without extra variants.",
|
||||
likes: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "comment-2",
|
||||
author: "Ahmet Y.",
|
||||
avatar: "/avatars/ali.png",
|
||||
date: "5 days ago",
|
||||
content:
|
||||
"Could you also share a checklist for documenting component states in PR reviews?",
|
||||
likes: 8,
|
||||
replies: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const EMPTY_ENGAGEMENT: BlogEngagement = {
|
||||
slug: "default",
|
||||
likes: 0,
|
||||
comments: [],
|
||||
};
|
||||
|
||||
export function getBlogEngagementBySlug(slug: string): BlogEngagement {
|
||||
return BLOG_ENGAGEMENT.find((item) => item.slug === slug) ?? EMPTY_ENGAGEMENT;
|
||||
}
|
||||
Reference in New Issue
Block a user