Improve related resource rendering

frontend/src/pages/resource_details_page.tsx

@@ -16,6 +16,7 @@ import {
   Storage,
   Comment,
   Tag,
+  Resource,
 } from "../network/models.ts";
 import { network } from "../network/network.ts";
 import showToast from "../components/toast.ts";
@@ -394,11 +395,9 @@ function DeleteResourceDialog({
   );
 }
 
-const context = createContext<() => void>(() => {});
+const context = createContext<() => void>(() => { });
 
 function Article({ resource }: { resource: ResourceDetails }) {
-  const navigate = useNavigate();
-
   return (
     <article>
       <Markdown
@@ -502,25 +501,68 @@ function Article({ resource }: { resource: ResourceDetails }) {
           },
           a: ({ node, ...props }) => {
             const href = props.href as string;
+            const origin = window.location.origin;
 
             if (
-              href.startsWith(window.location.origin) ||
+              href.startsWith(origin) ||
               href.startsWith("/")
             ) {
               let path = href;
-              if (path.startsWith(window.location.origin)) {
-                path = path.substring(window.location.origin.length);
+              if (path.startsWith(origin)) {
+                path = path.substring(origin.length);
               }
               const content = props.children?.toString();
               if (path.startsWith("/resources/")) {
                 const id = path.substring("/resources/".length);
                 for (const r of resource.related ?? []) {
                   if (r.id.toString() === id) {
+                    return <RelatedResourceCard r={r} content={content} />;
+                  }
+                }
+              }
+            }
+
+            return <a target={"_blank"} {...props}></a>;
+          },
+        }}
+      >
+        {resource.article.replaceAll("\n", "  \n")}
+      </Markdown>
+    </article>
+  );
+}
+
+function RelatedResourceCard({ r, content }: { r: Resource, content?: string }) {
+  const navigate = useNavigate();
+
+  const [articleWidth, setArticleWidth] = useState<number | null>(null);
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentRect.width !== articleWidth) {
+          setArticleWidth(entry.contentRect.width);
+        }
+      }
+    });
+    const articleElement = document.querySelector("article");
+    if (articleElement) {
+      observer.observe(articleElement);
+    }
+  }, [])
+
   const imgHeight =
     r.image && r.image.width > r.image.height ? 320 : 420;
-                    const imgWidth = r.image
+  let imgWidth = r.image
     ? (r.image.width / r.image.height) * imgHeight
     : undefined;
+  if (articleWidth && imgWidth && imgWidth > articleWidth) {
+    imgWidth = articleWidth;
+  }
+
+  if (!articleWidth) {
+    return <></>
+  }
 
   return (
     <span className={"inline-flex max-w-full"}>
@@ -539,6 +581,7 @@ function Article({ resource }: { resource: ResourceDetails }) {
             style={{
               width: imgWidth,
               height: imgHeight,
+              objectFit: "cover",
             }}
             className={"h-full min-h-0 object-cover min-w-0"}
             alt={"cover"}
@@ -578,19 +621,6 @@ function Article({ resource }: { resource: ResourceDetails }) {
       </a>
     </span>
   );
-                  }
-                }
-              }
-            }
-
-            return <a target={"_blank"} {...props}></a>;
-          },
-        }}
-      >
-        {resource.article.replaceAll("\n", "  \n")}
-      </Markdown>
-    </article>
-  );
 }
 
 function fileSizeToString(size: number) {