- Add persistent disk cache for rendered avatars/badges (storage/imaging) so repeats never touch the flaky local renderer and cached renders survive upstream downtime - Serve cache-first with stale-on-error; cut primary/fallback timeouts from 10s/6s to 4s/4s so failing images cannot stall pages - Avatar proxy now returns a graceful 200 silhouette instead of 502 when no renderer can produce a figure, so no broken-image glyphs appear - Badge endpoint becomes a caching proxy trying configured CDN, public Habbo CDN and local /swf copy in order, and drops the fragile IP rate limit that could blank badge streams - Route all site badge images (profile, me, badges, apply pages) through the cached proxy instead of hot-linking images.habbo.com
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { asc } from "drizzle-orm";
|
|
import type { Metadata } from "next";
|
|
import { getTranslations } from "next-intl/server";
|
|
import { ContentCard, EmptyState } from "@/components/public/ui";
|
|
import { db, WebsiteBadges } from "@/lib/db";
|
|
|
|
export async function generateMetadata(): Promise<Metadata> {
|
|
const t = await getTranslations("pages.badges");
|
|
return {
|
|
title: t("title"),
|
|
description: t("subtitle"),
|
|
openGraph: {
|
|
title: t("title"),
|
|
description: t("subtitle"),
|
|
type: "website",
|
|
},
|
|
};
|
|
}
|
|
|
|
// A badge_key (e.g. "ADM") maps to a .gif served through the cached proxy.
|
|
const BADGE_IMG_BASE = "/api/imaging/badge?code";
|
|
|
|
export default async function BadgesPage() {
|
|
const t = await getTranslations("pages.badges");
|
|
|
|
const badges = await db
|
|
.select()
|
|
.from(WebsiteBadges)
|
|
.orderBy(asc(WebsiteBadges.badgeName))
|
|
.catch(() => []);
|
|
|
|
return (
|
|
<main className="page-grid">
|
|
<ContentCard icon="🏅" title={t("title")} subtitle={t("subtitle")} />
|
|
|
|
<ContentCard padded={badges.length === 0}>
|
|
{badges.length === 0 ? (
|
|
<EmptyState icon="🏅">{t("noBadges")}</EmptyState>
|
|
) : (
|
|
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
|
|
{badges.map((badge) => (
|
|
<div
|
|
key={String(badge.id)}
|
|
className="card hover"
|
|
style={{
|
|
display: "flex",
|
|
gap: "0.9rem",
|
|
alignItems: "flex-start",
|
|
}}
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={`${BADGE_IMG_BASE}=${encodeURIComponent(badge.badgeKey)}`}
|
|
alt={badge.badgeName}
|
|
title={badge.badgeKey}
|
|
width={40}
|
|
height={40}
|
|
style={{ flexShrink: 0 }}
|
|
/>
|
|
<div style={{ minWidth: 0 }}>
|
|
<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
|
|
{badge.badgeName}
|
|
</h3>
|
|
<p
|
|
className="muted"
|
|
style={{ margin: "0 0 0.35rem", fontFamily: "monospace" }}
|
|
>
|
|
{badge.badgeKey}
|
|
</p>
|
|
<p style={{ margin: 0, fontSize: "0.9rem" }}>
|
|
{badge.badgeDescription}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</ContentCard>
|
|
</main>
|
|
);
|
|
}
|