nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 12:17:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve article

Browse Source
This commit is contained in:
nyne
2025-05-27 17:35:53 +08:00
parent 2daa30d480
commit 87a9fdeb9b
2 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/markdown.css
View File

@@ -31,7 +31,7 @@ article {
} }
p { p {
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.6;
margin: 8px 0; margin: 8px 0;
} }
ul { ul {
@@ -77,6 +77,10 @@ article {
img { img {
border-radius: 8px; border-radius: 8px;
max-height: 400px; max-height: 400px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
p:has(> img) {
margin: 16px 0;
} }
p code { p code {
background-color: var(--color-base-200); background-color: var(--color-base-200);

30
frontend/src/pages/resource_details_page.tsx
View File

@@ -34,7 +34,6 @@ import {Turnstile} from "@marsidev/react-turnstile";
import Button from "../components/button.tsx"; import Button from "../components/button.tsx";
import Badge, {BadgeAccent} from "../components/badge.tsx"; import Badge, {BadgeAccent} from "../components/badge.tsx";
import Input from "../components/input.tsx"; import Input from "../components/input.tsx";
import {FaSteam} from "react-icons/fa";
export default function ResourcePage() { export default function ResourcePage() {
const params = useParams() const params = useParams()
@@ -255,13 +254,15 @@ function Article({resource}: { resource: ResourceDetails }) {
"a": ({node, ...props}) => { "a": ({node, ...props}) => {
const href = props.href as string const href = props.href as string
if (href.startsWith("https://store.steampowered.com/app/")) { if (href.startsWith("https://store.steampowered.com/app/")) {
return <a href={href} target={"_blank"} className={"inline-block no-underline"}> const appId = href.substring("https://store.steampowered.com/app/".length).split("/")[0]
<div if (!Number.isNaN(Number(appId))) {
className={"flex items-center border border-base-300 py-2 px-4 rounded-full hover:bg-base-100 duration-200 text-base-content"}> return <iframe
<FaSteam size={20}/> src={`https://store.steampowered.com/widget/${appId}/`}
<span className={"ml-2"}>{props.children}</span> width="100%"
</div> height="190"
</a> className={"max-w-xl my-2"}
></iframe>
}
} else if (href.startsWith(window.location.origin) || href.startsWith("/")) { } else if (href.startsWith(window.location.origin) || href.startsWith("/")) {
let path = href let path = href
if (path.startsWith(window.location.origin)) { if (path.startsWith(window.location.origin)) {
@@ -272,12 +273,13 @@ function Article({resource}: { resource: ResourceDetails }) {
const id = path.substring("/resources/".length) const id = path.substring("/resources/".length)
for (const r of resource.related) { for (const r of resource.related) {
if (r.id.toString() === id) { if (r.id.toString() === id) {
return <div className="card card-border w-full border-base-300 my-3 sm:card-side cursor-pointer" onClick={() => { return <div className="card card-border w-full border-base-300 my-3 sm:card-side cursor-pointer"
navigate(`/resources/${r.id}`) onClick={() => {
}}> navigate(`/resources/${r.id}`)
}}>
{r.image ? <figure> {r.image ? <figure>
<img <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)} src={network.getImageUrl(r.image!.id)}
alt="Cover"/> alt="Cover"/>
</figure> : null} </figure> : null}
@@ -301,7 +303,9 @@ function Article({resource}: { resource: ResourceDetails }) {
const img = first as ReactElement const img = first as ReactElement
// @ts-ignore // @ts-ignore
if (img.type === "img") { 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"}> <figure className={"max-h-96"}>
{img} {img}
</figure> </figure>