aylac.top
1import {
2 createAsync,
3 type Params,
4 useNavigate,
5 useParams,
6} from "@solidjs/router";
7import { Show } from "solid-js";
8import { CodeBlock } from "../../elements/code_block";
9import { getLanguage } from "../../util/get_language";
10import { figureOutDid } from "../../util/handle";
11import { useDid } from "./context";
12import { Header } from "./main";
13import { getRepoBlob } from "./main.data";
14
15export async function preloadRepoBlob({ params }: { params: Params }) {
16 const did = await figureOutDid(params.user);
17 if (!did) return;
18 getRepoBlob(did, params.repo, params.ref, params.path);
19}
20
21export default function RepoBlob() {
22 const params = useParams();
23 const did = useDid();
24 const navigate = useNavigate();
25
26 const blob = createAsync(() =>
27 (async () => {
28 const d = did();
29 if (!d) return;
30 const res = await getRepoBlob(d, params.repo, params.ref, params.path);
31 if (res.status === 404) {
32 const split = window.location.pathname.split("/");
33 split[3] = "tree";
34 navigate(split.join("/"), { replace: true });
35 }
36 if (!res.ok) return;
37 return res.data;
38 })(),
39 );
40
41 return (
42 <div class="mx-auto max-w-5xl">
43 <Header user={params.user} repo={params.repo} />
44 <div class="flex flex-col rounded bg-white dark:bg-gray-800">
45 <Show when={blob()} keyed>
46 {(data) => (
47 <CodeBlock
48 code={data.content}
49 language={getLanguage(data.path.split("/").pop()) || "text"}
50 />
51 )}
52 </Show>
53 </div>
54 </div>
55 );
56}