blob: 3fd1f46703ee2acfffd6cc3bddfda8ea247dda58 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import { sha256 } from "https://denopkg.com/chiefbiiko/sha256@v1.0.0/mod.ts";
export interface XeblogTootProps {
url: string;
}
export default function XeblogToot({ url }: XeblogTootProps) {
const tootHash = sha256(url + ".json", "utf8", "hex");
const tootJSON = (new TextDecoder("utf-8")).decode(
Deno.readFileSync(`./src/_data/toots/${tootHash}.json`),
);
const toot = JSON.parse(tootJSON);
const userHash = sha256(toot.attributedTo + ".json", "utf8", "hex");
const userJSON = (new TextDecoder("utf-8")).decode(
Deno.readFileSync(`./src/_data/users/${userHash}.json`),
);
const user = JSON.parse(userJSON);
return (
<>
<div class="bg-bg-soft dark:bg-bgDark-soft rounded-xl m-2 shadow-md max-w-lg">
<div class="items-center flex flex-row text-xl px-4 font-bold max-h-[4rem]">
<img class="rounded-full w-8 h-8" src={user.icon.url} />
<span class="pl-2">{user.name}</span>
</div>
<div class="flex flex-row items-center px-4 py-2">
<div class="flex flex-wrap px-5">
<div class="px-2 py-1 m-1 bg-bg-2 dark:bg-bgDark-2 rounded-lg">
{toot.published}
<div
dangerouslySetInnerHTML={{ __html: toot.content }}
>
</div>
</div>
</div>
</div>
<div class={`grid grid-cols-${toot.attachment.length > 1 ? 2 : 1} px-4`}>
{toot.attachment.map((attachment) => {
if (attachment.mediaType.startsWith("image/")) {
return (
<div class="flex flex-row items-center justify-center m-1 max-w-xs">
<a href={attachment.url} target="_blank">
<img src={attachment.url} />
</a>
</div>
);
} else {
return (
<div class="flex flex-row items-center justify-center m-1 max-w-xs">
<a href={attachment.url}>
{attachment.name}
</a>
</div>
);
}
})}
</div>
<a href={toot.url} className="pb-4 px-4" target="_blank">Link</a>
</div>
</>
);
}
|
