feat: add binary file warning (#1959)

Author: ShroXd

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

@@ -4,6 +4,7 @@ import type {
   PackageFileTreeResponse,
   PackageFileContentResponse,
 } from '#shared/types'
+import { isBinaryFilePath } from '~/utils/file-types'
 
 definePageMeta({
   name: 'code',
@@ -105,6 +106,9 @@ 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))
+
 const isFileTooLarge = computed(() => {
   const size = currentNode.value?.size
   return size !== undefined && size > MAX_FILE_SIZE
@@ -113,7 +117,13 @@ 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) {
+  if (
+    !filePath.value ||
+    !fileTree.value ||
+    isFileTooLarge.value ||
+    !isViewingFile.value ||
+    isBinaryFile.value
+  ) {
     return null
   }
   return `/api/registry/file/${packageName.value}/v/${version.value}/${filePath.value}`
@@ -426,7 +436,7 @@ defineOgImageComponent('Default', {
         ref="contentContainer"
       >
         <!-- File viewer -->
-        <template v-if="isViewingFile && fileContent">
+        <template v-if="isViewingFile && !isBinaryFile && fileContent">
           <div
             class="sticky z-10 top-0 bg-bg border-b border-border px-4 py-2 flex items-center justify-between"
           >
@@ -519,6 +529,19 @@ defineOgImageComponent('Default', {
           />
         </template>
 
+        <!-- Binary file warning -->
+        <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>
+          <LinkBase
+            variant="button-secondary"
+            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+          >
+            {{ $t('code.view_raw') }}
+          </LinkBase>
+        </div>
+
         <!-- File too large warning -->
         <div v-else-if="isViewingFile && isFileTooLarge" class="py-20 text-center">
           <div class="i-lucide:file-text w-12 h-12 mx-auto text-fg-subtle mb-4" />

app/utils/file-types.ts

@@ -0,0 +1,71 @@
+// 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',
+])
+
+export function isBinaryFilePath(filePath: string): boolean {
+  const dotIndex = filePath.lastIndexOf('.')
+  const ext = dotIndex > -1 ? filePath.slice(dotIndex + 1).toLowerCase() : ''
+  return BINARY_EXTENSIONS.has(ext)
+}

i18n/locales/en.json

@@ -792,7 +792,9 @@
       "code": "code"
     },
     "file_path": "File path",
-    "scroll_to_top": "Scroll to top"
+    "scroll_to_top": "Scroll to top",
+    "binary_file": "Binary file",
+    "binary_rendering_warning": "File type not supported for preview."
   },
   "badges": {
     "provenance": {

i18n/schema.json

@@ -2382,6 +2382,12 @@
         },
         "scroll_to_top": {
           "type": "string"
+        },
+        "binary_file": {
+          "type": "string"
+        },
+        "binary_rendering_warning": {
+          "type": "string"
         }
       },
       "additionalProperties": false