poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Poyraz Avsever
2026-03-11 11:03:00 +03:00
parent 2fbf1f532d
commit be43edc6a6
10 changed files with 304 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/blog-engagement.ts
-73
View File
@@ -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
+161 -190
View File
@@ -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 = [
"All",
"Development",
"Design",
"Mobile",
"Career",
"Productivity",
] as const;
export type BlogNewsItem = {
id: string;
title: string;
category: string;
image: string;
date: string;
href: string;
};
export const RECENT_COMMENTS = [
{
id: "comment-1",
author: "Ahmet Y.",
text: "The performance checklist was super practical. Thanks for sharing.",
date: "2 days ago",
},
{
id: "comment-2",
author: "Merve K.",
text: "I liked how you simplified the design system approach.",
date: "4 days ago",
},
] as const;
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",
...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),
},
],
};
}