# Anatomie d'un article d'ingénierie moderne sur y7.hk

> Test de résistance du moteur de lecture y7 : callouts, blocs diff, formules KaTeX, avatar vidéo circulaire, galerie de figures, spoilers et sélecteur de police.
>
> 2026-10-15 — y7.hk

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

Cet article rassemble **toutes** les capacités visuelles, typographiques et médias de notre moteur de rendu d'articles.

---

## 1. Callouts et notes marginales

Les callouts s'inscrivent dans le style monochrome du site — des blocs inset épurés, sans feu tricolore de bordures colorées :

  Remarque
  Utilise un fond translucide doux --muted et la bordure système. S'harmonise avec la typographie sans distraire de la lecture.

  Astuce développeur
  Le bouton Aa Serif en haut à droite bascule la police vers la Georgia, une serif pour les longs articles. Le réglage est sauvegardé automatiquement dans le navigateur.

## 2. Images et médias

  <img 
    src="/og.png" 
    alt="Architecture du système de design 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]" 
  />
  Fig. 1. Génération OpenGraph et système visuel y7.hk (Geist Sans + OKLCH)

### Comparaison de deux variantes (grille média)
Une grille de deux images pour comparer les interfaces « Avant » et « Après » :

    Variante A : ancien style plat
    Variante B : nouveau style Linear

### Avatar vidéo en direct de l'auteur
Un composant vidéo circulaire intégré à l'interface de la carte :

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

## 3. Code, patchs Diff et Terminal

### Patch diff de refactoring
Les lignes ajoutées sont surlignées en émeraude doux, les supprimées en rouge atténué :

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

### Commande terminal (Bash)
Le symbole du prompt `$ ` n'est pas copié dans le presse-papiers grâce au sélecteur `user-select: none` :

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

---

## 4. Mathématiques et formules KaTeX

### Formule en bloc (Display Math)
Les formules complexes sont rendues avec support du défilement horizontal sur mobile :

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

La formule d'attention des Transformers[^1] :

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

### Formules en ligne
Symboles mathématiques et équations directement dans le texte : $e^{i\pi} + 1 = 0$, multiplication matricielle $A \times B \in \mathbb{R}^{m \times p}$ et norme du gradient $\|\nabla \theta\| \le \epsilon$.

---

## 5. Tableaux avec support du scroll

Les tableaux sont automatiquement enveloppés dans un conteneur à défilement responsive et restent lisibles sur smartphone :

| Méthode / Technologie | Vitesse de réponse | Complexité | État en 2026 |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms` (Edge CDN) | Faible | En production |
| **React 19 Islands** | Hydratation partielle | Moyenne | Actif |
| **OKLCH Tokens** | Instantané (CSS) | Minimale | Standard |
| **Web Audio API** | Latence nulle | Faible | Activé |

---

## 6. Spoilers repliables (``)

Accordéons interactifs pour masquer les logs ou fragments optionnels :

  Afficher le payload JSON complet de la réponse LLM
    Exemple de sortie structurée du modèle :
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Pattern validé avec succès."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  Configuration requise et environnement
    Node.js ≥ 22.0.0 ou Bun ≥ 1.1
    Navigateurs modernes avec support des couleurs OKLCH
    Mémoire de build : ~250 Mo de RAM

---

## 7. Checklists et raccourcis clavier

Une liste de tâches au format Markdown :

- [x] Support des callouts colorés configuré
- [x] Coloration du code diff implémentée
- [x] Formules mathématiques KaTeX intégrées
- [x] Sélecteur Serif / Sans ajouté
- [x] Légendes `` stylées pour les fichiers média
- [ ] Scènes canvas 3D interactives prévues

Raccourcis clavier pour le contrôle :
- Appuyez sur ⌘ + K pour la recherche globale.
- Appuyez sur ~ pour ouvrir la console.
- Appuyez sur Esc pour fermer tout popup.

---

## 8. Citations avec attribution

> Le design, ce n'est pas seulement l'apparence et le ressenti. Le design, c'est comment ça marche.
> Steve Jobs

---

## 9. Notes de bas de page académiques

Texte avec une référence à l'article original sur les transformers[^2]. Cliquer sur le numéro de la note vous emmène instantanément au panneau des notes en bas de page, et cliquer sur l'icône de flèche ↩ vous ramène exactement à l'endroit où vous lisiez.

[^1]: L'attention est un composant clé de l'architecture des grands modèles de langage modernes (LLM).
[^2]: Vaswani et al., « Attention Is All You Need », NIPS 2017.