# y7.hk'da Modern Mühendislik Yazısının Anatomisi

> y7 okuma motorunun stres testi: callout'lar, diff blokları, KaTeX formülleri, yuvarlak avatar videosu, figure galerisi, spoiler'lar ve font değiştirici.
>
> 2026-10-15 — y7.hk

import AvatarVideo from "@/components/AvatarVideo.astro";

Bu yazı, makale render motorumuzun **tüm** görsel, tipografik ve medya yeteneklerini bir araya getiriyor.

---

## 1. Callout'lar ve Kenar Notları

Callout'lar sitenin genel monokrom stiline uyuyor — renkli trafik lambası çerçeveleri yerine temiz inset bloklar:

  Not
  Yumuşak yarı saydam bir --muted arka planı ve sistem çerçevesi kullanır. Tipografiyle uyumlu, okumayı bölmez.

  Geliştirici ipucu
  Sağ üstteki Aa Serif butonu uzun yazılar için Georgia serif fontuna geçer. Ayar tarayıcıda otomatik olarak kaydedilir.

## 2. Görseller ve Medya

  <img 
    src="/og.png" 
    alt="y7 tasarım sistemi mimarisi" 
    width="1200"
    height="630"
    loading="lazy"
    decoding="async"
    class="w-full h-auto rounded-2xl border border-border shadow-md transition-all hover:scale-[1.01]" 
  />
  Şek. 1. OpenGraph üretimi ve y7.hk görsel sistemi (Geist Sans + OKLCH)

### İki varyantın karşılaştırması (medya grid'i)
"Önce" ve "Sonra" arayüzlerini karşılaştırmak için iki görsellik grid:

    Varyant A: Eski düz stil
    Varyant B: Yeni Linear stili

### Yazarın canlı video avatarı
Kart arayüzüne entegre yuvarlak video bileşeni:

      Yakushev Hermann
      Product Engineer · Southeast Asia
    /me.mp4
---

## 3. Kod, Diff Patch'leri ve Terminal

### Refactoring diff patch'i
Eklenen satırlar yumuşak zümrüt yeşiliyle, silinenler koyu kırmızıyla vurgulanır:

```diff
  export async function handleRequest(req: Request): Promise<Response> {
-   const legacyToken = req.headers.get("x-legacy-token");
-   if (!legacyToken) return new Response("Unauthorized", { status: 401 });
+   const authSession = await verifyAgentSession(req);
+   if (!authSession.valid) {
+     return Response.json({ error: "Session expired" }, { status: 403 });
+   }

    return await processWorkflow({
-     mode: "sync",
+     mode: "streaming-duplex",
      timeout: 30000,
    });
  }
```

### Terminal komutu (Bash)
`$ ` prompt işareti `user-select: none` seçicisi sayesinde panoya kopyalanmaz:

```bash
git clone https://github.com/yakushev/Y.git && cd Y
npm install
npm run build
```

---

## 4. Matematik ve KaTeX Formülleri

### Blok formül (Display Math)
Karmaşık formüller mobil cihazlarda yatay kaydırma desteğiyle render edilir:

$$
\mathcal{L}_{\text{total}} = \alpha \cdot \mathbb{E}_{x \sim p_{\text{data}}}\left[\log D(x)\right] + \beta \cdot \sum_{i=1}^{N} \left\| \nabla_x f(x_i) \right\|_2^2
$$

Transformer Attention formülü[^1]:

$$
\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V
$$

### Satır içi formüller
Metin içinde doğrudan matematiksel semboller ve denklemler: $e^{i\pi} + 1 = 0$, matris çarpımı $A \times B \in \mathbb{R}^{m \times p}$ ve gradyan normu $\|\nabla \theta\| \le \epsilon$.

---

## 5. Kaydırma Destekli Tablolar

Tablolar otomatik olarak duyarlı kaydırma kapsayıcısına sarılır ve akıllı telefonlarda okunabilir kalır:

| Yöntem / Teknoloji | Yanıt Hızı | Karmaşıklık | 2026'daki Durum |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms` (Edge CDN) | Düşük | Prodüksiyonda |
| **React 19 Islands** | Kısmi hidrasyon | Orta | Aktif |
| **OKLCH Tokens** | Anında (CSS) | Minimal | Standart |
| **Web Audio API** | Sıfır gecikme | Düşük | Etkin |

---

## 6. Katlanabilir Spoiler'lar (``)

Log'ları veya isteğe bağlı parçaları gizlemek için etkileşimli akordeonlar:

  LLM yanıtının tam JSON payload'unu göster
    Modelin yapılandırılmış çıktı örneği:
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Desen başarıyla doğrulandı."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  Sistem gereksinimleri ve ortam
    Node.js ≥ 22.0.0 veya Bun ≥ 1.1
    OKLCH renk desteği olan modern tarayıcılar
    Build belleği: ~250 MB RAM

---

## 7. Checklist'ler ve Kısayol Tuşları

Markdown formatında görev listesi:

- [x] Renkli callout desteği yapılandırıldı
- [x] Diff kod vurgulama implement edildi
- [x] KaTeX matematik formülleri eklendi
- [x] Serif / Sans geçişi eklendi
- [x] Medya dosyaları için `` stilleri düzenlendi
- [ ] İnteraktif 3D canvas sahneleri eklenecek

Kontrol kısayol tuşları:
- Global arama için ⌘ + K'ya basın.
- Konsolu açmak için ~'ye basın.
- Herhangi bir popup'ı kapatmak için Esc'ye basın.

---

## 8. Atıflı Alıntılar

> Tasarım sadece nasıl göründüğü ve hissettirdiği değildir. Tasarım nasıl çalıştığıdır.
> Steve Jobs

---

## 9. Akademik Dipnotlar

Transformer'larla ilgili orijinal makaleye referans içeren metin[^2]. Dipnot numarasına tıklamak sizi anında sayfanın altındaki dipnot paneline götürür, ↩ ok simgesine basmak ise tam olarak okuduğunuz yere geri döndürür.

[^1]: Attention, modern büyük dil modellerinin (LLM) mimarisinin temel bileşenidir.
[^2]: Vaswani et al., "Attention Is All You Need", NIPS 2017.