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

new parser, faster than before 50%

Browse Source
This commit is contained in:
Ren Amamiya
2023-09-04 14:05:04 +07:00
parent 5d45027776
commit 3ebcf4a981
27 changed files with 162 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/shared/notes/actions.tsx
View File

@@ -28,7 +28,7 @@ export function NoteActions({
return (
<Tooltip.Provider>
<div className="-ml-1 mt-4 inline-flex w-full items-center">
<div className="-ml-1 mt-2 inline-flex w-full items-center">
<div className="inline-flex items-center gap-2">
<NoteReply id={id} pubkey={pubkey} root={root} />
<NoteReaction id={id} pubkey={pubkey} />

2
src/shared/notes/child.tsx
View File

@@ -39,7 +39,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
const renderKind = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote event={event} />;
return <TextNote content={event.content} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
case 1063:

47
src/shared/notes/content.tsx
View File

@@ -1,47 +0,0 @@
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
Hashtag,
ImagePreview,
LinkPreview,
MentionNote,
MentionUser,
VideoPreview,
} from '@shared/notes';
import { RichContent } from '@utils/types';
export function NoteContent({ content, long }: { content: RichContent; long?: boolean }) {
if (long) {
return (
<ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
{content as unknown as string}
</ReactMarkdown>
);
}
return (
<>
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const key = children[0] as string;
if (key.startsWith('pub') && key.length > 50 && key.length < 100)
return <MentionUser pubkey={key.replace('pub-', '')} />;
if (key.startsWith('tag')) return <Hashtag tag={key.replace('tag-', '')} />;
},
}}
>
{content?.parsed}
</ReactMarkdown>
{content?.images?.length > 0 && <ImagePreview urls={content.images} />}
{content?.videos?.length > 0 && <VideoPreview urls={content.videos} />}
{content?.links?.length > 0 && <LinkPreview urls={content.links} />}
{content?.notes?.length > 0 &&
content?.notes.map((note: string) => <MentionNote key={note} id={note} />)}
</>
);
}

1
src/shared/notes/index.tsx → src/shared/notes/index.ts
View File

@@ -24,7 +24,6 @@ export * from './kinds/repost';
export * from './child';
export * from './skeleton';
export * from './actions';
export * from './content';
export * from './mentions/hashtag';
export * from './stats';
export * from './wrapper';

8
src/shared/notes/kinds/articleDetail.tsx
View File

@@ -1,13 +1,9 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import { Link } from 'react-router-dom';
import remarkGfm from 'remark-gfm';
import { Image } from '@shared/image';
export function ArticleDetailNote({ event }: { event: NDKEvent }) {
const metadata = useMemo(() => {
/*const metadata = useMemo(() => {
const title = event.tags.find((tag) => tag[0] === 'title')?.[1];
const image = event.tags.find((tag) => tag[0] === 'image')?.[1];
const summary = event.tags.find((tag) => tag[0] === 'summary')?.[1];
@@ -27,7 +23,7 @@ export function ArticleDetailNote({ event }: { event: NDKEvent }) {
publishedAt,
summary,
};
}, [event.id]);
}, [event.id]);*/
return (
<ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>

16
src/shared/notes/kinds/repost.tsx
View File

@@ -16,22 +16,22 @@ import { useEvent } from '@utils/hooks/useEvent';
export function Repost({ event }: { event: NDKEvent }) {
const repostID = event.tags.find((el) => el[0] === 'e')[1] ?? '';
const { status, data } = useEvent(repostID, event.content as unknown as string);
const { status, data } = useEvent(repostID, event.content);
const renderKind = useCallback(
(event: NDKEvent) => {
switch (event.kind) {
(repostEvent: NDKEvent) => {
switch (repostEvent.kind) {
case NDKKind.Text:
return <TextNote event={event} />;
return <TextNote content={repostEvent.content} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
return <ArticleNote event={repostEvent} />;
case 1063:
return <FileNote event={event} />;
return <FileNote event={repostEvent} />;
default:
return <UnknownNote event={event} />;
return <UnknownNote event={repostEvent} />;
}
},
[event]
[data]
);
if (status === 'loading') {

36
src/shared/notes/kinds/text.tsx
View File

@@ -1,5 +1,3 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
@@ -14,8 +12,24 @@ import {
import { parser } from '@utils/parser';
export function TextNote({ event }: { event: NDKEvent }) {
const content = useMemo(() => parser(event), [event.id]);
export function TextNote({ content }: { content: string }) {
const richContent = parser(content) ?? null;
if (!richContent) {
return (
<div>
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
unwrapDisallowed={true}
linkTarget={'_blank'}
>
{content}
</ReactMarkdown>
</div>
);
}
return (
<div>
@@ -38,13 +52,15 @@ export function TextNote({ event }: { event: NDKEvent }) {
unwrapDisallowed={true}
linkTarget={'_blank'}
>
{content?.parsed}
{richContent.parsed}
</ReactMarkdown>
{content?.images?.length > 0 && <ImagePreview urls={content.images} />}
{content?.videos?.length > 0 && <VideoPreview urls={content.videos} />}
{content?.links?.length > 0 && <LinkPreview urls={content.links} />}
{content?.notes?.length > 0 &&
content?.notes.map((note: string) => <MentionNote key={note} id={note} />)}
<div>
{richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
{richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
{richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
{richContent.notes.length > 0 &&
richContent.notes.map((note: string) => <MentionNote key={note} id={note} />)}
</div>
</div>
);
}

30
src/shared/notes/mentions/note.tsx
View File

@@ -31,6 +31,19 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
}
};
const renderKind = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote content={event.content} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
case 1063:
return <FileNote event={event} />;
default:
return <UnknownNote event={event} />;
}
};
if (status === 'loading') {
return (
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
@@ -42,31 +55,18 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
if (status === 'error') {
return (
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
<p>Can&apos;t get event from relay</p>
<p>Can&apos;t get event from relay, ID: {id}</p>
</div>
);
}
const renderKind = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote event={event} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
case 1063:
return <FileNote event={event} />;
default:
return <UnknownNote event={event} />;
}
};
return (
<div
onClick={(e) => openThread(e, id)}
onKeyDown={(e) => openThread(e, id)}
role="button"
tabIndex={0}
className="cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
className="mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
>
<User pubkey={data.pubkey} time={data.created_at} size="small" />
<div className="mt-1">{renderKind(data)}</div>

2
src/shared/notes/preview/image.tsx
View File

@@ -12,7 +12,7 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
};
return (
<div className="mb-2 mt-3 overflow-hidden">
<div className="mt-3 overflow-hidden">
<div className="flex flex-col gap-2">
{urls.map((url) => (
<div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">

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

@@ -7,7 +7,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
const domain = new URL(urls[0]);
return (
<div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl">
<div className="mt-3 overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl">
{status === 'loading' ? (
<div className="flex flex-col">
<div className="h-44 w-full animate-pulse bg-white/10 backdrop-blur-xl" />

2
src/shared/notes/preview/video.tsx
View File

@@ -2,7 +2,7 @@ import ReactPlayer from 'react-player/es6';
export function VideoPreview({ urls }: { urls: string[] }) {
return (
<div className="relative mb-2 mt-3 flex w-full flex-col gap-2">
<div className="relative mt-3 flex w-full flex-col gap-2">
{urls.map((url) => (
<ReactPlayer
key={url}

2
src/shared/notes/replies/item.tsx
View File

@@ -15,7 +15,7 @@ export function Reply({ event, root }: { event: NDKEventWithReplies; root?: stri
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<TextNote event={event} />
<TextNote content={event.content} />
<NoteActions id={event.id} pubkey={event.pubkey} root={root} />
</div>
</div>

2
src/shared/notes/replies/sub.tsx
View File

@@ -10,7 +10,7 @@ export function SubReply({ event }: { event: NDKEvent }) {
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<TextNote event={event} />
<TextNote content={event.content} />
<NoteActions id={event.id} pubkey={event.pubkey} />
</div>
</div>

2
src/shared/widgets/global/hashtag.tsx
View File

@@ -58,7 +58,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<TextNote event={event} />
<TextNote content={event.content} />
</NoteWrapper>
</div>
);

2
src/shared/widgets/local/feeds.tsx
View File

@@ -60,7 +60,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
ref={virtualizer.measureElement}
>
<NoteWrapper event={event} root={dbEvent.root_id} reply={dbEvent.reply_id}>
<TextNote event={event} />
<TextNote content={event.content} />
</NoteWrapper>
</div>
);

4
src/shared/widgets/local/network.tsx
View File

@@ -62,7 +62,7 @@ export function LocalNetworkWidget() {
ref={virtualizer.measureElement}
>
<NoteWrapper event={event} root={dbEvent.root_id} reply={dbEvent.reply_id}>
<TextNote event={event} />
<TextNote content={event.content} />
</NoteWrapper>
</div>
);
@@ -122,7 +122,7 @@ export function LocalNetworkWidget() {
useEffect(() => {
if (db.account && db.account.network) {
const filter: NDKFilter = {
kinds: [1, 6],
kinds: [NDKKind.Text, NDKKind.Repost],
authors: db.account.network,
since: db.account.last_login_at ?? Math.floor(Date.now() / 1000),
};

2
src/shared/widgets/local/thread.tsx
View File

@@ -28,7 +28,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
(event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote event={event} />;
return <TextNote content={event.content} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
case 1063:

2
src/shared/widgets/local/user.tsx
View File

@@ -64,7 +64,7 @@ export function LocalUserWidget({ params }: { params: Widget }) {
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<TextNote event={event} />
<TextNote content={event.content} />
</NoteWrapper>
</div>
);

2
src/shared/widgets/nostrBand/trendingNotes.tsx
View File

@@ -52,7 +52,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
<div className="relative flex w-full flex-col">
{data.map((item) => (
<NoteWrapper key={item.event.id} event={item.event}>
<TextNote event={item.event} />
<TextNote content={item.event.content} />
</NoteWrapper>
))}
</div>