improvement: make publication grid an unordered list of links

app/(index)/page.tsx

@@ -2,7 +2,6 @@ import type { Metadata, ResolvingMetadata } from "next";
 import { getTranslations } from "next-intl/server";
 
 import { MainContent } from "@/components/main-content";
-import { ClickablePublicationThumbnail } from "@/components/publication-cover";
 import { PublicationGrid } from "@/components/publication-grid";
 import { getPublications } from "@/lib/data";
 
@@ -40,11 +39,7 @@ export default async function IndexPage(_props: IndexPageProps) {
 	return (
 		<MainContent className="">
 			<h1 className="sr-only">A random sample of Thomas Bernhard translations</h1>
-			<PublicationGrid>
-				{pubs.map((p) => {
-					return <ClickablePublicationThumbnail key={p.id} publication={p} />;
-				})}
-			</PublicationGrid>
+			<PublicationGrid publications={pubs} />
 		</MainContent>
 	);
 }

app/publication/[id]/page.tsx

@@ -68,7 +68,9 @@ export default async function PublicationPage(props: PublicationPageProps) {
 				).join(" / ")}
 			</h2>
 			<div className="flex gap-8">
-				<PublicationCover className="h-96 grow basis-1/3" publication={pub} />
+				<div className="relative h-96 grow basis-1/3">
+					<PublicationCover publication={pub} />
+				</div>
 				<div className="grow-[2] basis-2/3">
 					<p className="italic">
 						<LanguageLink language={pub.language} />
@@ -137,7 +139,11 @@ export default async function PublicationPage(props: PublicationPageProps) {
 				</h2>
 				<div className="flex">
 					{(await getSameLanguagePublications(pub)).map((p) => {
-						return <ClickablePublicationThumbnail key={p.id} className="size-44" publication={p} />;
+						return (
+							<div key={p.id} className="size-44">
+								<ClickablePublicationThumbnail publication={p} />
+							</div>
+						);
 					})}
 				</div>
 			</section>

app/search/instantsearch.tsx

@@ -161,7 +161,11 @@ export function InstantSearch() {
 						list: "m-2 grid grid-cols-1 md:grid-cols-4",
 					}}
 					hitComponent={({ hit }) => {
-						return <ClickablePublicationThumbnail publication={hit as unknown as Publication} />;
+						return (
+							<li className="block size-44 p-2">
+								<ClickablePublicationThumbnail publication={hit as unknown as Publication} />
+							</li>
+						);
 					}}
 				/>
 			</div>

components/instantsearch.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import type { UiState } from "instantsearch.js";
-import { type MessageKeys, useTranslations } from "next-intl";
+import { useTranslations } from "next-intl";
 import { type ReactNode, useEffect, useRef } from "react";
 import { Configure, SearchBox, SortBy, useInfiniteHits } from "react-instantsearch";
 import { InstantSearchNext } from "react-instantsearch-nextjs";
 import TypesenseInstantSearchAdapter, { type SearchClient } from "typesense-instantsearch-adapter";
 
-import { ClickablePublicationThumbnail } from "@/components/publication-cover";
 import { collectionName } from "@/lib/data";
 import type { Publication } from "@/lib/model";
 
@@ -73,12 +72,10 @@ function InfiniteScroll(): ReactNode {
 	}, [isLastPage, showMore]);
 
 	return (
-		<PublicationGrid>
-			{items.map((pub) => {
-				return <ClickablePublicationThumbnail key={pub.id} publication={pub} />;
-			})}
+		<>
+			<PublicationGrid publications={items} />
 			<div ref={sentinelRef} aria-hidden="true" />
-		</PublicationGrid>
+		</>
 	);
 }
 

components/publication-cover.tsx

@@ -6,38 +6,37 @@ import type { Publication } from "@/lib/model";
 
 import { AppLink } from "./app-link";
 
-interface PublicationProps {
+interface PublicationCoverProps {
 	publication: Publication;
-	className?: string;
 }
 
-export function PublicationCover(props: PublicationProps): ReactNode {
+export function PublicationCover(props: PublicationCoverProps): ReactNode {
 	const t = useTranslations("PublicationCover");
 	return (
-		<div className={`${props.className ?? "m-2 size-44"} relative`}>
-			<Image
-				alt={
-					`${t("alt_text")} ${props.publication.title}` // TODO adjust alt if cover is missing
-				}
-				fill={true}
-				src={
-					props.publication.images[0]
-						? `/covers/${props.publication.images[0].id}.jpg`
-						: "/covers/slw_013.jpg" // TODO create proper 'cover missing' asset
-				}
-				style={{ objectFit: "contain" }}
-			/>
-		</div>
+		<Image
+			alt={props.publication.images[0] ? `${t("alt_text")} ${props.publication.title}` : ""}
+			className="object-contain"
+			fill={true}
+			sizes={"88rem"}
+			src={
+				props.publication.images[0]
+					? `/covers/${props.publication.images[0].id}.jpg`
+					: "/covers/cover_missing.jpg"
+			}
+		/>
 	);
 }
 
-export function ClickablePublicationThumbnail(props: PublicationProps) {
+export function ClickablePublicationThumbnail(props: PublicationCoverProps) {
 	return (
-		<AppLink href={`/publication/${props.publication.id}`}>
-			<PublicationCover
-				className="m-2 size-44 border-2 border-solid border-transparent hover:border-black"
-				publication={props.publication}
-			/>
+		<AppLink
+			className="relative block h-full object-contain hover:outline"
+			href={`/publication/${props.publication.id}`}
+		>
+			<PublicationCover publication={props.publication} />
+			<span className="sr-only">
+				{props.publication.title} ({props.publication.year})
+			</span>
 		</AppLink>
 	);
 }

components/publication-grid.tsx

@@ -1,9 +1,23 @@
 import type { ReactNode } from "react";
 
+import type { Publication } from "@/lib/model";
+
+import { ClickablePublicationThumbnail } from "./publication-cover";
+
 interface PublicationGridProps {
-	children: ReactNode;
+	publications: Array<Publication>;
 }
 
 export function PublicationGrid(props: PublicationGridProps): ReactNode {
-	return <div className="m-2 grid h-fit grid-cols-1 md:grid-cols-4">{props.children}</div>;
+	return (
+		<ul className="m-2 grid h-fit grid-cols-1 justify-items-center md:grid-cols-4">
+			{props.publications.map((pub) => {
+				return (
+					<li key={pub.id} className="block size-44 p-2">
+						<ClickablePublicationThumbnail publication={pub} />
+					</li>
+				);
+			})}
+		</ul>
+	);
 }