# Anatomie eines modernen Engineering-Artikels auf y7.hk

> Ein Stresstest für die y7-Lese-Engine: Callouts, Diff-Blöcke, KaTeX-Formeln, ein rundes Avatar-Video, Figure-Galerien, Spoiler und ein Font-Umschalter.
>
> 2026-10-15 — y7.hk

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

Dieser Artikel versammelt **sämtliche** visuellen, typografischen und medialen Fähigkeiten unserer Artikel-Rendering-Engine.

---

## 1. Callouts und Randnotizen

Callouts fügen sich in den monochromen Stil der Seite ein — saubere Inset-Blöcke ohne Ampel-Bunte- Rahmung:

  Hinweis
  Verwendet einen weichen, halbtransparenten --muted-Hintergrund und den Systemrahmen. Fügt sich harmonisch in die Typografie ein, ohne vom Lesen abzulenken.

  Tipp für Entwickler
  Die Schaltfläche Aa Serif oben rechts wechselt für lange Texte zur Serifenschrift Georgia. Die Einstellung wird automatisch im Browser gespeichert.

## 2. Bilder und Medien

  <img 
    src="/og.png" 
    alt="Architektur des y7-Designsystems" 
    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]" 
  />
  Abb. 1. OpenGraph-Generierung und das visuelle System von y7.hk (Geist Sans + OKLCH)

### Vergleich zweier Varianten (Medien-Grid)
Ein Zweibild-Grid zum Vergleich von „Vorher"- und „Nachher"-Interfaces:

    Variante A: Alter flacher Stil
    Variante B: Neuer Linear-Stil

### Live-Video-Avatar des Autors
Eine kreisförmige Videokomponente, integriert in das Karten-Interface:

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

## 3. Code, Diff-Patches und Terminal

### Refactoring-Diff-Patch
Eingefügte Zeilen werden in sanftem Smaragd hervorgehoben, entfernte in gedämpftem Rot:

```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-Befehl (Bash)
Das `$ `-Prompt wird dank des Selektors `user-select: none` nicht in die Zwischenablage kopiert:

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

---

## 4. Mathematik und KaTeX-Formeln

### Abgesetzte Formel (Display Math)
Komplexe Formeln werden mit Unterstützung für horizontales Scrollen auf Mobilgeräten gerendert:

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

Die Transformer-Attention-Formel[^1]:

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

### Inline-Formeln
Mathematische Symbole und Gleichungen direkt im Fließtext: $e^{i\pi} + 1 = 0$, Matrixmultiplikation $A \times B \in \mathbb{R}^{m \times p}$ und die Gradientennorm $\|\nabla \theta\| \le \epsilon$.

---

## 5. Tabellen mit Scroll-Support

Tabellen werden automatisch in einen responsiven Scroll-Container eingebettet und bleiben auf Smartphones lesbar:

| Methode / Technologie | Antwortzeit | Komplexität | Status 2026 |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms` (Edge CDN) | Niedrig | In Produktion |
| **React 19 Islands** | Partielle Hydration | Mittel | Aktiv |
| **OKLCH Tokens** | Sofort (CSS) | Minimal | Standard |
| **Web Audio API** | Null Latenz | Niedrig | Aktiviert |

---

## 6. Einklappbare Spoiler (``)

Interaktive Akkordeons zum Verstecken von Logs oder optionalen Fragmenten:

  Vollständige JSON-Payload der LLM-Antwort anzeigen
    Beispiel einer strukturierten Modellausgabe:
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Muster erfolgreich validiert."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  Systemanforderungen und Umgebung
    Node.js ≥ 22.0.0 oder Bun ≥ 1.1
    Moderne Browser mit OKLCH-Farbunterstützung
    Build-Speicher: ~250 MB RAM

---

## 7. Checklisten und Hotkeys

Eine Aufgabenliste im Markdown-Format:

- [x] Unterstützung für farbige Callouts eingerichtet
- [x] Diff-Code-Highlighting implementiert
- [x] KaTeX-Matheformeln integriert
- [x] Serif / Sans-Umschalter hinzugefügt
- [x] ``-Bildunterschriften für Mediendateien gestaltet
- [ ] Interaktive 3D-Canvas-Szenen geplant

Steuerungs-Hotkeys:
- ⌘ + K für die globale Suche.
- ~ zum Öffnen der Konsole.
- Esc zum Schließen jedes Popups.

---

## 8. Zitate mit Quellenangabe

> Design ist nicht nur, wie etwas aussieht und sich anfühlt. Design ist, wie es funktioniert.
> Steve Jobs

---

## 9. Akademische Fußnoten

Text mit einem Verweis auf die Originalarbeit zu Transformern[^2]. Ein Klick auf die Fußnotennummer springt sofort zur Fußnotenleiste am Seitenende, und ein Klick auf das ↩-Pfeilsymbol bringt Sie exakt zurück zur Leseposition.

[^1]: Attention ist eine zentrale Komponente moderner großer Sprachmodelle (LLMs).
[^2]: Vaswani et al., „Attention Is All You Need", NIPS 2017.