preliminary link preview working
This commit is contained in:
parent
403ed97ad3
commit
9ab702b846
@ -27,6 +27,7 @@ import TwitchEmbed from "Element/TwitchEmbed";
|
|||||||
import AppleMusicEmbed from "Element/AppleMusicEmbed";
|
import AppleMusicEmbed from "Element/AppleMusicEmbed";
|
||||||
import NostrNestsEmbed from "Element/NostrNestsEmbed";
|
import NostrNestsEmbed from "Element/NostrNestsEmbed";
|
||||||
import WavlakeEmbed from "Element/WavlakeEmbed";
|
import WavlakeEmbed from "Element/WavlakeEmbed";
|
||||||
|
import LinkPreview from "Element/LinkPreview";
|
||||||
import NostrLink from "Element/NostrLink";
|
import NostrLink from "Element/NostrLink";
|
||||||
|
|
||||||
export default function HyperText({ link, creator }: { link: string; creator: HexKey }) {
|
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:") {
|
} else if (url.protocol === "nostr:" || url.protocol === "web+nostr:") {
|
||||||
return <NostrLink link={a} />;
|
return <NostrLink link={a} />;
|
||||||
} else {
|
} else {
|
||||||
return (
|
return [
|
||||||
<a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
|
<a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
|
||||||
{a}
|
{a}
|
||||||
</a>
|
</a>,
|
||||||
);
|
<LinkPreview url={a} />,
|
||||||
|
];
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// Ignore the error.
|
// Ignore the error.
|
||||||
|
41
packages/app/src/Element/LinkPreview.tsx
Normal file
41
packages/app/src/Element/LinkPreview.tsx
Normal file
@ -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;
|
Loading…
Reference in New Issue
Block a user