Render link with an image and a description as card

frontend/eslint.config.js

@@ -36,6 +36,9 @@ export default tseslint.config(
         {
           ignoreRestArgs: true,
         },
+      ],
+      '@typescript-eslint/ban-ts-comment': [
+        'off'
       ]
     },
   },

frontend/src/pages/resource_details_page.tsx

@@ -1,5 +1,15 @@
 import {useNavigate, useParams} from "react-router";
-import {createContext, createRef, useCallback, useContext, useEffect, useRef, useState} from "react";
+import {
+  createContext,
+  createRef,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import {ResourceDetails, RFile, Storage, Comment} from "../network/models.ts";
 import {network} from "../network/network.ts";
 import showToast from "../components/toast.ts";
@@ -267,6 +277,28 @@ function Article({resource}: { resource: ResourceDetails }) {
             }
           }
         }
+        // @ts-ignore
+        if (props.children?.length === 2) {
+          // @ts-ignore
+          const first = props.children[0] as ReactNode
+          // @ts-ignore
+          const second = props.children[1] as ReactNode
+
+          if (typeof first === "object" && typeof second === "string") {
+            const img = first as ReactElement
+            // @ts-ignore
+            if (img.type === "img") {
+              return <a className={"inline-block card card-border border-base-300 no-underline bg-base-200 hover:shadow transition-shadow"} target={"_blank"} href={href}>
+                <figure className={"max-h-72 max-w-96"}>
+                  {img}
+                </figure>
+                <div className={"card-body text-base-content"}>
+                  {second}
+                </div>
+              </a>
+            }
+          }
+        }
         return <a href={href} target={"_blank"}>{props.children}</a>
       }
     }}>{resource.article}</Markdown>