terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine home section navigation

Browse Source
This commit is contained in:
TerryM
2026-05-28 16:07:08 +08:00
parent 9d977be2d2
commit e0240f6217
4 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@@ -3,7 +3,6 @@ import { I18nProvider } from "./i18n";
import { PublicLayout } from "./layouts/PublicLayout"; import { PublicLayout } from "./layouts/PublicLayout";
import { Home } from "./pages/Home"; import { Home } from "./pages/Home";
import { Browse } from "./pages/Browse"; import { Browse } from "./pages/Browse";
import { CategoryPage } from "./pages/Category";
import { SearchPage } from "./pages/Search"; import { SearchPage } from "./pages/Search";
import { PostRedirect } from "./pages/PostRedirect"; import { PostRedirect } from "./pages/PostRedirect";
import { AboutPage } from "./pages/About"; import { AboutPage } from "./pages/About";
@@ -27,7 +26,10 @@ export default function App() {
<Route element={<PublicLayout />}> <Route element={<PublicLayout />}>
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/browse" element={<Browse />} /> <Route path="/browse" element={<Browse />} />
<Route path="/category/:slug" element={<CategoryPage />} /> <Route
path="/category/:slug"
element={<Navigate to="/browse" replace />}
/>
<Route path="/search" element={<SearchPage />} /> <Route path="/search" element={<SearchPage />} />
<Route path="/resource/:id" element={<PostRedirect />} /> <Route path="/resource/:id" element={<PostRedirect />} />
<Route path="/about" element={<AboutPage />} /> <Route path="/about" element={<AboutPage />} />

3
src/layouts/PublicLayout.tsx
View File

@@ -267,8 +267,7 @@ export function PublicLayout() {
const na = (which: PublicNavWhich) => const na = (which: PublicNavWhich) =>
navIsActive(pathname, search, hash, which); navIsActive(pathname, search, hash, which);
const isHome = pathname === "/"; const isHome = pathname === "/";
const footerInContentFlow = const footerInContentFlow = pathname === "/browse";
pathname === "/browse" || pathname.startsWith("/category/");
const goSearch = () => { const goSearch = () => {
const s = q.trim(); const s = q.trim();

41
src/pages/Home/index.tsx
View File

@@ -1,5 +1,5 @@
import { ChevronRight } from "lucide-react"; import { ChevronRight } from "lucide-react";
import { Link, useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { getJSON, itemsOrEmpty, type Category } from "../../api"; import { getJSON, itemsOrEmpty, type Category } from "../../api";
import { CategoryIcon } from "../../components/CategoryIcon"; import { CategoryIcon } from "../../components/CategoryIcon";
@@ -170,18 +170,23 @@ export function Home() {
const id = hash.slice(1); const id = hash.slice(1);
if (!id) return; if (!id) return;
const frame = window.requestAnimationFrame(() => { const frame = window.requestAnimationFrame(() => {
document.getElementById(id)?.scrollIntoView({ block: "start" }); document.getElementById(id)?.scrollIntoView({
block: id === "latest" ? "center" : "start",
});
}); });
return () => window.cancelAnimationFrame(frame); return () => window.cancelAnimationFrame(frame);
}, [hash, cats.length, rec.length, latest.length, popular.length]); }, [hash, cats.length, rec.length, latest.length, popular.length]);
const latestPlaceholderCount = Math.max(0, 5 - latest.length); const latestPlaceholderCount = Math.max(0, 5 - latest.length);
const popularPlaceholderCount = Math.max(0, 5 - popular.length); const popularPlaceholderCount = Math.max(0, 5 - popular.length);
const recommendedDotCount = Math.max(1, Math.min(4, rec.length || 4)); const recommendedDotCount = rec.length;
const activeRecommendedDot = Math.min( const activeRecommendedDot =
recommendedDotCount > 0
? Math.min(
recommendedDotCount - 1, recommendedDotCount - 1,
Math.round(recScroll.progress * (recommendedDotCount - 1)), Math.round(recScroll.progress * (recommendedDotCount - 1)),
); )
: 0;
if (err) { if (err) {
return ( return (
@@ -197,7 +202,7 @@ export function Home() {
<FigmaBanner /> <FigmaBanner />
</section> </section>
<section id="categories" className="scroll-mt-24"> <section id="categories" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0"> <div className="px-4 md:px-0">
<SectionHeader <SectionHeader
title={t("categorySection")} title={t("categorySection")}
@@ -219,10 +224,9 @@ export function Home() {
className="grid w-full shrink-0 snap-start grid-cols-3 gap-2 px-4" className="grid w-full shrink-0 snap-start grid-cols-3 gap-2 px-4"
> >
{page.map((c) => ( {page.map((c) => (
<Link <div
key={c.id} key={c.id}
to={`/category/${c.slug}`} className="flex h-[88px] min-w-0 cursor-default flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center"
className="group flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center transition hover:bg-[#252630] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
> >
<CategoryIcon <CategoryIcon
iconKey={c.iconKey} iconKey={c.iconKey}
@@ -232,7 +236,7 @@ export function Home() {
<div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white"> <div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
{cleanCategoryDisplayName(c.name)} {cleanCategoryDisplayName(c.name)}
</div> </div>
</Link> </div>
))} ))}
</div> </div>
))} ))}
@@ -271,10 +275,9 @@ export function Home() {
<div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4"> <div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
{figmaOrderedCategories.map((c) => ( {figmaOrderedCategories.map((c) => (
<Link <div
key={c.id} key={c.id}
to={`/category/${c.slug}`} className="flex h-[88px] min-w-0 cursor-default flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center"
className="group flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center transition hover:border-ark-gold/55 hover:bg-[#252630] hover:shadow-[0_0_0_1px_rgba(238,183,38,0.12)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
> >
<CategoryIcon <CategoryIcon
iconKey={c.iconKey} iconKey={c.iconKey}
@@ -284,12 +287,12 @@ export function Home() {
<div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2"> <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
{cleanCategoryDisplayName(c.name)} {cleanCategoryDisplayName(c.name)}
</div> </div>
</Link> </div>
))} ))}
</div> </div>
</section> </section>
<section id="official" className="scroll-mt-24"> <section id="official" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0"> <div className="px-4 md:px-0">
<SectionHeader <SectionHeader
title={t("officialSection")} title={t("officialSection")}
@@ -300,10 +303,10 @@ export function Home() {
<div className="relative"> <div className="relative">
<div <div
ref={recRowRef} ref={recRowRef}
className="flex snap-x snap-mandatory gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pb-5 [&::-webkit-scrollbar]:hidden" className="flex gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pr-0 md:pb-5 [&::-webkit-scrollbar]:hidden"
> >
{rec.map((r, index) => ( {rec.map((r, index) => (
<div key={r.id} className="snap-start"> <div key={r.id}>
<RecommendedCard r={r} visualIndex={index} useFigmaDesign /> <RecommendedCard r={r} visualIndex={index} useFigmaDesign />
</div> </div>
))} ))}
@@ -354,7 +357,7 @@ export function Home() {
</div> </div>
</section> </section>
<section id="latest" className="scroll-mt-24"> <section id="latest" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0"> <div className="px-4 md:px-0">
<SectionHeader <SectionHeader
title={t("latestSection")} title={t("latestSection")}
@@ -380,7 +383,7 @@ export function Home() {
</div> </div>
</section> </section>
<section id="popular" className="scroll-mt-24"> <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0"> <div className="px-4 md:px-0">
<SectionHeader <SectionHeader
title={t("popularSection")} title={t("popularSection")}

9
src/pages/PostRedirect/index.tsx
View File

@@ -19,10 +19,9 @@ export function PostRedirect() {
if (POST_STREAM_USES_MOCK) { if (POST_STREAM_USES_MOCK) {
const post = MOCK_POSTS.find((p) => p.id === id); const post = MOCK_POSTS.find((p) => p.id === id);
navigate( navigate(post ? `/browse#post-${post.id}` : "/browse", {
post ? `/category/${post.categorySlug}#post-${post.id}` : "/browse", replace: true,
{ replace: true }, });
);
return; return;
} }
@@ -30,7 +29,7 @@ export function PostRedirect() {
`/api/posts/${id}?lang=${encodeURIComponent(langQuery(lang))}`, `/api/posts/${id}?lang=${encodeURIComponent(langQuery(lang))}`,
) )
.then((post) => { .then((post) => {
navigate(`/category/${post.categorySlug}#post-${post.id}`, { navigate(`/browse#post-${post.id}`, {
replace: true, replace: true,
}); });
}) })