refactor(blog): drive blog and home sections from markdown data

app/blog/[slug]/page.tsx

@@ -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 post = await getBlogDetailBySlug(slug);
-  const engagement = getBlogEngagementBySlug(slug);
 
   if (!post) {
     notFound();
   }
 
-  return <BlogDetailContent post={post} engagement={engagement} />;
+  return <BlogDetailContent post={post} />;
 }

app/blog/page.tsx

@@ -1,5 +1,15 @@
 import { BlogContent } from "@/components/blog-content";
+import { getBlogPageData } from "@/data/blog";
 
-export default function BlogPage() {
+type BlogPageProps = {
-  return <BlogContent />;
+  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} />;
 }

app/page.tsx

@@ -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>

components/blog-content.tsx

@@ -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 {
+import type { BlogPageData } from "@/data/blog";
-  BLOG_ARTICLES,
+
-  BLOG_CATEGORIES,
+type BlogContentProps = {
-  BLOG_NEWS,
+  data: BlogPageData;
-  RECENT_COMMENTS,
+};
-} from "@/data/blog";
+
+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,63 +58,89 @@ export function BlogContent() {
           </Card>
 
           <Card className="rounded-sm border-border p-4">
-            <Typography variant="large">Son yorumlar</Typography>
+            <Typography variant="large">Podcast İçerikleri</Typography>
-            <div className="mt-3 space-y-2">
+            <div className="mt-3 space-y-3">
-              {RECENT_COMMENTS.map((comment) => (
+              {data.podcastGroups.map((group) => (
-                <Card key={comment.id} className="rounded-sm border-border p-3">
+                <Card key={group.id} className="rounded-sm border-border p-3">
-                  <Typography variant="small" className="font-semibold text-foreground">
+                  <div className="flex items-center justify-between gap-2">
-                    {comment.author}
+                    <Typography variant="small" className="font-semibold text-foreground">
-                  </Typography>
+                      {group.title}
-                  <Typography variant="small" className="mt-1 text-muted-foreground">
+                    </Typography>
-                    {comment.text}
+                    <Link
-                  </Typography>
+                      href={group.href}
-                  <Typography variant="small" className="mt-2 text-red-600">
+                      className="text-xs text-muted-foreground underline transition-colors hover:text-foreground"
-                    {comment.date}
+                    >
-                  </Typography>
+                      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-0.5 text-muted-foreground">
+                          {episode.date}
+                        </Typography>
+                      </div>
+                    ))}
+                  </div>
                 </Card>
               ))}
             </div>
           </Card>
-
         </div>
       </div>
 
       <div className="space-y-3">
-        <div className="grid gap-3 md:grid-cols-3">
+        {hasArticles ? (
-          {BLOG_ARTICLES.map((post) => (
+          <div className="grid gap-3 md:grid-cols-3">
-            <ArticleCard
+            {data.articles.map((post) => (
-              key={post.id}
+              <ArticleCard
-              image={post.image}
+                key={post.id}
-              category={post.category}
+                image={post.image}
-              title={post.title}
+                category={post.category}
-              excerpt={post.excerpt}
+                title={post.title}
-              date={post.date}
+                excerpt={post.excerpt}
-              readTime={post.readTime}
+                date={post.date}
-              href={post.href}
+                readTime={post.readTime}
-              className="rounded-sm border-border"
+                href={post.href}
-              author={{ name: "Poyraz Avsever", avatar: "/logo/logo.jpeg" }}
+                className="rounded-sm border-border"
-            />
+                author={{ name: post.author, avatar: "/logo/logo.jpeg" }}
-          ))}
+              />
-        </div>
+            ))}
+          </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>
+
+            {pageNumbers.map((page) => (
+              <PaginationItem key={page}>
+                <PaginationLink href={pageHref(page)} isActive={page === data.currentPage}>
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+
             <PaginationItem>
-              <PaginationLink href="/blog" isActive>
+              <PaginationNext
-                1
+                href={pageHref(Math.min(data.totalPages, data.currentPage + 1))}
-              </PaginationLink>
+                aria-disabled={data.currentPage >= data.totalPages}
-            </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" />
             </PaginationItem>
           </PaginationContent>
         </Pagination>

components/blog-detail-content.tsx

@@ -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 {
+import { Badge, Card, Typography } from "poyraz-ui/atoms";
-  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 }) {
-  const [svg, setSvg] = useState<string>("");
+  const [svg, setSvg] = useState("");
-  const [error, setError] = useState<string>("");
+  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;
+    const element = scrollerRef.current;
-    if (!el) return;
+    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);
+    setProgress((element.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("");
   };
 
   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 (
+                    return <code className="rounded-sm bg-muted px-1.5 py-0.5 text-[13px]">{children}</code>;
-                      <code className="rounded-sm bg-muted px-1.5 py-0.5 text-[13px]">
-                        {children}
-                      </code>
-                    );
                   }
 
                   if (language === "mermaid") {

components/home-hero.tsx

@@ -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
+            Teknolojiyi merak eden bir genç. Yazılımı seviyor, bir şeyler üretiyor ve bolca
-            deniyor. Çok fazla şey yapıyor, takipte kal.
+            deniyor. Çok fazla şey yapıyor, takipte kal.
           </Typography>
         </div>
 

data/blog-engagement.ts

@@ -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;
-}

data/blog.ts

@@ -1,193 +1,164 @@
-export const BLOG_NEWS = [
+import "server-only";
-  {
-    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;
 
-export const BLOG_ARTICLES = [
+import { listBlogDetails } from "@/data/blog-detail";
-  {
+import type { PodcastEpisode } from "@/data/content-types";
-    id: "article-design-systems-1",
+import { getPodcastCollections } from "@/lib/content-page";
-    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;
 
-export const BLOG_CATEGORIES = [
+export type BlogNewsItem = {
-  "All",
+  id: string;
-  "Development",
+  title: string;
-  "Design",
+  category: string;
-  "Mobile",
+  image: string;
-  "Career",
+  date: string;
-  "Productivity",
+  href: string;
-] as const;
+};
 
-export const RECENT_COMMENTS = [
+export type BlogArticleItem = {
-  {
+  id: string;
-    id: "comment-1",
+  slug: string;
-    author: "Ahmet Y.",
+  title: string;
-    text: "The performance checklist was super practical. Thanks for sharing.",
+  excerpt: string;
-    date: "2 days ago",
+  category: string;
-  },
+  image: string;
-  {
+  date: string;
-    id: "comment-2",
+  readTime: string;
-    author: "Merve K.",
+  href: string;
-    text: "I liked how you simplified the design system approach.",
+  author: string;
-    date: "4 days ago",
+};
-  },
+
-] as const;
+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",
+    ...new Set(
+      articles
+        .map((item) => item.category.trim())
+        .filter(Boolean),
+    ),
+  ];
+
+  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: "yazilim",
+        title: "Poyraz ile Yazılım",
+        href: "/content",
+        items: podcastCollections.yazilim.slice(0, 4).map(mapEpisodeToPodcastItem),
+      },
+      {
+        id: "masa-basi",
+        title: "Poyraz ile Masa Başı",
+        href: "/content",
+        items: podcastCollections.masaBasi.slice(0, 4).map(mapEpisodeToPodcastItem),
+      },
+    ],
+  };
+}

lib/command-palette-links.ts

@@ -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}`,
+    id: "blog-index",
-    label: item.title,
+    label: "Blog",
-    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}`,
     href: "/blog",
-    icon: "mdi:tag-outline",
+    icon: "mdi:file-document-outline",
-    keywords: [item, "blog", "kategori", "category"],
+    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[] = [

lib/home-news.ts

@@ -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;