nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-14 09:13:31 +00:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/chats/components/list.tsx
View File

@ -36,10 +36,6 @@ export function ChatsList() {
<div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="h-4 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div>
<div className="inline-flex h-10 items-center gap-2.5 border-l-2 border-transparent pl-4">
<div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="h-4 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div>
</div>
);
}

2
src/app/notes/text.tsx
View File

@ -51,7 +51,7 @@ export function TextNoteScreen() {
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:

2
src/app/users/index.tsx
View File

@ -56,7 +56,7 @@ export function UserScreen() {
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<TextNote event={event} />
<TextNote content={event.content} />
</NoteWrapper>
</div>
);

7
src/index.css
View File

@ -6,6 +6,11 @@ html {
font-size: 14px;
}
input::-ms-reveal,
input::-ms-clear {
display: none;
}
a {
@apply cursor-default no-underline !important;
}
@ -15,7 +20,7 @@ button {
}
.markdown {
@apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
@apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
}
.ProseMirror p.is-empty::before {

4
src/libs/storage/provider.tsx
View File

@ -1,5 +1,6 @@
import { message } from '@tauri-apps/api/dialog';
import { platform } from '@tauri-apps/api/os';
import { appConfigDir } from '@tauri-apps/api/path';
import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
import Database from 'tauri-plugin-sql-api';
@ -18,10 +19,13 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
async function initLumeStorage() {
try {
const dir = await appConfigDir();
const sqlite = await Database.load('sqlite:lume.db');
const platformName = await platform();
const lumeStorage = new LumeStorage(sqlite, platformName);
console.log('App config dir: ', dir);
if (!lumeStorage.account) await lumeStorage.getActiveAccount();
setDB(lumeStorage);
} catch (e) {

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>

4
src/utils/hooks/useEvent.ts
View File

@ -23,7 +23,7 @@ export function useEvent(id: string, embed?: string) {
// get event from relay if event in db not present
const event = await ndk.fetchEvent(id);
if (!event) throw new Error(`Event not found: ${id}`);
if (!event) throw new Error(`Event not found: ${id.toString()}`);
let root: string;
let reply: string;
@ -50,10 +50,8 @@ export function useEvent(id: string, embed?: string) {
},
{
enabled: !!ndk,
staleTime: Infinity,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
}
);

152
src/utils/parser.ts
View File

@ -1,73 +1,87 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import getUrls from 'get-urls';
import { Event, parseReferences } from 'nostr-tools';
import { nip19 } from 'nostr-tools';
import { EventPointer } from 'nostr-tools/lib/nip19';
import { RichContent } from '@utils/types';
export function parser(event: NDKEvent) {
const references = parseReferences(event as unknown as Event);
const urls = getUrls(event.content as unknown as string);
const content: RichContent = {
parsed: event.content as unknown as string,
notes: [],
images: [],
videos: [],
links: [],
};
// parse nostr references
references?.forEach((item) => {
const profile = item.profile;
const event = item.event;
const addr = item.address;
if (event) {
content.notes.push(event.id);
content.parsed = content.parsed.replace(item.text, '');
}
if (profile) {
content.parsed = content.parsed.replace(item.text, `~pub-${item.profile.pubkey}~`);
}
if (addr) {
content.notes.push(addr.identifier);
content.parsed = content.parsed.replace(item.text, '');
}
});
// parse urls
urls?.forEach((url: string) => {
if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/)) {
// image url
content.images.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
}
if (url.match(/\.(mp4|mov|webm|wmv|flv|mts|avi|ogv|mkv|mp3|m3u8)$/)) {
// video
content.videos.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
}
/*
if (content.links.length < 1) {
// push to store
content.links.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
}
*/
});
// parse hashtag
const hashtags = content.parsed.split(/\s/gm).filter((s) => s.startsWith('#'));
if (hashtags) {
const uniqTags = new Set(hashtags);
uniqTags.forEach((tag) => {
content.parsed = content.parsed.replaceAll(tag, `~tag-${tag}~`);
});
}
return content;
function isURL(str: string) {
const pattern = new RegExp(
'^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$', // fragment locator
'i'
);
return !!pattern.test(str);
}
export function parser(eventContent: string) {
try {
const content: RichContent = {
parsed: null,
images: [],
videos: [],
links: [],
notes: [],
};
const parse = eventContent.split(/\s/gm).map((word) => {
// url
if (isURL(word)) {
const url = new URL(word);
url.search = '';
if (url.toString().match(/\.(jpg|jpeg|gif|png|webp|avif)$/)) {
// image url
content.images.push(word);
// remove url from original content
return word.replace(word, '');
}
if (url.toString().match(/\.(mp4|mov|webm|wmv|flv|mts|avi|ogv|mkv|mp3|m3u8)$/)) {
// video
content.videos.push(word);
// remove url from original content
word = word.replace(word, '');
}
}
// hashtag
if (word.startsWith('#') && word.length > 1) {
return word.replace(word, `~tag-${word}~`);
}
// nostr account references
if (word.startsWith('nostr:npub1')) {
const npub = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
return word.replace(word, `~pub-${nip19.decode(npub).data}~`);
}
// nostr account references
if (word.startsWith('nostr:note1')) {
const note = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
content.notes.push(nip19.decode(note).data as string);
return word.replace(word, '');
}
// nostr event references
if (word.startsWith('nostr:nevent1')) {
const nevent = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
const decoded = nip19.decode(nevent).data as EventPointer;
content.notes.push(decoded.id);
return word.replace(word, '');
}
// normal word
return word;
});
// update content with parsed version
content.parsed = parse.join(' ');
return content;
} catch (e) {
console.error('cannot parse content, error: ', e);
}
}

2
src/utils/types.d.ts vendored
View File

@ -2,10 +2,10 @@ import { NDKEvent, NDKUserProfile } from '@nostr-dev-kit/ndk';
export interface RichContent {
parsed: string;
notes: string[];
images: string[];
videos: string[];
links: string[];
notes: string[];
}
export interface DBEvent {