Added profile pictures

src/routes/pfp/[img]/+server.js

@@ -0,0 +1,24 @@
+import { VALID_EXTENSIONS } from '../../../lib/db/db.js';
+
+import { readFile } from 'node:fs/promises';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ url, cookies, params }) {
+    var imgName = params['img'];
+
+    imgName = imgName.replace(/(\s+)/g, '\\$1');
+
+    var res;
+
+    var res = await readFile(`${process.cwd()}/db/pfp-${imgName}`);
+
+    var response = new Response(res);
+    var extension = imgName.split('.').pop();
+
+    if (extension == 'svg') {
+        response = new Response(res, {'headers': {
+            'Content-Type':  'image/png'
+        }});
+    }
+    return response;
+}

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

@@ -20,5 +20,8 @@ export async function load({ fetch, params, url }) {
     const resUserBio = await fetch(`/api/userBio?user=${user}`);
     const postJsonUserBio = (await resUserBio.json()) || {};
 
-    return { postJson, id, postJsonUser, postJsonUserBio, user };
+    const resAccData = await fetch(`/api/token`);
+    const resAcc = (await resAccData.json()) || {};
+
+    return { resAcc, postJson, id, postJsonUser, postJsonUserBio, user };
 }

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

@@ -2,10 +2,13 @@
     import Button from '$lib/components/Button.svelte'
     import Area from '$lib/components/Area.svelte';
     import PostList from '$lib/components/PostList.svelte';
+    import FileUpload from '$lib/components/FileUpload.svelte';
 
     /** @type {import('./$types').PageData} */
     export let data;
 
+    let uploadForm = {};
+
     let userData = data.postJsonUser.data;
     let userBio = data.postJsonUserBio.data;
 
@@ -32,16 +35,29 @@
     .follower {
         margin-right: 1.5rem;
     }
+
+    .pfp {
+        width: 50px;
+        height: 50px;
+        margin-right: 10px;
+    }
+
+    #header {
+        display: flex;
+        align-content: center;
+    }
 </style>
 
 {#if userData}
     <Area>
-        <span slot="header">
+        <span slot="header" id='header'>
+            <img class='pfp' src='/pfp/{userData.username}.png'/>
             <a href='/users/{userData.username}'>
                 {userData.username}
             </a>
         </span>
         <span slot="main">
+            <div class='left'></div>
             <p>
                 <b>Reputation:</b> {userData.reputation}
             </p>
@@ -57,13 +73,21 @@
 
             <h2>Following</h2>
             {#each following as user}
-                <a class='follower' href='/user/{user.following}'>{user.following}</a>
+                <a class='follower' href='/user/{user.following}'>
+                    <img class='pfp' src='/pfp/{user.following}.png'/> 
+                </a>
             {/each}
 
             <h2>Followers</h2>
             {#each followers as user}
-                <a class='follower' href='/user/{user.username}'>{user.username}</a>
+                <a class='follower' href='/user/{user.username}'>
+                    <img class='pfp' src='/pfp/{user.username}.png'/>    
+                </a>
             {/each}
+            {#if data.resAcc.data == userData.username}
+                <h2>Set PFP</h2>
+                <FileUpload bind:form={uploadForm} type='small' apiUrl={'/api/pfp'}/>
+            {/if}
         </span>
         <span slot="footer">
             <Button clickFunc={follow}>