added voting

e

src/lib/components/Area.svelte

@@ -0,0 +1,60 @@
+<style>
+    #content {
+        background: var(--dark-1);
+
+        width: min(700px, 90vw);
+        padding: 20px;
+        padding-top: 8px;
+        margin: 25px;
+
+        border-radius: 25px;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    #header {
+        font-weight: bold;
+        
+        font-size: 2rem;
+
+        width: 100%;
+
+        padding: 0;
+    }
+
+    #main {
+        min-height: 250px;
+    }
+
+    #main.tiny {
+        min-height: initial;
+        height: 100px;
+        overflow: hidden;
+    }
+</style>
+
+
+<script>
+    export let tiny = false;
+
+    let form;
+</script>
+
+<div id='content'>
+    <div id='header'>
+        <slot name="header">
+            Header
+        </slot>
+    </div>
+    <div id='main' class='{tiny ? "tiny" : ""}'>
+        <slot name="main">
+            <p>Content</p>
+        </slot>
+    </div>
+    <div id='footer'>
+        <slot name="footer">
+            <p>Footer</p>
+        </slot>
+    </div>
+</div>

src/lib/components/Post.svelte

@@ -0,0 +1,93 @@
+<script>
+    import Area from '$lib/components/Area.svelte';
+
+    export let success, username, content, upvotes, downvotes, id;
+
+    let query = (id) ? `/post/${id}` : '';
+    
+    let contentSplit = content.split('\n');
+
+    let fData;
+
+    function vote(v) {
+        fData = (new FormData());
+
+        fData.append('vote',v);
+        fData.append('id',id);
+
+        fetch('/api/vote', {
+            method: 'POST',
+            body: fData
+        }).then(async x => {
+            var j = (await x.json());
+            upvotes = j.data.up;
+            downvotes = j.data.down;
+        })
+    }
+</script>
+
+<style>
+    .button {
+        width: auto;
+        height: 35px;
+    }
+    .votes {
+        font-weight: bold;
+        font-size: 1.5rem;
+    }
+    .vote-area {
+        margin-right: 30px;
+    }
+</style>
+
+{#if success}
+    <Area>
+        <p slot="header">
+            Error
+        </p>
+        <p slot="main">
+            {success}
+        </p>
+        <p slot="footer">
+            Failed to get post.
+        </p>
+    </Area>
+{:else}
+    <Area tiny='{!!id}'>
+        <span slot="header">
+            <a href='/users/{username}'>
+                {username}
+            </a>
+        </span>
+        <span slot="main">
+            {#each contentSplit as line}
+                <p>{line}</p>
+            {/each}
+        </span>
+        <span slot="footer">
+            <span class='vote-area'>
+                <a on:click={() => vote('up')} href=''>
+                    <img src='/upvote.svg' class='button' alt='Upvote'>
+                </a>
+                <span class='votes'>
+                    {upvotes + 0}
+                </span>
+            </span>
+            <span class='vote-area'>
+                <a on:click={() => vote('down')} href=''>
+                    <img src='/downvote.svg' class='button' alt='Downvote'>
+                </a>
+                <span class='votes'>
+                    {downvotes + 0}
+                </span>
+            </span>
+            {#if id}
+                <span class='vote-area'>
+                    <a href='/post/{id}'>
+                        <img src='/view.svg' class='button' alt='View'>
+                    </a>
+                </span>
+            {/if}
+        </span>
+    </Area>
+{/if}