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

restructure note component

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-06 15:41:49 +07:00
parent e5cec59842
commit 77e56b3dd4
19 changed files with 94 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/channel/components/messages/item.tsx
View File

@@ -2,7 +2,7 @@ import MessageHideButton from '@lume/app/channel/components/messages/hideButton'
import MessageMuteButton from '@lume/app/channel/components/messages/muteButton';
import MessageReplyButton from '@lume/app/channel/components/messages/replyButton';
import ChannelMessageUser from '@lume/app/channel/components/messages/user';
import { noteParser } from '@lume/app/note/components/parser';
import { noteParser } from '@lume/utils/parser';
import { useMemo } from 'react';

2
src/app/chat/components/messages/item.tsx
View File

@@ -1,8 +1,8 @@
import ChatMessageUser from '@lume/app/chat/components/messages/user';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { useDecryptMessage } from '@lume/utils/hooks/useDecryptMessage';
import { noteParser } from '@lume/utils/parser';
import { memo } from 'react';

39
src/app/index/pages/index.page.tsx
View File

@@ -1,4 +1,3 @@
import LumeIcon from '@lume/shared/icons/lume';
import { getActiveAccount } from '@lume/utils/storage';
import useSWR from 'swr';
@@ -21,41 +20,5 @@ export function Page() {
navigate('/app/inital-data', { overwriteLastHistoryEntry: true });
}
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="relative h-full overflow-hidden">
{/* dragging area */}
<div data-tauri-drag-region className="absolute left-0 top-0 z-20 h-16 w-full bg-transparent" />
{/* end dragging area */}
<div className="relative flex h-full flex-col items-center justify-center">
<div className="flex flex-col items-center gap-2">
<LumeIcon className="h-16 w-16 text-black dark:text-white" />
<div className="text-center">
<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Here&apos;s an interesting fact:
</h3>
<p className="font-medium text-zinc-300 dark:text-zinc-600">
Bitcoin and Nostr can be used by anyone, and no one can stop you!
</p>
</div>
</div>
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
<svg
className="h-5 w-5 animate-spin text-black dark:text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
</div>
</div>
</div>
);
return <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white"></div>;
}

16
src/app/note/components/base.tsx
View File

@@ -1,10 +1,8 @@
import { ContentMarkdown } from '@lume/app/note/components/markdown';
import { NoteContent } from '@lume/app/note/components/content';
import NoteMetadata from '@lume/app/note/components/metadata';
import { NoteParent } from '@lume/app/note/components/parent';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { noteParser } from '@lume/utils/parser';
import { navigate } from 'vite-plugin-ssr/client/router';
@@ -25,19 +23,13 @@ export default function NoteBase({ event }: { event: any }) {
onClick={(e) => openNote(e)}
className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
>
{event.parent_id && event.parent_id !== event.event_id ? (
{event.parent_id && event.parent_id !== event.event_id && (
<NoteParent key={event.parent_id} id={event.parent_id} />
) : (
<></>
)}
<div className="relative z-10 flex flex-col">
<NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
<div className="mt-1 pl-[52px]">
<ContentMarkdown content={content.parsed} />
{Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
{Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
<NoteContent content={content} />
<NoteMetadata id={event.event_id} eventPubkey={event.pubkey} />
</div>
</div>

21
src/app/note/components/comment.tsx
View File

@@ -1,21 +0,0 @@
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { memo } from 'react';
export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
return (
<div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
<div className="relative z-10 flex flex-col">
<NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{event.content}
</div>
</div>
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]"></div>
</div>
</div>
);
});

28
src/app/note/components/content.tsx Normal file
View File

@@ -0,0 +1,28 @@
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteQuote } from '@lume/app/note/components/quote';
import { NoteMentionUser } from '@lume/app/note/components/user/mention';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
export const NoteContent = ({ content }: { content: any }) => {
return (
<>
<ReactMarkdown
remarkPlugins={[[remarkGfm]]}
linkTarget="_blank"
className="prose prose-zinc max-w-none break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline prose-a:hover:text-fuchsia-600 prose-a:hover:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight"
components={{
h5: ({ ...props }) => <NoteMentionUser pubkey={props.content} />,
h6: ({ ...props }) => <NoteQuote id={props.content} />,
em: ({ ...props }) => <span className="text-fuchsia-500 hover:text-fuchsia-600" {...props} />,
}}
>
{content.parsed}
</ReactMarkdown>
{Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
{Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
</>
);
};

22
src/app/note/components/markdown.tsx
View File

@@ -1,22 +0,0 @@
import { NoteQuote } from '@lume/app/note/components/quote';
import { NoteMentionUser } from '@lume/app/note/components/user/mention';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
export const ContentMarkdown = ({ content }: { content: any }) => {
return (
<ReactMarkdown
remarkPlugins={[[remarkGfm]]}
linkTarget="_blank"
className="prose prose-zinc max-w-none break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline prose-a:hover:text-fuchsia-600 prose-a:hover:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight"
components={{
h5: ({ ...props }) => <NoteMentionUser pubkey={props.content} />,
h6: ({ ...props }) => <NoteQuote id={props.content} />,
em: ({ ...props }) => <span className="text-fuchsia-500 hover:text-fuchsia-600" {...props} />,
}}
>
{content}
</ReactMarkdown>
);
};

2
src/app/note/components/metadata.tsx
View File

@@ -51,7 +51,7 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub
});
return (
<div className="flex items-center gap-16">
<div className="mt-5 flex items-center gap-16">
<NoteReply id={id} replies={replies} />
<NoteLike id={id} pubkey={eventPubkey} likes={likes} />
<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />

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

@@ -1,11 +1,9 @@
import { ContentMarkdown } from '@lume/app/note/components/markdown';
import { NoteContent } from '@lume/app/note/components/content';
import NoteMetadata from '@lume/app/note/components/metadata';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';
import { noteParser } from '@lume/utils/parser';
import { memo, useContext } from 'react';
import useSWRSubscription from 'swr/subscription';
@@ -72,12 +70,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
<div className="relative z-10 flex flex-col">
<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-1 pl-[52px]">
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100"></div>
<ContentMarkdown content={content.parsed} />
{Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
{Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
<NoteContent content={content} />
<NoteMetadata id={data.id} eventPubkey={data.pubkey} />
</div>
</div>

50
src/app/note/components/parser.tsx
View File

@@ -1,50 +0,0 @@
import { Event } from 'nostr-tools';
const getURLs = new RegExp(
'(^|[ \t\r\n])((ftp|http|https|gopher|mailto|news|nntp|telnet|wais|file|prospero|aim|webcal|wss|ws):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))',
'gmi'
);
export const noteParser = (event: Event) => {
const content: { original: string; parsed: any; images: string[]; videos: string[] } = {
original: event.content,
parsed: event.content,
images: [],
videos: [],
};
// handle media
content.original.match(getURLs)?.forEach((item) => {
// make sure url is trimmed
const url = item.trim();
if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/i)) {
// image url
content.images.push(url);
// remove url from original content
content.parsed = content.parsed.toString().replace(url, '');
} else if (url.match(/\.(mp4|webm|mov)$/i)) {
// video
content.videos.push(url);
// remove url from original content
content.parsed = content.parsed.toString().replace(url, '');
}
});
// map hashtag to em
content.original.match(/#(\w+)(?!:\/\/)/gi)?.forEach((item) => {
content.parsed = content.parsed.replace(item, `*${item}*`);
});
// map note mention to h6
content.original.match(/^(nostr:)?(note1|nevent1).*$/gm)?.forEach((item) => {
content.parsed = content.parsed.replace(item, `###### ${item}`);
});
// map profile mention to h5
content.original.match(/^(nostr:)?(nprofile1|npub1).*$/gm)?.forEach((item) => {
content.parsed = content.parsed.replace(item, `##### ${item}`);
});
return content;
};

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

@@ -2,28 +2,15 @@ import { Image } from '@lume/shared/image';
export default function ImagePreview({ urls }: { urls: string[] }) {
return (
<div className="mt-2 grid h-full w-full grid-cols-2">
{urls.length === 1 ? (
<div className="col-span-2">
<Image
src={urls[0]}
alt="image"
className="h-auto w-full rounded-lg object-cover"
style={{ contentVisibility: 'auto' }}
/>
</div>
) : (
urls.map((url: string) => (
<div key={url} className="col-span-1">
<Image
src={url}
alt="image"
className="h-auto w-full rounded-lg object-cover"
style={{ contentVisibility: 'auto' }}
/>
</div>
))
)}
<div className="mt-3 grid h-full w-full grid-cols-3">
<div className="col-span-2">
<Image
src={urls[0]}
alt="image"
className="h-auto w-full rounded-lg object-cover"
style={{ contentVisibility: 'auto' }}
/>
</div>
</div>
);
}

2
src/app/note/components/preview/video.tsx
View File

@@ -4,7 +4,7 @@ export default function VideoPreview({ urls }: { urls: string[] }) {
return (
<div
onClick={(e) => e.stopPropagation()}
className="relative mt-2 flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
className="relative mt-3 flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
>
<MediaPlayer src={urls[0]} poster="" controls>
<MediaOutlet />

14
src/app/note/components/quote.tsx
View File

@@ -1,10 +1,8 @@
import { ContentMarkdown } from '@lume/app/note/components/markdown';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteContent } from '@lume/app/note/components/content';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';
import { noteParser } from '@lume/utils/parser';
import { memo, useContext } from 'react';
import useSWRSubscription from 'swr/subscription';
@@ -36,6 +34,8 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
};
});
const content = !error && data ? noteParser(data) : null;
const openNote = (e) => {
const selection = window.getSelection();
if (selection.toString().length === 0) {
@@ -45,8 +45,6 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
}
};
const content = !error && data ? noteParser(data) : null;
return (
<div
onClick={(e) => openNote(e)}
@@ -59,9 +57,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
<div className="relative z-10 flex flex-col">
<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-1 pl-[52px]">
<ContentMarkdown content={content.parsed} />
{Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
{Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
<NoteContent content={content} />
</div>
</div>
)}

0
src/app/note/components/formReply.tsx → src/app/note/components/replies/form.tsx
View File

18
src/app/note/components/replies/item.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { NoteContent } from '@lume/app/note/components/content';
import NoteReplyUser from '@lume/app/note/components/user/reply';
import { noteParser } from '@lume/utils/parser';
export default function Reply({ data }: { data: any }) {
const content = noteParser(data);
return (
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3.5 hover:bg-black/20">
<div className="flex flex-col">
<NoteReplyUser pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-[17px] pl-[48px]">
<NoteContent content={content} />
</div>
</div>
</div>
);
}

8
src/app/note/components/replies.tsx → src/app/note/components/replies/list.tsx
View File

@@ -1,5 +1,5 @@
import NoteReplyForm from '@lume/app/note/components/formReply';
import NoteReply from '@lume/app/note/components/reply';
import NoteReplyForm from '@lume/app/note/components/replies/form';
import Reply from '@lume/app/note/components/replies/item';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';
import { sortEvents } from '@lume/utils/transform';
@@ -7,7 +7,7 @@ import { sortEvents } from '@lume/utils/transform';
import { useContext } from 'react';
import useSWRSubscription from 'swr/subscription';
export default function NoteReplies({ id }: { id: string }) {
export default function RepliesList({ id }: { id: string }) {
const pool: any = useContext(RelayContext);
const { data, error } = useSWRSubscription(id ? ['note-replies', id] : null, ([, key], { next }) => {
@@ -53,7 +53,7 @@ export default function NoteReplies({ id }: { id: string }) {
</div>
) : (
sortEvents(data).map((event: any) => {
return <NoteReply key={event.id} data={event} />;
return <Reply key={event.id} data={event} />;
})
)}
</div>

22
src/app/note/components/reply.tsx
View File

@@ -1,22 +0,0 @@
import { noteParser } from '@lume/app/note/components//parser';
import { ContentMarkdown } from '@lume/app/note/components/markdown';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import NoteReplyUser from '@lume/app/note/components/user/reply';
export default function NoteReply({ data }: { data: any }) {
const content = noteParser(data);
return (
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3.5 hover:bg-black/20">
<div className="flex flex-col">
<NoteReplyUser pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-[17px] pl-[48px]">
<ContentMarkdown content={content.parsed} />
{Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
{Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
</div>
</div>
</div>
);
}

26
src/app/note/components/rootNote.tsx
View File

@@ -1,11 +1,9 @@
import { ContentMarkdown } from '@lume/app/note/components/markdown';
import { NoteContent } from '@lume/app/note/components/content';
import NoteMetadata from '@lume/app/note/components/metadata';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';
import { noteParser } from '@lume/utils/parser';
import { memo, useContext } from 'react';
import useSWRSubscription from 'swr/subscription';
@@ -65,19 +63,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
<div onClick={(e) => openNote(e)} className="relative z-10 flex flex-col">
<NoteDefaultUser pubkey={parseFallback.pubkey} time={parseFallback.created_at} />
<div className="mt-1 pl-[52px]">
<ContentMarkdown content={contentFallback.parsed} />
{Array.isArray(contentFallback.images) && contentFallback.images.length ? (
<ImagePreview urls={contentFallback.images} />
) : (
<></>
)}
{Array.isArray(contentFallback.videos) && contentFallback.videos.length ? (
<VideoPreview urls={contentFallback.videos} />
) : (
<></>
)}
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
<NoteContent content={contentFallback} />
<NoteMetadata id={parseFallback.id} eventPubkey={parseFallback.pubkey} />
</div>
</div>
@@ -113,11 +99,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
<div onClick={(e) => openNote(e)} className="relative z-10 flex flex-col">
<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-1 pl-[52px]">
<ContentMarkdown content={content.parsed} />
{Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
{Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
<NoteContent content={content} />
<NoteMetadata id={data.id} eventPubkey={data.pubkey} />
</div>
</div>

6
src/app/note/pages/index.page.tsx
View File

@@ -1,12 +1,12 @@
import NoteMetadata from '@lume/app/note/components/metadata';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import NoteReplies from '@lume/app/note/components/replies';
import RepliesList from '@lume/app/note/components/replies/list';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';
import { usePageContext } from '@lume/utils/hooks/usePageContext';
import { noteParser } from '@lume/utils/parser';
import { useContext } from 'react';
import useSWRSubscription from 'swr/subscription';
@@ -94,7 +94,7 @@ export function Page() {
</>
)}
</div>
<NoteReplies id={noteID} />
<RepliesList id={noteID} />
</div>
</div>
);