update single note screen

src/shared/notes/kinds/article.tsx

@@ -1,5 +1,6 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
 
 import { Image } from '@shared/image';
 
@@ -27,26 +28,31 @@ export function ArticleNote({ event }: { event: NDKEvent }) {
   }, [event.id]);
 
   return (
-    <div className="mb-2 mt-3 rounded-lg bg-white/10">
+    <Link
+      to={`/notes/article/${event.id}`}
+      preventScrollReset={true}
+      className="mb-2 mt-3 rounded-lg"
+    >
       <div className="flex flex-col rounded-lg">
-        <Image
-          src={metadata.image}
-          alt={metadata.title}
-          className="h-44 w-full rounded-t-lg object-cover"
-        />
-        <div className="flex flex-col gap-2 px-3 py-3">
+        {metadata.image && (
+          <Image
+            src={metadata.image}
+            alt={metadata.title}
+            className="h-44 w-full rounded-t-lg object-cover"
+          />
+        )}
+        <div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3">
           <h5 className="line-clamp-1 font-medium leading-none text-white">
             {metadata.title}
           </h5>
           <p className="line-clamp-3 break-all text-sm text-white/50">
             {metadata.summary}
           </p>
-
           <span className="mt-2.5 text-sm leading-none text-white/50">
             {metadata.publishedAt.toString()}
           </span>
         </div>
       </div>
-    </div>
+    </Link>
   );
 }

src/shared/notes/kinds/articleDetail.tsx

@@ -0,0 +1,37 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Link } from 'react-router-dom';
+import remarkGfm from 'remark-gfm';
+
+import { Image } from '@shared/image';
+
+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="markdown" remarkPlugins={[remarkGfm]}>
+      {event.content}
+    </ReactMarkdown>
+  );
+}

src/shared/notes/kinds/text.tsx

@@ -26,11 +26,16 @@ export function TextNote({ event }: { event: NDKEvent }) {
           del: ({ children }) => {
             const key = children[0] as string;
             if (typeof key !== 'string') return;
-            if (key.startsWith('pub') && key.length > 50 && key.length < 100)
+            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('tag')) {
+              return <Hashtag tag={key.replace('tag-', '')} />;
+            }
           },
         }}
+        disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
+        unwrapDisallowed={true}
       >
         {content?.parsed}
       </ReactMarkdown>