preliminary link preview working

packages/app/src/Element/HyperText.tsx

@@ -27,6 +27,7 @@ import TwitchEmbed from "Element/TwitchEmbed";
 import AppleMusicEmbed from "Element/AppleMusicEmbed";
 import NostrNestsEmbed from "Element/NostrNestsEmbed";
 import WavlakeEmbed from "Element/WavlakeEmbed";
+import LinkPreview from "Element/LinkPreview";
 import NostrLink from "Element/NostrLink";
 
 export default function HyperText({ link, creator }: { link: string; creator: HexKey }) {
@@ -154,11 +155,12 @@ export default function HyperText({ link, creator }: { link: string; creator: He
       } else if (url.protocol === "nostr:" || url.protocol === "web+nostr:") {
         return <NostrLink link={a} />;
       } else {
-        return (
+        return [
           <a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
             {a}
-          </a>
-        );
+          </a>,
+          <LinkPreview url={a} />,
+        ];
       }
     } catch (error) {
       // Ignore the error.

packages/app/src/Element/LinkPreview.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+
+async function fetchUrlPreviewInfo(url: string) {
+  const res = await fetch("http://dufflepud.onrender.com/link/preview", {
+    method: "POST",
+    body: JSON.stringify({ url }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  const json = await res.json();
+  if (json.title || json.image) {
+    const preview = json;
+    return preview;
+  } else {
+    return null;
+  }
+}
+
+const LinkPreview = ({ url }: { url: string }) => {
+  const [previewImage, setImage] = useState<string>();
+  const [previewtitle, setTitle] = useState<string>();
+  useEffect(() => {
+    fetchUrlPreviewInfo(url)
+      .then(data => {
+        if (data) {
+          setImage(data.image || undefined);
+          setTitle(data.title || undefined);
+        }
+      })
+      .catch(console.error);
+  }, [url]);
+  return (
+    <a href={url}>
+      <img src={previewImage}></img>
+      <p>{previewtitle}</p>
+    </a>
+  );
+};
+
+export default LinkPreview;