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

add link preview

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-04 17:20:47 +07:00
parent be6de2344e
commit c4bc67410c
11 changed files with 154 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/note/components/kind1.tsx
View File

@@ -1,3 +1,4 @@
import { LinkPreview } from "./preview/link";
import { MentionNote } from "@app/note/components/mentions/note";
import { MentionUser } from "@app/note/components/mentions/user";
import { ImagePreview } from "@app/note/components/preview/image";
@@ -32,6 +33,11 @@ export function Kind1({
) : (
<></>
)}
{Array.isArray(content.links) && content.links.length ? (
<LinkPreview urls={content.links} />
) : (
<></>
)}
{Array.isArray(content.notes) && content.notes.length ? (
content.notes.map((note: string) => (
<MentionNote key={note} id={note} />

38
src/app/note/components/mentions/note.tsx
View File

@@ -3,43 +3,15 @@ import { Kind1063 } from "@app/note/components/kind1063";
import { NoteSkeleton } from "@app/note/components/skeleton";
import { NoteQuoteUser } from "@app/note/components/user/quote";
import { NoteWrapper } from "@app/note/components/wrapper";
import { RelayContext } from "@shared/relayProvider";
import { READONLY_RELAYS } from "@stores/constants";
import { useEvent } from "@utils/hooks/useEvent";
import { noteParser } from "@utils/parser";
import { memo, useContext } from "react";
import useSWRSubscription from "swr/subscription";
import { memo } from "react";
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const pool: any = useContext(RelayContext);
const data = useEvent(id);
const { data, error } = useSWRSubscription(
id ? id : null,
(key, { next }) => {
const unsubscribe = pool.subscribe(
[
{
ids: [key],
},
],
READONLY_RELAYS,
(event: any) => {
next(null, event);
},
undefined,
undefined,
{
unsubscribeOnEose: true,
},
);
return () => {
unsubscribe();
};
},
);
const kind1 = !error && data?.kind === 1 ? noteParser(data) : null;
const kind1063 = !error && data?.kind === 1063 ? data.tags : null;
const kind1 = data?.kind === 1 ? noteParser(data) : null;
const kind1063 = data?.kind === 1063 ? data.tags : null;
return (
<NoteWrapper

38
src/app/note/components/parent.tsx
View File

@@ -3,43 +3,15 @@ import { Kind1063 } from "@app/note/components/kind1063";
import { NoteMetadata } from "@app/note/components/metadata";
import { NoteSkeleton } from "@app/note/components/skeleton";
import { NoteDefaultUser } from "@app/note/components/user/default";
import { RelayContext } from "@shared/relayProvider";
import { READONLY_RELAYS } from "@stores/constants";
import { useEvent } from "@utils/hooks/useEvent";
import { noteParser } from "@utils/parser";
import { memo, useContext } from "react";
import useSWRSubscription from "swr/subscription";
import { memo } from "react";
export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
const pool: any = useContext(RelayContext);
const data = useEvent(id);
const { data, error } = useSWRSubscription(
id ? id : null,
(key, { next }) => {
const unsubscribe = pool.subscribe(
[
{
ids: [key],
},
],
READONLY_RELAYS,
(event: any) => {
next(null, event);
},
undefined,
undefined,
{
unsubscribeOnEose: true,
},
);
return () => {
unsubscribe();
};
},
);
const kind1 = !error && data?.kind === 1 ? noteParser(data) : null;
const kind1063 = !error && data?.kind === 1063 ? data.tags : null;
const kind1 = data?.kind === 1 ? noteParser(data) : null;
const kind1063 = data?.kind === 1063 ? data.tags : null;
return (
<div className="relative overflow-hidden flex flex-col pb-6">

7
src/app/note/components/preview/image.tsx
View File

@@ -1,12 +1,9 @@
import { Image } from "@shared/image";
import useEmblaCarousel from "embla-carousel-react";
export function ImagePreview({ urls }: { urls: string[] }) {
const [emblaRef] = useEmblaCarousel();
return (
<div ref={emblaRef} className="mt-3 overflow-hidden">
<div className="flex">
<div className="mt-3 overflow-hidden">
<div className="flex flex-col gap-2">
{urls.map((url) => (
<div key={url} className="mr-2 min-w-0 grow-0 shrink-0 basis-full">
<Image

39
src/app/note/components/preview/link.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { Image } from "@shared/image";
import { useOpenGraph } from "@utils/hooks/useOpenGraph";
export function LinkPreview({ urls }: { urls: string[] }) {
const domain = new URL(urls[0]);
const { data, error, isLoading } = useOpenGraph(urls[0]);
return (
<div className="mt-3 overflow-hidden rounded-lg bg-zinc-800">
{error && <p>failed to load</p>}
{isLoading && !data ? (
<p>Loading...</p>
) : (
<a href={urls[0]} className="flex flex-col">
<Image
src={data["og:image"]}
alt={urls[0]}
className="w-full h-auto border-t-lg object-cover"
/>
<div className="flex flex-col gap-2 px-3 py-3">
<h5 className="leading-none font-medium text-zinc-200">
{data["og:title"]}
</h5>
{data["og:description"] ? (
<p className="leading-none text-sm text-zinc-400 line-clamp-3">
{data["og:description"]}
</p>
) : (
<></>
)}
<span className="mt-2.5 leading-none text-sm text-zinc-500">
{domain.hostname}
</span>
</div>
</a>
)}
</div>
);
}