1. Performance: 25 pages switched from force-dynamic to revalidate=300 (ISR); 2 pages (community, developers) now fully static (SSG) 2. DB indexes: Added @@index on foreign keys for WebsiteArticles, WebsiteArticleReactions, WebsiteArticleComments, WebsiteHelpCenterTickets, WebsiteShopArticles, RadioSongRequests, StaffActivities 3. SEO: Added robots.ts, sitemap.ts, canonical URLs, Open Graph + Twitter Card metadata on root layout and news articles 4. A11Y: Replaced <details>/<summary> dropdowns with accessible button-based NavDropdown (aria-expanded, aria-haspopup, role=menu). MobileNav now uses translated aria-label, aria-expanded, aria-controls, role=menu 5. Code quality: Added try/catch to updateArticle/deleteArticle; deleteArticle now uses prisma. for atomicity 6. CI/CD: Added GitHub Actions workflow (typecheck + test) 7. i18n: Added openMenu/closeMenu keys to all 6 locales 8. Observability: Health endpoint now checks SMTP reachability when configured 9. Loading states: Added loading.tsx for root, admin, and news sections 10. Word filter cache: Added 60s TTL auto-refresh instead of manual cache bust
This commit is contained in:
openhands committed
1 parent
10523e58ce
commit
8bcbc501ba
48 files changed
+337
-98
No files matched your search
@@ -2,7 +2,14 @@
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
export function MobileNav({ children }: { children: React.ReactNode }) {
|
||||
interface MobileNavProps {
|
||||
children: React.ReactNode;
|
||||
/** Accessible label for the menu button. Pass translated string from server. */
|
||||
menuLabel?: string;
|
||||
closeLabel?: string;
|
||||
}
|
||||
|
||||
export function MobileNav({ children, menuLabel = "Open menu", closeLabel = "Close menu" }: MobileNavProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
@@ -12,7 +19,9 @@ export function MobileNav({ children }: { children: React.ReactNode }) {
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150"
|
||||
style={{ color: "var(--color-navbar-text)" }}
|
||||
aria-label={open ? "Sluit menu" : "Open menu"}
|
||||
aria-expanded={open}
|
||||
aria-controls="mobile-menu"
|
||||
aria-label={open ? closeLabel : menuLabel}
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
{open ? (
|
||||
@@ -43,6 +52,8 @@ export function MobileNav({ children }: { children: React.ReactNode }) {
|
||||
)}
|
||||
|
||||
<div
|
||||
id="mobile-menu"
|
||||
role="menu"
|
||||
className={`${open ? "max-h-[80vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none md:pointer-events-auto"} overflow-hidden transition-all duration-300 ease-in-out md:!max-h-none md:!opacity-100 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
|
||||
style={{ backgroundColor: "var(--color-navbar)" }}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect, type ReactNode } from "react";
|
||||
|
||||
interface NavDropdownProps {
|
||||
label: string;
|
||||
icon?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function NavDropdown({ label, icon, children }: NavDropdownProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
}
|
||||
function handleKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
if (open) {
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
document.addEventListener("keydown", handleKey);
|
||||
}
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClick);
|
||||
document.removeEventListener("keydown", handleKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative group md:flex">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") setOpen(!open); }}
|
||||
className="nav-item cursor-pointer"
|
||||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
>
|
||||
{icon ? <img src={icon} alt="" className="w-5 h-5 mr-1.5" /> : null}
|
||||
{label}
|
||||
<svg className={`ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 ${open ? "rotate-180" : ""}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2" role="menu">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import Link from "next/link";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { LanguageSwitcher } from "@/components/language-switcher";
|
||||
import { MobileNav } from "@/components/mobile-nav";
|
||||
import { NavDropdown } from "@/components/nav-dropdown";
|
||||
import { NavbarColorPicker } from "@/components/navbar-color-picker";
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
||||
|
||||
@@ -24,65 +25,44 @@ export async function Navigation() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<MobileNav>
|
||||
<Link href="/" className="nav-item md:hidden">
|
||||
<MobileNav menuLabel={t("openMenu") || "Open menu"} closeLabel={t("closeMenu") || "Close menu"}>
|
||||
<Link href="/" className="nav-item md:hidden" role="menuitem">
|
||||
<img src="/assets/images/icons/navigation/me.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("home")}
|
||||
</Link>
|
||||
|
||||
<details className="relative group md:flex">
|
||||
<summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
|
||||
<img src="/assets/images/icons/navigation/community.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("community")}
|
||||
<svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||
</summary>
|
||||
<div className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
|
||||
<Link href="/news" className="dropdown-item">{t("articles")}</Link>
|
||||
<Link href="/photos" className="dropdown-item">{t("photos")}</Link>
|
||||
<Link href="/staff" className="dropdown-item">{t("staff")}</Link>
|
||||
<Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
|
||||
<Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
|
||||
</div>
|
||||
</details>
|
||||
<NavDropdown label={t("community")} icon="/assets/images/icons/navigation/community.png">
|
||||
<Link href="/news" className="dropdown-item" role="menuitem">{t("articles")}</Link>
|
||||
<Link href="/photos" className="dropdown-item" role="menuitem">{t("photos")}</Link>
|
||||
<Link href="/staff" className="dropdown-item" role="menuitem">{t("staff")}</Link>
|
||||
<Link href="/rankings" className="dropdown-item" role="menuitem">{t("rankings")}</Link>
|
||||
<Link href="/guilds" className="dropdown-item" role="menuitem">{t("guilds")}</Link>
|
||||
</NavDropdown>
|
||||
|
||||
<details className="relative group md:flex">
|
||||
<summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
|
||||
<img src="/assets/images/icons/navigation/shop.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("shop")}
|
||||
<svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||
</summary>
|
||||
<div className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
|
||||
<Link href="/shop" className="dropdown-item">{t("shop")}</Link>
|
||||
<Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
|
||||
<Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
|
||||
</div>
|
||||
</details>
|
||||
<NavDropdown label={t("shop")} icon="/assets/images/icons/navigation/shop.png">
|
||||
<Link href="/shop" className="dropdown-item" role="menuitem">{t("shop")}</Link>
|
||||
<Link href="/marketplace" className="dropdown-item" role="menuitem">{t("market")}</Link>
|
||||
<Link href="/rares" className="dropdown-item" role="menuitem">{t("rareValues")}</Link>
|
||||
</NavDropdown>
|
||||
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<Link href="/leaderboard" className="nav-item" role="menuitem">
|
||||
<img src="/assets/images/icons/navigation/leaderboards.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("leaderboards")}
|
||||
</Link>
|
||||
|
||||
<Link href="/radio" className="nav-item">
|
||||
<Link href="/radio" className="nav-item" role="menuitem">
|
||||
<img src="/assets/images/icons/navigation/bb.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("radio")}
|
||||
</Link>
|
||||
|
||||
<details className="relative group md:flex">
|
||||
<summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
|
||||
<img src="/assets/images/icons/navigation/rules.gif" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("assistance")}
|
||||
<svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||
</summary>
|
||||
<div className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
|
||||
<Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
|
||||
{session?.user ? (
|
||||
<Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>
|
||||
) : null}
|
||||
<Link href="/badges" className="dropdown-item">{t("badges")}</Link>
|
||||
<Link href="/draw-badge" className="dropdown-item">{t("drawBadge")}</Link>
|
||||
</div>
|
||||
</details>
|
||||
<NavDropdown label={t("assistance")} icon="/assets/images/icons/navigation/rules.gif">
|
||||
<Link href="/help" className="dropdown-item" role="menuitem">{t("helpCenter")}</Link>
|
||||
{session?.user ? (
|
||||
<Link href="/help/tickets" className="dropdown-item" role="menuitem">{t("myTickets")}</Link>
|
||||
) : null}
|
||||
<Link href="/badges" className="dropdown-item" role="menuitem">{t("badges")}</Link>
|
||||
<Link href="/draw-badge" className="dropdown-item" role="menuitem">{t("drawBadge")}</Link>
|
||||
</NavDropdown>
|
||||
|
||||
{session?.user ? (
|
||||
<>
|
||||
|
||||
Reference in new issue
Block a user