fix: use jsdelivr's content-type header to detect binary file (#2036)

Author: shuuji3

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

@@ -100,7 +100,12 @@ const isViewingFile = computed(() => currentNode.value?.type === 'file')
 // Maximum file size we'll try to load (500KB) - must match server
 const MAX_FILE_SIZE = 500 * 1024
 
-const isBinaryFile = computed(() => !!filePath.value && isBinaryFilePath(filePath.value))
+// Estimate binary file based on mime type
+const isBinaryFile = computed(() => {
+  const contentType = fileContent.value?.contentType
+  if (!contentType) return false
+  return isBinaryContentType(contentType)
+})
 
 const isFileTooLarge = computed(() => {
   const size = currentNode.value?.size
@@ -110,13 +115,7 @@ const isFileTooLarge = computed(() => {
 // Fetch file content when a file is selected (and not too large)
 const fileContentUrl = computed(() => {
   // Don't fetch if no file path, file tree not loaded, file is too large, or it's a directory
-  if (
-    !filePath.value ||
-    !fileTree.value ||
-    isFileTooLarge.value ||
-    !isViewingFile.value ||
-    isBinaryFile.value
-  ) {
+  if (!filePath.value || !fileTree.value || isFileTooLarge.value || !isViewingFile.value) {
     return null
   }
   return `/api/registry/file/${packageName.value}/v/${version.value}/${filePath.value}`
@@ -481,7 +480,13 @@ defineOgImageComponent('Default', {
         <div v-else-if="isViewingFile && isBinaryFile" class="py-20 text-center">
           <div class="i-lucide:binary w-12 h-12 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.binary_file') }}</p>
-          <p class="text-fg-subtle text-sm mb-4">{{ $t('code.binary_rendering_warning') }}</p>
+          <p class="text-fg-subtle text-sm mb-4">
+            {{
+              $t('code.binary_rendering_warning', {
+                contentType: fileContent?.contentType ?? 'unknown',
+              })
+            }}
+          </p>
           <LinkBase
             variant="button-secondary"
             :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"

app/utils/file-types.ts

@@ -1,71 +1,31 @@
-// Extensions that are binary and cannot be meaningfully displayed as text
-const BINARY_EXTENSIONS = new Set([
-  // Images
-  'png',
-  'jpg',
-  'jpeg',
-  'gif',
-  'webp',
-  'ico',
-  'bmp',
-  'tiff',
-  'tif',
-  'avif',
-  'heic',
-  'heif',
-  // Fonts
-  'woff',
-  'woff2',
-  'ttf',
-  'otf',
-  'eot',
-  // Archives
-  'zip',
-  'tar',
-  'gz',
-  'tgz',
-  'bz2',
-  'xz',
-  '7z',
-  'rar',
-  // Executables / compiled
-  'exe',
-  'dll',
-  'so',
-  'dylib',
-  'node',
-  'wasm',
-  'pyc',
-  'class',
-  // Media
-  'mp3',
-  'mp4',
-  'ogg',
-  'wav',
-  'avi',
-  'mov',
-  'webm',
-  'flac',
-  'aac',
-  'mkv',
-  // Documents
-  'pdf',
-  'doc',
-  'docx',
-  'xls',
-  'xlsx',
-  'ppt',
-  'pptx',
-  // Data
-  'bin',
-  'dat',
-  'db',
-  'sqlite',
-  'sqlite3',
+// MIME types that are binary and cannot be meaningfully displayed as text
+const BINARY_MIME_PREFIXES = new Set([
+  'image/',
+  'audio/',
+  'video/',
+  'font/',
+  'application/wasm',
+  'application/pdf',
+  'application/zip',
+  'application/x-rar-compressed',
+  'application/x-7z-compressed',
+  'application/x-gzip',
+  'application/x-tar',
+  'application/x-bz2',
+  'application/x-xz',
+  'application/x-executable',
+  'application/x-msdownload', // exe / dll
+  'application/x-sharedlib', // so / dylib
+  'application/msword', // .doc
+  'application/vnd.',
+  'application/octet-stream',
 ])
 
-export function isBinaryFilePath(filePath: string): boolean {
-  const dotIndex = filePath.lastIndexOf('.')
-  const ext = dotIndex > -1 ? filePath.slice(dotIndex + 1).toLowerCase() : ''
-  return BINARY_EXTENSIONS.has(ext)
+export function isBinaryContentType(contentType: string): boolean {
+  for (const prefix of BINARY_MIME_PREFIXES) {
+    if (contentType.startsWith(prefix)) {
+      return true
+    }
+  }
+  return false
 }

i18n/locales/en.json

@@ -793,7 +793,7 @@
     },
     "file_path": "File path",
     "binary_file": "Binary file",
-    "binary_rendering_warning": "File type not supported for preview."
+    "binary_rendering_warning": "File type \"{contentType}\" is not supported for preview."
   },
   "badges": {
     "provenance": {

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

@@ -50,7 +50,7 @@ async function fetchFileContent(
   packageName: string,
   version: string,
   filePath: string,
-): Promise<string> {
+): Promise<{ content: string; contentType: string | null }> {
   const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`
   const response = await fetch(url)
 
@@ -64,6 +64,8 @@ async function fetchFileContent(
     })
   }
 
+  const contentType = response.headers.get('content-type')
+
   // Check content-length header if available
   const contentLength = response.headers.get('content-length')
   if (contentLength && parseInt(contentLength, 10) > MAX_FILE_SIZE) {
@@ -83,7 +85,7 @@ async function fetchFileContent(
     })
   }
 
-  return content
+  return { content, contentType }
 }
 
 /**
@@ -123,7 +125,7 @@ export default defineCachedEventHandler(
         filePath: rawFilePath,
       })
 
-      const content = await fetchFileContent(packageName, version, filePath)
+      const { content, contentType } = await fetchFileContent(packageName, version, filePath)
       const language = getLanguageFromPath(filePath)
 
       // For JS/TS files, resolve dependency versions and relative imports for linking
@@ -185,6 +187,7 @@ export default defineCachedEventHandler(
         version,
         path: filePath,
         language,
+        contentType,
         content,
         html,
         lines: content.split('\n').length,

shared/types/npm-registry.ts

@@ -381,6 +381,7 @@ export interface PackageFileContentResponse {
   version: string
   path: string
   language: string
+  contentType: string | null
   content: string
   html: string
   lines: number