highland_games_website/app/devblog/page.tsx

import Link from "next/link";
import type { Metadata } from "next";
import { PageHeader } from "../components/ui/PageHeader";
import { Section } from "../components/ui/Section";
import { SectionHeading } from "../components/ui/SectionHeading";
import { PostList } from "../components/devblog/PostList";
import { PostFeature } from "../components/devblog/PostFeature";
import { Newsletter } from "../components/forms/Newsletter";
import { getAllPosts } from "@/lib/devblog";
import { games } from "@/lib/games";

export const metadata: Metadata = {
  title: "Devblog",
  description:
    "Behind-the-scenes updates, design decisions, and milestones from Highland Games Studio.",
};

const PAGE_SIZE = 10;

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

const filterClass = (active: boolean) =>
  `border px-3 py-1.5 text-xs uppercase tracking-widest transition duration-200 ease-out active:scale-95 ${
    active
      ? "border-accent text-accent"
      : "border-border text-foreground-muted hover:-translate-y-0.5 hover:border-accent hover:text-accent"
  }`;

type Props = {
  searchParams: Promise<{ game?: string; page?: string }>;
};

export default async function DevblogPage({ searchParams }: Props) {
  const { game, page } = await searchParams;
  const allPosts = getAllPosts();

  // Only offer a filter for games that actually have posts.
  const gameOptions = Array.from(
    new Set(allPosts.map((post) => post.game).filter(Boolean) as string[]),
  )
    .map((slug) => ({
      slug,
      title: games.find((g) => g.slug === slug)?.title ?? slug,
    }))
    .sort((a, b) => a.title.localeCompare(b.title));

  const filtered = game
    ? allPosts.filter((post) => post.game === game)
    : allPosts;

  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
  const currentPage = Math.max(1, Number.parseInt(page ?? "1", 10) || 1);
  const safePage = Math.min(currentPage, totalPages);
  const visible = filtered.slice(
    (safePage - 1) * PAGE_SIZE,
    safePage * PAGE_SIZE,
  );

  // The newest post leads the page, but only where "newest" means anything:
  // not on page two, and not inside a filtered view.
  const featured = safePage === 1 && !game ? visible[0] : undefined;
  const listed = featured ? visible.slice(1) : visible;

  return (
    <>
      <PageHeader
        eyebrow="DEVBLOG"
        width="narrow"
        title={
          <>
            THE JOURNEY,
            <br />
            ONE STEP AT A TIME.
          </>
        }
        lead="Honest updates from the studio: design decisions, prototypes, art milestones, and everything else that goes into building our worlds."
      />

      <Section top="none" width="narrow">
        {/* One game means the filter offers "All" and "All, again". */}
        {gameOptions.length > 1 && (
          <div className="mb-10 flex flex-wrap items-center gap-2">
            <span className="mr-2 font-display text-xs tracking-[0.3em] text-foreground-muted">
              GAME
            </span>
            <Link href={buildHref({})} className={filterClass(!game)}>
              All
            </Link>
            {gameOptions.map((option) => (
              <Link
                key={option.slug}
                href={buildHref({ game: option.slug })}
                className={filterClass(game === option.slug)}
              >
                {option.title}
              </Link>
            ))}
          </div>
        )}

        {visible.length === 0 && (
          <p className="text-foreground-muted">
            {game
              ? "No posts for this game yet."
              : "No posts yet. Check back soon."}
          </p>
        )}

        {featured && <PostFeature post={featured} eyebrow="Latest" as="h2" />}

        {listed.length > 0 && (
          <div className={featured ? "mt-12" : undefined}>
            <PostList posts={listed} />
          </div>
        )}

        {totalPages > 1 && (
          <nav
            aria-label="Pagination"
            className="mt-12 flex items-center justify-between"
          >
            {safePage > 1 ? (
              <Link
                href={buildHref({ game, page: safePage - 1 })}
                className="group inline-flex items-center gap-2 font-display text-xs tracking-widest text-foreground-muted transition-colors hover:text-accent"
              >
                <span
                  aria-hidden
                  className="inline-block transition-transform duration-300 ease-out group-hover:-translate-x-1"
                >
                  ←
                </span>
                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="group inline-flex items-center gap-2 font-display text-xs tracking-widest text-foreground-muted transition-colors hover:text-accent"
              >
                OLDER
                <span
                  aria-hidden
                  className="inline-block transition-transform duration-300 ease-out group-hover:translate-x-1"
                >
                  →
                </span>
              </Link>
            ) : (
              <span aria-hidden />
            )}
          </nav>
        )}
      </Section>

      <Section divider width="narrow">
        <SectionHeading
          eyebrow="NEWSLETTER"
          title="DON'T MISS A SUMMIT"
          lead="Subscribe to get devblog highlights and release news in your inbox."
        />
        <div className="mt-10">
          <Newsletter variant="compact" />
        </div>
      </Section>
    </>
  );
}