Add glossary stats to /cms

app/locales/en.ts

@@ -225,6 +225,7 @@ export default {
 					articles: "Total Articles",
 					likes: "Total Likes",
 					tutorials: "Total Tutorials",
+					glossary: "Total Glossary Terms",
 				},
 				viewAll: "View all",
 			},

app/routes/_.cms._index/queries.ts

@@ -11,19 +11,22 @@ import { Tables, database } from "~/services/db.server";
 export async function queryStats(context: AppLoadContext) {
 	let db = database(context.db);
 
-	let [articles, likes, tutorials] = await Promise.all(
-		["article" as const, "like" as const, "tutorial" as const].map(
-			async (type) => {
-				let results = await db
-					.select({ value: count() })
-					.from(Tables.posts)
-					.where(eq(Tables.posts.type, type));
-				return results.at(0)?.value ?? 0;
-			},
-		),
+	let [articles, likes, tutorials, glossary] = await Promise.all(
+		[
+			"article" as const,
+			"like" as const,
+			"tutorial" as const,
+			"glossary" as const,
+		].map(async (type) => {
+			let results = await db
+				.select({ value: count() })
+				.from(Tables.posts)
+				.where(eq(Tables.posts.type, type));
+			return results.at(0)?.value ?? 0;
+		}),
 	);
 
-	return { articles, likes, tutorials };
+	return { articles, likes, tutorials, glossary };
 }
 
 export async function createQuickLike(

app/routes/_.cms._index/stats.tsx

@@ -22,15 +22,20 @@ export function Stats() {
 			path: "tutorials",
 			stat: loaderData.stats.tutorials,
 		},
-	];
+		{
+			name: t("total.glossary"),
+			path: "glossary",
+			stat: loaderData.stats.glossary,
+		},
+	] satisfies Array<{ name: string; path: string; stat: number }>;
 
 	return (
 		<div className="flex flex-col gap-5">
 			<Heading className="text-base font-semibold leading-6 text-zinc-900 dark:text-zinc-50">
 				{t("title")}
 			</Heading>
 
-			<dl className="grid grid-cols-1 gap-5 sm:grid-cols-3">
+			<dl className="grid grid-cols-1 gap-5 sm:grid-cols-4">
 				{stats.map((item) => (
 					<div
 						key={item.name}