added everything

.

src/routes/+layout.svelte

@@ -46,6 +46,9 @@
         flex-direction: row;
         flex-wrap: wrap;
         align-items: center;
+
+        position: sticky;
+        top: 0;
     }
 
     #logo a {

src/routes/+page.js

@@ -0,0 +1,15 @@
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch, params, url }) {
+    var search = url.searchParams;
+
+    var voteType = search.get('vote');
+
+    var id = search.get('page') * 1;
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const res = await fetch(`/api/explore?page=${id}`);
+    const postJson = await res.json();
+
+    return { postJson, id };
+}

src/routes/+page.svelte

@@ -1,15 +1,22 @@
 <script>
-    import Area from '$lib/Area.svelte';
+    import Post from '$lib/Post.svelte';
+
+    /** @type {import('./$types').PageData} */
+    export let data;
 </script>
 
-<Area>
-    <p slot="header">
-        Welcome to SvelteKit
-    </p>
-    <p slot="main">
-        Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
-    </p>
-    <p slot="footer">
-        
-    </p>
-</Area>
+{#each data.postJson as post}
+    <Post
+        success={post.success}
+        username={post.username}
+        content={post.content}
+        upvotes={post.upvotes}
+        downvotes={post.downvotes}
+        id={post.id}
+    ></Post>
+{/each}
+
+<p>
+    <a data-sveltekit-reload href='?page={data.id+1}'>Next page</a>
+</p>
+<p></p>

src/routes/api/explore/+server.js

@@ -0,0 +1,10 @@
+import { postGetBulkBackend } from '../../../lib/db.js';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ url, cookies }) {
+    var page = url.searchParams.get('page') * 1;
+
+    var postData = await postGetBulkBackend({ rows: 5, page });
+
+    return new Response(JSON.stringify(postData));
+};

src/routes/api/vote/+server.js

@@ -0,0 +1,17 @@
+import { tokenBackend, voteBackend } from '../../../lib/db.js';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ url, cookies }) {
+    var token = cookies.get('token') || '';
+
+    var user = await tokenBackend({token});
+
+    if (!user) return;
+
+    var id = url.searchParams.get('post');
+    var vote = url.searchParams.get('vote');
+
+    voteBackend({user,id,vote});
+
+    return new Response();
+};

src/routes/post/[post]/+page.js

@@ -1,12 +1,19 @@
 /** @type {import('./$types').PageLoad} */
 export async function load({ fetch, params, url }) {
+    var search = url.searchParams;
+
+    var voteType = search.get('vote');
+
     var id = params.post;
+
+    if (voteType) {
+        await fetch(`/api/vote?post=${id}&vote=${voteType}`);
+    }
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+
     const res = await fetch(`/api/post?post=${id}`);
     const postJson = await res.json();
 
-    var search = url.searchParams;
-
-    var voteType = (search.get('upvote')) ? 1 : ((search.get('downvote')) ? 2 : 0);
-    
-    return { postJson };
+    return postJson;
 }

src/routes/post/[post]/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Area from '$lib/Area.svelte';
+    import Post from '$lib/Post.svelte';
 
     /** @type {import('./$types').PageData} */
     export let data;
@@ -7,59 +7,10 @@
     export let form;
 </script>
 
-<style>
-    .button {
-        width: auto;
-        height: 75px;
-    }
-    .votes {
-        font-weight: bold;
-        font-size: 1.5rem;
-    }
-    .vote-area {
-        margin-right: 30px;
-    }
-</style>
-
-{#if data.postJson.success}
-    <Area>
-        <p slot="header">
-            Error
-        </p>
-        <p slot="main">
-            {data.postJson.success}
-        </p>
-        <p slot="footer">
-            Failed to get post.
-        </p>
-    </Area>
-{:else}
-    <Area>
-        <p slot="header">
-            <a href='/users/{data.postJson.username}'>
-                {data.postJson.username}
-            </a>
-        </p>
-        <p slot="main">
-            {data.postJson.content}
-        </p>
-        <p slot="footer">
-            <span class='vote-area'>
-                <a href='?upvote'>
-                    <img src='/upvote.svg' class='button' alt='Upvote'>
-                </a>
-                <span class='votes'>
-                    {data.postJson.upvotes + 0}
-                </span>
-            </span>
-            <span class='vote-area'>
-                <a href='?downvote'>
-                    <img src='/downvote.svg' class='button' alt='Downvote'>
-                </a>
-                <span class='votes'>
-                    {data.postJson.downvotes + 0}
-                </span>
-            </span>
-        </p>
-    </Area>
-{/if}
+<Post
+    success={data.success}
+    username={data.username}
+    content={data.content}
+    upvotes={data.upvotes}
+    downvotes={data.downvotes}
+></Post>