From 87a9fdeb9b0181767df2242b1f9663fa3e93c073 Mon Sep 17 00:00:00 2001
From: nyne <me@nyne.dev>
Date: Tue, 27 May 2025 17:35:53 +0800
Subject: [PATCH] Improve article

---
 frontend/src/markdown.css                    |  6 +++-
 frontend/src/pages/resource_details_page.tsx | 30 +++++++++++---------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/frontend/src/markdown.css b/frontend/src/markdown.css
index 7ab41a6..c4caa21 100644
--- a/frontend/src/markdown.css
+++ b/frontend/src/markdown.css
@@ -31,7 +31,7 @@ article {
     }
     p {
         font-size: 14px;
-        line-height: 1.5;
+        line-height: 1.6;
         margin: 8px 0;
     }
     ul {
@@ -77,6 +77,10 @@ article {
     img {
         border-radius: 8px;
         max-height: 400px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    p:has(> img) {
+        margin: 16px 0;
     }
     p code {
         background-color: var(--color-base-200);
diff --git a/frontend/src/pages/resource_details_page.tsx b/frontend/src/pages/resource_details_page.tsx
index 4c6b69c..3c920e5 100644
--- a/frontend/src/pages/resource_details_page.tsx
+++ b/frontend/src/pages/resource_details_page.tsx
@@ -34,7 +34,6 @@ import {Turnstile} from "@marsidev/react-turnstile";
 import Button from "../components/button.tsx";
 import Badge, {BadgeAccent} from "../components/badge.tsx";
 import Input from "../components/input.tsx";
-import {FaSteam} from "react-icons/fa";
 
 export default function ResourcePage() {
   const params = useParams()
@@ -255,13 +254,15 @@ function Article({resource}: { resource: ResourceDetails }) {
       "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"}>
-              <FaSteam size={20}/>
-              <span className={"ml-2"}>{props.children}</span>
-            </div>
-          </a>
+          const appId = href.substring("https://store.steampowered.com/app/".length).split("/")[0]
+          if (!Number.isNaN(Number(appId))) {
+            return <iframe
+              src={`https://store.steampowered.com/widget/${appId}/`}
+              width="100%"
+              height="190"
+              className={"max-w-xl my-2"}
+            ></iframe>
+          }
         } else if (href.startsWith(window.location.origin) || href.startsWith("/")) {
           let path = href
           if (path.startsWith(window.location.origin)) {
@@ -272,12 +273,13 @@ function Article({resource}: { resource: ResourceDetails }) {
             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}`)
-                }}>
+                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"
+                      className="w-full h-40 sm:h-full sm:w-48 object-cover"
                       src={network.getImageUrl(r.image!.id)}
                       alt="Cover"/>
                   </figure> : null}
@@ -301,7 +303,9 @@ function Article({resource}: { resource: ResourceDetails }) {
             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}>
+              return <a
+                className={"inline-block card card-border border-base-300 no-underline bg-base-200 hover:shadow transition-shadow my-2"}
+                target={"_blank"} href={href}>
                 <figure className={"max-h-96"}>
                   {img}
                 </figure>