68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import { Link } from 'react-router-dom';
|
|
import remarkGfm from 'remark-gfm';
|
|
|
|
import { Boost, Hashtag, Invoice, MentionUser } from '@shared/notes';
|
|
|
|
export function ArticleDetailNote({ event }: { event: NDKEvent }) {
|
|
/*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];
|
|
|
|
let publishedAt: Date | string | number = event.tags.find(
|
|
(tag) => tag[0] === 'published_at'
|
|
)?.[1];
|
|
if (publishedAt) {
|
|
publishedAt = new Date(parseInt(publishedAt)).toLocaleDateString('en-US');
|
|
} else {
|
|
publishedAt = new Date(event.created_at * 1000).toLocaleDateString('en-US');
|
|
}
|
|
|
|
return {
|
|
title,
|
|
image,
|
|
publishedAt,
|
|
summary,
|
|
};
|
|
}, [event.id]);*/
|
|
|
|
return (
|
|
<ReactMarkdown
|
|
className="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:break-words prose-pre:break-all 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-500"
|
|
remarkPlugins={[remarkGfm]}
|
|
components={{
|
|
a: ({ href }) => {
|
|
const cleanURL = new URL(href);
|
|
cleanURL.search = '';
|
|
return (
|
|
<Link to={href} target="_blank" className="w-max break-all hover:!underline">
|
|
{cleanURL.hostname + cleanURL.pathname}
|
|
</Link>
|
|
);
|
|
},
|
|
del: ({ children }) => {
|
|
const key = children[0] as string;
|
|
if (typeof key !== 'string') return;
|
|
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-', '')} />;
|
|
}
|
|
if (key.startsWith('boost')) {
|
|
return <Boost boost={key.replace('boost-', '')} />;
|
|
}
|
|
if (key.startsWith('lnbc')) {
|
|
return <Invoice invoice={key.replace('lnbc-', '')} />;
|
|
}
|
|
},
|
|
}}
|
|
linkTarget={'_blank'}
|
|
>
|
|
{event.content}
|
|
</ReactMarkdown>
|
|
);
|
|
}
|