diff --git a/packages/app/src/Element/HyperText.tsx b/packages/app/src/Element/HyperText.tsx
index 23680b5..6fa9892 100644
--- a/packages/app/src/Element/HyperText.tsx
+++ b/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 ;
} else {
- return (
+ return [
e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
{a}
-
- );
+ ,
+ ,
+ ];
}
} catch (error) {
// Ignore the error.
diff --git a/packages/app/src/Element/LinkPreview.tsx b/packages/app/src/Element/LinkPreview.tsx
new file mode 100644
index 0000000..0a776e3
--- /dev/null
+++ b/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();
+ const [previewtitle, setTitle] = useState();
+ useEffect(() => {
+ fetchUrlPreviewInfo(url)
+ .then(data => {
+ if (data) {
+ setImage(data.image || undefined);
+ setTitle(data.title || undefined);
+ }
+ })
+ .catch(console.error);
+ }, [url]);
+ return (
+
+
+ {previewtitle}
+
+ );
+};
+
+export default LinkPreview;