feat(moments): add support for different category of moment related e…

…ssays
kingsdigitallab · Oct 31, 2024 · 4329708 · 4329708
1 parent 5498ecc
commit 4329708
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 66 deletions.
diff --git a/src/lib/moments.ts b/src/lib/moments.ts
@@ -33,7 +33,7 @@ export function getMomentN(n: number | string) {
 	return String(n).padStart(2, '0');
 }
 
-export async function getResearch(moment: string) {
+export async function getResearch(moment: string): Promise<Record<string, Moment[]>> {
 	const essays = [];
 
 	const paths = import.meta.glob(['/src/moments/*/*.md', '!/src/moments/*/index.md'], {
@@ -57,5 +57,17 @@ export async function getResearch(moment: string) {
 		}
 	}
 
-	return essays;
+	const defaultCategory = 'Academic';
+
+	const essaysByCategory = essays
+		.sort((a, b) => a.category?.localeCompare(b.category || '') || a.title.localeCompare(b.title))
+		.reduce<Record<string, typeof essays>>((acc, essay) => {
+			const category = essay?.category || defaultCategory;
+
+			acc[category] = acc[category] || [];
+			acc[category].push(essay);
+			return acc;
+		}, {});
+
+	return essaysByCategory;
 }
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -14,6 +14,7 @@ export type Moment = {
 	excerpt: string;
 	feature: Feature;
 	tags: string[];
+	category?: string;
 };
 
 export type TableNames = keyof Database['public']['Tables'];

diff --git a/src/moments/04/student.md b/src/moments/04/student.md
@@ -0,0 +1,9 @@
+---
+title: 'Test Student Essay'
+tags:
+  - moment
+  - essay
+category: student
+---
+
+This is a student essay to test the different categories of essays.
diff --git a/src/routes/moments/[slug]/+layout.ts b/src/routes/moments/[slug]/+layout.ts
@@ -6,15 +6,14 @@ export async function load({ data, params }) {
 		const moment = await import(`../../../moments/${params.slug}/index.md`);
 
 		const moments = await getMoments();
-		const essays = await getResearch(params.slug);
+		const essaysByCategory = await getResearch(params.slug);
 
 		return {
 			slug: getMomentN(moment.metadata.n),
 			meta: moment.metadata,
 			content: moment.default,
 			moments,
-			essays,
-			momentPeople: data.momentPeople,
+			essaysByCategory,
 			people: data.people
 		};
 	} catch (e) {

diff --git a/src/routes/moments/[slug]/+page.svelte b/src/routes/moments/[slug]/+page.svelte
@@ -2,88 +2,93 @@
 	import Moment from '$lib/components/moment.svelte';
 
 	export let data;
-	const { slug, meta, content, moments, essays, people } = data;
+	const { slug, meta, content, moments, essaysByCategory, people } = data;
 </script>
 
 <Moment {meta} {content} {moments}>
-	{#if essays?.length || people?.length}
-		<section class="links">
-			{#if essays?.length}
-				<section class="info">
-					<h2>Detailed research</h2>
-					<ul>
-						{#each essays as essay}
-							<li><a href="{slug}/{essay.slug}">{essay.title}</a></li>
-						{/each}
-					</ul>
-				</section>
-			{/if}
+	{#if essaysByCategory}
+		<section class="info">
+			<h2>Detailed research</h2>
 
-			{#if people?.length}
-				<section class="info">
-					<h2>King's lives</h2>
-					<ul>
-						{#each people as person}
-							<li data-pagefind-filter="Person">
-								<a href="../database/people/{person.slug}">{person.name}</a>
-							</li>
-						{/each}
-					</ul>
-				</section>
-			{/if}
+			{#each Object.entries(essaysByCategory) as [category, essays]}
+				<h3>{category.charAt(0).toUpperCase() + category.slice(1)}</h3>
+				<ul>
+					{#each essays as essay}
+						<li><a href="{slug}/{essay.slug}">{essay.title}</a></li>
+					{/each}
+				</ul>
+			{/each}
+		</section>
+	{/if}
+
+	{#if people?.length}
+		<section class="info">
+			<details>
+				<summary>King's lives </summary>
+				<ul>
+					{#each people as person}
+						<li data-pagefind-filter="Person">
+							<a href="../database/people/{person.slug}">{person.name}</a>
+						</li>
+					{/each}
+				</ul>
+			</details>
 		</section>
 	{/if}
 </Moment>
 
 <style>
-	.links {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(var(--size-14), 1fr));
-		grid-gap: var(--size-8);
+	section.info {
+		max-width: 50rem;
 		width: 100%;
 
-		& section {
-			padding-block: var(--size-4);
-			padding-inline: var(--size-4);
-		}
-	}
-
-	.links :is(ul) {
-		list-style-type: disc;
-		padding-left: var(--size-5);
-	}
-
-	.links :is(ol, ul) li {
-		font-size: var(--font-size-3);
-		margin-block: var(--size-2);
-		padding-inline-start: var(--size-2);
-	}
-	section.info {
 		background-color: white;
+		padding-inline: var(--size-4);
 		padding: 0;
-		margin: var(--size-3);
+
+		& details {
+			background-color: inherit;
+
+			& summary {
+				border-radius: 0;
+				font-family: var(--font-headings);
+				font-size: var(--font-size-5);
+				font-weight: var(--font-weight-2);
+			}
+		}
+
 		& h2 {
 			background-color: var(--powder-blue);
-			margin: 0;
-			padding: var(--size-3) var(--size-4);
-			font-weight: 200;
 			font-size: var(--font-size-5);
+			font-weight: 200;
+			margin: 0;
 			min-width: 100%;
+			padding: var(--size-3) var(--size-4);
 		}
+
 		& ul {
 			list-style-type: none;
 			margin-left: -10px;
-			& li a {
-				display: block;
-				text-decoration: none;
-				padding-left: var(--size-3);
-				border-left: var(--size-2) solid var(--surface-1);
-				width: calc(100% - var(--size-2));
-				&:hover {
-					background-color: var(--midnight-blue);
-					border-left: var(--size-2) solid var(--yellow);
-					opacity: 1;
-					color: white;
+			padding-left: var(--size-5);
+
+			& li {
+				font-size: var(--font-size-3);
+				margin-block: var(--size-2);
+				padding-inline-start: var(--size-2);
+
+				& a {
+					border-left: var(--size-2) solid var(--surface-1);
+					display: block;
+					padding-left: var(--size-3);
+					text-decoration: none;
+					width: calc(100% - var(--size-2));
+
+					&:hover {
+						background-color: var(--midnight-blue);
+						border-left: var(--size-2) solid var(--yellow);
+						color: white;
+						opacity: 1;
+					}
 				}
 			}
 		}