feat: add placeholder for binary file

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,14 @@ 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 showBinaryContent = shallowRef(false)
+
+watch(filePath, () => {
+  showBinaryContent.value = false
+})
+
 const isFileTooLarge = computed(() => {
   const size = currentNode.value?.size
   return size !== undefined && size > MAX_FILE_SIZE
@@ -116,6 +125,10 @@ const fileContentUrl = computed(() => {
   if (!filePath.value || !fileTree.value || isFileTooLarge.value || !isViewingFile.value) {
     return null
   }
+  // Don't fetch binary files until user explicitly requests rendering
+  if (isBinaryFile.value && !showBinaryContent.value) {
+    return null
+  }
   return `/api/registry/file/${packageName.value}/v/${version.value}/${filePath.value}`
 })
 
@@ -519,6 +532,25 @@ defineOgImageComponent('Default', {
           />
         </template>
 
+        <!-- Binary file placeholder -->
+        <div
+          v-else-if="isViewingFile && isBinaryFile && !showBinaryContent"
+          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">Binary file</p>
+          <p class="text-fg-subtle text-sm mb-4">Rendering may produce garbled output.</p>
+          <div class="flex items-center justify-center gap-3">
+            <ButtonBase @click="showBinaryContent = true"> Render anyway </ButtonBase>
+            <LinkBase
+              variant="button-secondary"
+              :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+            >
+              View raw file
+            </LinkBase>
+          </div>
+        </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,70 @@
+// 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 ext = filePath.split('.').pop()?.toLowerCase() ?? ''
+  return BINARY_EXTENSIONS.has(ext)
+}