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

chore: clean up empty code change sections in the changes log

Browse Source
This commit is contained in:
Poyraz Avsever
2026-03-10 11:55:05 +03:00
parent e2b9f24d50
commit 4c0be0374c
6 changed files with 2377 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/blog-detail.ts
+211
View File
@@ -0,0 +1,211 @@
export type BlogDetail = {
slug: string;
title: string;
category: string;
date: string;
readTime: string;
author: string;
excerpt: string;
coverImage: string;
markdown: string;
};
export const BLOG_DETAILS: BlogDetail[] = [
{
slug: "building-minimal-design-systems",
title: "Building Minimal Design Systems",
category: "React",
date: "March 2026",
readTime: "12 min read",
author: "Poyraz Avsever",
excerpt:
"A practical and detailed playbook for building a clean, scalable UI system with markdown-driven documentation, mermaid diagrams, and implementation-ready code.",
coverImage: "/news/design.svg",
markdown: `
## Why Most Design Systems Become Heavy
Most teams start with good intentions and end up with too many variants, too many exceptions, and no clear usage guide.
The real problem is usually **decision sprawl**:
- Too many size and style combinations
- Inconsistent naming conventions
- Documentation that explains props, but not decisions
---
## Core Principle: Constrain First, Expand Later
Start with a strict base:
1. Typography scale
2. Spacing scale
3. Semantic colors
4. A handful of primitives
> A design system is not a component museum.
> It is an agreement that helps teams ship consistent UI quickly.
---
## Suggested Token Strategy
\`\`\`json
{
"font": {
"size": { "sm": "0.875rem", "base": "1rem", "lg": "1.125rem" },
"weight": { "regular": 400, "medium": 500, "bold": 700 }
},
"space": {
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"6": "1.5rem"
}
}
\`\`\`
---
## Architecture Flow
\`\`\`mermaid
flowchart LR
A[Design Tokens] --> B[Primitives]
B --> C[Composed Components]
C --> D[Page Sections]
D --> E[Product Screens]
\`\`\`
---
## Example: Button Primitive
\`\`\`tsx
import { cva } from "class-variance-authority";
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-sm text-sm font-medium transition-colors",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground",
outline: "border border-border bg-background",
ghost: "bg-transparent"
},
size: {
sm: "h-8 px-3",
md: "h-9 px-4",
lg: "h-10 px-5"
}
},
defaultVariants: {
variant: "default",
size: "md"
}
}
);
\`\`\`
Why this works:
- Variants are explicit
- Defaults are stable
- Consumers avoid ad-hoc class combinations
---
## Documentation Pattern That Scales
Instead of “prop-only docs”, use this pattern for every component:
### 1) When to use
Explain context and intent.
### 2) Do / Don't
Show 2 positive and 2 negative examples.
### 3) Accessibility checklist
- Keyboard interaction
- Focus visibility
- ARIA coverage
### 4) Code examples by complexity
- Basic
- With validation
- With async state
---
## Mermaid Sequence for Contribution Workflow
\`\`\`mermaid
sequenceDiagram
participant Dev as Developer
participant DS as Design System
participant App as Product App
Dev->>DS: Add primitive or variant
DS-->>Dev: Exports + docs update
Dev->>App: Integrate component
App-->>Dev: UX feedback
Dev->>DS: Refine API
\`\`\`
---
## Example: Page-Level Composition
\`\`\`tsx
export function BlogHeader() {
return (
<header className="space-y-2">
<Badge>React</Badge>
<h1 className="text-2xl font-bold">Building Minimal Design Systems</h1>
<p className="text-sm text-muted-foreground">
Practical notes from shipping real components.
</p>
</header>
);
}
\`\`\`
---
## Common Failure Modes
| Problem | Why it happens | Better approach |
|---|---|---|
| Variant explosion | No ownership rules | Add contribution guardrails |
| Styling overrides everywhere | Weak defaults | Strengthen semantic tokens |
| Inconsistent docs | No template | Use one markdown template |
| Slow adoption | API too abstract | Show direct usage examples |
---
## Final Checklist Before Shipping a New Component
- [ ] API is minimal and explicit
- [ ] States are documented (default, hover, focus, disabled, loading)
- [ ] Keyboard support verified
- [ ] Mobile rendering verified
- [ ] Real usage example added to docs
---
## Closing Notes
A minimal design system should feel boring in the best way.
When engineers can predict behavior, teams move faster with fewer regressions.
Focus on **consistency, clarity, and constraints**.
Those three will outperform “feature-rich” component sets in the long run.
`,
},
] as const;
export function getBlogDetailBySlug(slug: string) {
return BLOG_DETAILS.find((post) => post.slug === slug) ?? null;
}
data/blog.ts
+16 -16
View File
@@ -5,7 +5,7 @@ export const BLOG_NEWS = [
category: "Technology",
image: "/news/performance.svg",
date: "Mar 6, 2026",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "ui-system-basics",
@@ -13,7 +13,7 @@ export const BLOG_NEWS = [
category: "Design",
image: "/news/design.svg",
date: "Mar 5, 2026",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "next-16-notes-2",
@@ -21,7 +21,7 @@ export const BLOG_NEWS = [
category: "Technology",
image: "/news/performance.svg",
date: "Mar 6, 2026",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "ui-system-basics-2",
@@ -29,7 +29,7 @@ export const BLOG_NEWS = [
category: "Design",
image: "/news/design.svg",
date: "Mar 5, 2026",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
] as const;
@@ -43,7 +43,7 @@ export const BLOG_ARTICLES = [
image: "/news/design.svg",
date: "Mar 2026",
readTime: "4 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-2",
@@ -54,7 +54,7 @@ export const BLOG_ARTICLES = [
image: "/news/performance.svg",
date: "Mar 2026",
readTime: "5 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-3",
@@ -65,7 +65,7 @@ export const BLOG_ARTICLES = [
image: "/news/performance.svg",
date: "Mar 2026",
readTime: "6 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-4",
@@ -76,7 +76,7 @@ export const BLOG_ARTICLES = [
image: "/images/hero1.png",
date: "Feb 2026",
readTime: "4 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-5",
@@ -87,7 +87,7 @@ export const BLOG_ARTICLES = [
image: "/news/design.svg",
date: "Feb 2026",
readTime: "5 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-6",
@@ -98,7 +98,7 @@ export const BLOG_ARTICLES = [
image: "/news/performance.svg",
date: "Feb 2026",
readTime: "5 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-7",
@@ -109,7 +109,7 @@ export const BLOG_ARTICLES = [
image: "/images/hero2.png",
date: "Jan 2026",
readTime: "4 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-8",
@@ -120,7 +120,7 @@ export const BLOG_ARTICLES = [
image: "/news/design.svg",
date: "Jan 2026",
readTime: "6 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-9",
@@ -131,7 +131,7 @@ export const BLOG_ARTICLES = [
image: "/news/performance.svg",
date: "Jan 2026",
readTime: "3 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-10",
@@ -142,7 +142,7 @@ export const BLOG_ARTICLES = [
image: "/images/hero1.png",
date: "Dec 2025",
readTime: "4 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-11",
@@ -153,7 +153,7 @@ export const BLOG_ARTICLES = [
image: "/news/design.svg",
date: "Dec 2025",
readTime: "4 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
{
id: "article-design-systems-12",
@@ -164,7 +164,7 @@ export const BLOG_ARTICLES = [
image: "/news/performance.svg",
date: "Dec 2025",
readTime: "6 min",
href: "/blog",
href: "/blog/building-minimal-design-systems",
},
] as const;