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

new parser

Browse Source
This commit is contained in:
reya
2023-11-04 14:18:29 +07:00
parent 912c740c51
commit dad388c6ab
17 changed files with 366 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/shared/notes/kinds/file.tsx
View File

@@ -52,13 +52,7 @@ export function FileNote(props: { event?: NDKEvent }) {
key={url}
className="mt-2 aspect-video w-full overflow-hidden rounded-lg"
>
<video
slot="media"
src={url}
poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
preload="none"
muted
/>
<video slot="media" src={url} preload="metadata" muted />
<MediaControlBar>
<MediaPlayButton></MediaPlayButton>
<MediaTimeRange></MediaTimeRange>
@@ -72,7 +66,7 @@ export function FileNote(props: { event?: NDKEvent }) {
return (
<div className="mt-2">
<LinkPreview urls={[url]} />
<LinkPreview url={url} />
</div>
);
}

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

@@ -75,7 +75,7 @@ export function Repost({ event }: { event: NDKEvent }) {
if (status === 'pending') {
return (
<div className="h-min w-full px-3 pb-3">
<div className="w-full px-3 pb-3">
<div className="relative overflow-hidden rounded-xl border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800">
<NoteSkeleton />
</div>
@@ -105,7 +105,7 @@ export function Repost({ event }: { event: NDKEvent }) {
Lume cannot find this post with your current relay set, but you can view
it via njump.me
</div>
<LinkPreview urls={[noteLink]} />
<LinkPreview url={noteLink} />
</div>
</div>
</div>
@@ -122,7 +122,7 @@ export function Repost({ event }: { event: NDKEvent }) {
<User pubkey={data.pubkey} time={data.created_at} eventId={data.id} />
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="relative z-20 flex-1">
<div className="relative z-20 min-w-0 flex-1">
{renderKind(data)}
<NoteActions id={data.id} pubkey={data.pubkey} />
</div>

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

@@ -1,67 +1,28 @@
import Markdown from 'markdown-to-jsx';
import { memo } from 'react';
import {
Boost,
Hashtag,
ImagePreview,
Invoice,
LinkPreview,
MentionNote,
MentionUser,
VideoPreview,
} from '@shared/notes';
import { ImagePreview, LinkPreview, VideoPreview } from '@shared/notes';
import { parser } from '@utils/parser';
import { useRichContent } from '@utils/hooks/useRichContent';
export function TextNote(props: { content?: string; truncate?: boolean }) {
const richContent = parser(props.content);
const { parsedContent, images, videos, linkPreview } = useRichContent(props.content);
if (props.truncate) {
return (
<div className="break-p prose prose-neutral line-clamp-4 max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:bg-white/10 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 hover:prose-a:text-blue-600 prose-a:hover:underline">
<div className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert">
{props.content}
</div>
);
}
return (
<div className="flex w-full flex-col items-start gap-2">
<Markdown
options={{
overrides: {
Hashtag: {
component: Hashtag,
},
Boost: {
component: Boost,
},
MentionUser: {
component: MentionUser,
},
Invoice: {
component: Invoice,
},
a: {
props: {
target: '_blank',
},
},
},
slugify: (str) => str,
forceBlock: true,
enforceAtxHeadings: true,
}}
className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:bg-white/10 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 hover:prose-a:text-blue-600 prose-a:hover:underline"
>
{richContent.parsed}
</Markdown>
{richContent.images.length ? <ImagePreview urls={richContent.images} /> : null}
{richContent.videos.length ? <VideoPreview urls={richContent.videos} /> : null}
{richContent.links.length ? <LinkPreview urls={richContent.links} /> : null}
{richContent.notes.map((note: string) => (
<MentionNote key={note} id={note} />
))}
<div className="flex flex-col gap-3">
<div className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-img:mb-0 prose-img:mt-0">
{parsedContent}
</div>
{images.length ? <ImagePreview urls={images} /> : null}
{videos.length ? <VideoPreview urls={videos} /> : null}
{linkPreview ? <LinkPreview url={linkPreview} /> : null}
</div>
);
}

6
src/shared/notes/kinds/unknown.tsx
View File

@@ -2,8 +2,8 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
export function UnknownNote(props: { event?: NDKEvent }) {
return (
<div className="flex w-full flex-col gap-2">
<div className="inline-flex flex-col rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
<div className="mt-2 flex w-full flex-col gap-2">
<div className="inline-flex flex-col rounded-md border border-neutral-300 bg-neutral-200 px-2 py-2 dark:border-neutral-700 dark:bg-neutral-800">
<span className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Kind: {props.event.kind}
</span>
@@ -12,7 +12,7 @@ export function UnknownNote(props: { event?: NDKEvent }) {
</p>
</div>
<div className="select-text whitespace-pre-line break-words text-neutral-800 dark:text-neutral-200">
<p>{props.event.content.toString()}</p>
{props.event.content.toString()}
</div>
</div>
);