ok fine

src/shared/notes/kinds/articleDetail.tsx

@@ -1,7 +1,10 @@
 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];
@@ -26,7 +29,38 @@ export function ArticleDetailNote({ event }: { event: NDKEvent }) {
   }, [event.id]);*/
 
   return (
-    <ReactMarkdown className="markdown-article" remarkPlugins={[remarkGfm]}>
+    <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>
   );