feat: add random publication selection to index page

app/[locale]/(index)/page.tsx

@@ -1,10 +1,10 @@
 import type { Metadata, ResolvingMetadata } from "next";
-import { useTranslations } from "next-intl";
 import { getTranslations, unstable_setRequestLocale as setRequestLocale } from "next-intl/server";
-import type { ReactNode } from "react";
 
 import { MainContent } from "@/components/main-content";
+import { PublicationGrid } from "@/components/publication-grid";
 import type { Locale } from "@/config/i18n.config";
+import { getPublications } from "@/lib/data";
 
 interface IndexPageProps {
 	params: {
@@ -33,21 +33,31 @@ export async function generateMetadata(
 	return metadata;
 }
 
-export default function IndexPage(props: IndexPageProps): ReactNode {
+export default async function IndexPage(props: IndexPageProps) {
 	const { params } = props;
 
 	const { locale } = params;
 	setRequestLocale(locale);
 
-	const t = useTranslations("IndexPage");
+	const t = await getTranslations("IndexPage");
 
+	const pubs = await getPublications({
+		// filter non-erstpublikationen and missing cover assets
+		filter_by: "erstpublikation:true && has_image:true",
+
+		// TODO workaround until upgrade to typesense 0.28, afterwards can just use: "_rand:asc"
+		// just look for a single random letter a-w (ASCII 65-87)
+		q: String.fromCharCode(Math.floor(65 + 22 * Math.random())),
+		sort_by: "_text_match:" + (Math.random() > 0.5 ? "asc" : "desc"),
+	});
 	return (
 		<MainContent className="container py-8">
 			<section className="mx-auto grid w-full max-w-screen-lg items-start justify-items-center gap-3 px-4 py-8 text-center md:py-12">
 				<h1 className="sr-only">{t("title")}</h1>
 				<div className="mx-auto w-full max-w-screen-md text-pretty text-lg text-on-muted sm:text-xl">
 					{t("lead-in")}
 				</div>
+				<PublicationGrid publications={pubs} />
 			</section>
 		</MainContent>
 	);

components/publication-grid.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+import type { Publication } from "@/lib/model";
+
+import { ClickablePublicationThumbnail } from "./publication-cover";
+
+interface PublicationGridProps {
+	publications: Array<Publication>;
+}
+
+export function PublicationGrid(props: PublicationGridProps): ReactNode {
+	return (
+		<ol 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>
+				);
+			})}
+		</ol>
+	);
+}

lib/data.ts

@@ -44,3 +44,35 @@ export async function getSameLanguagePublications(pub: Publication) {
 		return r.document;
 	}) as unknown as Array<Publication>;
 }
+
+export async function getPublications({
+	q = "*",
+	filter_by = "",
+	query_by = "title, contains.title",
+	page = 1,
+	per_page = 12,
+	sort_by = undefined,
+}: {
+	q: string;
+	filter_by: string;
+	query_by?: string;
+	page?: number;
+	per_page?: number;
+	sort_by?: string;
+}): Promise<Array<Publication>> {
+	return collection
+		.documents()
+		.search({
+			q: q,
+			query_by: query_by,
+			filter_by: filter_by,
+			sort_by: sort_by,
+			page: page,
+			per_page: per_page,
+		})
+		.then((r) => {
+			return r.hits?.map((h) => {
+				return h.document;
+			}) as unknown as Array<Publication>;
+		});
+}