Mathew
9b6638eb00
Deploy / deploy (push) Successful in 1m13s
Deux courbes partagées dans lib/motion.ts, pour que le CSS et Framer aient le même feeling, et quatre primitives que Tailwind ne sait pas exprimer : reflet de bouton, halo qui suit le curseur, soulignement qui se dessine, secousse d'erreur. Nouveaux composants : Stagger (les collections se distribuent une par une), Spotlight (trouve son parent tout seul, donc les cartes restent des composants serveur), ScrollProgress, BackToTop, Parallax, Spinner, CheckMark. Reveal accepte maintenant une direction. Côté rendu : le trait de nav glisse d'un onglet à l'autre, les cartes se soulèvent, le hero réagit au scroll, les piliers entrent en zig-zag, la lightbox glisse dans le sens demandé et les formulaires répondent. prefers-reduced-motion est respecté partout : Framer coupe via useReducedMotion, le CSS via la media query déjà en place. Le commit embarque aussi la réorganisation des composants par domaine qui était en cours dans l'arbre de travail — les deux étaient trop imbriquées pour être séparées proprement. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
85 lines
3.5 KiB
TypeScript
85 lines
3.5 KiB
TypeScript
import Link from "next/link";
|
|
import { formatDate } from "@/lib/format";
|
|
import { games } from "@/lib/games";
|
|
import type { DevblogPost } from "@/lib/devblog";
|
|
|
|
type Props = {
|
|
posts: DevblogPost[];
|
|
/** Heading level for each entry, so the page outline stays valid. */
|
|
as?: "h2" | "h3";
|
|
/** Show the related game as a tag. Off on a game page (redundant there). */
|
|
showGame?: boolean;
|
|
};
|
|
|
|
/**
|
|
* The devblog entry list. Shared by /devblog, the home page teaser and the
|
|
* "latest articles" block of a game page, so an entry looks identical
|
|
* everywhere it appears.
|
|
*/
|
|
export function PostList({ posts, as: Tag = "h2", showGame = true }: Props) {
|
|
return (
|
|
<ul className="border-t border-border">
|
|
{posts.map((post) => {
|
|
const gameTitle = post.game
|
|
? (games.find((g) => g.slug === post.game)?.title ?? post.game)
|
|
: null;
|
|
|
|
return (
|
|
<li key={post.slug}>
|
|
{/* The row is a large target with no border of its own, so the
|
|
hover has to be built from three small moves rather than one
|
|
box: a rule that draws down the left edge, the whole block
|
|
nudged away from it, and the rule under it turning accent. */}
|
|
<Link
|
|
href={`/devblog/${post.slug}`}
|
|
className="group relative block border-b border-border py-8 pl-0 transition-colors duration-300 hover:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
|
|
>
|
|
<span
|
|
aria-hidden
|
|
className="absolute bottom-0 left-0 top-0 w-px origin-top scale-y-0 bg-accent transition-transform duration-500 ease-out group-hover:scale-y-100"
|
|
/>
|
|
|
|
<div className="transition-transform duration-300 ease-out group-hover:translate-x-4">
|
|
<div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-baseline sm:justify-between">
|
|
<Tag className="font-display text-2xl tracking-wider transition-colors duration-300 group-hover:text-accent sm:text-3xl">
|
|
{post.title.toUpperCase()}
|
|
</Tag>
|
|
<time
|
|
dateTime={post.date}
|
|
className="shrink-0 text-xs tracking-widest text-foreground-muted"
|
|
>
|
|
{formatDate(post.date)}
|
|
</time>
|
|
</div>
|
|
|
|
{post.excerpt && (
|
|
<p className="max-w-2xl leading-relaxed text-foreground-muted">
|
|
{post.excerpt}
|
|
</p>
|
|
)}
|
|
|
|
<div className="mt-4 flex flex-wrap items-center gap-4">
|
|
<span className="inline-flex items-center gap-2 font-display text-xs tracking-widest text-foreground-muted transition-colors duration-300 group-hover:text-accent">
|
|
READ
|
|
<span
|
|
aria-hidden
|
|
className="inline-block transition-transform duration-300 ease-out group-hover:translate-x-1"
|
|
>
|
|
→
|
|
</span>
|
|
</span>
|
|
{showGame && gameTitle && (
|
|
<span className="border border-accent/40 px-2 py-1 text-[0.65rem] uppercase tracking-widest text-accent transition-colors duration-300 group-hover:border-accent">
|
|
{gameTitle}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
}
|