# Anatomía de un artículo de ingeniería moderno en y7.hk

> Prueba de estrés del motor de lectura y7: callouts, bloques diff, fórmulas KaTeX, video avatar circular, galería de figures, spoilers y un selector de fuente.
>
> 2026-10-15 — y7.hk

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

Este artículo reúne **todas** las capacidades visuales, tipográficas y de media de nuestro motor de renderizado de artículos.

---

## 1. Callouts y notas al margen

Los callouts siguen el estilo monocromo general del sitio: bloques inset limpios, sin el semáforo de bordes multicolor:

  Nota
  Usa un fondo translúcido suave --muted y el borde del sistema. Se integra con la tipografía sin distraer de la lectura.

  Consejo para desarrolladores
  El botón Aa Serif en la esquina superior derecha cambia la fuente a la serif Georgia para lecturas largas. El ajuste se guarda automáticamente en el navegador.

## 2. Imágenes y media

  <img 
    src="/og.png" 
    alt="Arquitectura del sistema de diseño 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. Generación de OpenGraph y sistema visual de y7.hk (Geist Sans + OKLCH)

### Comparación de dos variantes (grid de media)
Una cuadrícula de dos imágenes para comparar interfaces "Antes" y "Después":

    Variante A: Estilo plano antiguo
    Variante B: Nuevo estilo Linear

### Avatar de video en vivo del autor
Un componente de video circular integrado en la interfaz de tarjeta:

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

## 3. Código, parches Diff y Terminal

### Parche diff de refactorización
Las líneas insertadas se resaltan en esmeralda suave, las eliminadas en rojo apagado:

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

### Comando de terminal (Bash)
El símbolo del prompt `$ ` no se copia al portapapeles gracias al selector `user-select: none`:

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

---

## 4. Matemáticas y fórmulas KaTeX

### Fórmula en bloque (Display Math)
Las fórmulas complejas se renderizan con soporte de scroll horizontal en dispositivos móviles:

$$
\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 fórmula de atención de Transformer[^1]:

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

### Fórmulas en línea
Símbolos matemáticos y ecuaciones directamente en el texto: $e^{i\pi} + 1 = 0$, multiplicación de matrices $A \times B \in \mathbb{R}^{m \times p}$ y la norma del gradiente $\|\nabla \theta\| \le \epsilon$.

---

## 5. Tablas con soporte de scroll

Las tablas se envuelven automáticamente en un contenedor de scroll responsivo y mantienen legibilidad en smartphones:

| Método / Tecnología | Velocidad de respuesta | Complejidad | Estado en 2026 |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms` (Edge CDN) | Baja | En producción |
| **React 19 Islands** | Hidratación parcial | Media | Activo |
| **OKLCH Tokens** | Instantáneo (CSS) | Mínima | Estándar |
| **Web Audio API** | Latencia cero | Baja | Habilitado |

---

## 6. Spoilers plegables (``)

Acordeones interactivos para ocultar logs o fragmentos opcionales:

  Mostrar el payload JSON completo de la respuesta del LLM
    Ejemplo de salida estructurada del modelo:
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Patrón validado correctamente."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  Requisitos del sistema y entorno
    Node.js ≥ 22.0.0 o Bun ≥ 1.1
    Navegadores modernos con soporte de color OKLCH
    Memoria de build: ~250 MB RAM

---

## 7. Checklists y atajos de teclado

Una lista de tareas en formato Markdown:

- [x] Soporte de callouts de color configurado
- [x] Resaltado de código diff implementado
- [x] Fórmulas matemáticas KaTeX integradas
- [x] Selector Serif / Sans añadido
- [x] Captions `` diseñadas para archivos multimedia
- [ ] Planeado añadir escenas 3D interactivas en canvas

Atajos de teclado para control:
- Presiona ⌘ + K para la búsqueda global.
- Presiona ~ para abrir la consola.
- Presiona Esc para cerrar cualquier popup.

---

## 8. Citas con atribución

> El diseño no es solo cómo se ve y cómo se siente. El diseño es cómo funciona.
> Steve Jobs

---

## 9. Notas académicas al pie

Texto con una referencia al paper original sobre transformers[^2]. Al hacer clic en el número de la nota te lleva instantáneamente al panel de notas al final, y al pulsar el icono de flecha ↩ vuelves exactamente al punto de lectura.

[^1]: La atención es un componente clave en la arquitectura de los grandes modelos de lenguaje modernos (LLM).
[^2]: Vaswani et al., "Attention Is All You Need", NIPS 2017.