Improve article rendering.

frontend/src/pages/resource_details_page.tsx

@@ -156,7 +156,8 @@ export default function ResourcePage() {
 
         <div className={"grow"}></div>
         {
-          app.isAdmin() || app.user?.id === resource.author.id ? <Button className={"btn-ghost btn-circle"} onClick={() => {
+          app.isAdmin() || app.user?.id === resource.author.id ?
+            <Button className={"btn-ghost btn-circle"} onClick={() => {
               navigate(`/resource/edit/${resource.id}`, {replace: true})
             }}>
               <MdOutlineEdit size={20}/>
@@ -224,75 +225,47 @@ const context = createContext<() => void>(() => {
 })
 
 function Article({resource}: { resource: ResourceDetails }) {
-  const articleRef = useRef<HTMLDivElement>(null)
-
   const navigate = useNavigate()
 
-  useEffect(() => {
+  return <article>
-    if (articleRef.current) {
-      if (!resource.related) {
-        return;
-      }
-      for (const child of articleRef.current.children) {
-        if (child.tagName === "P" && child.children.length === 1 && child.children[0].tagName === "A") {
-          const href = (child.children[0] as HTMLAnchorElement).href as string
-          if (href.startsWith(window.location.origin) || href.startsWith("/")) {
-            let path = href
-            if (path.startsWith(window.location.origin)) {
-              path = path.substring(window.location.origin.length)
-            }
-            const content = child.children[0].innerHTML
-            if (path.startsWith("/resources/")) {
-              const id = path.substring("/resources/".length)
-              for (const r of resource.related) {
-                if (r.id.toString() === id) {
-                  child.children[0].classList.add("hidden")
-                  const div = document.createElement("div")
-                  div.innerHTML = `
-                    ${child.innerHTML}
-                    <div class="card card-border w-full border-base-300 my-3 sm:card-side cursor-pointer">
-                      ${r.image ? `
-                        <figure>
-                          <img
-                            class="w-full h-40 sm:h-full sm:w-32 object-cover"
-                            src="${network.getImageUrl(r.image!.id)}"
-                            alt="Cover" />
-                        </figure>
-                      ` : ""}
-                      <div class="card-body" style="padding: 1rem">
-                        <h3>${r.title}</h4>
-                        <p class="text-sm">${content}</p>
-                      </div>
-                    </div>
-                  `
-                  child.appendChild(div);
-
-                  (child as HTMLParagraphElement).onclick = (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    navigate(`/resources/${r.id}`)
-                    div.remove();
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }, [navigate, resource])
-
-  return <article ref={articleRef}>
     <Markdown components={{
       "a": ({node, ...props}) => {
         const href = props.href as string
         if (href.startsWith("https://store.steampowered.com/app/")) {
           return <a href={href} target={"_blank"} className={"inline-block no-underline"}>
-            <div className={"flex items-center border border-base-300 py-2 px-4 rounded-full hover:bg-base-100 duration-200 text-base-content"}>
+            <div
+              className={"flex items-center border border-base-300 py-2 px-4 rounded-full hover:bg-base-100 duration-200 text-base-content"}>
               <FaSteam size={20}/>
               <span className={"ml-2"}>{props.children}</span>
             </div>
           </a>
+        } else if (href.startsWith(window.location.origin) || href.startsWith("/")) {
+          let path = href
+          if (path.startsWith(window.location.origin)) {
+            path = path.substring(window.location.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 <div className="card card-border w-full border-base-300 my-3 sm:card-side cursor-pointer" onClick={() => {
+                  navigate(`/resources/${r.id}`)
+                }}>
+                  {r.image ? <figure>
+                    <img
+                      className="w-full h-40 sm:h-full sm:w-32 object-cover"
+                      src={network.getImageUrl(r.image!.id)}
+                      alt="Cover"/>
+                  </figure> : null}
+                  <div className="card-body" style={{padding: "1rem"}}>
+                    <h3>{r.title}</h3>
+                    <p className="text-sm">{content}</p>
+                  </div>
+                </div>
+              }
+            }
+          }
         }
         return <a href={href} target={"_blank"}>{props.children}</a>
       }
@@ -622,7 +595,8 @@ function UpdateFileInfoDialog({ file }: { file: RFile }) {
       <div className="modal-box">
         <h3 className="font-bold text-lg">{t("Update File Info")}</h3>
         <Input type={"text"} label={t("File Name")} value={filename} onChange={(e) => setFilename(e.target.value)}/>
-        <Input type={"text"} label={t("Description")} value={description} onChange={(e) => setDescription(e.target.value)} />
+        <Input type={"text"} label={t("Description")} value={description}
+               onChange={(e) => setDescription(e.target.value)}/>
         <div className="modal-action">
           <form method="dialog">
             <button className="btn btn-ghost">{t("Close")}</button>