Wrap next/link in a shared Link component that ships prefetch=false by default, so no route is ever prefetched (viewport or hover) anymore, and drop the DNS prefetch hint. Removes hidden background requests that were the source of intermittent issues.
88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
import { desc } from "drizzle-orm";
|
|
import { getTranslations } from "next-intl/server";
|
|
import Link from "@/components/link";
|
|
import { ContentCard, EmptyState } from "@/components/public/ui";
|
|
import { db, Guilds } from "@/lib/db";
|
|
import { excerpt } from "@/lib/format";
|
|
|
|
export const metadata = { title: "Guilds" };
|
|
|
|
type GuildCard = {
|
|
id: number;
|
|
name: string;
|
|
description: string;
|
|
badge: string;
|
|
};
|
|
|
|
async function getGuilds(): Promise<GuildCard[]> {
|
|
try {
|
|
return await db
|
|
.select({
|
|
id: Guilds.id,
|
|
name: Guilds.name,
|
|
description: Guilds.description,
|
|
badge: Guilds.badge,
|
|
})
|
|
.from(Guilds)
|
|
.orderBy(desc(Guilds.id))
|
|
.limit(40);
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
export default async function GuildsPage() {
|
|
const t = await getTranslations("pages.guilds");
|
|
const guilds = await getGuilds();
|
|
|
|
return (
|
|
<main style={{ display: "grid", gap: "1.5rem" }}>
|
|
<ContentCard icon="🚪" title={t("title")} subtitle={t("subtitle")} />
|
|
|
|
<ContentCard padded={guilds.length === 0}>
|
|
{guilds.length === 0 ? (
|
|
<EmptyState icon="🚪">{t("empty")}</EmptyState>
|
|
) : (
|
|
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
|
|
{guilds.map((g) => (
|
|
<Link
|
|
key={g.id}
|
|
href={`/guilds/${g.id}`}
|
|
className="card hover"
|
|
style={{
|
|
display: "flex",
|
|
gap: "0.85rem",
|
|
alignItems: "flex-start",
|
|
color: "inherit",
|
|
textDecoration: "none",
|
|
}}
|
|
>
|
|
{g.badge ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={`https://habbo-stories-content.s3.amazonaws.com/badge-part-images/${g.badge}.gif`}
|
|
alt={`${g.name} badge`}
|
|
width={40}
|
|
height={40}
|
|
style={{ flex: "0 0 auto" }}
|
|
/>
|
|
) : null}
|
|
<div style={{ minWidth: 0 }}>
|
|
<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
|
|
{g.name || t("unnamedGuild")}
|
|
</h3>
|
|
<p className="muted" style={{ margin: 0 }}>
|
|
{g.description
|
|
? excerpt(g.description, 120)
|
|
: t("noDescription")}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</ContentCard>
|
|
</main>
|
|
);
|
|
}
|