# Anatomi Artikel Engineering Modern di y7.hk

> Stress test untuk mesin baca y7: callout, blok diff, formula KaTeX, video avatar melingkar, galeri figure, spoiler, dan pemindah font.
>
> 2026-10-15 — y7.hk

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

Artikel ini mengumpulkan **semua** kemampuan visual, tipografis, dan media dari mesin render artikel kami.

---

## 1. Callout dan Catatan

Callout mengikuti gaya monokrom situs — blok inset bersih tanpa warna-warni lampu lalu lintas:

  Catatan
  Menggunakan latar transparan lembut --muted dan border sistem. Menyatu dengan tipografi tanpa mengalihkan perhatian dari membaca.

  Tips untuk developer
  Tombol Aa Serif di pojok kanan atas mengganti font ke serif Georgia untuk bacaan panjang. Pengaturan tersimpan otomatis di browser.

## 2. Gambar dan Media

  <img 
    src="/og.png" 
    alt="Arsitektur sistem desain y7" 
    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]" 
  />
  Gambar 1. Generasi OpenGraph dan sistem visual y7.hk (Geist Sans + OKLCH)

### Perbandingan dua varian (grid media)
Grid dua gambar untuk membandingkan antarmuka "Sebelum" dan "Sesudah":

    Varian A: Gaya flat lama
    Varian B: Gaya Linear baru

### Avatar video langsung penulis
Komponen video melingkar yang terintegrasi dalam antarmuka kartu:

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

## 3. Kode, Diff Patch, dan Terminal

### Diff patch refactoring
Baris yang ditambahkan di-highlight dengan hijau zamrud lembut, baris yang dihapus dengan merah kalem:

```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,
    });
  }
```

### Perintah terminal (Bash)
Simbol prompt `$ ` tidak ikut tersalin ke clipboard berkat selector `user-select: none`:

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

---

## 4. Matematika dan Formula KaTeX

### Formula display
Formula kompleks di-render dengan dukungan scroll horizontal di perangkat mobile:

$$
\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
$$

Formula Transformer Attention[^1]:

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

### Formula inline
Simbol matematika dan persamaan langsung di dalam teks: $e^{i\pi} + 1 = 0$, perkalian matriks $A \times B \in \mathbb{R}^{m \times p}$, dan norma gradien $\|\nabla \theta\| \le \epsilon$.

---

## 5. Tabel dengan Dukungan Scroll

Tabel secara otomatis dibungkus dalam container scroll responsif dan tetap terbaca di smartphone:

| Metode / Teknologi | Kecepatan Respons | Kompleksitas | Status 2026 |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms` (Edge CDN) | Rendah | Di produksi |
| **React 19 Islands** | Hidrasi parsial | Sedang | Aktif |
| **OKLCH Tokens** | Instan (CSS) | Minimal | Standar |
| **Web Audio API** | Latensi nol | Rendah | Diaktifkan |

---

## 6. Spoiler yang Bisa Dilipat (``)

Accordion interaktif untuk menyembunyikan log atau fragmen opsional:

  Tampilkan payload JSON lengkap respons LLM
    Contoh output terstruktur dari model:
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Pola berhasil divalidasi."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  Kebutuhan sistem dan environment
    Node.js ≥ 22.0.0 atau Bun ≥ 1.1
    Browser modern dengan dukungan warna OKLCH
    Memori build: ~250 MB RAM

---

## 7. Checklist dan Hotkey

Daftar tugas dalam format Markdown:

- [x] Dukungan callout berwarna sudah dikonfigurasi
- [x] Highlight kode diff sudah diimplementasi
- [x] Formula matematika KaTeX sudah terintegrasi
- [x] Pemindah Serif / Sans sudah ditambahkan
- [x] Caption `` untuk file media sudah didesain
- [ ] Rencana menambahkan scene 3D canvas interaktif

Hotkey untuk kontrol:
- Tekan ⌘ + K untuk pencarian global.
- Tekan ~ untuk membuka konsol.
- Tekan Esc untuk menutup popup apa pun.

---

## 8. Kutipan dengan Kredit

> Desain bukan hanya tentang bagaimana sesuatu terlihat dan terasa. Desain adalah tentang bagaimana ia bekerja.
> Steve Jobs

---

## 9. Catatan Kaki Akademik

Teks dengan referensi ke paper asli tentang transformer[^2]. Klik nomor catatan kaki akan langsung membawa Anda ke panel catatan di bagian bawah, dan menekan ikon panah ↩ mengembalikan Anda tepat ke posisi bacaan.

[^1]: Attention adalah komponen kunci dalam arsitektur model bahasa besar modern (LLM).
[^2]: Vaswani et al., "Attention Is All You Need", NIPS 2017.