# Анатомия современного инженерного текста на y7.hk

> Ультимативный стресс-тест движка чтения y7: коллауты, diff-блоки, KaTeX формулы, видеокружок, галерея с подписями figure, спойлеры details, таблицы, сноски и переключатель шрифтов.
>
> 2026-10-15 — y7.hk

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

В этой статье собраны **абсолютно все** визуальные, типографические и медийные возможности нашего движка рендеринга статей.

---

## 1. Врезки и примечания (Callouts)

Врезки вписаны в общий монохромный стиль сайта — чистые инсет-блоки без светофора из разноцветных рамок:

<div class="callout">
  <div class="callout-title">Примечание</div>
  <p>Использует мягкий полупрозрачный фон <code>--muted</code> и системную рамку. Идеально сочетается с типографикой и не отвлекает от чтения статьи.</p>
</div>

<div class="callout">
  <div class="callout-title">Совет разработчику</div>
  <p>Кнопка <code>Aa Serif</code> в правом верхнем углу переключает шрифт на антикву Georgia для лонгридов. Настройка автоматически сохраняется в браузере.</p>
</div>

## 2. Изображения и медиа

<figure>
  <img 
    src="/og.png" 
    alt="Архитектура дизайн-системы y7" 
    width="1200"
    height="630"
    loading="lazy"
    decoding="async"
    class="w-full h-auto rounded-2xl border border-border/80 shadow-md transition-all hover:scale-[1.01]" 
  />
  <figcaption>Рис. 1. Генерация OpenGraph и визуальная система y7.hk (Geist Sans + OKLCH)</figcaption>
</figure>

### Сравнение двух вариантов (Grid медиа)
Сетка из двух изображений для сравнения интерфейсов «До» и «После»:

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
  <figure class="m-0">
    <img src="/og.png" alt="Вариант A" width="1200" height="630" loading="lazy" decoding="async" class="w-full h-auto rounded-xl border border-border" />
    <figcaption>Вариант А: Старый плоский стиль</figcaption>
  </figure>
  <figure class="m-0">
    <img src="/og.png" alt="Вариант B" width="1200" height="630" loading="lazy" decoding="async" class="w-full h-auto rounded-xl border border-border" />
    <figcaption>Вариант B: Обновленный Linear-стиль</figcaption>
  </figure>
</div>

### Живой видео-аватар автора
Круговой видео-компонент, интегрированный в интерфейс карточки:

<div class="my-8 flex items-center justify-between p-5 rounded-xl border border-border/70 bg-card shadow-2xs">
  <div class="flex items-center gap-4">
    <AvatarVideo size={64} />
    <div>
      <div class="font-semibold text-sm text-foreground">Yakushev Hermann</div>
      <div class="font-mono text-xs text-muted-foreground mt-0.5">Product Engineer · Southeast Asia</div>
    </div>
  </div>
  <span class="font-mono text-[11px] text-muted-foreground border border-border/80 px-2.5 py-1 rounded-full bg-muted/40">
    /me.mp4
  </span>
</div>
---

## 3. Код, Diff-патчи и Терминал

### Diff-патч рефакторинга
Строки со вставками подсвечиваются мягким изумрудным цветом, удаленные — приглушенным красным:

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

### Команда терминала (Bash)
Символ `$ ` не копируется в буфер обмена благодаря селектору `user-select: none`:

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

---

## 4. Математика и формулы KaTeX

### Выключная формула (Display Math)
Сложные формулы рендерятся с поддержкой горизонтальной прокрутки на мобильных устройствах:

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

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

### Инлайн-формулы
Математические символы и уравнения прямо внутри текста: $e^{i\pi} + 1 = 0$, матричное умножение $A \times B \in \mathbb{R}^{m \times p}$ и норма градиента $\|\nabla \theta\| \le \epsilon$.

---

## 5. Таблицы со скролл-поддержкой

Таблицы автоматически оборачиваются в адаптивный скролл-контейнер и сохраняют читаемость на смартфонах:

| Метод / Технология | Скорость отклика | Сложность | Статус в 2026 |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms` (Edge CDN) | Низкая | В продакшене |
| **React 19 Islands** | Частичная гидратация | Средняя | Активно |
| **OKLCH Tokens** | Мгновенно (CSS) | Минимальная | Стандарт |
| **Web Audio API** | Нулевая задержка | Низкая | Включено |

---

## 6. Сворачиваемые спойлеры (`<details>`)

Интерактивные аккордеоны для скрытия логов или опциональных фрагментов:

<details>
  <summary>Показать полный JSON-пейлоад ответа LLM</summary>
  <div class="mt-3">
    <p class="text-sm text-muted-foreground mb-2">Пример структурированного вывода модели:</p>
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Паттерн успешно валидирован."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```
  </div>
</details>

<details>
  <summary>Системные требования и окружение</summary>
  <ul class="text-sm space-y-1 mt-2">
    <li>Node.js ≥ 22.0.0 или Bun ≥ 1.1</li>
    <li>Поддержка современных браузеров с OKLCH цветами</li>
    <li>Память сборки: ~250 МБ RAM</li>
  </ul>
</details>

---

## 7. Чеклисты и горячие клавиши

Список задач в формате Markdown:

- [x] Настроена поддержка цветных коллаутов
- [x] Реализована подсветка diff-кода
- [x] Внедрены математические формулы KaTeX
- [x] Добавлен переключатель Serif / Sans
- [x] Оформлены подписи `<figcaption>` к медиафайлам
- [ ] Запланировано добавление интерактивных 3D canvas сцен

Горячие клавиши для управления:
- Нажмите <kbd>⌘</kbd> + <kbd>K</kbd> для глобального поиска.
- Нажмите <kbd>~</kbd> для вызова консоли.
- Нажмите <kbd>Esc</kbd> для закрытия любого всплывающего окна.

---

## 8. Цитаты с авторством

> Дизайн — это не то, как предмет выглядит и ощущается. Дизайн — это то, как он работает.
> <cite>Стив Джобс</cite>

---

## 9. Академические сноски

Текст со ссылкой на первоисточник о трансформерах[^2]. При клике на номер сноски вас мгновенно перенесет в нижнюю панель сносок, а нажав на значок стрелки ↩, вы вернетесь точно к месту чтения.

[^1]: Внимание — ключевой компонент архитектур современных больших языковых моделей (LLM).
[^2]: Vaswani et al., «Attention Is All You Need», NIPS 2017.