fix article

src/app/notes/article.tsx

@@ -12,11 +12,11 @@ import { User } from '@shared/user';
 import { useEvent } from '@utils/hooks/useEvent';
 
 export function ArticleNoteScreen() {
+  const { id } = useParams();
+
   const navigate = useNavigate();
   const replyRef = useRef(null);
 
-  const { id } = useParams();
-
   const naddr = id.startsWith('naddr') ? (nip19.decode(id).data as AddressPointer) : null;
   const { status, data } = useEvent(id, naddr);
 

src/shared/notes/kinds/article.tsx

@@ -2,8 +2,6 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { memo, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Image } from '@shared/image';
-
 export function ArticleNote(props: { event?: NDKEvent }) {
   const metadata = useMemo(() => {
     const title = props.event.tags.find((tag) => tag[0] === 'title')?.[1];
@@ -28,28 +26,30 @@ export function ArticleNote(props: { event?: NDKEvent }) {
   }, [props.event.id]);
 
   return (
-    <Link to={`/notes/article/${props.event.id}`} preventScrollReset={true}>
-      <div className="my-2 overflow-hidden rounded-lg">
-        {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-1 rounded-b-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800">
-          <h5 className="line-clamp-1 font-semibold text-neutral-900 dark:text-neutral-100">
-            {metadata.title}
-          </h5>
-          {metadata.summary ? (
-            <p className="line-clamp-3 break-all text-sm text-neutral-600 dark:text-neutral-400">
-              {metadata.summary}
-            </p>
-          ) : null}
-          <span className="mt-2.5 text-sm text-neutral-500 dark:text-neutral-400">
-            {metadata.publishedAt.toString()}
-          </span>
-        </div>
+    <Link
+      to={`/notes/article/${props.event.id}`}
+      preventScrollReset={true}
+      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"
+    >
+      {metadata.image && (
+        <img
+          src={metadata.image}
+          alt={metadata.title}
+          className="h-44 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">
+        <h5 className="line-clamp-1 font-semibold text-neutral-900 dark:text-neutral-100">
+          {metadata.title}
+        </h5>
+        {metadata.summary ? (
+          <p className="line-clamp-3 break-all text-sm text-neutral-600 dark:text-neutral-400">
+            {metadata.summary}
+          </p>
+        ) : null}
+        <span className="mt-2.5 text-sm text-neutral-600 dark:text-neutral-400">
+          {metadata.publishedAt.toString()}
+        </span>
       </div>
     </Link>
   );

src/shared/notes/kinds/articleDetail.tsx

@@ -1,31 +1,38 @@
 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 }) {
-  /*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 (
-    <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}
-    </div>
+    </Markdown>
   );
 }

src/shared/notes/kinds/text.tsx

@@ -42,6 +42,11 @@ export function TextNote(props: { content?: string; truncate?: boolean }) {
             Invoice: {
               component: Invoice,
             },
+            a: {
+              props: {
+                target: '_blank',
+              },
+            },
           },
           slugify: (str) => str,
           forceBlock: true,