diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue index 0f3cbac2c2..cb1d3955d1 100644 --- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue +++ b/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" > -