feat: support inline image

src/components/textNote/ImageDisplay.tsx

@@ -0,0 +1,33 @@
+import { Component } from 'solid-js';
+
+type ImageDisplayProps = {
+  url: string;
+};
+
+const fixUrl = (url: URL): string => {
+  const result = new URL(url);
+  if (url.host === 'i.imgur.com') {
+    const match = url.pathname.match(/^\/([a-zA-Z0-9]+)\.(jpg|jpeg|png|gif)/);
+    if (match != null) {
+      const imageId = match[1];
+      result.pathname = `${imageId}l.webp`;
+    }
+  }
+  return result.toString();
+};
+
+const ImageDisplay: Component<ImageDisplayProps> = (props) => {
+  const url = () => new URL(props.url);
+
+  return (
+    <a href={props.url} target="_blank" rel="noopener noreferrer">
+      <img
+        class="max-h-full max-w-full rounded object-contain shadow"
+        src={fixUrl(url())}
+        alt={props.url}
+      />
+    </a>
+  );
+};
+
+export default ImageDisplay;

src/components/textNote/TextNoteContentDisplay.tsx

@@ -4,6 +4,7 @@ import type { Event as NostrEvent } from 'nostr-tools';
 import PlainTextDisplay from '@/components/textNote/PlainTextDisplay';
 import MentionedUserDisplay from '@/components/textNote/MentionedUserDisplay';
 import MentionedEventDisplay from '@/components/textNote/MentionedEventDisplay';
+import ImageDisplay from '@/components/textNote/ImageDisplay';
 
 export type TextNoteContentDisplayProps = {
   event: NostrEvent;
@@ -24,7 +25,22 @@ const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
           return <MentionedEventDisplay mentionedEvent={item} />;
         }
         if (item.type === 'HashTag') {
-          return <span class="text-blue-500 underline ">{item.content}</span>;
+          return <span class="text-blue-500 underline">{item.content}</span>;
+        }
+        if (item.type === 'URL') {
+          if (item.content.match(/\.(jpeg|jpg|png|gif|webp)$/i)) {
+            return <ImageDisplay url={item.content} />;
+          }
+          return (
+            <a
+              class="text-blue-500 underline"
+              href={item.content}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {item.content}
+            </a>
+          );
         }
         return null;
       }}