style(wiki): move breadcrumbs into title banner

Author: NewSunH

docs/.vitepress/theme/style.css

@@ -2286,6 +2286,33 @@ body.has-calendar-dialog {
   box-shadow: var(--site-shadow);
 }
 
+.wiki-breadcrumb {
+  display: flex;
+  margin: 0 0 22px;
+  align-items: center;
+  color: var(--site-text-3);
+  flex-wrap: wrap;
+  gap: 6px 9px;
+  font-size: 16px;
+  line-height: 1.55;
+}
+
+.wiki-breadcrumb a {
+  color: var(--site-text-3);
+  font-weight: 580;
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+
+.wiki-breadcrumb a:hover {
+  color: var(--site-brand);
+}
+
+.wiki-breadcrumb span {
+  color: var(--site-line-strong);
+  user-select: none;
+}
+
 .session-banner .section-index {
   color: var(--site-brand);
   font-family: var(--vp-font-family-mono);

docs/en/wiki/F9oKw4GUgi30lQkgWScckzjfnfd.md

@@ -5,9 +5,8 @@ outline: deep
 lastUpdated: false
 ---
 
-[AI Infra Seminars Wiki](/en/wiki/) / [Topic 1 — Kernel and ML Compilers](/en/wiki/VWJPwVFTHifeadkE4phc45hOntg)
-
 <header class="session-banner wiki-page-banner">
+  <nav class="wiki-breadcrumb" aria-label="Document path"><a href="/en/wiki/">AI Infra Seminars Wiki</a><span aria-hidden="true">/</span><a href="/en/wiki/VWJPwVFTHifeadkE4phc45hOntg">Topic 1 — Kernel and ML Compilers</a></nav>
   <span class="section-index">Course Materials</span>
   <h1>Session 00 — From HPC to AI Infra: Parallel Computing and Parallel Programming</h1>
 </header>

docs/en/wiki/WHFXw13vEiD8Hikfp3ScU33JnXe.md

@@ -5,9 +5,8 @@ outline: deep
 lastUpdated: false
 ---
 
-[AI Infra Seminars Wiki](/en/wiki/) / [Topic 1 — Kernel and ML Compilers](/en/wiki/VWJPwVFTHifeadkE4phc45hOntg)
-
 <header class="session-banner wiki-page-banner">
+  <nav class="wiki-breadcrumb" aria-label="Document path"><a href="/en/wiki/">AI Infra Seminars Wiki</a><span aria-hidden="true">/</span><a href="/en/wiki/VWJPwVFTHifeadkE4phc45hOntg">Topic 1 — Kernel and ML Compilers</a></nav>
   <span class="section-index">Course Materials</span>
   <h1>Session 01 — GPU Programming Model</h1>
 </header>

docs/wiki/F9oKw4GUgi30lQkgWScckzjfnfd.md

@@ -7,9 +7,8 @@ lastUpdated: false
 
 <!-- 此文件由 npm run sync:feishu 生成，请在飞书 Wiki 中编辑正文。 -->
 
-[AI Infra Wiki](/wiki/) / [Topic 1 - Kernel and ML Compilers](/wiki/VWJPwVFTHifeadkE4phc45hOntg)
-
 <header class="session-banner wiki-page-banner">
+  <nav class="wiki-breadcrumb" aria-label="文档路径"><a href="/wiki/">AI Infra Wiki</a><span aria-hidden="true">/</span><a href="/wiki/VWJPwVFTHifeadkE4phc45hOntg">Topic 1 - Kernel and ML Compilers</a></nav>
   <span class="section-index">课程资料</span>
   <h1>Session 00 | 从 HPC 到 AI Infra: 并行计算与并行编程</h1>
 </header>

docs/wiki/WHFXw13vEiD8Hikfp3ScU33JnXe.md

@@ -7,9 +7,8 @@ lastUpdated: false
 
 <!-- 此文件由 npm run sync:feishu 生成，请在飞书 Wiki 中编辑正文。 -->
 
-[AI Infra Wiki](/wiki/) / [Topic 1 - Kernel and ML Compilers](/wiki/VWJPwVFTHifeadkE4phc45hOntg)
-
 <header class="session-banner wiki-page-banner">
+  <nav class="wiki-breadcrumb" aria-label="文档路径"><a href="/wiki/">AI Infra Wiki</a><span aria-hidden="true">/</span><a href="/wiki/VWJPwVFTHifeadkE4phc45hOntg">Topic 1 - Kernel and ML Compilers</a></nav>
   <span class="section-index">课程资料</span>
   <h1>Session 01｜GPU Programming Model</h1>
 </header>

scripts/feishu/render.mjs

@@ -33,10 +33,12 @@ export function renderWikiPage({
   const breadcrumb = breadcrumbItems
     .map(
       ({ title: itemTitle, route }) =>
-        `[${escapeMarkdownInline(singleLine(itemTitle))}](${route})`
+        `<a href="${escapeHtml(route)}">${escapeHtml(singleLine(itemTitle))}</a>`
     )
-    .join(' / ')
-  const breadcrumbBlock = breadcrumb ? `${breadcrumb}\n\n` : ''
+    .join('<span aria-hidden="true">/</span>')
+  const breadcrumbBlock = breadcrumb
+    ? `  <nav class="wiki-breadcrumb" aria-label="文档路径">${breadcrumb}</nav>\n`
+    : ''
   const trimmedBody = body.trim()
   const bodyBlock = trimmedBody ? `\n\n${trimmedBody}` : ''
 
@@ -49,8 +51,8 @@ lastUpdated: false
 
 <!-- 此文件由 npm run sync:feishu 生成，请在飞书 Wiki 中编辑正文。 -->
 
-${breadcrumbBlock}<header class="session-banner wiki-page-banner">
-  <span class="section-index">课程资料</span>
+<header class="session-banner wiki-page-banner">
+${breadcrumbBlock}  <span class="section-index">课程资料</span>
   <h1>${escapeHtml(safeTitle)}</h1>
 </header>${bodyBlock}
 `
@@ -60,10 +62,6 @@ function singleLine(value) {
   return String(value).replace(/[\u0000-\u001f\u007f]+/g, ' ').trim()
 }
 
-function escapeMarkdownInline(value) {
-  return String(value).replace(/[\\`*_[\]<>]/g, '\\$&')
-}
-
 function escapeHtml(value) {
   return String(value)
     .replaceAll('&', '&amp;')

scripts/feishu/render.test.mjs

@@ -11,9 +11,20 @@ test('renders Wiki pages with the shared title banner and no Feishu source link'
   })
 
   assert.match(output, /<header class="session-banner wiki-page-banner">/)
+  assert.match(
+    output,
+    /<nav class="wiki-breadcrumb" aria-label="文档路径"><a href="\/wiki\/">课程 Wiki<\/a><span aria-hidden="true">\/<\/span><a href="\/wiki\/topic-1">主题一<\/a><\/nav>/
+  )
   assert.match(output, /<span class="section-index">课程资料<\/span>/)
   assert.match(output, /<h1>GPU &lt;模型&gt; &amp; 编程<\/h1>/)
-  assert.match(output, /\[课程 Wiki\]\(\/wiki\/\) \/ \[主题一\]\(\/wiki\/topic-1\)/)
+  assert.ok(
+    output.indexOf('<nav class="wiki-breadcrumb"') >
+      output.indexOf('<header class="session-banner wiki-page-banner">')
+  )
+  assert.ok(
+    output.indexOf('<nav class="wiki-breadcrumb"') <
+      output.indexOf('<span class="section-index">课程资料</span>')
+  )
   assert.doesNotMatch(output, /在飞书中查看原文/)
   assert.doesNotMatch(output, /^# GPU/m)
 })
@@ -25,7 +36,7 @@ test('does not add a self-referencing breadcrumb to the Wiki root page', () => {
     collectionTitle: '课程 Wiki'
   })
 
-  assert.doesNotMatch(output, /\[课程 Wiki\]\(\/wiki\/\)/)
+  assert.doesNotMatch(output, /class="wiki-breadcrumb"/)
 })
 
 test('ends an empty Wiki page without extra blank lines', () => {