Make bare category/node topic cross-references clickable (#1)

- Make bare category/node topic cross-references clickable (db768b9206dd78dd9b10335e7dca70b4b60aaa61)


Co-authored-by: Thomas Wolf <thomwolf@users.noreply.huggingface.co>

app.js

@@ -192,6 +192,29 @@ function setupMarked() {
       renderer(tok) { return citationHTML(tok.id); },
     }],
   });
+  // Cross-references between topics are authored as bare `category/node` code
+  // spans (e.g. `preference-data/ai-feedback-data`) rather than markdown links.
+  // Turn each into a live hop to that topic — but only when the page exists, so
+  // genuine code spans (`preference/DPO`, planned-but-unwritten nodes) stay plain.
+  // (Markdown-link cross-refs are handled separately by rewriteInternalLinks;
+  // this href is already a `#/` route, so that pass leaves it untouched.)
+  marked.use({
+    renderer: {
+      // marked@13 hands codespan the already-HTML-escaped code text as a plain
+      // string (the {text} token arg is a marked-v16 API) — so read it directly
+      // and don't re-escape, or every cross-ref silently falls through to plain.
+      codespan(code) {
+        const m = /^([a-z0-9][a-z0-9-]*\/[a-z0-9][a-z0-9-]*)$/.exec(code);
+        if (m) {
+          const path = `topics/${m[1]}.md`;
+          if (state.pages.some(p => p.path === path)) {
+            return `<a class="xref" href="#/topic/${encodeURIComponent(path)}" title="Topic: ${m[1]}"><code>${code}</code></a>`;
+          }
+        }
+        return false;   // fall back to marked's default code-span rendering
+      },
+    },
+  });
   marked.setOptions({ gfm: true, breaks: false });
 }
 

styles.css

@@ -312,6 +312,14 @@ a:hover { color: var(--accent-deep); }
   font-size: 12.8px; line-height: 1.55;
 }
 .prose pre code { background: none; border: none; padding: 0; font-size: inherit; color: var(--ink-2); }
+/* cross-reference: a `category/node` code span linked to its topic page */
+.prose a.xref { border-bottom: none; text-decoration: none; }
+.prose a.xref code {
+  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep);
+  cursor: pointer; transition: background .12s, color .12s;
+}
+.prose a.xref:hover code { background: var(--accent); color: #fff; }
+[data-theme="dark"] .prose a.xref:hover code { color: #0b1220; }
 
 /* blockquote */
 .prose blockquote {