# y7.hk におけるモダンなエンジニアリング記事の解剖

> y7 リーディングエンジンのストレステスト：コールアウト、diff ブロック、KaTeX 数式、丸型アバター動画、figure ギャラリー、スポイラー、フォント切り替え。
>
> 2026-10-15 — y7.hk

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

この記事では、当サイトの記事レンダリングエンジンが持つ**すべての**視覚的・タイポグラフィ的・メディア機能を集めています。

---

## 1. コールアウトと補足

コールアウトはサイト全体のモノクロスタイルに沿っています。カラフルな枠線の信号機スタイルではなく、クリーンなインセットブロックです：

  注記
  柔らかな半透明の --muted 背景とシステムボーダーを使用。タイポグラフィと調和し、記事の読み心地を妨げません。

  開発者向けヒント
  右上の Aa Serif ボタンで、長文向けに Georgia セリフ体へ切り替えられます。設定はブラウザに自動保存されます。

## 2. 画像とメディア

  <img 
    src="/og.png" 
    alt="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]" 
  />
  図 1. OpenGraph 生成と y7.hk のビジュアルシステム（Geist Sans + OKLCH）

### 2つのバリアントの比較（メディアグリッド）
「Before」と「After」のインターフェースを比較する2画像グリッド：

    バリアント A：旧フラットスタイル
    バリアント B：新しい Linear スタイル

### 著者のライブ動画アバター
カードインターフェースに組み込まれた円形動画コンポーネント：

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

## 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

### ディスプレイ数式
複雑な数式はモバイルデバイスで横スクロールに対応してレンダリングされます：

$$
\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 のアテンション式[^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`（エッジ CDN） | 低 | 本番運用中 |
| **React 19 Islands** | 部分的ハイドレーション | 中 | 稼働中 |
| **OKLCH Tokens** | 即時（CSS） | 最小 | 標準 |
| **Web Audio API** | ゼロ遅延 | 低 | 有効 |

---

## 6. 折りたたみスポイラー（``）

ログやオプションの断片を隠すためのインタラクティブなアコーディオン：

  LLM レスポンスの完全な JSON ペイロードを表示
    モデルの構造化出力例：
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "パターンが正常に検証されました。"
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  システム要件と環境
    Node.js ≥ 22.0.0 または Bun ≥ 1.1
    OKLCH カラー対応のモダンブラウザ
    ビルドメモリ：約 250 MB RAM

---

## 7. チェックリストとホットキー

Markdown 形式のタスクリスト：

- [x] カラーコールアウト対応を設定
- [x] diff コードハイライトを実装
- [x] KaTeX 数式を導入
- [x] Serif / Sans 切り替えを追加
- [x] メディアファイルに `` キャプションを整備
- [ ] インタラクティブな 3D canvas シーンを追加予定

操作用ホットキー：
- ⌘ + K でグローバル検索。
- ~ でコンソールを呼び出し。
- Esc で任意のポップアップを閉じる。

---

## 8. 帰属付き引用

> デザインとは、見た目や感触だけではない。デザインとは、どう機能するかだ。
> スティーブ・ジョブズ

---

## 9. 学術的脚注

Transformer の原論文への参照を含むテキスト[^2]。脚注番号をクリックするとページ下部の脚注パネルへ即座に移動し、↩ の矢印アイコンを押せば読んでいた場所へ正確に戻れます。

[^1]: アテンションは現代の大規模言語モデル（LLM）アーキテクチャの重要な構成要素です。
[^2]: Vaswani et al., "Attention Is All You Need", NIPS 2017.