From be8f0da386f3e56868dc23a491d30a663cec35d8 Mon Sep 17 00:00:00 2001
From: nyne <me@nyne.dev>
Date: Sun, 25 May 2025 21:39:58 +0800
Subject: [PATCH] Render link with an image and a description as card

---
 frontend/eslint.config.js                    |  3 ++
 frontend/src/pages/resource_details_page.tsx | 34 +++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index a841917..3e98068 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -36,6 +36,9 @@ export default tseslint.config(
         {
           ignoreRestArgs: true,
         },
+      ],
+      '@typescript-eslint/ban-ts-comment': [
+        'off'
       ]
     },
   },
diff --git a/frontend/src/pages/resource_details_page.tsx b/frontend/src/pages/resource_details_page.tsx
index 7c372af..9e8e486 100644
--- a/frontend/src/pages/resource_details_page.tsx
+++ b/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>