feat: render markdown in code view

Author: yuyinws

app/pages/code/[...path].vue

@@ -243,6 +243,20 @@ const canonicalUrl = computed(() => {
   return url
 })
 
+// Toggle markdown view mode
+const markdownViewModes = [
+  {
+    label: $t('code.markdown_view_mode.preview'),
+    icon: 'i-carbon-view',
+  },
+  {
+    label: $t('code.markdown_view_mode.code'),
+    icon: 'i-carbon-code',
+  },
+] as const
+
+const markdownViewMode = ref<(typeof markdownViewModes)[number]['label']>('preview')
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
@@ -359,15 +373,38 @@ useSeoMeta({
         <!-- File viewer -->
         <template v-if="isViewingFile && fileContent">
           <div
-            class="sticky top-0 bg-bg border-b border-border px-4 py-2 flex items-center justify-between"
+            class="sticky z-10 top-0 bg-bg border-b border-border px-4 py-2 flex items-center justify-between"
           >
-            <div class="flex items-center gap-3 text-sm">
-              <span class="text-fg-muted">{{
-                $t('code.lines', { count: fileContent.lines })
-              }}</span>
-              <span v-if="currentNode?.size" class="text-fg-subtle">{{
-                formatBytes(currentNode.size)
-              }}</span>
+            <div class="flex items-center gap-2">
+              <div
+                v-if="fileContent.markdownHtml"
+                class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
+                role="tablist"
+                aria-label="Markdown view mode selector"
+              >
+                <button
+                  v-for="mode in markdownViewModes"
+                  :key="mode.label"
+                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+                  :class="
+                    markdownViewMode === mode.label
+                      ? 'bg-bg shadow text-fg border-border'
+                      : 'text-fg-subtle hover:text-fg border-transparent'
+                  "
+                  @click="markdownViewMode = mode.label"
+                >
+                  <span class="inline-block h-3 w-3" :class="mode.icon" aria-hidden="true" />
+                  {{ mode.label }}
+                </button>
+              </div>
+              <div class="flex items-center gap-3 text-sm">
+                <span class="text-fg-muted">{{
+                  $t('code.lines', { count: fileContent.lines })
+                }}</span>
+                <span v-if="currentNode?.size" class="text-fg-subtle">{{
+                  formatBytes(currentNode.size)
+                }}</span>
+              </div>
             </div>
             <div class="flex items-center gap-2">
               <button
@@ -389,7 +426,19 @@ useSeoMeta({
               </a>
             </div>
           </div>
+          <div
+            v-if="fileContent.markdownHtml"
+            v-show="markdownViewMode === 'preview'"
+            class="flex justify-center p-4"
+          >
+            <div
+              class="readme-content prose prose-invert max-w-[70ch]"
+              v-html="fileContent.markdownHtml.html"
+            ></div>
+          </div>
+
           <CodeViewer
+            v-show="!fileContent.markdownHtml || markdownViewMode === 'code'"
             :html="fileContent.html"
             :lines="fileContent.lines"
             :selected-lines="selectedLines"

i18n/locales/ar.json

@@ -532,6 +532,10 @@
     "table": {
       "name": "الاسم",
       "size": "الحجم"
+    },
+    "markdown_view_mode": {
+      "preview": "معاينة",
+      "code": "الكود"
     }
   },
   "badges": {

i18n/locales/de-DE.json

@@ -532,6 +532,10 @@
     "table": {
       "name": "Name",
       "size": "Größe"
+    },
+    "markdown_view_mode": {
+      "preview": "Vorschau",
+      "code": "Code"
     }
   },
   "badges": {

i18n/locales/en.json

@@ -546,6 +546,10 @@
     "table": {
       "name": "Name",
       "size": "Size"
+    },
+    "markdown_view_mode": {
+      "preview": "preview",
+      "code": "code"
     }
   },
   "badges": {

i18n/locales/es.json

@@ -537,6 +537,10 @@
     "table": {
       "name": "Nombre",
       "size": "Tamaño"
+    },
+    "markdown_view_mode": {
+      "preview": "vista previa",
+      "code": "código"
     }
   },
   "badges": {

i18n/locales/fr-FR.json

@@ -537,6 +537,10 @@
     "table": {
       "name": "Nom",
       "size": "Taille"
+    },
+    "markdown_view_mode": {
+      "preview": "aperçu",
+      "code": "code"
     }
   },
   "badges": {

i18n/locales/it-IT.json

@@ -537,6 +537,10 @@
     "table": {
       "name": "Nome",
       "size": "Dimensione"
+    },
+    "markdown_view_mode": {
+      "preview": "anteprima",
+      "code": "codice"
     }
   },
   "filters": {

i18n/locales/ja-JP.json

@@ -537,6 +537,10 @@
     "table": {
       "name": "名前",
       "size": "サイズ"
+    },
+    "markdown_view_mode": {
+      "preview": "プレビュー",
+      "code": "コード"
     }
   },
   "badges": {

i18n/locales/zh-CN.json

@@ -502,6 +502,10 @@
     "table": {
       "name": "名称",
       "size": "大小"
+    },
+    "markdown_view_mode": {
+      "preview": "预览",
+      "code": "代码"
     }
   },
   "badges": {

server/api/registry/file/[...pkg].get.ts

@@ -166,6 +166,13 @@ export default defineCachedEventHandler(
         resolveRelative,
       })
 
+      let markdownHtml: ReadmeResponse | undefined
+      if (language === 'markdown') {
+        const packageData = await fetchNpmPackage(rawPackageName)
+        const repoInfo = parseRepositoryInfo(packageData.repository)
+        markdownHtml = await renderReadmeHtml(content, rawPackageName, repoInfo)
+      }
+
       return {
         package: packageName,
         version,
@@ -174,6 +181,7 @@ export default defineCachedEventHandler(
         content,
         html,
         lines: content.split('\n').length,
+        markdownHtml,
       }
     } catch (error: unknown) {
       handleApiError(error, {