feat: add telegram-style resource stream
This commit is contained in:
TerryM
@@ -1,221 +1,14 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { getJSON, itemsOrEmpty, type Resource } from "../api";
|
||||
import { ResourceCard } from "../components/ResourceCard";
|
||||
import { ResourceListFooter } from "../components/ResourceListFooter";
|
||||
import { MessageStream } from "../components/messageStream/MessageStream";
|
||||
import { useI18n } from "../i18n";
|
||||
import { typeFilterLabel } from "../resourceTypeLabels";
|
||||
|
||||
const types = [
|
||||
"all",
|
||||
"image",
|
||||
"video",
|
||||
"ppt",
|
||||
"pdf",
|
||||
"text",
|
||||
"link",
|
||||
"archive",
|
||||
] as const;
|
||||
const resourceLangCodes = ["", "zh-TW", "zh-CN", "en"] as const;
|
||||
|
||||
function resourceLangLabel(t: (k: string) => string, code: string) {
|
||||
if (!code) return t("filterLanguageAll");
|
||||
if (code === "zh-TW") return t("lang_zh_TW");
|
||||
if (code === "zh-CN") return t("lang_zh_CN");
|
||||
return t("lang_en");
|
||||
}
|
||||
|
||||
export function Browse() {
|
||||
const { t, lang } = useI18n();
|
||||
const [sp, setSp] = useSearchParams();
|
||||
const sort = sp.get("sort") || "latest";
|
||||
const type = sp.get("type") || "all";
|
||||
const tag = (sp.get("tag") || "").trim();
|
||||
const resourceLang = sp.get("language") || "";
|
||||
const page = Math.max(1, parseInt(sp.get("page") || "1", 10) || 1);
|
||||
const limit = 24;
|
||||
|
||||
const [items, setItems] = useState<Resource[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
|
||||
const query = useMemo(() => {
|
||||
const p = new URLSearchParams();
|
||||
p.set("lang", lang);
|
||||
p.set("sort", sort);
|
||||
p.set("limit", String(limit));
|
||||
p.set("page", String(page));
|
||||
if (type && type !== "all") p.set("type", type);
|
||||
if (resourceLang) p.set("language", resourceLang);
|
||||
if (tag) p.set("tag", tag);
|
||||
return p.toString();
|
||||
}, [lang, sort, type, resourceLang, tag, page]);
|
||||
|
||||
useEffect(() => {
|
||||
setErr(null);
|
||||
|
||||
if (sort === "recommended") {
|
||||
const p = new URLSearchParams();
|
||||
p.set("lang", lang);
|
||||
p.set("limit", "100");
|
||||
|
||||
getJSON<{ items: Resource[] }>(`/api/resources/recommended?${p}`)
|
||||
.then((r) => {
|
||||
const tagLower = tag.toLowerCase();
|
||||
const officialItems = itemsOrEmpty(r.items)
|
||||
.filter((item) => item.isRecommended)
|
||||
.filter((item) => type === "all" || item.type === type)
|
||||
.filter((item) => !resourceLang || item.language === resourceLang)
|
||||
.filter(
|
||||
(item) =>
|
||||
!tagLower ||
|
||||
item.tags?.some(
|
||||
(itemTag) => itemTag.toLowerCase() === tagLower,
|
||||
),
|
||||
);
|
||||
setTotal(officialItems.length);
|
||||
setItems(officialItems.slice((page - 1) * limit, page * limit));
|
||||
})
|
||||
.catch((e) => setErr(String(e)));
|
||||
return;
|
||||
}
|
||||
|
||||
getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
|
||||
.then((r) => {
|
||||
setItems(itemsOrEmpty(r.items));
|
||||
setTotal(typeof r.total === "number" ? r.total : 0);
|
||||
})
|
||||
.catch((e) => setErr(String(e)));
|
||||
}, [lang, limit, page, query, resourceLang, sort, tag, type]);
|
||||
|
||||
const setPage = (next: number) => {
|
||||
const n = new URLSearchParams(sp);
|
||||
if (next <= 1) n.delete("page");
|
||||
else n.set("page", String(next));
|
||||
setSp(n);
|
||||
};
|
||||
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<h1 className="text-2xl font-bold">{t("all")}</h1>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(
|
||||
[
|
||||
["latest", t("latest")],
|
||||
["recommended", t("official")],
|
||||
["popular", t("popular")],
|
||||
["published", t("sortPublished")],
|
||||
] as const
|
||||
).map(([k, label]) => (
|
||||
<button
|
||||
key={k}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
n.set("sort", k);
|
||||
n.delete("page");
|
||||
setSp(n);
|
||||
}}
|
||||
className={`rounded-full border px-3 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
|
||||
sort === k
|
||||
? "border-ark-gold text-ark-gold2"
|
||||
: "border-ark-line"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{types.map((tp) => (
|
||||
<button
|
||||
key={tp}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
n.delete("page");
|
||||
if (tp === "all") n.delete("type");
|
||||
else n.set("type", tp);
|
||||
setSp(n);
|
||||
}}
|
||||
className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
|
||||
type === tp || (tp === "all" && !sp.get("type"))
|
||||
? "border-ark-gold text-ark-gold2"
|
||||
: "border-ark-line"
|
||||
}`}
|
||||
>
|
||||
{typeFilterLabel(t, tp)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium uppercase tracking-wide text-neutral-500">
|
||||
{t("resourceLangFilter")}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{resourceLangCodes.map((code) => (
|
||||
<button
|
||||
key={code || "all"}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
n.delete("page");
|
||||
if (!code) n.delete("language");
|
||||
else n.set("language", code);
|
||||
setSp(n);
|
||||
}}
|
||||
className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
|
||||
(code === "" && !resourceLang) || resourceLang === code
|
||||
? "border-ark-gold text-ark-gold2"
|
||||
: "border-ark-line"
|
||||
}`}
|
||||
>
|
||||
{resourceLangLabel(t, code)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tag ? (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm text-neutral-400">
|
||||
{t("search")}: <span className="text-ark-gold2">{tag}</span>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
n.delete("tag");
|
||||
n.delete("page");
|
||||
setSp(n);
|
||||
}}
|
||||
className="rounded-full border border-ark-line px-3 py-1 text-xs text-neutral-200 outline-none hover:border-ark-gold focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
>
|
||||
{t("filterTagClear")}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{err ? <div className="text-red-300">{err}</div> : null}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{items.map((r) => (
|
||||
<ResourceCard key={r.id} r={r} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ResourceListFooter
|
||||
page={page}
|
||||
limit={limit}
|
||||
total={total}
|
||||
t={t}
|
||||
onPrev={() => setPage(page - 1)}
|
||||
onNext={() => setPage(page + 1)}
|
||||
/>
|
||||
</div>
|
||||
<section className="space-y-3">
|
||||
<h1 className="mx-auto max-w-full px-3 text-2xl font-bold md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
|
||||
{t("all")}
|
||||
</h1>
|
||||
<MessageStream scope={{ kind: "all" }} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,156 +1,29 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useParams, useSearchParams } from "react-router-dom";
|
||||
import { getJSON, itemsOrEmpty, type Category, type Resource } from "../api";
|
||||
import { ResourceCard } from "../components/ResourceCard";
|
||||
import { ResourceListFooter } from "../components/ResourceListFooter";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { getJSON, itemsOrEmpty, type Category } from "../api";
|
||||
import { MessageStream } from "../components/messageStream/MessageStream";
|
||||
import { useI18n } from "../i18n";
|
||||
import { typeFilterLabel } from "../resourceTypeLabels";
|
||||
|
||||
const TYPE_FILTERS = [
|
||||
"all",
|
||||
"image",
|
||||
"video",
|
||||
"ppt",
|
||||
"pdf",
|
||||
"text",
|
||||
"link",
|
||||
"archive",
|
||||
] as const;
|
||||
const resourceLangCodes = ["", "zh-TW", "zh-CN", "en"] as const;
|
||||
|
||||
function resourceLangLabel(t: (k: string) => string, code: string) {
|
||||
if (!code) return t("filterLanguageAll");
|
||||
if (code === "zh-TW") return t("lang_zh_TW");
|
||||
if (code === "zh-CN") return t("lang_zh_CN");
|
||||
return t("lang_en");
|
||||
}
|
||||
|
||||
export function CategoryPage() {
|
||||
const { slug } = useParams();
|
||||
const { t, lang } = useI18n();
|
||||
const [sp, setSp] = useSearchParams();
|
||||
const type = sp.get("type") || "all";
|
||||
const resourceLang = sp.get("language") || "";
|
||||
const page = Math.max(1, parseInt(sp.get("page") || "1", 10) || 1);
|
||||
const limit = 24;
|
||||
|
||||
const [items, setItems] = useState<Resource[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [categoryTitle, setCategoryTitle] = useState<string>("");
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
|
||||
const query = useMemo(() => {
|
||||
const p = new URLSearchParams();
|
||||
p.set("lang", lang);
|
||||
p.set("category", slug || "");
|
||||
p.set("limit", String(limit));
|
||||
p.set("page", String(page));
|
||||
if (type !== "all") p.set("type", type);
|
||||
if (resourceLang) p.set("language", resourceLang);
|
||||
return p.toString();
|
||||
}, [lang, slug, type, resourceLang, page]);
|
||||
const { slug = "" } = useParams();
|
||||
const { lang } = useI18n();
|
||||
const [title, setTitle] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!slug) return;
|
||||
setErr(null);
|
||||
getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
|
||||
.then((r) => {
|
||||
setItems(itemsOrEmpty(r.items));
|
||||
setTotal(typeof r.total === "number" ? r.total : 0);
|
||||
})
|
||||
.catch((e) => setErr(String(e)));
|
||||
}, [query, slug]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!slug) return;
|
||||
const langQ = encodeURIComponent(lang);
|
||||
getJSON<Category[]>(`/api/categories?lang=${langQ}`)
|
||||
.then((cats) => {
|
||||
const c = itemsOrEmpty(cats).find((x) => x.slug === slug);
|
||||
setCategoryTitle(c?.name ?? slug);
|
||||
})
|
||||
.catch(() => setCategoryTitle(slug));
|
||||
getJSON<Category[]>(`/api/categories?lang=${encodeURIComponent(lang)}`)
|
||||
.then((cats) =>
|
||||
setTitle(itemsOrEmpty(cats).find((x) => x.slug === slug)?.name ?? slug),
|
||||
)
|
||||
.catch(() => setTitle(slug));
|
||||
}, [slug, lang]);
|
||||
|
||||
const setPage = (next: number) => {
|
||||
const n = new URLSearchParams(sp);
|
||||
if (next <= 1) n.delete("page");
|
||||
else n.set("page", String(next));
|
||||
setSp(n);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">{categoryTitle || slug}</h1>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{TYPE_FILTERS.map((tp) => (
|
||||
<button
|
||||
key={tp}
|
||||
type="button"
|
||||
className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
|
||||
type === tp || (tp === "all" && !sp.get("type"))
|
||||
? "border-ark-gold text-ark-gold2"
|
||||
: "border-ark-line"
|
||||
}`}
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
n.delete("page");
|
||||
if (tp === "all") n.delete("type");
|
||||
else n.set("type", tp);
|
||||
setSp(n);
|
||||
}}
|
||||
>
|
||||
{typeFilterLabel(t, tp)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium uppercase tracking-wide text-neutral-500">
|
||||
{t("resourceLangFilter")}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{resourceLangCodes.map((code) => (
|
||||
<button
|
||||
key={code || "all"}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
n.delete("page");
|
||||
if (!code) n.delete("language");
|
||||
else n.set("language", code);
|
||||
setSp(n);
|
||||
}}
|
||||
className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
|
||||
(code === "" && !resourceLang) || resourceLang === code
|
||||
? "border-ark-gold text-ark-gold2"
|
||||
: "border-ark-line"
|
||||
}`}
|
||||
>
|
||||
{resourceLangLabel(t, code)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{err ? <div className="text-red-300">{err}</div> : null}
|
||||
{!err && items.length === 0 ? (
|
||||
<p className="text-neutral-400">{t("noResults")}</p>
|
||||
) : null}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{items.map((r) => (
|
||||
<ResourceCard key={r.id} r={r} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ResourceListFooter
|
||||
page={page}
|
||||
limit={limit}
|
||||
total={total}
|
||||
t={t}
|
||||
onPrev={() => setPage(page - 1)}
|
||||
onNext={() => setPage(page + 1)}
|
||||
/>
|
||||
</div>
|
||||
<section className="space-y-3">
|
||||
<h1 className="mx-auto max-w-full px-3 text-2xl font-bold md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
|
||||
{title || slug}
|
||||
</h1>
|
||||
<MessageStream scope={{ kind: "category", slug }} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getJSON, type Resource } from "../api";
|
||||
import { ResourceCard } from "../components/ResourceCard";
|
||||
import { readFavorites } from "../favorites";
|
||||
import { useI18n } from "../i18n";
|
||||
|
||||
export function FavoritesPage() {
|
||||
const { t, lang } = useI18n();
|
||||
const [items, setItems] = useState<Resource[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
const ids = readFavorites();
|
||||
const out: Resource[] = [];
|
||||
for (const id of ids) {
|
||||
try {
|
||||
const r = await getJSON<Resource>(
|
||||
`/api/resources/${id}?lang=${encodeURIComponent(lang)}`,
|
||||
);
|
||||
out.push(r);
|
||||
} catch {
|
||||
// ignore missing
|
||||
}
|
||||
}
|
||||
if (!cancelled) setItems(out);
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [lang]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">{t("favorites")}</h1>
|
||||
{items.length === 0 ? (
|
||||
<p className="text-neutral-400">{t("favoritesEmpty")}</p>
|
||||
) : null}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{items.map((r) => (
|
||||
<ResourceCard key={r.id} r={r} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
30
src/pages/PostRedirect.tsx
Normal file
30
src/pages/PostRedirect.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { useEffect } from "react";
|
||||
import { Navigate, useParams } from "react-router-dom";
|
||||
import { MOCK_POSTS } from "../mocks/mockPosts";
|
||||
import { POST_STREAM_USES_MOCK } from "../components/messageStream/hooks/usePostStream";
|
||||
|
||||
export function PostRedirect() {
|
||||
const { id } = useParams();
|
||||
// Real-API branch placeholder: when backend ships /api/posts/:id, fetch and
|
||||
// navigate to /category/<categorySlug>#post-<id>. For now mock lookup.
|
||||
const post = id ? MOCK_POSTS.find((p) => p.id === id) : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
if (post) {
|
||||
requestAnimationFrame(() => {
|
||||
document
|
||||
.getElementById(`post-${post.id}`)
|
||||
?.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
});
|
||||
}
|
||||
}, [post]);
|
||||
|
||||
if (!POST_STREAM_USES_MOCK && !post) {
|
||||
// TODO: replace with real fetch when /api/posts/:id ships.
|
||||
return <Navigate to="/browse" replace />;
|
||||
}
|
||||
if (!post) return <Navigate to="/browse" replace />;
|
||||
return (
|
||||
<Navigate to={`/category/${post.categorySlug}#post-${post.id}`} replace />
|
||||
);
|
||||
}
|
||||
@@ -1,229 +0,0 @@
|
||||
import { Copy, Download, Share2 } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import {
|
||||
assetUrl,
|
||||
getJSON,
|
||||
itemsOrEmpty,
|
||||
postJSON,
|
||||
postFavoriteDelta,
|
||||
type Resource,
|
||||
} from "../api";
|
||||
import {
|
||||
resourceLanguageLabel,
|
||||
resourceTypeLabel,
|
||||
} from "../resourceTypeLabels";
|
||||
import { ResourceCard } from "../components/ResourceCard";
|
||||
import { isFavorite, toggleFavorite } from "../favorites";
|
||||
import { useI18n } from "../i18n";
|
||||
import { isLikelyVideoPath } from "../video";
|
||||
|
||||
export function ResourceDetail() {
|
||||
const { id } = useParams();
|
||||
const { t, lang } = useI18n();
|
||||
const [r, setR] = useState<Resource | null>(null);
|
||||
const [rel, setRel] = useState<Resource[]>([]);
|
||||
const [fav, setFav] = useState(false);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
setErr(null);
|
||||
setFav(isFavorite(id));
|
||||
postJSON(`/api/resources/${id}/view`, {}).catch(() => {});
|
||||
getJSON<Resource>(`/api/resources/${id}?lang=${encodeURIComponent(lang)}`)
|
||||
.then(setR)
|
||||
.catch((e) => setErr(String(e)));
|
||||
getJSON<{ items: Resource[] }>(
|
||||
`/api/resources/${id}/related?lang=${encodeURIComponent(lang)}`,
|
||||
)
|
||||
.then((x) => setRel(itemsOrEmpty(x.items)))
|
||||
.catch(() => setRel([]));
|
||||
}, [id, lang]);
|
||||
|
||||
const share = async () => {
|
||||
if (!r) return;
|
||||
const url = window.location.href;
|
||||
try {
|
||||
await postJSON(`/api/resources/${r.id}/share`, {});
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({ title: r.title, text: r.description, url });
|
||||
return;
|
||||
} catch {
|
||||
// fall through
|
||||
}
|
||||
}
|
||||
await navigator.clipboard.writeText(url);
|
||||
alert(t("copyLink"));
|
||||
};
|
||||
|
||||
const download = async () => {
|
||||
if (!r) return;
|
||||
try {
|
||||
await postJSON(`/api/resources/${r.id}/download`, {});
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
const u = assetUrl(r.fileUrl || r.previewUrl);
|
||||
if (u) window.open(u, "_blank");
|
||||
};
|
||||
|
||||
if (err) return <div className="text-red-300">{err}</div>;
|
||||
if (!r) return <div className="text-neutral-400">…</div>;
|
||||
|
||||
const cover = assetUrl(r.coverImage || r.previewUrl);
|
||||
const rawVideo = r.fileUrl || r.previewUrl || "";
|
||||
const showVideo =
|
||||
!!rawVideo && (r.type === "video" || isLikelyVideoPath(rawVideo));
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div className="rounded-3xl border border-ark-line bg-black overflow-hidden">
|
||||
{showVideo ? (
|
||||
<video
|
||||
key={rawVideo}
|
||||
className="w-full aspect-video bg-black"
|
||||
controls
|
||||
playsInline
|
||||
preload="metadata"
|
||||
poster={r.coverImage ? assetUrl(r.coverImage) : undefined}
|
||||
autoPlay
|
||||
muted
|
||||
src={assetUrl(rawVideo)}
|
||||
/>
|
||||
) : r.type === "image" ? (
|
||||
<img
|
||||
src={cover}
|
||||
alt=""
|
||||
className="w-full object-contain max-h-[520px]"
|
||||
/>
|
||||
) : r.previewUrl && r.previewUrl.endsWith(".pdf") ? (
|
||||
<iframe
|
||||
title="pdf"
|
||||
className="h-[520px] w-full"
|
||||
src={assetUrl(r.previewUrl)}
|
||||
/>
|
||||
) : (
|
||||
<div className="p-6 text-neutral-300">
|
||||
{r.bodyText ? (
|
||||
<pre className="whitespace-pre-wrap font-sans">
|
||||
{r.bodyText}
|
||||
</pre>
|
||||
) : (
|
||||
<p>{r.description}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm text-ark-muted">
|
||||
<Link
|
||||
className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
to={`/category/${r.categorySlug}`}
|
||||
>
|
||||
{r.categoryName}
|
||||
</Link>{" "}
|
||||
· {resourceTypeLabel(t, r.type)} ·{" "}
|
||||
{resourceLanguageLabel(t, r.language)}
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold leading-tight">{r.title}</h1>
|
||||
{r.description ? (
|
||||
<p className="text-neutral-300 leading-relaxed">{r.description}</p>
|
||||
) : null}
|
||||
{r.externalUrl ? (
|
||||
<a
|
||||
className="text-ark-gold2 underline"
|
||||
href={r.externalUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{r.externalUrl}
|
||||
</a>
|
||||
) : null}
|
||||
{r.tags && r.tags.length ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{r.tags.map((x) => (
|
||||
<Link
|
||||
key={x}
|
||||
to={`/browse?tag=${encodeURIComponent(x)}`}
|
||||
className="rounded-full border border-ark-line px-3 py-1 text-xs text-neutral-300 outline-none transition hover:border-ark-gold/60 hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
>
|
||||
{x}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`inline-flex items-center gap-2 rounded-xl border px-4 py-2 text-sm ${
|
||||
fav ? "border-ark-gold text-ark-gold2" : "border-ark-line"
|
||||
}`}
|
||||
onClick={() => {
|
||||
const on = toggleFavorite(r.id);
|
||||
setFav(on);
|
||||
void postFavoriteDelta(r.id, on);
|
||||
}}
|
||||
>
|
||||
{t("favorite")}
|
||||
</button>
|
||||
{r.isDownloadable ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={download}
|
||||
className="inline-flex items-center gap-2 rounded-xl bg-ark-gold px-4 py-2 text-sm font-semibold text-black"
|
||||
>
|
||||
<Download size={16} />
|
||||
{t("download")}
|
||||
</button>
|
||||
) : (
|
||||
<div className="text-sm text-neutral-400">
|
||||
此資料目前僅支持在線預覽，暫不提供下載。
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={share}
|
||||
className="inline-flex items-center gap-2 rounded-xl border border-ark-line px-4 py-2 text-sm"
|
||||
>
|
||||
<Share2 size={16} />
|
||||
{t("share")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await postJSON(`/api/resources/${r.id}/share`, {});
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
await navigator.clipboard.writeText(window.location.href);
|
||||
alert(t("copyLink"));
|
||||
}}
|
||||
className="inline-flex items-center gap-2 rounded-xl border border-ark-line px-4 py-2 text-sm"
|
||||
>
|
||||
<Copy size={16} />
|
||||
{t("copyLink")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-xl font-semibold">{t("related")}</h2>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{rel.map((x) => (
|
||||
<ResourceCard key={x.id} r={x} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,12 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { getJSON, itemsOrEmpty, postJSON, type Resource } from "../api";
|
||||
import { ResourceCard } from "../components/ResourceCard";
|
||||
import { ResourceListFooter } from "../components/ResourceListFooter";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
import {
|
||||
assetUrl,
|
||||
getJSON,
|
||||
itemsOrEmpty,
|
||||
postJSON,
|
||||
type Resource,
|
||||
} from "../api";
|
||||
import { useI18n } from "../i18n";
|
||||
import { typeFilterLabel } from "../resourceTypeLabels";
|
||||
|
||||
@@ -25,92 +29,90 @@ function resourceLangLabel(t: (k: string) => string, code: string) {
|
||||
return t("lang_en");
|
||||
}
|
||||
|
||||
function ResultRow({ r }: { r: Resource }) {
|
||||
const target = r.externalUrl || (r.fileUrl ? assetUrl(r.fileUrl) : null);
|
||||
const inner = (
|
||||
<div className="flex items-center gap-3 rounded-xl border border-ark-line bg-ark-panel p-3 transition hover:border-ark-gold/55">
|
||||
{r.coverImage ? (
|
||||
<img
|
||||
src={assetUrl(r.coverImage)}
|
||||
alt=""
|
||||
className="h-14 w-14 shrink-0 rounded-lg object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-14 w-14 shrink-0 rounded-lg bg-ark-bg" />
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-semibold text-ark-gold2">
|
||||
{r.title}
|
||||
</div>
|
||||
{r.description ? (
|
||||
<div className="mt-0.5 line-clamp-2 text-xs text-neutral-400">
|
||||
{r.description}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
if (target) {
|
||||
return (
|
||||
<a
|
||||
href={target}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block"
|
||||
>
|
||||
{inner}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Link to={`/category/${r.categorySlug}`} className="block">
|
||||
{inner}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export function SearchPage() {
|
||||
const { t, lang } = useI18n();
|
||||
const [sp, setSp] = useSearchParams();
|
||||
const q = sp.get("q") || "";
|
||||
const sort = sp.get("sort") || "latest";
|
||||
const type = sp.get("type") || "all";
|
||||
const resourceLang = sp.get("language") || "";
|
||||
const page = Math.max(1, parseInt(sp.get("page") || "1", 10) || 1);
|
||||
const limit = 24;
|
||||
|
||||
const [items, setItems] = useState<Resource[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
|
||||
const query = useMemo(() => {
|
||||
const p = new URLSearchParams();
|
||||
p.set("lang", lang);
|
||||
p.set("limit", String(limit));
|
||||
p.set("page", String(page));
|
||||
p.set("sort", sort);
|
||||
p.set("limit", "50");
|
||||
if (q) p.set("q", q);
|
||||
if (type && type !== "all") p.set("type", type);
|
||||
if (resourceLang) p.set("language", resourceLang);
|
||||
return p.toString();
|
||||
}, [lang, q, sort, type, resourceLang, page]);
|
||||
}, [lang, q, type, resourceLang]);
|
||||
|
||||
useEffect(() => {
|
||||
setErr(null);
|
||||
if (!q) {
|
||||
setItems([]);
|
||||
setTotal(0);
|
||||
return;
|
||||
}
|
||||
postJSON("/api/search-log", { query: q }).catch(() => {});
|
||||
getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
|
||||
.then((r) => {
|
||||
setItems(itemsOrEmpty(r.items));
|
||||
setTotal(typeof r.total === "number" ? r.total : 0);
|
||||
})
|
||||
getJSON<{ items: Resource[] }>(`/api/resources?${query}`)
|
||||
.then((r) => setItems(itemsOrEmpty(r.items)))
|
||||
.catch((e) => setErr(String(e)));
|
||||
}, [query, q]);
|
||||
|
||||
const setPage = (next: number) => {
|
||||
const n = new URLSearchParams(sp);
|
||||
if (next <= 1) n.delete("page");
|
||||
else n.set("page", String(next));
|
||||
setSp(n);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="mx-auto max-w-[640px] space-y-4 px-3">
|
||||
<h1 className="text-2xl font-bold">
|
||||
{t("search")}: {q || "—"}
|
||||
</h1>
|
||||
|
||||
{q ? (
|
||||
<>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(
|
||||
[
|
||||
["latest", t("latest")],
|
||||
["recommended", t("official")],
|
||||
["popular", t("popular")],
|
||||
["published", t("sortPublished")],
|
||||
] as const
|
||||
).map(([k, label]) => (
|
||||
<button
|
||||
key={k}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
n.set("sort", k);
|
||||
n.delete("page");
|
||||
setSp(n);
|
||||
}}
|
||||
className={`rounded-full border px-3 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
|
||||
sort === k
|
||||
? "border-ark-gold text-ark-gold2"
|
||||
: "border-ark-line"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{types.map((tp) => (
|
||||
<button
|
||||
@@ -118,15 +120,14 @@ export function SearchPage() {
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
n.delete("page");
|
||||
if (tp === "all") n.delete("type");
|
||||
else n.set("type", tp);
|
||||
setSp(n);
|
||||
setSp(n, { replace: true });
|
||||
}}
|
||||
className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
|
||||
className={`rounded-full border px-3 py-1 text-xs transition ${
|
||||
type === tp || (tp === "all" && !sp.get("type"))
|
||||
? "border-ark-gold text-ark-gold2"
|
||||
: "border-ark-line"
|
||||
: "border-ark-line text-neutral-300"
|
||||
}`}
|
||||
>
|
||||
{typeFilterLabel(t, tp)}
|
||||
@@ -134,32 +135,26 @@ export function SearchPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium uppercase tracking-wide text-neutral-500">
|
||||
{t("resourceLangFilter")}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{resourceLangCodes.map((code) => (
|
||||
<button
|
||||
key={code || "all"}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
n.delete("page");
|
||||
if (!code) n.delete("language");
|
||||
else n.set("language", code);
|
||||
setSp(n);
|
||||
}}
|
||||
className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
|
||||
(code === "" && !resourceLang) || resourceLang === code
|
||||
? "border-ark-gold text-ark-gold2"
|
||||
: "border-ark-line"
|
||||
}`}
|
||||
>
|
||||
{resourceLangLabel(t, code)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{resourceLangCodes.map((code) => (
|
||||
<button
|
||||
key={code || "all"}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const n = new URLSearchParams(sp);
|
||||
if (!code) n.delete("language");
|
||||
else n.set("language", code);
|
||||
setSp(n, { replace: true });
|
||||
}}
|
||||
className={`rounded-full border px-3 py-1 text-xs transition ${
|
||||
(code === "" && !resourceLang) || resourceLang === code
|
||||
? "border-ark-gold text-ark-gold2"
|
||||
: "border-ark-line text-neutral-300"
|
||||
}`}
|
||||
>
|
||||
{resourceLangLabel(t, code)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
@@ -170,22 +165,11 @@ export function SearchPage() {
|
||||
<p className="text-neutral-400">{t("noResults")}</p>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="flex flex-col gap-2">
|
||||
{items.map((r) => (
|
||||
<ResourceCard key={r.id} r={r} />
|
||||
<ResultRow key={r.id} r={r} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{q ? (
|
||||
<ResourceListFooter
|
||||
page={page}
|
||||
limit={limit}
|
||||
total={total}
|
||||
t={t}
|
||||
onPrev={() => setPage(page - 1)}
|
||||
onNext={() => setPage(page + 1)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user