feat: add client dates & sorting

Author: KodingDev

src/components/home/Client.svelte

@@ -4,6 +4,14 @@
 	export let client: ClientItem;
 
 	const { name, description, website, logo, cover } = client;
+
+    const formatDate = (date: Date) =>  date.toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric',
+    });
+
+    const start = formatDate(client.dates.start);
+    const end = client.dates.end ? formatDate(client.dates.end) : 'Present';
 </script>
 
 <a href={website} rel="noopener noreferrer" target="_blank">
@@ -20,9 +28,15 @@
             </div>
 		{/if}
 
-        <div class="px-4 pb-4">
-            <h2 class="font-medium text-blue-400">{name}</h2>
-            <p class="text-body line-clamp-2 text-ellipsis">{description}</p>
+        <div class="px-4 pb-4 flex flex-col justify-between h-full">
+            <div>
+                <h2 class="font-medium text-blue-400">{name}</h2>
+                <p class="text-body line-clamp-2 text-ellipsis">{description}</p>
+            </div>
+            
+            <div class="pt-2">
+                <p class="text-sm text-neutral-500 dark:text-neutral-400">{start} - {end}</p>
+            </div>
         </div>
 	</div>
 </a>

src/routes/+page.server.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { NOTION_CLIENTS_DB_ID, NOTION_KEY } from '$env/static/private';
 import { Client } from '@notionhq/client';
-import type { PageServerLoad } from './$types';
-import { NOTION_KEY, NOTION_CLIENTS_DB_ID } from '$env/static/private';
 import type { PageObjectResponse } from '@notionhq/client/build/src/api-endpoints';
+import { convertNotionDates, convertRichText } from '../utils/notion';
+import type { PageServerLoad } from './$types';
 
 const notion = new Client({ auth: NOTION_KEY });
 
@@ -20,19 +21,37 @@ export const load: PageServerLoad = async ({ fetch }) => {
 		}
 	});
 
-	const clients: ClientItem[] = pages.results.map((_page) => {
-		const page = _page as PageObjectResponse;
-		const properties = page.properties;
+	const clients: ClientItem[] = pages.results
+		.map((_page) => {
+			const page = _page as PageObjectResponse;
+			const properties = page.properties;
 
-		return {
-			name: (properties.Name as any).title[0].plain_text,
-			description: (properties.Description as any).rich_text[0]?.plain_text ?? "Very mysterious!",
-			website: (properties.Website as any).url,
-			
-			logo: (page.icon as any).file.url,
-			cover: (page.cover as any).file.url,
-		}
-	});
+			// Type assertion
+			if (properties.Name.type !== 'title') throw new Error('Name is not a title');
+			if (properties.Description.type !== 'rich_text')
+				throw new Error('Description is not rich text');
+			if (properties.Website.type !== 'url') throw new Error('Website is not a URL');
+			if (properties['Working Since'].type !== 'date')
+				throw new Error('Working Since is not a date');
+
+			if (page.icon?.type !== 'file') throw new Error('Logo is not a file');
+			if (page.cover?.type !== 'file') throw new Error('Cover is not a file');
+
+			// Convert dates
+			const dates = properties['Working Since'].date
+				? convertNotionDates(properties['Working Since'].date)
+				: { start: new Date(), end: null };
+
+			return {
+				name: convertRichText(properties.Name.title) || '',
+				description: convertRichText(properties.Description.rich_text) || 'Very mysterious!',
+				website: properties.Website.url || undefined,
+				dates,
+				logo: page.icon.file.url,
+				cover: page.cover.file.url
+			};
+		})
+		.sort((a, b) => (b.dates.end ?? new Date()).getTime() - (a.dates.end ?? new Date()).getTime());
 
 	return { pinned, clients };
 };
@@ -65,6 +84,7 @@ export interface ClientItem {
 	name: string;
 	description: string;
 	website?: string;
+	dates: ReturnType<typeof convertNotionDates>;
 
 	logo?: string;
 	cover?: string;

src/utils/notion.ts

@@ -0,0 +1,17 @@
+import type { RichTextItemResponse } from '@notionhq/client/build/src/api-endpoints';
+
+export type DateResponse = {
+	start: string;
+	end: string | null;
+};
+
+export const convertNotionDates = (date: DateResponse) => {
+	const start = new Date(date.start);
+	const end = date.end ? new Date(date.end) : null;
+	return { start, end };
+};
+
+export const convertRichText = (text: Array<RichTextItemResponse> | undefined) => {
+	if (!text) return null;
+	return text.map((item) => item.plain_text).join('');
+};