base homepage

src/lib/mabel-types.ts

@@ -4,12 +4,20 @@ export interface Site {
 	owner_display_name: string;
 	title: string;
 	description: string | null;
-	collections: { slug: string; name: string }[];
+	collections: Collection[];
+	default_collection: string;
 	created_at: string;
 	modified_at: string | null;
 	deleted_at: string | null;
 }
 
+export interface Collection {
+	id: string;
+	name: string;
+	slug: string;
+	parent: string | null;
+}
+
 export interface Post {
 	id: string;
 	site: string;
@@ -24,3 +32,8 @@ export interface Post {
 	modified_at: string | null;
 	deleted_at: string | null;
 }
+
+export interface PaginatedWithCursor<T, C> {
+	items: T[];
+	next_cursor: C | null;
+}

src/routes/+page.svelte

@@ -1 +1,18 @@
-<h1>Hello world</h1>
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+{#if data.pages}
+	{#each data.pages.items as post}
+		<article>
+			<header>
+				<h2>{post.title}</h2>
+				<h4>by {post.author_display_name} on {new Date(post.created_at).toLocaleDateString()}</h4>
+			</header>
+		</article>
+	{/each}
+{:else}
+	<!-- TODO Zero state here -->
+{/if}

src/routes/+page.ts

@@ -0,0 +1,15 @@
+import { PUBLIC_API_BASE } from '$env/static/public';
+import type { PaginatedWithCursor, Post } from '$lib/mabel-types';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ parent }) => {
+	const { site } = await parent();
+
+	const data = await fetch(
+		`${PUBLIC_API_BASE}/collections/${site.name}/${site.default_collection}/posts`
+	);
+
+	return {
+		pages: (await data.json()) as PaginatedWithCursor<Post, string>
+	};
+}) satisfies PageLoad;