mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-02 18:00:47 +00:00
update article screen
This commit is contained in:
parent
773e49afa2
commit
04c1223f2e
@ -2,7 +2,7 @@ import { writeText } from '@tauri-apps/plugin-clipboard-manager';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { EventPointer } from 'nostr-tools/lib/types/nip19';
|
||||
import { useState } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { ArrowLeftIcon, CheckCircleIcon, ShareIcon } from '@shared/icons';
|
||||
@ -12,13 +12,33 @@ import { ReplyList } from '@shared/notes/replies/list';
|
||||
import { useEvent } from '@utils/hooks/useEvent';
|
||||
|
||||
export function ArticleNoteScreen() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { id } = useParams();
|
||||
const { status, data } = useEvent(id);
|
||||
|
||||
const [isCopy, setIsCopy] = useState(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const metadata = useMemo(() => {
|
||||
if (status === 'pending') return;
|
||||
|
||||
const title = data.tags.find((tag) => tag[0] === 'title')?.[1];
|
||||
const image = data.tags.find((tag) => tag[0] === 'image')?.[1];
|
||||
const summary = data.tags.find((tag) => tag[0] === 'summary')?.[1];
|
||||
|
||||
let publishedAt: Date | string | number = data.tags.find(
|
||||
(tag) => tag[0] === 'published_at'
|
||||
)?.[1];
|
||||
|
||||
publishedAt = new Date(parseInt(publishedAt) * 1000).toLocaleDateString('en-US');
|
||||
|
||||
return {
|
||||
title,
|
||||
image,
|
||||
publishedAt,
|
||||
summary,
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
const share = async () => {
|
||||
await writeText(
|
||||
'https://njump.me/' +
|
||||
@ -31,53 +51,68 @@ export function ArticleNoteScreen() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-12 gap-4 scroll-smooth px-4">
|
||||
<div className="col-span-1">
|
||||
<div className="flex flex-col items-end gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(-1)}
|
||||
className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900"
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={share}
|
||||
className="inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
|
||||
>
|
||||
{isCopy ? (
|
||||
<CheckCircleIcon className="h-5 w-5 text-teal-500" />
|
||||
) : (
|
||||
<ShareIcon className="h-5 w-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 scroll-smooth px-4">
|
||||
<div className="col-span-1 flex flex-col items-start">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(-1)}
|
||||
className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900"
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={share}
|
||||
className="inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
|
||||
>
|
||||
{isCopy ? (
|
||||
<CheckCircleIcon className="h-5 w-5 text-teal-500" />
|
||||
) : (
|
||||
<ShareIcon className="h-5 w-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-7 overflow-y-auto px-3 xl:col-span-8">
|
||||
{status === 'pending' ? (
|
||||
<div className="px-3 py-1.5">Loading...</div>
|
||||
) : (
|
||||
<Markdown
|
||||
options={{
|
||||
overrides: {
|
||||
a: {
|
||||
props: {
|
||||
className: 'text-blue-500 hover:text-blue-600',
|
||||
target: '_blank',
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2 border-b border-neutral-100 pb-4 dark:border-neutral-900">
|
||||
{metadata.image && (
|
||||
<img
|
||||
src={metadata.image}
|
||||
alt={metadata.title}
|
||||
className="h-auto w-full rounded-lg object-cover"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="mb-2 text-3xl font-semibold">{metadata.title}</h1>
|
||||
<span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
|
||||
Published: {metadata.publishedAt.toString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Markdown
|
||||
options={{
|
||||
overrides: {
|
||||
a: {
|
||||
props: {
|
||||
className: 'text-blue-500 hover:text-blue-600',
|
||||
target: '_blank',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="break-p prose-lg prose-neutral dark:prose-invert prose-ul:list-disc"
|
||||
>
|
||||
{data.content}
|
||||
</Markdown>
|
||||
}}
|
||||
className="break-p prose-lg prose-neutral dark:prose-invert prose-ul:list-disc"
|
||||
>
|
||||
{data.content}
|
||||
</Markdown>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-span-4 border-l border-neutral-100 px-3 dark:border-neutral-900 xl:col-span-3">
|
||||
<div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
|
||||
<NoteReplyForm eventId={id} />
|
||||
<NoteReplyForm rootEvent={data} />
|
||||
</div>
|
||||
<ReplyList eventId={id} />
|
||||
</div>
|
||||
|
@ -13,7 +13,6 @@ export function NoteLayout() {
|
||||
) : (
|
||||
<div data-tauri-drag-region className="h-9" />
|
||||
)}
|
||||
<div data-tauri-drag-region className="h-6" />
|
||||
<div className="flex h-full min-h-0 w-full">
|
||||
<Outlet />
|
||||
<ScrollRestoration />
|
||||
|
@ -45,7 +45,10 @@ export function ArticleNote({ event }: { event: NDKEvent }) {
|
||||
<img
|
||||
src={metadata.image}
|
||||
alt={metadata.title}
|
||||
className="h-56 w-full rounded-t-lg object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
className="h-auto w-full rounded-t-lg object-cover"
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col gap-1 rounded-b-lg rounded-t-lg bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||
|
@ -34,7 +34,10 @@ export function ArticleKind({ id, tags }: { id: string; tags: NDKTag[] }) {
|
||||
<img
|
||||
src={metadata.image}
|
||||
alt={metadata.title}
|
||||
className="h-56 w-full rounded-t-lg object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
className="h-auto w-full rounded-t-lg object-cover"
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col gap-1 rounded-b-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800">
|
||||
|
Loading…
Reference in New Issue
Block a user