(Feat) Init WebSite
This commit is contained in:
@@ -0,0 +1,206 @@
|
||||
import Link from "next/link";
|
||||
import type { Metadata } from "next";
|
||||
import { getAllPosts } from "@/lib/devblog";
|
||||
import { games as gameRegistry } from "@/lib/games";
|
||||
import { Newsletter } from "../components/Newsletter";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Devblog",
|
||||
description:
|
||||
"Behind-the-scenes updates, design decisions, and milestones from Highland Games Studio.",
|
||||
};
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
function formatDate(date: string) {
|
||||
return new Date(date).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
function buildHref(params: { game?: string; page?: number }) {
|
||||
const search = new URLSearchParams();
|
||||
if (params.game) search.set("game", params.game);
|
||||
if (params.page && params.page > 1) search.set("page", String(params.page));
|
||||
const qs = search.toString();
|
||||
return qs ? `/devblog?${qs}` : "/devblog";
|
||||
}
|
||||
|
||||
type Props = {
|
||||
searchParams: Promise<{ game?: string; page?: string }>;
|
||||
};
|
||||
|
||||
export default async function DevblogPage({ searchParams }: Props) {
|
||||
const { game, page } = await searchParams;
|
||||
const allPosts = getAllPosts();
|
||||
|
||||
const usedGameSlugs = Array.from(
|
||||
new Set(allPosts.map((p) => p.game).filter((g): g is string => Boolean(g))),
|
||||
);
|
||||
const gameOptions = usedGameSlugs
|
||||
.map((slug) => ({
|
||||
slug,
|
||||
title: gameRegistry.find((g) => g.slug === slug)?.title ?? slug,
|
||||
}))
|
||||
.sort((a, b) => a.title.localeCompare(b.title));
|
||||
|
||||
const filtered = allPosts.filter((p) => {
|
||||
if (game && p.game !== game) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
const currentPage = Math.max(1, parseInt(page ?? "1", 10) || 1);
|
||||
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
|
||||
const safePage = Math.min(currentPage, totalPages);
|
||||
const visible = filtered.slice(
|
||||
(safePage - 1) * PAGE_SIZE,
|
||||
safePage * PAGE_SIZE,
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="pt-32 pb-24 px-6 lg:px-10">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
|
||||
— DEVBLOG
|
||||
</p>
|
||||
<h1 className="font-display text-5xl sm:text-6xl lg:text-7xl tracking-wider leading-[0.95] mb-8">
|
||||
THE JOURNEY,
|
||||
<br />
|
||||
ONE STEP AT A TIME.
|
||||
</h1>
|
||||
<p className="text-lg text-foreground-muted leading-relaxed max-w-2xl mb-12">
|
||||
Honest updates from the studio. Design decisions, prototypes, art
|
||||
milestones everything that goes into building our worlds.
|
||||
</p>
|
||||
|
||||
{gameOptions.length > 0 && (
|
||||
<div className="flex flex-wrap items-center gap-2 mb-12">
|
||||
<span className="font-display text-xs tracking-[0.3em] text-foreground-muted mr-2">
|
||||
GAME
|
||||
</span>
|
||||
<Link
|
||||
href={buildHref({})}
|
||||
className={`text-xs tracking-widest uppercase border px-3 py-1.5 transition-colors ${
|
||||
!game
|
||||
? "border-accent text-accent"
|
||||
: "border-border text-foreground-muted hover:border-accent hover:text-accent"
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</Link>
|
||||
{gameOptions.map((g) => (
|
||||
<Link
|
||||
key={g.slug}
|
||||
href={buildHref({ game: g.slug })}
|
||||
className={`text-xs tracking-widest uppercase border px-3 py-1.5 transition-colors ${
|
||||
game === g.slug
|
||||
? "border-accent text-accent"
|
||||
: "border-border text-foreground-muted hover:border-accent hover:text-accent"
|
||||
}`}
|
||||
>
|
||||
{g.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{visible.length === 0 ? (
|
||||
<p className="text-foreground-muted">
|
||||
{game
|
||||
? "No posts match these filters yet."
|
||||
: "No posts yet. Check back soon."}
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{visible.map((post) => {
|
||||
const postGame = post.game
|
||||
? gameRegistry.find((g) => g.slug === post.game)?.title ??
|
||||
post.game
|
||||
: null;
|
||||
return (
|
||||
<Link
|
||||
key={post.slug}
|
||||
href={`/devblog/${post.slug}`}
|
||||
className="group block py-8 border-t border-border hover:border-accent transition-colors"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-baseline sm:justify-between gap-2 mb-3">
|
||||
<h2 className="font-display text-2xl sm:text-3xl tracking-wider group-hover:text-accent transition-colors">
|
||||
{post.title.toUpperCase()}
|
||||
</h2>
|
||||
<time
|
||||
dateTime={post.date}
|
||||
className="text-xs tracking-widest text-foreground-muted shrink-0"
|
||||
>
|
||||
{formatDate(post.date)}
|
||||
</time>
|
||||
</div>
|
||||
{post.excerpt && (
|
||||
<p className="text-foreground-muted leading-relaxed max-w-2xl">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
)}
|
||||
{postGame && (
|
||||
<div className="flex flex-wrap items-center gap-2 mt-4">
|
||||
<span className="text-[0.65rem] tracking-widest uppercase border border-accent/40 text-accent px-2 py-1">
|
||||
{postGame}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<span className="inline-block mt-4 font-display text-xs tracking-widest text-foreground-muted group-hover:text-accent transition-colors">
|
||||
READ →
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<nav
|
||||
aria-label="Pagination"
|
||||
className="flex items-center justify-between mt-12 pt-8 border-t border-border"
|
||||
>
|
||||
{safePage > 1 ? (
|
||||
<Link
|
||||
href={buildHref({ game, page: safePage - 1 })}
|
||||
className="font-display text-xs tracking-widest text-foreground-muted hover:text-accent transition-colors"
|
||||
>
|
||||
← NEWER
|
||||
</Link>
|
||||
) : (
|
||||
<span aria-hidden />
|
||||
)}
|
||||
<span className="font-display text-xs tracking-widest text-foreground-muted">
|
||||
PAGE {safePage} / {totalPages}
|
||||
</span>
|
||||
{safePage < totalPages ? (
|
||||
<Link
|
||||
href={buildHref({ game, page: safePage + 1 })}
|
||||
className="font-display text-xs tracking-widest text-foreground-muted hover:text-accent transition-colors"
|
||||
>
|
||||
OLDER →
|
||||
</Link>
|
||||
) : (
|
||||
<span aria-hidden />
|
||||
)}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
<section className="mt-24 border-t border-border pt-16">
|
||||
<p className="font-display text-xs tracking-[0.3em] text-accent mb-3">
|
||||
— NEWSLETTER
|
||||
</p>
|
||||
<h2 className="font-display text-3xl sm:text-4xl tracking-wider mb-4">
|
||||
DON'T MISS A SUMMIT
|
||||
</h2>
|
||||
<p className="text-foreground-muted leading-relaxed max-w-2xl mb-6">
|
||||
Subscribe to get devblog highlights and release news in your inbox.
|
||||
</p>
|
||||
<Newsletter variant="compact" />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user