feat(docs): comprehensive Git Pages redesign with dark mode support

- Add Mermaid theme configuration for light/dark mode switching
- Create dynamic theme switcher in theme/index.ts
- Add GitHub icon dark mode CSS fix
- Create SVG favicon with NVIDIA green branding
- Add academic citation styles (citation, references-list, doi-link)
- Add geek-style utilities (filename-tag, tech-badge, perf-highlight)
- Create Citation.vue and PerfCompare.vue components
- Add papers.md pages (EN/ZH) with academic references
- Update sidebar navigation to include papers page

The redesign provides:
- Proper Mermaid chart rendering in both light and dark modes
- Academic-style citations with DOI links
- BibTeX export for academic writing
- Performance comparison visualization components

Author: LessUp

docs/.vitepress/components/Citation.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  citeKey: string
+  title: string
+  authors: string
+  year: string
+  venue?: string
+  doi?: string
+  url?: string
+}>()
+</script>
+
+<template>
+  <div class="citation">
+    <span class="citation-key">[{{ citeKey }}]</span>
+    <span class="citation-title">{{ title }}</span>
+    <span class="citation-authors"> — {{ authors }}</span>
+    <span class="citation-year"> ({{ year }})</span>
+    <span v-if="venue" class="citation-venue">, {{ venue }}</span>
+    <div v-if="doi || url" class="citation-links">
+      <a v-if="doi" :href="`https://doi.org/${doi}`" class="doi-link" target="_blank" rel="noopener">
+        DOI: {{ doi }}
+      </a>
+      <a v-if="url" :href="url" target="_blank" rel="noopener">{{ url }}</a>
+    </div>
+  </div>
+</template>

docs/.vitepress/components/PerfCompare.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  data: { name: string; gflops: number; color?: string }[]
+  baseline?: string
+}>()
+
+const maxGflops = computed(() => Math.max(...props.data.map(d => d.gflops)))
+</script>
+
+<template>
+  <div class="perf-compare">
+    <div v-for="item in data" :key="item.name" class="perf-row">
+      <span class="perf-label">{{ item.name }}</span>
+      <div class="perf-bar-container">
+        <div
+          class="perf-bar"
+          :style="{
+            width: `${(item.gflops / maxGflops) * 100}%`,
+            background: item.color || 'var(--vp-c-brand-1)'
+          }"
+        />
+        <span class="perf-value">{{ item.gflops.toFixed(1) }} GFLOPS</span>
+      </div>
+    </div>
+  </div>
+</template>

docs/.vitepress/config.ts

@@ -17,10 +17,12 @@ export default withMermaid(defineConfig({
   head: [
     ['meta', { name: 'theme-color', content: '#76b900' }],
     ['meta', { property: 'og:type', content: 'website' }],
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/sgemm-optimization/favicon.svg' }],
+    ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/sgemm-optimization/favicon-32x32.png' }],
+    ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/sgemm-optimization/apple-touch-icon.png' }],
   ],
 
   ignoreDeadLinks: [
-    // External links that VitePress can't verify at build time
     /^https?:\/\//,
   ],
 
@@ -70,6 +72,7 @@ export default withMermaid(defineConfig({
               items: [
                 { text: 'Resources Hub', link: '/en/resources/' },
                 { text: 'Further Reading Routes', link: '/en/resources/further-reading' },
+                { text: 'Related Papers & Research', link: '/en/resources/papers' },
                 { text: 'CUDA Memory Cheat Sheet', link: '/en/cuda-memory-cheatsheet' },
                 { text: 'Performance Casebook', link: '/en/performance-casebook' },
                 { text: 'Curated References', link: '/en/references' },
@@ -141,6 +144,7 @@ export default withMermaid(defineConfig({
               items: [
                 { text: '资源中心', link: '/zh/resources/' },
                 { text: '延伸阅读路线', link: '/zh/resources/further-reading' },
+                { text: '相关论文与研究', link: '/zh/resources/papers' },
                 { text: 'CUDA 内存速查表', link: '/zh/cuda-memory-cheatsheet' },
                 { text: '性能案例库', link: '/zh/performance-casebook' },
                 { text: '参考资料清单', link: '/zh/references' },
@@ -184,4 +188,20 @@ export default withMermaid(defineConfig({
   vite: {
     plugins: [llmstxt()],
   },
+
+  // Mermaid 配置 - 通过 withMermaid 传入
+  mermaid: {
+    startOnLoad: true,
+    theme: 'base',
+    themeVariables: {
+      primaryColor: '#76b900',
+      primaryTextColor: '#1b2117',
+      primaryBorderColor: '#5a9200',
+      lineColor: '#4f5b47',
+      secondaryColor: '#f3f5f1',
+      tertiaryColor: '#f0f2ed',
+      fontSize: '14px',
+      fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+    },
+  },
 }))

docs/.vitepress/theme/index.ts

@@ -1,4 +1,77 @@
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
+import { watch, onMounted } from 'vue'
+import { useData } from 'vitepress'
+import Citation from '../components/Citation.vue'
+import PerfCompare from '../components/PerfCompare.vue'
 
-export default DefaultTheme
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('Citation', Citation)
+    app.component('PerfCompare', PerfCompare)
+  },
+  setup() {
+    const { isDark } = useData()
+
+    // Mermaid 深浅色主题动态切换
+    const updateMermaidTheme = async (dark: boolean) => {
+      // 动态导入 mermaid
+      const mermaid = (window as any).mermaid
+      if (!mermaid) return
+
+      const themeVariables = dark ? {
+        primaryColor: '#8bcd29',
+        primaryTextColor: '#ebf0e6',
+        primaryBorderColor: '#76b900',
+        lineColor: '#b0b8aa',
+        secondaryColor: '#141b13',
+        tertiaryColor: '#1a2118',
+        background: '#10140f',
+        mainBkg: '#1a2118',
+        fontSize: '14px',
+      } : {
+        primaryColor: '#76b900',
+        primaryTextColor: '#1b2117',
+        primaryBorderColor: '#5a9200',
+        lineColor: '#4f5b47',
+        secondaryColor: '#f3f5f1',
+        tertiaryColor: '#f0f2ed',
+        fontSize: '14px',
+      }
+
+      mermaid.initialize({
+        startOnLoad: true,
+        theme: dark ? 'dark' : 'base',
+        themeVariables,
+        flowchart: {
+          curve: 'basis',
+        },
+        sequence: {
+          mirrorActors: false,
+        },
+      })
+
+      // 重新渲染所有 mermaid 图表
+      const mermaidElements = document.querySelectorAll('.mermaid')
+      mermaidElements.forEach((el) => {
+        el.removeAttribute('data-processed')
+      })
+
+      try {
+        await mermaid.run({ querySelector: '.mermaid' })
+      } catch (e) {
+        console.warn('Mermaid re-render warning:', e)
+      }
+    }
+
+    onMounted(() => {
+      // 初始化时设置主题
+      updateMermaidTheme(isDark.value)
+    })
+
+    watch(isDark, (dark) => {
+      updateMermaidTheme(dark)
+    })
+  }
+}