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

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 :

2. Images et médias

Comparaison de deux variantes (grille média)

Une grille de deux images pour comparer les interfaces « Avant » et « Après » :

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é :

  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 :

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¹ :

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

6. Spoilers repliables (<details>)

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

{
  "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
  }
}

7. Checklists et raccourcis clavier

Une liste de tâches au format Markdown :

• Support des callouts colorés configuré
• Coloration du code diff implémentée
• Formules mathématiques KaTeX intégrées
• Sélecteur Serif / Sans ajouté
• Légendes <figcaption> 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². 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.