Yunus Eş'in kişisel web sitesi. Next.js (App Router) + Tailwind CSS 4 ile geliştirilmiştir.
pnpm installGeliştirme sunucusunu çalıştırmak için:
pnpm devProduction build:
pnpm build && pnpm startYazılar content/posts/ altında Markdown (.md) dosyaları olarak tutulur ve gray-matter ile frontmatter okunur. Her yazı build sırasında remark + remark-gfm ile HTML'e dönüştürülüp app/blog/[slug] üzerinden statik olarak sunulur.
Bir yazı için minimal frontmatter:
---title: "Yazı başlığı"date: "2026-01-15"summary: "Kısa özet."---
Yazı içeriği...Liste sayfası /blog, akışlar ise iki formatta yayınlanır: klasik RSS için /feed.xml, JSON Feed 1.1 için /feed.json. İkisi de <head> içinde rel="alternate" ile bağlıdır. Yazıların okuma süresi otomatik hesaplanır; yazı sayfasında üstte sticky bir ReadingProgress çubuğu ve altta SharePost bileşeni yer alır.
Site koyu ve açık olmak üzere iki temayı destekler. Varsayılan tema koyudur.
- Tema seçimi
<html>üzerindedata-theme="dark" | "light"attribute'u ile yönetilir. - Token'lar styles/globals.css içinde
@themeve[data-theme="light"]blokları altında tanımlıdır. - Sağ üstteki ThemeToggle ile değiştirilir; tercih
localStorageüzerindethemeanahtarında saklanır. - İlk render'da flicker'ı önlemek için tercih ThemeInit ile
<head>içinde, hidrasyondan önce uygulanır.
yunuses.com
├── app
│ ├── blog # blog index + [slug] dinamik sayfa
│ ├── zero-to-hero # mini ders sayfası
│ ├── feed.xml # RSS 2.0 endpoint
│ ├── feed.json # JSON Feed 1.1 endpoint
│ ├── opengraph-image.js # dinamik OG görseli
│ ├── sitemap.js
│ ├── layout.js
│ └── page.js
├── components
│ ├── atoms # Icon, ThemeToggle, ThemeInit, ReadingProgress, SharePost, AvatarLightbox, ...
│ ├── molecules # Social, Lessons, Types
│ └── organisms # SocialArea, LessonsMap
├── content
│ └── posts # Markdown blog yazıları
├── data # lessons.json, types.json
├── lib
│ └── posts.js # Markdown okuma / parse helper'ları
├── public # statik varlıklar (Avatar, og-image, favicon, vs.)
└── styles
└── globals.css # Tailwind CSS 4 + tema token'ları
- Next.js (App Router) — uygulama çatısı
- Tailwind CSS 4 — stil sistemi, koyu/açık tema token'ları
- Geist & Geist Mono —
next/fontile yüklenen tipografi - Tabler Icons (outline) — ikonlar inline SVG olarak components/atoms/icons.js registry'sinde tutulur
- remark / remark-gfm / remark-rehype / rehype-stringify — Markdown → HTML pipeline'ı
- gray-matter — yazı frontmatter'ı