feat: add dynamic metadata for search results

src/app/layout.tsx

@@ -6,7 +6,7 @@ const raleway = Raleway({ subsets: ["latin"] });
 
 export const metadata = {
 	description:
-		"Check if your npm packages are eligible for Tidelift funding. 💸<",
+		"Check if your npm packages are eligible for Tidelift funding. 💸",
 	title: "Tidelift Me Up",
 };
 

src/app/page.tsx

@@ -1,41 +1,37 @@
-import {
-	EstimatedPackage,
-	PackageOwnership,
-	tideliftMeUp,
-} from "tidelift-me-up";
-
 import { Footer } from "~/components/Footer";
 import { MainArea } from "~/components/MainArea";
 import { OptionsForm } from "~/components/OptionsForm";
 import { ResultDisplay } from "~/components/ResultDisplay";
 import { ScrollButton } from "~/components/ScrollButton";
+import { SearchParamsType, fetchData } from "~/utils/fetchData";
 
+import { metadata as defaultMetadata } from "./layout";
 import styles from "./page.module.css";
 
 export interface HomeProps {
-	searchParams: Record<string, unknown>;
+	searchParams: SearchParamsType;
 }
 
-export default async function Home({ searchParams }: HomeProps) {
-	const options = {
-		ownership: undefinedIfEmpty(
-			[
-				searchParams["author"] === "on" && "author",
-				searchParams["maintainer"] === "on" && "maintainer",
-				searchParams["publisher"] === "on" && "publisher",
-			].filter(Boolean) as PackageOwnership[],
-		),
-		since: (searchParams["since"] || undefined) as string | undefined,
-		username: searchParams.username as string,
-	};
-	let result: Error | EstimatedPackage[] | undefined;
+export async function generateMetadata({ searchParams }: HomeProps) {
+	const { options, result } = await fetchData(searchParams);
+	const username = options.username || "";
+	const packageCount = Array.isArray(result) ? result.length : 0;
 
-	try {
-		result = options.username ? await tideliftMeUp(options) : undefined;
-	} catch (error) {
-		result = error as Error;
+	if (!username || packageCount === 0) {
+		return defaultMetadata;
 	}
 
+	return {
+		description: `${username} has ${packageCount} npm package${
+			packageCount === 1 ? "" : "s"
+		} eligible for Tidelift funding. 💸`,
+		title: `${username} | Tidelift Me Up`,
+	};
+}
+
+export default async function Home({ searchParams }: HomeProps) {
+	const { options, result } = await fetchData(searchParams);
+
 	return (
 		<>
 			<MainArea as="main" className={styles.main}>
@@ -51,7 +47,3 @@ export default async function Home({ searchParams }: HomeProps) {
 		</>
 	);
 }
-
-function undefinedIfEmpty<T>(items: T[]) {
-	return items.length === 0 ? undefined : items;
-}

src/utils/fetchData.ts

@@ -0,0 +1,44 @@
+import {
+	EstimatedPackage,
+	PackageOwnership,
+	tideliftMeUp,
+} from "tidelift-me-up";
+
+export type OptionsType = Record<string, unknown>;
+export type SearchParamsType = Record<string, unknown>;
+
+export async function fetchData(searchParams: SearchParamsType) {
+	const options = getOptions(searchParams);
+	const result = await getTideliftData(options);
+	return { options, result };
+}
+
+function getOptions(searchParams: SearchParamsType) {
+	return {
+		ownership: undefinedIfEmpty(
+			[
+				searchParams.author === "on" && "author",
+				searchParams.maintainer === "on" && "maintainer",
+				searchParams.publisher === "on" && "publisher",
+			].filter(Boolean) as PackageOwnership[],
+		),
+		since: (searchParams.since || undefined) as string | undefined,
+		username: searchParams.username as string,
+	};
+}
+
+async function getTideliftData(options: OptionsType) {
+	let result: Error | EstimatedPackage[] | undefined;
+
+	try {
+		result = options.username ? await tideliftMeUp(options) : undefined;
+	} catch (error) {
+		result = error as Error;
+	}
+
+	return result;
+}
+
+function undefinedIfEmpty<T>(items: T[]) {
+	return items.length === 0 ? undefined : items;
+}