Basic post display

src/routes/+page.svelte

@@ -1,2 +1,41 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+import { onMount } from "svelte";
+import type { PageData } from './$types';
+import type { Post } from '$lib/mastodon/response';
+import { PUBLIC_REFRESH_INTERVAL } from '$env/static/public';
+import PostComponent from '$lib/components/PostComponent.svelte';
+
+export let data: PageData;
+
+let interval: NodeJS.Timer | null = null;
+
+onMount(async () => {
+  interval = setInterval(async () => {
+    const params = new URLSearchParams();
+    if (data.posts.length > 0) {
+      params.set('since', data.posts[0].created_at);
+    }
+    await fetch(`/api/posts?${params}`)
+    .then(r => r.json())
+    .then((resp: Post[]) => {
+      if (resp.length > 0) {
+        data.posts = resp.concat(data.posts);
+        console.log('updated data', resp, data.posts);
+      }
+    })
+    .catch(e => {
+      // TODO: Show error in UI
+      console.error('Error loading newest posts', e);
+    });
+  }, parseInt(PUBLIC_REFRESH_INTERVAL));
+  return () => {
+    if (interval !== null) {
+      clearInterval(interval)
+    }
+  }
+})
+</script>
+
+{#each data.posts as post (post.id)}
+  <PostComponent {post}></PostComponent>
+{/each}