mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
fix article
This commit is contained in:
parent
c8d04f4695
commit
f01074ea9f
@ -12,11 +12,11 @@ import { User } from '@shared/user';
|
|||||||
import { useEvent } from '@utils/hooks/useEvent';
|
import { useEvent } from '@utils/hooks/useEvent';
|
||||||
|
|
||||||
export function ArticleNoteScreen() {
|
export function ArticleNoteScreen() {
|
||||||
|
const { id } = useParams();
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const replyRef = useRef(null);
|
const replyRef = useRef(null);
|
||||||
|
|
||||||
const { id } = useParams();
|
|
||||||
|
|
||||||
const naddr = id.startsWith('naddr') ? (nip19.decode(id).data as AddressPointer) : null;
|
const naddr = id.startsWith('naddr') ? (nip19.decode(id).data as AddressPointer) : null;
|
||||||
const { status, data } = useEvent(id, naddr);
|
const { status, data } = useEvent(id, naddr);
|
||||||
|
|
||||||
|
@ -2,8 +2,6 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|||||||
import { memo, useMemo } from 'react';
|
import { memo, useMemo } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import { Image } from '@shared/image';
|
|
||||||
|
|
||||||
export function ArticleNote(props: { event?: NDKEvent }) {
|
export function ArticleNote(props: { event?: NDKEvent }) {
|
||||||
const metadata = useMemo(() => {
|
const metadata = useMemo(() => {
|
||||||
const title = props.event.tags.find((tag) => tag[0] === 'title')?.[1];
|
const title = props.event.tags.find((tag) => tag[0] === 'title')?.[1];
|
||||||
@ -28,28 +26,30 @@ export function ArticleNote(props: { event?: NDKEvent }) {
|
|||||||
}, [props.event.id]);
|
}, [props.event.id]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={`/notes/article/${props.event.id}`} preventScrollReset={true}>
|
<Link
|
||||||
<div className="my-2 overflow-hidden rounded-lg">
|
to={`/notes/article/${props.event.id}`}
|
||||||
{metadata.image && (
|
preventScrollReset={true}
|
||||||
<Image
|
className="mt-2 flex w-full flex-col rounded-lg border border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
|
||||||
src={metadata.image}
|
>
|
||||||
alt={metadata.title}
|
{metadata.image && (
|
||||||
className="h-44 w-full rounded-t-lg object-cover"
|
<img
|
||||||
/>
|
src={metadata.image}
|
||||||
)}
|
alt={metadata.title}
|
||||||
<div className="flex flex-col gap-1 rounded-b-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800">
|
className="h-44 w-full rounded-t-lg object-cover"
|
||||||
<h5 className="line-clamp-1 font-semibold text-neutral-900 dark:text-neutral-100">
|
/>
|
||||||
{metadata.title}
|
)}
|
||||||
</h5>
|
<div className="flex flex-col gap-1 rounded-b-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800">
|
||||||
{metadata.summary ? (
|
<h5 className="line-clamp-1 font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
<p className="line-clamp-3 break-all text-sm text-neutral-600 dark:text-neutral-400">
|
{metadata.title}
|
||||||
{metadata.summary}
|
</h5>
|
||||||
</p>
|
{metadata.summary ? (
|
||||||
) : null}
|
<p className="line-clamp-3 break-all text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
<span className="mt-2.5 text-sm text-neutral-500 dark:text-neutral-400">
|
{metadata.summary}
|
||||||
{metadata.publishedAt.toString()}
|
</p>
|
||||||
</span>
|
) : null}
|
||||||
</div>
|
<span className="mt-2.5 text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
{metadata.publishedAt.toString()}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
|
@ -1,31 +1,38 @@
|
|||||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||||
|
import Markdown from 'markdown-to-jsx';
|
||||||
|
|
||||||
|
import { Boost, Hashtag, Invoice, MentionUser } from '@shared/notes';
|
||||||
|
|
||||||
export function ArticleDetailNote({ event }: { event: NDKEvent }) {
|
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 (
|
return (
|
||||||
<div 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-500">
|
<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-500"
|
||||||
|
>
|
||||||
{event.content}
|
{event.content}
|
||||||
</div>
|
</Markdown>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -42,6 +42,11 @@ export function TextNote(props: { content?: string; truncate?: boolean }) {
|
|||||||
Invoice: {
|
Invoice: {
|
||||||
component: Invoice,
|
component: Invoice,
|
||||||
},
|
},
|
||||||
|
a: {
|
||||||
|
props: {
|
||||||
|
target: '_blank',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
slugify: (str) => str,
|
slugify: (str) => str,
|
||||||
forceBlock: true,
|
forceBlock: true,
|
||||||
|
Loading…
Reference in New Issue
Block a user