reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-25 15:50:34 +07:00
parent 85b30f770c
commit fe25dbaed0
43 changed files with 933 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/shared/notes/preview/link.tsx
View File

@@ -1,23 +1,12 @@
import { Image } from "@shared/image";
import { useOpenGraph } from "@utils/hooks/useOpenGraph";
function isValidURL(string: string) {
let url: URL;
try {
url = new URL(string);
} catch (_) {
return false;
}
return true;
}
export function LinkPreview({ urls }: { urls: string[] }) {
const domain = new URL(urls[0]);
const { status, data, error, isFetching } = useOpenGraph(urls[0]);
const { status, data, isFetching } = useOpenGraph(urls[0]);
return (
<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
{error && <p>failed to load</p>}
{isFetching || status === "loading" ? (
<div className="flex flex-col">
<div className="w-full h-44 bg-zinc-700 animate-pulse" />
@@ -29,20 +18,6 @@ export function LinkPreview({ urls }: { urls: string[] }) {
</span>
</div>
</div>
) : !data ? (
<a
className="flex flex-col px-3 py-3 rounded-lg border border-transparent hover:border-fuchsia-900"
href={urls[0]}
target="_blank"
rel="noreferrer"
>
<p className="leading-none text-sm text-zinc-400 line-clamp-3">
Can't fetch open graph, click to open website directly
</p>
<span className="mt-2.5 leading-none text-sm text-zinc-500">
{domain.hostname}
</span>
</a>
) : (
<a
className="flex flex-col rounded-lg border border-transparent hover:border-fuchsia-900"
@@ -50,31 +25,20 @@ export function LinkPreview({ urls }: { urls: string[] }) {
target="_blank"
rel="noreferrer"
>
{isValidURL(data["og:image"]) ? (
<Image
src={data["og:image"]}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg bg-white"
/>
) : (
<Image
src="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg bg-white"
/>
)}
<Image
src={data.images[0]}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg"
/>
<div className="flex flex-col gap-2 px-3 py-3">
<h5 className="leading-none font-medium text-zinc-200">
{data["og:title"]}
<h5 className="leading-none font-medium text-zinc-200 line-clamp-1">
{data.title}
</h5>
{data["og:description"] ? (
<p className="leading-none text-sm text-zinc-400 line-clamp-3">
{data["og:description"]}
{data.description && (
<p className="text-sm text-zinc-400 break-all line-clamp-3">
{data.description}
</p>
) : (
<></>
)}
<span className="mt-2.5 leading-none text-sm text-zinc-500">
{domain.hostname}