# y7.hk'dagi zamonaviy muhandislik maqolasining anatomiyasi

> y7 o'qish dvigatelining stress-testi: callout'lar, diff bloklari, KaTeX formulalari, dumaloq avatar video, figure galereyasi, spoilerlar va shrift almashtirgich.
>
> 2026-10-15 — y7.hk

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

Bu maqola bizning maqola render dvigatelining **barcha** vizual, tipografik va media imkoniyatlarini bir joyga jamlaydi.

---

## 1. Callout'lar va chekka eslatmalari

Callout'lar saytning umumiy monoxrom uslubiga mos keladi — rang-barang chegarali svetofor emas, toza inset bloklar:

  Eslatma
  Yumshoq yarim shaffof --muted fon va tizim chegarasidan foydalanadi. Tipografiya bilan uyg'unlashib, o'qishdan chalg'itmaydi.

  Dasturchiga maslahat
  Yuqori o'ng burchakdagi Aa Serif tugmasi uzun matnlar uchun Georgia serif shriftiga o'tkazadi. Sozlash brauzerda avtomatik saqlanadi.

## 2. Rasmlar va media

  <img 
    src="/og.png" 
    alt="y7 dizayn tizimi arxitekturasi" 
    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]" 
  />
  1-rasm. OpenGraph generatsiyasi va y7.hk vizual tizimi (Geist Sans + OKLCH)

### Ikki variantni solishtirish (media grid)
"Oldin" va "Keyin" interfeyslarni solishtirish uchun ikki rasmli grid:

    A variant: Eski yassi uslub
    B variant: Yangi Linear uslubi

### Muallifning jonli video avatari
Karta interfeysiga integratsiya qilingan dumaloq video komponent:

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

## 3. Kod, Diff patch'lar va Terminal

### Refaktoring diff patch'i
Qo'shilgan qatorlar yumshoq zumrad rangda, o'chirilganlar xira qizil rangda ajratiladi:

```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 buyrug'i (Bash)
`$ ` prompt belgisi `user-select: none` selektori tufayli clipboard'ga ko'chirilmaydi:

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

---

## 4. Matematika va KaTeX formulalari

### Display formula
Murakkab formulalar mobil qurilmalarda gorizontal skroll qo'llab-quvvatlashi bilan render qilinadi:

$$
\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 formulasi[^1]:

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

### Inline formulalar
Matn ichida to'g'ridan-to'g'ri matematik belgilar va tenglamalar: $e^{i\pi} + 1 = 0$, matritsa ko'paytmasi $A \times B \in \mathbb{R}^{m \times p}$ va gradient normasi $\|\nabla \theta\| \le \epsilon$.

---

## 5. Skroll qo'llab-quvvatlanadigan jadvallar

Jadvallar avtomatik ravishda adaptiv skroll konteynerga o'raladi va smartfonlarda o'qiladigan bo'lib qoladi:

| Usul / Texnologiya | Javob tezligi | Murakkablik | 2026 holati |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms` (Edge CDN) | Past | Prodakshenda |
| **React 19 Islands** | Qisman gidratatsiya | O'rta | Faol |
| **OKLCH Tokens** | Bir zumda (CSS) | Minimal | Standart |
| **Web Audio API** | Nol kechikish | Past | Yoqilgan |

---

## 6. Yig'iladigan spoilerlar (``)

Log'larni yoki ixtiyoriy qismlarni yashirish uchun interaktiv akkordeonlar:

  LLM javobining to'liq JSON payload'ini ko'rsatish
    Modelning strukturali chiqishi misoli:
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Naqsh muvaffaqiyatli tekshirildi."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  Tizim talablari va muhit
    Node.js ≥ 22.0.0 yoki Bun ≥ 1.1
    OKLCH ranglarni qo'llab-quvvatlaydigan zamonaviy brauzerlar
    Build xotirasi: ~250 MB RAM

---

## 7. Checklist'lar va tezkor tugmalar

Markdown formatidagi vazifalar ro'yxati:

- [x] Rangli callout'lar sozlandi
- [x] Diff kod highlight'i amalga oshirildi
- [x] KaTeX matematik formulalari integratsiya qilindi
- [x] Serif / Sans almashtirgich qo'shildi
- [x] Media fayllar uchun `` stillari tayyorlandi
- [ ] Interaktiv 3D canvas sahnalari qo'shilishi rejalashtirilgan

Boshqaruv uchun tezkor tugmalar:
- Global qidiruv uchun ⌘ + K bosing.
- Konsolni ochish uchun ~ bosing.
- Har qanday popup'ni yopish uchun Esc bosing.

---

## 8. Mualliflik ko'rsatilgan iqtiboslar

> Dizayn — bu narsa qanday ko'rinishi va qanday his qilinishi emas. Dizayn — u qanday ishlashidir.
> Stiv Jobs

---

## 9. Akademik izohlar

Transformer'lar haqidagi asl maqolaga havola qilingan matn[^2]. Izoh raqamiga bosish sizni sahifaning pastidagi izoh paneliga bir zumda olib boradi, ↩ strelka belgisini bosish esa aynan o'qigan joyingizga qaytaradi.

[^1]: Attention — zamonaviy katta til modellari (LLM) arxitekturasining asosiy komponenti.
[^2]: Vaswani et al., "Attention Is All You Need", NIPS 2017.