fix: support tree files in image path resolver (#866)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: alexdln

app/components/VersionSelector.vue

@@ -546,7 +546,7 @@ watch(
               <span
                 v-else
                 class="w-3 h-3 transition-transform duration-200 rtl-flip"
-                :class="group.isExpanded ? 'i:carbon:chevron-down' : 'i-carbon:chevron-right'"
+                :class="group.isExpanded ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
                 aria-hidden="true"
               />
             </button>

server/utils/readme.ts

@@ -2,7 +2,7 @@ import { marked, type Tokens } from 'marked'
 import sanitizeHtml from 'sanitize-html'
 import { hasProtocol } from 'ufo'
 import type { ReadmeResponse, TocItem } from '#shared/types/readme'
-import { convertBlobToRawUrl, type RepositoryInfo } from '#shared/utils/git-providers'
+import { convertBlobOrFileToRawUrl, type RepositoryInfo } from '#shared/utils/git-providers'
 import { highlightCodeSync } from './shiki'
 import { convertToEmoji } from '#shared/utils/emoji'
 
@@ -258,7 +258,7 @@ function resolveUrl(url: string, packageName: string, repoInfo?: RepositoryInfo)
 function resolveImageUrl(url: string, packageName: string, repoInfo?: RepositoryInfo): string {
   const resolved = resolveUrl(url, packageName, repoInfo)
   if (repoInfo?.provider) {
-    return convertBlobToRawUrl(resolved, repoInfo.provider)
+    return convertBlobOrFileToRawUrl(resolved, repoInfo.provider)
   }
   return resolved
 }

shared/utils/git-providers.ts

@@ -48,6 +48,8 @@ interface ProviderConfig {
   getRawBaseUrl(ref: RepoRef, branch?: string): string
   /** Get blob/rendered URL base for markdown files */
   getBlobBaseUrl(ref: RepoRef, branch?: string): string
+  /** Convert file URLs to blob URLs (for images) */
+  fileToRaw?(url: string): string
   /** Convert blob URLs to raw URLs (for images) */
   blobToRaw?(url: string): string
 }
@@ -69,6 +71,7 @@ const providers: ProviderConfig[] = [
       `https://raw.githubusercontent.com/${ref.owner}/${ref.repo}/${branch}`,
     getBlobBaseUrl: (ref, branch = 'HEAD') =>
       `https://github.com/${ref.owner}/${ref.repo}/blob/${branch}`,
+    fileToRaw: url => url.replace('/tree/', '/raw/'),
     blobToRaw: url => url.replace('/blob/', '/raw/'),
   },
   {
@@ -386,12 +389,16 @@ export function getProviderConfig(providerId: ProviderId): ProviderConfig | unde
   return providers.find(p => p.id === providerId)
 }
 
-export function convertBlobToRawUrl(url: string, providerId: ProviderId): string {
+export function convertBlobOrFileToRawUrl(url: string, providerId: ProviderId): string {
   const provider = providers.find(p => p.id === providerId)
+  let rawUrl = url
+  if (provider?.fileToRaw) {
+    rawUrl = provider.fileToRaw(url)
+  }
   if (provider?.blobToRaw) {
-    return provider.blobToRaw(url)
+    rawUrl = provider.blobToRaw(rawUrl)
   }
-  return url
+  return rawUrl
 }
 
 export function isKnownGitProvider(url: string): boolean {