1 files changed, 63 insertions, 0 deletions
diff --git a/lume/src/_components/XeblogToot.tsx b/lume/src/_components/XeblogToot.tsx
new file mode 100644
index 0000000..3fd1f46
--- /dev/null
+++ b/lume/src/_components/XeblogToot.tsx
@@ -0,0 +1,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>
+    </>
+  );
+}