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

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

1. コールアウトと補足

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

2. 画像とメディア

2つのバリアントの比較（メディアグリッド）

「Before」と「After」のインターフェースを比較する2画像グリッド：

著者のライブ動画アバター

カードインターフェースに組み込まれた円形動画コンポーネント：

Yakushev Hermann

Product Engineer · Southeast Asia

/me.mp4

3. コード、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 セレクタのおかげでクリップボードにコピーされません：

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 のアテンション式¹：

\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. スクロール対応の表

表は自動的にレスポンシブなスクロールコンテナで囲まれ、スマートフォンでも読みやすさを保ちます：

6. 折りたたみスポイラー（<details>）

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

{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "パターンが正常に検証されました。"
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}

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

Markdown 形式のタスクリスト：

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

操作用ホットキー：

• ⌘ + K でグローバル検索。
• ~ でコンソールを呼び出し。
• Esc で任意のポップアップを閉じる。

8. 帰属付き引用

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

9. 学術的脚注

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