MarkeUp Blog Obsidian System
Tecnología

Implementación de Wikilinks y Enlaces Internos en Astro

2 min de lectura

Implementación de Wikilinks y Enlaces Internos en Astro

🎯 Filosofía y Objetivos

En un Jardín Digital, la conectividad es lo más importante, pero la fricción y los enlaces rotos (404) son el enemigo. El objetivo de esta implementación es lograr que la experiencia de escritura en Obsidian se traduzca perfectamente a la web, sin trabajo extra y sin romper la experiencia del usuario.

Decisiones Arquitectónicas Clave:

  1. Cero Enlaces Rotos: Si un wikilink apunta a una nota que aún no existe, no se renderiza como un enlace <a> clickable. Se renderiza como texto plano legible. Esto evita errores 404 y confusión en el lector.
  2. Mobile-First: Se descartan las “hover cards” (previsualizaciones al pasar el ratón) porque no funcionan en dispositivos táctiles y añaden peso JavaScript innecesario.
  3. Alias son Esenciales: La sintaxis Texto visible es fundamental para que el texto leído en la web sea natural (ej: “El Quijote”) en lugar de técnico (ej: “el-libro-el-quijote”).
  4. Procesamiento en Build Time: La resolución de enlaces se hace durante la compilación de Astro (usando Rehype), no en el navegador del cliente. Esto garantiza máximo rendimiento y SEO.

📋 Reglas de Comportamiento (Matriz de Renderizado)

El sistema evalúa cada wikilink ... comparándolo con los slug existentes en la colección de artículos.

Sintaxis en Obsidian¿Existe el destino?Resultado en HTML (Web)Experiencia de Usuario
el libro el quijote✅ Sí<a href="/blog/el-libro-el-quijote">el libro el quijote</a>Enlace azul, clickable. Los guiones se muestran como espacios.
el libro el quijote❌ Noel libro el quijoteTexto plano normal. No es clickable. No tiene estilo de error.
El Quijote✅ Sí<a href="/blog/el-libro-el-quijote">El Quijote</a>Enlace azul, clickable. Muestra el alias natural.
El Quijote❌ NoEl QuijoteTexto plano normal (el alias). No es clickable.

[!tip] Ventaja de este enfoque Permite escribir sobre conceptos futuros (idea futura) sin que aparezcan enlaces rotos feos en la web. Cuando la nota se cree, el enlace se “activa” automáticamente en el siguiente build.

⚙️ Implementación Técnica

1. Dependencias Requeridas

npm install unist-util-visit

2. El Plugin Rehype (src/utils/rehype-wikilinks.mjs)

Este script se crea por terminal con:

cat > src/utils/rehype-wikilinks.mjs << 'ENDOFFILE'
[Pegar el código de arriba]
ENDOFFILE
← Volver al blog 🕸️ Ver en el Grafo