Files
EpicNext-Cms/src/app/(site)/badges/page.tsx
T
openhands 8a66db4ed7
CI / check (push) Successful in 4m11s
CI / preflight (push) Skipped
CI / deploy (push) Successful in 1m51s
fix(imaging): make avatar and badge images resilient to upstream outages
- 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
2026-09-20 12:58:55 +02:00

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>
);
}