refactor(blog): drive blog and home sections from markdown data
This commit is contained in:
Poyraz Avsever
@@ -1,7 +1,6 @@
|
||||
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,12 +8,11 @@ type BlogDetailPageProps = {
|
||||
|
||||
export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
|
||||
const { slug } = await params;
|
||||
const post = getBlogDetailBySlug(slug);
|
||||
const engagement = getBlogEngagementBySlug(slug);
|
||||
const post = await getBlogDetailBySlug(slug);
|
||||
|
||||
if (!post) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return <BlogDetailContent post={post} engagement={engagement} />;
|
||||
return <BlogDetailContent post={post} />;
|
||||
}
|
||||
|
||||
+12
-2
@@ -1,5 +1,15 @@
|
||||
import { BlogContent } from "@/components/blog-content";
|
||||
import { getBlogPageData } from "@/data/blog";
|
||||
|
||||
export default function BlogPage() {
|
||||
return <BlogContent />;
|
||||
type BlogPageProps = {
|
||||
searchParams?: Promise<{ page?: string }>;
|
||||
};
|
||||
|
||||
export default async function BlogPage({ searchParams }: BlogPageProps) {
|
||||
const resolved = searchParams ? await searchParams : undefined;
|
||||
const page = Number(resolved?.page ?? "1");
|
||||
const currentPage = Number.isFinite(page) && page > 0 ? Math.floor(page) : 1;
|
||||
const data = await getBlogPageData(currentPage, 12);
|
||||
|
||||
return <BlogContent data={data} />;
|
||||
}
|
||||
|
||||
+5
-2
@@ -1,11 +1,14 @@
|
||||
import { HomeHero } from "@/components/home-hero";
|
||||
import { HomeVideosSection } from "@/components/home-videos-section";
|
||||
import { ReferencesSection } from "@/components/references-section";
|
||||
import { getHomeBlogNews } from "@/data/blog";
|
||||
|
||||
export default async function Home() {
|
||||
const homeNews = await getHomeBlogNews(3);
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<section className="flex h-full flex-col gap-4 overflow-hidden">
|
||||
<HomeHero />
|
||||
<HomeHero news={homeNews} />
|
||||
<ReferencesSection />
|
||||
<HomeVideosSection />
|
||||
</section>
|
||||
|
||||
+66
-35
@@ -1,5 +1,4 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Badge, Card, Typography } from "poyraz-ui/atoms";
|
||||
import {
|
||||
ArticleCard,
|
||||
@@ -11,19 +10,25 @@ import {
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "poyraz-ui/molecules";
|
||||
import {
|
||||
BLOG_ARTICLES,
|
||||
BLOG_CATEGORIES,
|
||||
BLOG_NEWS,
|
||||
RECENT_COMMENTS,
|
||||
} from "@/data/blog";
|
||||
import type { BlogPageData } from "@/data/blog";
|
||||
|
||||
type BlogContentProps = {
|
||||
data: BlogPageData;
|
||||
};
|
||||
|
||||
function pageHref(page: number) {
|
||||
return page <= 1 ? "/blog" : `/blog?page=${page}`;
|
||||
}
|
||||
|
||||
export function BlogContent({ data }: BlogContentProps) {
|
||||
const pageNumbers = Array.from({ length: data.totalPages }, (_, index) => index + 1);
|
||||
const hasArticles = data.articles.length > 0;
|
||||
|
||||
export function BlogContent() {
|
||||
return (
|
||||
<section className="flex h-full flex-col gap-3 overflow-hidden">
|
||||
<div className="grid gap-3 md:grid-cols-[1.35fr_1fr]">
|
||||
<div className="space-y-2">
|
||||
{BLOG_NEWS.map((post) => (
|
||||
{data.news.map((post) => (
|
||||
<NewsCard
|
||||
key={post.id}
|
||||
image={post.image}
|
||||
@@ -40,7 +45,7 @@ export function BlogContent() {
|
||||
<Card className="rounded-sm border-border p-4">
|
||||
<Typography variant="large">Kategoriler</Typography>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{BLOG_CATEGORIES.map((category, index) => (
|
||||
{data.categories.map((category, index) => (
|
||||
<Badge
|
||||
key={category}
|
||||
variant={index === 0 ? "default" : "outline"}
|
||||
@@ -53,30 +58,45 @@ export function BlogContent() {
|
||||
</Card>
|
||||
|
||||
<Card className="rounded-sm border-border p-4">
|
||||
<Typography variant="large">Son yorumlar</Typography>
|
||||
<div className="mt-3 space-y-2">
|
||||
{RECENT_COMMENTS.map((comment) => (
|
||||
<Card key={comment.id} className="rounded-sm border-border p-3">
|
||||
<Typography variant="large">Podcast İçerikleri</Typography>
|
||||
<div className="mt-3 space-y-3">
|
||||
{data.podcastGroups.map((group) => (
|
||||
<Card key={group.id} className="rounded-sm border-border p-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Typography variant="small" className="font-semibold text-foreground">
|
||||
{comment.author}
|
||||
{group.title}
|
||||
</Typography>
|
||||
<Typography variant="small" className="mt-1 text-muted-foreground">
|
||||
{comment.text}
|
||||
<Link
|
||||
href={group.href}
|
||||
className="text-xs text-muted-foreground underline transition-colors hover:text-foreground"
|
||||
>
|
||||
Tümünü Gör
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 space-y-2">
|
||||
{group.items.map((episode) => (
|
||||
<div key={episode.id} className="rounded-sm border border-border p-2">
|
||||
<Typography variant="small" className="font-medium text-foreground">
|
||||
{episode.title}
|
||||
</Typography>
|
||||
<Typography variant="small" className="mt-2 text-red-600">
|
||||
{comment.date}
|
||||
<Typography variant="small" className="mt-0.5 text-muted-foreground">
|
||||
{episode.date}
|
||||
</Typography>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{hasArticles ? (
|
||||
<div className="grid gap-3 md:grid-cols-3">
|
||||
{BLOG_ARTICLES.map((post) => (
|
||||
{data.articles.map((post) => (
|
||||
<ArticleCard
|
||||
key={post.id}
|
||||
image={post.image}
|
||||
@@ -87,29 +107,40 @@ export function BlogContent() {
|
||||
readTime={post.readTime}
|
||||
href={post.href}
|
||||
className="rounded-sm border-border"
|
||||
author={{ name: "Poyraz Avsever", avatar: "/logo/logo.jpeg" }}
|
||||
author={{ name: post.author, avatar: "/logo/logo.jpeg" }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card className="rounded-sm border-border p-5">
|
||||
<Typography variant="p" className="text-muted-foreground">
|
||||
Henüz blog yazısı bulunmuyor.
|
||||
</Typography>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Pagination className="mx-0 mt-4 justify-end">
|
||||
<Pagination className="mx-0 mt-4 justify-start">
|
||||
<PaginationContent className="justify-start">
|
||||
<PaginationItem>
|
||||
<PaginationPrevious href="/blog" />
|
||||
<PaginationPrevious
|
||||
href={pageHref(Math.max(1, data.currentPage - 1))}
|
||||
aria-disabled={data.currentPage <= 1}
|
||||
/>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="/blog" isActive>
|
||||
1
|
||||
|
||||
{pageNumbers.map((page) => (
|
||||
<PaginationItem key={page}>
|
||||
<PaginationLink href={pageHref(page)} isActive={page === data.currentPage}>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationLink href="/blog?page=2">2</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="/blog?page=3">3</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext href="/blog?page=2" />
|
||||
<PaginationNext
|
||||
href={pageHref(Math.min(data.totalPages, data.currentPage + 1))}
|
||||
aria-disabled={data.currentPage >= data.totalPages}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
|
||||
@@ -5,31 +5,18 @@ 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 {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Textarea,
|
||||
Typography,
|
||||
} from "poyraz-ui/atoms";
|
||||
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "poyraz-ui/molecules";
|
||||
import { Badge, Card, Typography } from "poyraz-ui/atoms";
|
||||
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 }) {
|
||||
const [svg, setSvg] = useState<string>("");
|
||||
const [error, setError] = useState<string>("");
|
||||
const [svg, setSvg] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2)}`);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -40,6 +27,7 @@ function MermaidBlock({ chart }: { chart: string }) {
|
||||
const mermaid = (await import("mermaid")).default;
|
||||
mermaid.initialize({ startOnLoad: false, theme: "neutral", securityLevel: "loose" });
|
||||
const { svg: rendered } = await mermaid.render(idRef.current, chart);
|
||||
|
||||
if (mounted) {
|
||||
setSvg(rendered);
|
||||
setError("");
|
||||
@@ -84,88 +72,22 @@ function MermaidBlock({ chart }: { chart: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
export function BlogDetailContent({ post, engagement }: BlogDetailContentProps) {
|
||||
export function BlogDetailContent({ post }: 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]);
|
||||
|
||||
const handleScroll = () => {
|
||||
const el = scrollerRef.current;
|
||||
if (!el) return;
|
||||
const element = scrollerRef.current;
|
||||
if (!element) return;
|
||||
|
||||
const scrollable = el.scrollHeight - el.clientHeight;
|
||||
const scrollable = element.scrollHeight - element.clientHeight;
|
||||
if (scrollable <= 0) {
|
||||
setProgress(100);
|
||||
return;
|
||||
}
|
||||
|
||||
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: "Sen (GitHub)",
|
||||
avatar: "/logo/logo.jpeg",
|
||||
date: "Az önce",
|
||||
content,
|
||||
likes: 0,
|
||||
},
|
||||
],
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
setReplyTo(null);
|
||||
} else {
|
||||
setComments((prev) => [
|
||||
{
|
||||
id: `comment-${Date.now()}`,
|
||||
author: "Sen (GitHub)",
|
||||
avatar: "/logo/logo.jpeg",
|
||||
date: "Az önce",
|
||||
content,
|
||||
likes: 0,
|
||||
replies: [],
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
}
|
||||
|
||||
setDraft("");
|
||||
setProgress((element.scrollTop / scrollable) * 100);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -210,169 +132,6 @@ export function BlogDetailContent({ post, engagement }: BlogDetailContentProps)
|
||||
/>
|
||||
</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={`Yazıyı beğen (${likeCount})`}
|
||||
title={`Beğen (${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={`Yorumları aç (${comments.length})`}
|
||||
title={`Yorumlar (${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>Yorumlar</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">
|
||||
Beğen ({item.likes})
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="rounded-sm"
|
||||
onClick={() => handleReplyClick(item.id, item.author)}
|
||||
>
|
||||
Yanıtla
|
||||
</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">
|
||||
Yorum yapmadan önce GitHub ile giriş yapman gerekiyor.
|
||||
</Typography>
|
||||
<Button
|
||||
type="button"
|
||||
className="mt-2 rounded-sm"
|
||||
onClick={() => setGithubAuthed(true)}
|
||||
>
|
||||
GitHub ile devam et
|
||||
</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">
|
||||
{replyTo.author} kullanıcısına yanıt yazıyorsun
|
||||
</Typography>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="rounded-sm"
|
||||
onClick={() => setReplyTo(null)}
|
||||
>
|
||||
Vazgeç
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
<Card className="rounded-sm border-border p-3">
|
||||
<Textarea
|
||||
value={draft}
|
||||
onChange={(event) => setDraft(event.target.value)}
|
||||
placeholder={githubAuthed ? "Yorumunu yaz..." : "Önce GitHub ile giriş yap"}
|
||||
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()}
|
||||
>
|
||||
Yorumu Gönder
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
<section className="space-y-4">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
@@ -417,11 +176,7 @@ export function BlogDetailContent({ post, engagement }: BlogDetailContentProps)
|
||||
const language = match?.[1] ?? "";
|
||||
|
||||
if (!match) {
|
||||
return (
|
||||
<code className="rounded-sm bg-muted px-1.5 py-0.5 text-[13px]">
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
return <code className="rounded-sm bg-muted px-1.5 py-0.5 text-[13px]">{children}</code>;
|
||||
}
|
||||
|
||||
if (language === "mermaid") {
|
||||
|
||||
@@ -4,9 +4,19 @@ import Image from "next/image";
|
||||
import { useRef, useState } from "react";
|
||||
import { Card, Typography } from "poyraz-ui/atoms";
|
||||
import { NewsCard } from "poyraz-ui/molecules";
|
||||
import { HOME_NEWS } from "@/lib/home-news";
|
||||
|
||||
export function HomeHero() {
|
||||
type HomeHeroProps = {
|
||||
news: {
|
||||
id: string;
|
||||
category: string;
|
||||
title: string;
|
||||
date: string;
|
||||
image: string;
|
||||
href: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
export function HomeHero({ news }: HomeHeroProps) {
|
||||
const [frame, setFrame] = useState<1 | 2>(1);
|
||||
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
@@ -29,7 +39,7 @@ export function HomeHero() {
|
||||
return (
|
||||
<section className="grid gap-3 md:h-65 md:grid-cols-2">
|
||||
<div className="grid gap-2 md:grid-rows-3">
|
||||
{HOME_NEWS.map((item) => (
|
||||
{news.map((item) => (
|
||||
<NewsCard
|
||||
key={item.id}
|
||||
className="rounded-sm border-border md:h-full"
|
||||
@@ -54,8 +64,8 @@ export function HomeHero() {
|
||||
</Typography>
|
||||
</div>
|
||||
<Typography variant="small" className="text-muted-foreground">
|
||||
Teknolojiyi merak eden bir genç. Yazılımı seviyor, bir şeyler üretiyor ve bolca
|
||||
deniyor. Çok fazla şey yapıyor, takipte kal.
|
||||
Teknolojiyi merak eden bir genç. Yazılımı seviyor, bir şeyler üretiyor ve bolca
|
||||
deniyor. Çok fazla şey yapıyor, takipte kal.
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
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;
|
||||
}
|
||||
+156
-185
@@ -1,193 +1,164 @@
|
||||
export const BLOG_NEWS = [
|
||||
{
|
||||
id: "next-16-notes",
|
||||
title: "Next.js 16 Released with Major Performance Improvements",
|
||||
category: "Technology",
|
||||
image: "/news/performance.svg",
|
||||
date: "Mar 6, 2026",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "ui-system-basics",
|
||||
title: "Minimalism in Modern UI: Less Is Truly More",
|
||||
category: "Design",
|
||||
image: "/news/design.svg",
|
||||
date: "Mar 5, 2026",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "next-16-notes-2",
|
||||
title: "Next.js 16 Released with Major Performance Improvements",
|
||||
category: "Technology",
|
||||
image: "/news/performance.svg",
|
||||
date: "Mar 6, 2026",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "ui-system-basics-2",
|
||||
title: "Minimalism in Modern UI: Less Is Truly More",
|
||||
category: "Design",
|
||||
image: "/news/design.svg",
|
||||
date: "Mar 5, 2026",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
] as const;
|
||||
import "server-only";
|
||||
|
||||
export const BLOG_ARTICLES = [
|
||||
{
|
||||
id: "article-design-systems-1",
|
||||
title: "Building Minimal Design Systems",
|
||||
excerpt:
|
||||
"A deep dive into creating clean, composable components with Tailwind CSS and Radix primitives.",
|
||||
category: "React",
|
||||
image: "/news/design.svg",
|
||||
date: "Mar 2026",
|
||||
readTime: "4 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-2",
|
||||
title: "Practical UI Consistency for Startup Teams",
|
||||
excerpt:
|
||||
"How to keep visual quality stable while features ship fast across multiple screens.",
|
||||
category: "Design",
|
||||
image: "/news/performance.svg",
|
||||
date: "Mar 2026",
|
||||
readTime: "5 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-3",
|
||||
title: "React Patterns That Age Well in Production",
|
||||
excerpt:
|
||||
"Component composition, state boundaries, and patterns that remain maintainable over time.",
|
||||
category: "React",
|
||||
image: "/news/performance.svg",
|
||||
date: "Mar 2026",
|
||||
readTime: "6 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-4",
|
||||
title: "Mobile-First Decisions for Web Developers",
|
||||
excerpt:
|
||||
"A short guide to adapting web habits when product constraints are mobile-first.",
|
||||
category: "Mobile",
|
||||
image: "/images/hero1.png",
|
||||
date: "Feb 2026",
|
||||
readTime: "4 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-5",
|
||||
title: "Design Tokens Without Enterprise Complexity",
|
||||
excerpt:
|
||||
"A lightweight token strategy for colors, spacing, and type that still scales.",
|
||||
category: "Design",
|
||||
image: "/news/design.svg",
|
||||
date: "Feb 2026",
|
||||
readTime: "5 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-6",
|
||||
title: "Improving Developer Experience in UI Projects",
|
||||
excerpt:
|
||||
"Naming, structure, and defaults that reduce friction for both current and future contributors.",
|
||||
category: "Development",
|
||||
image: "/news/performance.svg",
|
||||
date: "Feb 2026",
|
||||
readTime: "5 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-7",
|
||||
title: "Fast Feedback Loops for Better Frontend Quality",
|
||||
excerpt:
|
||||
"Practical review loops that catch UX and implementation issues before release.",
|
||||
category: "Career",
|
||||
image: "/images/hero2.png",
|
||||
date: "Jan 2026",
|
||||
readTime: "4 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-8",
|
||||
title: "Scaling Component Libraries Responsibly",
|
||||
excerpt:
|
||||
"When to abstract, when to duplicate, and how to avoid premature complexity.",
|
||||
category: "React",
|
||||
image: "/news/design.svg",
|
||||
date: "Jan 2026",
|
||||
readTime: "6 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-9",
|
||||
title: "Clean Navigation UX for Portfolio Sites",
|
||||
excerpt:
|
||||
"Simple navigation patterns that improve flow, clarity, and perceived polish.",
|
||||
category: "Design",
|
||||
image: "/news/performance.svg",
|
||||
date: "Jan 2026",
|
||||
readTime: "3 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-10",
|
||||
title: "What I Learned from Shipping Weekly",
|
||||
excerpt:
|
||||
"A personal workflow for shipping consistently without losing architectural direction.",
|
||||
category: "Productivity",
|
||||
image: "/images/hero1.png",
|
||||
date: "Dec 2025",
|
||||
readTime: "4 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-11",
|
||||
title: "Reducing UI Noise with Fewer Decisions",
|
||||
excerpt:
|
||||
"How constraints can improve speed, coherence, and confidence across a project.",
|
||||
category: "Design",
|
||||
image: "/news/design.svg",
|
||||
date: "Dec 2025",
|
||||
readTime: "4 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
{
|
||||
id: "article-design-systems-12",
|
||||
title: "Portfolio Engineering Beyond Visuals",
|
||||
excerpt:
|
||||
"Performance, accessibility, and maintainability decisions that matter in real portfolios.",
|
||||
category: "Development",
|
||||
image: "/news/performance.svg",
|
||||
date: "Dec 2025",
|
||||
readTime: "6 min",
|
||||
href: "/blog/building-minimal-design-systems",
|
||||
},
|
||||
] as const;
|
||||
import { listBlogDetails } from "@/data/blog-detail";
|
||||
import type { PodcastEpisode } from "@/data/content-types";
|
||||
import { getPodcastCollections } from "@/lib/content-page";
|
||||
|
||||
export const BLOG_CATEGORIES = [
|
||||
export type BlogNewsItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
category: string;
|
||||
image: string;
|
||||
date: string;
|
||||
href: string;
|
||||
};
|
||||
|
||||
export type BlogArticleItem = {
|
||||
id: string;
|
||||
slug: string;
|
||||
title: string;
|
||||
excerpt: string;
|
||||
category: string;
|
||||
image: string;
|
||||
date: string;
|
||||
readTime: string;
|
||||
href: string;
|
||||
author: string;
|
||||
};
|
||||
|
||||
export type BlogPodcastItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
date: string;
|
||||
href: string;
|
||||
};
|
||||
|
||||
export type BlogPodcastGroup = {
|
||||
id: "yazilim" | "masa-basi";
|
||||
title: string;
|
||||
href: string;
|
||||
items: BlogPodcastItem[];
|
||||
};
|
||||
|
||||
export type BlogPageData = {
|
||||
news: BlogNewsItem[];
|
||||
articles: BlogArticleItem[];
|
||||
categories: string[];
|
||||
podcastGroups: BlogPodcastGroup[];
|
||||
totalPages: number;
|
||||
currentPage: number;
|
||||
};
|
||||
|
||||
const DEFAULT_IMAGE = "/news/design.svg";
|
||||
const DEFAULT_READ_TIME = "5 min";
|
||||
|
||||
function toTimestamp(value: string) {
|
||||
const timestamp = Date.parse(value);
|
||||
return Number.isNaN(timestamp) ? 0 : timestamp;
|
||||
}
|
||||
|
||||
function sortByDateDesc<T extends { date: string; id: string }>(items: T[]) {
|
||||
return [...items].sort((a, b) => {
|
||||
const aTime = toTimestamp(a.date);
|
||||
const bTime = toTimestamp(b.date);
|
||||
|
||||
if (aTime && bTime && aTime !== bTime) {
|
||||
return bTime - aTime;
|
||||
}
|
||||
|
||||
if (aTime !== bTime) {
|
||||
return bTime - aTime;
|
||||
}
|
||||
|
||||
return a.id.localeCompare(b.id);
|
||||
});
|
||||
}
|
||||
|
||||
function mapEpisodeToPodcastItem(episode: PodcastEpisode): BlogPodcastItem {
|
||||
return {
|
||||
id: `${episode.podcast}-${episode.slug}`,
|
||||
title: episode.title,
|
||||
date: episode.date,
|
||||
href: "/content",
|
||||
};
|
||||
}
|
||||
|
||||
export async function getAllBlogArticles(): Promise<BlogArticleItem[]> {
|
||||
const posts = await listBlogDetails();
|
||||
|
||||
const articles = posts.map((post) => ({
|
||||
id: post.slug,
|
||||
slug: post.slug,
|
||||
title: post.title,
|
||||
excerpt: post.excerpt,
|
||||
category: post.category || "General",
|
||||
image: post.coverImage || DEFAULT_IMAGE,
|
||||
date: post.date,
|
||||
readTime: post.readTime || DEFAULT_READ_TIME,
|
||||
href: `/blog/${post.slug}`,
|
||||
author: post.author || "Poyraz Avsever",
|
||||
}));
|
||||
|
||||
return sortByDateDesc(articles);
|
||||
}
|
||||
|
||||
export async function getHomeBlogNews(limit = 3): Promise<BlogNewsItem[]> {
|
||||
const articles = await getAllBlogArticles();
|
||||
|
||||
return articles.slice(0, limit).map((item) => ({
|
||||
id: `home-news-${item.slug}`,
|
||||
title: item.title,
|
||||
category: item.category,
|
||||
image: item.image,
|
||||
date: item.date,
|
||||
href: item.href,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function getBlogPageData(page = 1, pageSize = 12): Promise<BlogPageData> {
|
||||
const articles = await getAllBlogArticles();
|
||||
const totalPages = Math.max(1, Math.ceil(Math.max(articles.length, 1) / pageSize));
|
||||
const currentPage = Math.min(Math.max(1, page), totalPages);
|
||||
const start = (currentPage - 1) * pageSize;
|
||||
const paginated = articles.slice(start, start + pageSize);
|
||||
|
||||
const categories = [
|
||||
"All",
|
||||
"Development",
|
||||
"Design",
|
||||
"Mobile",
|
||||
"Career",
|
||||
"Productivity",
|
||||
] as const;
|
||||
...new Set(
|
||||
articles
|
||||
.map((item) => item.category.trim())
|
||||
.filter(Boolean),
|
||||
),
|
||||
];
|
||||
|
||||
export const RECENT_COMMENTS = [
|
||||
const podcastCollections = await getPodcastCollections();
|
||||
|
||||
return {
|
||||
news: articles.slice(0, 4).map((item) => ({
|
||||
id: `blog-news-${item.slug}`,
|
||||
title: item.title,
|
||||
category: item.category,
|
||||
image: item.image,
|
||||
date: item.date,
|
||||
href: item.href,
|
||||
})),
|
||||
articles: paginated,
|
||||
categories,
|
||||
totalPages,
|
||||
currentPage,
|
||||
podcastGroups: [
|
||||
{
|
||||
id: "comment-1",
|
||||
author: "Ahmet Y.",
|
||||
text: "The performance checklist was super practical. Thanks for sharing.",
|
||||
date: "2 days ago",
|
||||
id: "yazilim",
|
||||
title: "Poyraz ile Yazılım",
|
||||
href: "/content",
|
||||
items: podcastCollections.yazilim.slice(0, 4).map(mapEpisodeToPodcastItem),
|
||||
},
|
||||
{
|
||||
id: "comment-2",
|
||||
author: "Merve K.",
|
||||
text: "I liked how you simplified the design system approach.",
|
||||
date: "4 days ago",
|
||||
id: "masa-basi",
|
||||
title: "Poyraz ile Masa Başı",
|
||||
href: "/content",
|
||||
items: podcastCollections.masaBasi.slice(0, 4).map(mapEpisodeToPodcastItem),
|
||||
},
|
||||
] as const;
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { BLOG_ARTICLES, BLOG_CATEGORIES } from "@/data/blog";
|
||||
import { BLOG_DETAILS } from "@/data/blog-detail";
|
||||
import { certificates } from "@/data/certificates";
|
||||
import { EDUCATION } from "@/data/education";
|
||||
import { EXPERIENCE } from "@/data/experience";
|
||||
@@ -42,27 +40,20 @@ const socialItems: CommandPaletteItem[] = SOCIAL_LINKS.map((item) => ({
|
||||
}));
|
||||
|
||||
const blogItems: CommandPaletteItem[] = [
|
||||
...BLOG_DETAILS.map((item) => ({
|
||||
id: `blog-detail-${item.slug}`,
|
||||
label: item.title,
|
||||
href: `/blog/${item.slug}`,
|
||||
icon: "mdi:post-outline",
|
||||
keywords: [item.category, item.author, item.excerpt, "blog", "yazı", "article"],
|
||||
})),
|
||||
...BLOG_ARTICLES.map((item, index) => ({
|
||||
id: `blog-article-${item.id}-${index}`,
|
||||
label: item.title,
|
||||
href: item.href,
|
||||
icon: "mdi:file-document-outline",
|
||||
keywords: [item.category, item.excerpt, item.readTime, "blog", "yazı", "article"],
|
||||
})),
|
||||
...BLOG_CATEGORIES.map((item) => ({
|
||||
id: `blog-category-${item}`,
|
||||
label: `Kategori: ${item}`,
|
||||
{
|
||||
id: "blog-index",
|
||||
label: "Blog",
|
||||
href: "/blog",
|
||||
icon: "mdi:tag-outline",
|
||||
keywords: [item, "blog", "kategori", "category"],
|
||||
})),
|
||||
icon: "mdi:file-document-outline",
|
||||
keywords: ["blog", "yazı", "article", "post"],
|
||||
},
|
||||
{
|
||||
id: "blog-content-page",
|
||||
label: "Podcast ve İçerikler",
|
||||
href: "/content",
|
||||
icon: "mdi:microphone-outline",
|
||||
keywords: ["podcast", "yazılım", "masa başı", "içerik", "content"],
|
||||
},
|
||||
];
|
||||
|
||||
const aboutItems: CommandPaletteItem[] = [
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
export const HOME_NEWS = [
|
||||
{
|
||||
id: "news-performance",
|
||||
category: "Technology",
|
||||
title: "Next.js 16 Released with Major Performance Improvements",
|
||||
date: "Mar 6, 2026",
|
||||
image: "/news/performance.svg",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "news-design",
|
||||
category: "Design",
|
||||
title: "Minimalism in Modern UI: Less Is Truly More",
|
||||
date: "Mar 5, 2026",
|
||||
image: "/news/design.svg",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
id: "news-launch",
|
||||
category: "Open Source",
|
||||
title: "Poyraz UI v1.0 Launched - A Minimal React Component Library",
|
||||
date: "Mar 4, 2026",
|
||||
href: "/projects",
|
||||
},
|
||||
] as const;
|
||||
Reference in New Issue
Block a user