csr tangled client in solid-js
fix the 'view raw'
+25
-4
+12
src/lib/api/repos.ts
+12
src/lib/api/repos.ts
···
599
599
return blob.content;
600
600
};
601
601
602
+
export const decodeBlobBytes = (blob: BlobResponse): Uint8Array => {
603
+
if (!blob.content) {
604
+
return new Uint8Array();
605
+
}
606
+
607
+
if (blob.encoding === 'base64') {
608
+
return Uint8Array.from(atob(blob.content), (char) => char.charCodeAt(0));
609
+
}
610
+
611
+
return new TextEncoder().encode(blob.content);
612
+
};
613
+
602
614
export const buildBlobDataUrl = (blob: BlobResponse): string | null => {
603
615
if (!blob.content || !blob.mimeType) {
604
616
return null;
+13
-4
src/pages/repo/code.tsx
+13
-4
src/pages/repo/code.tsx
···
2
2
import { File, Folder, GitBranch, GitCommitHorizontal, List } from 'lucide-solid';
3
3
import { A, useNavigate, useParams } from '@solidjs/router';
4
4
import { createQuery, keepPreviousData, useQueryClient } from '@tanstack/solid-query';
5
-
import { For, Match, Show, Switch, createEffect, createMemo, createSignal, type Accessor, type Component } from 'solid-js';
6
-
import { buildBlobDataUrl, decodeBlobText, getRepoBlob, getRepoBranches, getRepoDefaultBranch, getRepoLanguages, getRepoLog, getRepoTags, getRepoTree, type CommitHeadline } from '../../lib/api/repos';
5
+
import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup, type Accessor, type Component } from 'solid-js';
6
+
import { buildBlobDataUrl, decodeBlobBytes, decodeBlobText, getRepoBlob, getRepoBranches, getRepoDefaultBranch, getRepoLanguages, getRepoLog, getRepoTags, getRepoTree, type CommitHeadline } from '../../lib/api/repos';
7
7
import { Avatar, ErrorState, PlaceholderAvatar, buttonStyles, cardStyles } from '../../components/common';
8
8
import { CloneDropdown, CodeView, FileRow, MarkdownBlock, OverviewFileRow, ReadmeCard, RepoBlobSkeleton, RepoLanguageBarSkeleton, RepoTreeSkeleton } from '../../components/repo';
9
9
import { RepoFrame, useRepoQuery } from './shared';
···
899
899
const lineCount = createMemo(() => countLines(text()));
900
900
const commitLink = (commit: Accessor<CommitHeadline>) => `/${repo.owner.handle}/${repo.slug}/commit/${commit().hash}`;
901
901
902
+
const [blobUrl, setBlobUrl] = createSignal<string>();
903
+
createEffect(() => {
904
+
const bytes = decodeBlobBytes(blob);
905
+
const webBlob = new Blob([bytes.buffer as any], { type: blob.mimeType });
906
+
const url = URL.createObjectURL(webBlob);
907
+
setBlobUrl(url);
908
+
onCleanup(() => URL.revokeObjectURL(url));
909
+
});
910
+
902
911
return (
903
912
<div class="untangled-blob-card peer">
904
913
<div class="untangled-blob-header pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
···
915
924
<span class="select-none px-1 md:px-2">·</span>
916
925
<span>{formatBytes(blob.size!)}</span>
917
926
</Show>
918
-
<Show when={rawUrl()}>
927
+
<Show when={blobUrl()}>
919
928
<span class="select-none px-1 md:px-2">·</span>
920
-
<a href={rawUrl()!} target="_blank" rel="noreferrer" class="hover:underline">
929
+
<a href={blobUrl()!} target="_blank" rel="noreferrer" class="hover:underline">
921
930
view raw
922
931
</a>
923
932
</Show>