use the new api

20 files changed, 186 insertions, 273 deletions

diff --git a/README.md b/README.md
index 375e724..975962f 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,15 @@
 ### Scale
 
-This is scale webapp made using astro, its faster and better, because i know what i am doing this time. Its just better.
+This the scale project. This is the frotend of a simple image board.
+You can find the API [here](https://git.batnako.net/scale-api.git/).
 
-### Build
+### Build and Run
 
-To build and run see `run.sh`.
+For development I use: `NODE_TLS_REJECT_UNAUTHORIZED=0 DEV=1 npm run dev`
+To delpoy it with docker: `docker-compose up scale`
 
-For deploying only the `dist/` directory (genereted by `npm run build`)
-is needed and the 'server.mjs' file.
-Using the nodejs command in `run.sh`.
+### What can it do?
 
-Note: When running with node the image saving wont work properly
-because of different directories with images.
-
-### What can it do
-
-It can do whatever the
-[scale app made with svelte](https://gitlab.com/scale-project/scale)
-can, but faster and better, for info about the project see its readme.
+You can post images and text into threads and comments, and quote other people.
+It is a image board, what did you expect?
+It uses Astro and NodeJS for server-side rendering.
diff --git a/docker-compose.yaml b/docker-compose.yaml
new file mode 100644
index 0000000..046eb60
--- /dev/null
+++ b/docker-compose.yaml
@@ -0,0 +1,18 @@
+version: "3.4"
+services:
+  scale:
+    image: "node:latest"
+    container_name: scale
+    user: "node"
+    working_dir: /home/node/app
+    environment:
+      - NODE_ENV=production
+    volumes:
+      - ./:/home/node/app
+    ports:
+      - "3000:3000"
+    entrypoint: ["/bin/sh","-c"]
+    command:
+      - |
+        npm run build
+        node server.mjs
diff --git a/package-lock.json b/package-lock.json
index b58cbe8..37dd482 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,10 @@
       "dependencies": {
         "@astrojs/node": "^1.0.0",
         "express": "^4.18.1",
-        "js-sha256": "^0.9.0",
         "uuid": "^8.3.2"
       },
       "devDependencies": {
-        "astro": "^1.0.8",
-        "svelte": "^3.49.0"
+        "astro": "^1.0.8"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2978,11 +2976,6 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
-    "node_modules/js-sha256": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
-      "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5520,15 +5513,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/svelte": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -8395,11 +8379,6 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
-    "js-sha256": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
-      "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10120,12 +10099,6 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
-    "svelte": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
-      "dev": true
-    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
diff --git a/package.json b/package.json
index facbacf..890f63d 100644
--- a/package.json
+++ b/package.json
@@ -10,13 +10,11 @@
     "astro": "astro"
   },
   "devDependencies": {
-    "astro": "^1.0.8",
-    "svelte": "^3.49.0"
+    "astro": "^1.0.8"
   },
   "dependencies": {
     "@astrojs/node": "^1.0.0",
     "express": "^4.18.1",
-    "js-sha256": "^0.9.0",
     "uuid": "^8.3.2"
   }
 }
diff --git a/run.sh b/run.sh
deleted file mode 100755
index 4a285e9..0000000
--- a/run.sh
+++ /dev/null
@@ -1,11 +0,0 @@
-#!/bin/sh
-
-cd ${0%/*} # go to project root
-set -xe
-
-# development
-NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev -- --host
-
-# deploy
-# npm run build
-# NODE_TLS_REJECT_UNAUTHORIZED=0 node server.mjs
diff --git a/src/components/Form.astro b/src/components/Form.astro
index 540a4d4..93192a0 100644
--- a/src/components/Form.astro
+++ b/src/components/Form.astro
@@ -1,20 +1,17 @@
 ---
-import { sha256 } from 'js-sha256';
-
 export interface Props {
   board: string;
   tid?: string
 }
 
 const { board, tid } = Astro.props;
-const iphash = sha256(Astro.clientAddress);
 ---
 
 <div class="blackbox">
   <slot />
 </div>
 
-<script define:vars={{ board, iphash, tid }}>
+<script define:vars={{ board, tid }}>
   document.forms['form'].addEventListener('submit', async (event) => {
     event.preventDefault();
 
@@ -34,16 +31,17 @@ const iphash = sha256(Astro.clientAddress);
       }).then(async (r) => {
         if(r.status == 200) {
           alert('Thread Successfuly Posted');
-          let id = await r.text();
-          if(id == 'close') window.top.close();
-          window.location.assign(`/board/${board}/${id}`);
+          let t = await r.text();
+          if(t == 'close') window.top.close();
+          window.location.assign(`/board/${board}`);
+        }
+        else {
+          alert(`An Error has Accured: ${r.status} ${t}`);
         }
-        else alert('An Error has Accured');
       })
     }
 
     form.append('board', board);
-    form.append('iphash', iphash);
     if(tid) form.append('tid', tid);
 
     let image = document.getElementById("image").files[0];
diff --git a/src/components/Post.astro b/src/components/Post.astro
index 6805846..1aa7a0d 100644
--- a/src/components/Post.astro
+++ b/src/components/Post.astro
@@ -1,27 +1,24 @@
 ---
-import { creatorColor, formatTime } from '../lib/util';
+import { formatTime } from '../lib/util';
 
 export interface Props {
   id: string;
   date: number;
-  creator: string;
   box: string;
   board: string
 }
 
-const { id, date, creator, box, board = '' } = Astro.props;
+const { id, date, box, board = '' } = Astro.props;
 ---
 <div class={box} id={id}>
   <span style="line-height: 2rem;">
     {(board != '') ? (
       <a href=`/board/${board}/${id}` style="font-family: mono">{id}</a>
     ) : (
-      <span style="font=family: mono">{id}</span>
+      <span style="font-family: mono">{id}</span>
     )}
 
     at {formatTime(date)} <br>
-    ->  <span style=`${creatorColor(creator)}; font-family: mono`>
-      {creator}
     </span> <br>
   </span> <hr>
   <slot />
diff --git a/src/components/Thread.astro b/src/components/Thread.astro
index 6fae3de..7b60227 100644
--- a/src/components/Thread.astro
+++ b/src/components/Thread.astro
@@ -6,10 +6,9 @@ import Image from './Image.astro';
 export interface Props {
   thread: Thread;
   board: string;
-  comments: boolean;
 }
 
-const { thread, board, comments = false } = Astro.props;
+const { thread, board } = Astro.props;
 
 let replies: string[] = [];
 const listReplies = (id: string, getReplies: boolean = false): any => {
@@ -17,7 +16,7 @@ const listReplies = (id: string, getReplies: boolean = false): any => {
 
   replies = [];
   thread.comments.forEach(comment => {
-    if(comment.commentText.includes(id))
+    if(comment.content.includes(id))
       replies.push(comment.id);
   })
 
@@ -27,9 +26,9 @@ const listReplies = (id: string, getReplies: boolean = false): any => {
 ---
 
 {(thread.id != "rules") && ( <>
-  <Post id={thread.id} date={thread.creationDate} creator={thread.threadCreator} box="threadbox" board={(!comments) ? board : ''}>
+  <Post id={thread.id} date={thread.timestamp} box="threadbox" board={(thread.comments == undefined) ? board : ''}>
 
-    {comments && (listReplies(thread.id) && (
+    {thread.comments != undefined && (listReplies(thread.id) && (
       <span class="small-mono">
         {listReplies(thread.id, true).map((id) => ( <>
           <a href=`/board/${board}/${thread.id}#${id}` onmouseover=`onMouseOver('${id}')` onmouseleave=`onMouseLeave('${id}')`>>>{id}</a>&#65279;
@@ -38,13 +37,13 @@ const listReplies = (id: string, getReplies: boolean = false): any => {
     ))}
 
 
-    <h3>{thread.threadName}</h3>
-    <Image image={thread.imageId} fileType={thread.fileType} />
-    <p set:html={thread.threadText} />
+    <h3>{thread.title}</h3>
+    <Image image={thread.image} fileType={thread.imagetype} />
+    <p set:html={thread.content} />
 
-    {comments && ( <>
+    {thread.comments != undefined && ( <>
       {thread.comments.map((comment) => ( <>
-        <Post id={comment.id} date={comment.creationDate} creator={comment.commentCreator} box="commentbox">
+        <Post id={comment.id} date={comment.timestamp} box="commentbox">
 
           {listReplies(comment.id) && (
             <span class="small-mono">
@@ -54,8 +53,8 @@ const listReplies = (id: string, getReplies: boolean = false): any => {
             </span> <hr>
           )}
 
-          <Image image={comment.imageId} fileType={comment.fileType} />
-          <p set:html={comment.commentText} />
+          <Image image={comment.image} fileType={comment.imagetype} />
+          <p set:html={comment.content} />
 
         </Post>
       </> ))}
@@ -64,7 +63,7 @@ const listReplies = (id: string, getReplies: boolean = false): any => {
   </Post>
 </> )}
 
-{comments && ( <>
+{thread.comments != undefined && ( <>
   <script is:inline>
     function onMouseOver(id) {
       document.getElementById(id).classList.add('targeted');
diff --git a/src/lib/api.ts b/src/lib/api.ts
index e6ac0f1..160e308 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,12 +1,11 @@
-const base = 'https://localhost:5001/api'
+const base = 'http://localhost:6969'
 
 export async function api(method: string, resource: string, data?: any) {
-  // console.log("API USED", method, resource, data);
-  return await fetch(`${base}/${method}/${resource}`, {
-	method,
-	headers: {
-	  'content-type': 'application/json'
-	},
-	body: data
-  });
+    return await fetch(`${base}/${resource}`, {
+	    method,
+	    headers: {
+	        'content-type': 'application/json'
+	    },
+	    body: data
+    });
 }
diff --git a/src/lib/image.ts b/src/lib/image.ts
index 6ab20a5..3f19128 100644
--- a/src/lib/image.ts
+++ b/src/lib/image.ts
@@ -1,39 +1,25 @@
-import { api } from './api';
 import { v4 as uuidV4 } from 'uuid';
 import { writeFileSync } from 'fs';
 
-export async function getImg(imgId: string) {
-  if(imgId == null || imgId == '' || imgId == undefined) return null;
-
-  const response = await api('get', `image/${imgId}`)
-
-  if(response.status !== 200) return `Server error: ${response.status}`;
-  return response.text();
-}
-
-export async function postImg(img: string) {
-  if(!img) return null;
-
-  img = img.split(':')[1];        // remove 'data:' part
-  let img_b64= img.split(',')[1]; // remove header
-  let fileExt = img.split(',')[0].split('/')[1].split(';')[0];
-  let filename = `${uuidV4()}.${fileExt}`;
+export function saveImg(img: string): string
+{
+    if(!img) return null;
 
-  //save file in this server
-  // writeFileSync(`dist/client/images/${filename}`, img_b64, "base64");
-  writeFileSync(`public/images/${filename}`, img_b64, "base64");
+    let filename = `/images/${uuidV4()}.${img.split(';')[0].split('/')[1]}`;
 
-  let data = {
-    'name': filename,
-    'base64': img_b64
-  };
-  await api('post', 'image', JSON.stringify(data));
+    let path;
+    if(process.env.DEV) {
+        path = `public/${filename}`;
+    } else {
+        path = `dist/client/${filename}`;
+    }
+    writeFileSync(path, img.split(',')[1], "base64");
 
-  return filename;
+    return filename;
 }
 
 export function getImgType(img: string): string
 {
-  if(!img) return null;
-  return img.split('/')[0].split(':')[1];
+    if(!img) return null;
+    return img.split('/')[0].split(':')[1];
 }
diff --git a/src/lib/thread.ts b/src/lib/thread.ts
index 2199318..d7460c7 100644
--- a/src/lib/thread.ts
+++ b/src/lib/thread.ts
@@ -1,115 +1,92 @@
 import { existsSync } from 'fs';
 import { v4 as uuidV4, v5 as uuidV5, NIL as uuidNIL } from 'uuid';
 
-import { getImg, postImg, getImgType } from './image';
+import { saveImg, getImgType } from './image';
 import type { Thread, Comment } from '../models/Thread'
 
-export async function processThreadIn(board: string, thread: Thread, comments = false) {
-  if(!thread || !board) return;
-  let imageId: string = thread.imageId;
-
-  // if(existsSync(`dist/client/images/${imageId}`))
-  if(existsSync(`public/images/${imageId}`))
-	thread.imageId = `/images/${imageId}`;
-  else
-	thread.imageId = await getImg(imageId);
-
-  thread.threadText = replaceURLs(thread.threadText, board, thread.id);
+export async function processThreadIn(board: string, thread: Thread) {
+    for(let comment of thread.comments) {
+        comment.id += thread.id;
+        comment.content = replaceURLs(comment.content, board, thread.id);
+    }
+}
 
-  if(!comments) return;
+export function processThreadOut(form: any): Thread {
+    let img = form.get('image');
 
-  for(let comment of thread.comments)
-  {
-    let cimageId = comment.imageId;
-    // if(existsSync(`dist/client/images/${cimageId}`))
-    if(existsSync(`public/images/${cimageId}`))
-	  comment.imageId = `/images/${cimageId}`;
-	else
-	  comment.imageId = await getImg(cimageId);
+    let t: Thread = {
+        title: form.get('title'),
+        content: form.get('content'),
+        image: saveImg(img),
+        imagetype: getImgType(img),
+    }
 
-    comment.commentText = replaceURLs(comment.commentText, board, thread.id);
-  }
+    return t;
 }
 
-export async function processThreadOut(form: any): Thread {
-  let img = form.get('image');
-
-  let t: Thread = {
-    id: uuidV4(),
-    threadName: form.get('ThreadName'),
-    threadCreator: uuidV5(form.get('iphash'), uuidNIL),
-    threadText: form.get('ThreadText'),
-    comments: [],
-    creationDate: Date.now(),
-    imageId: await postImg(img),
-    fileType: getImgType(img),
-  }
-
-  return t;
-}
+export function processCommentOut(form: any): Comment {
+    let img = form.get('image');
 
-export async function processCommentOut(form: any): Comment {
-  let img = form.get('image');
+    let c: Comment = {
+        content: form.get('content'),
+        image: saveImg(img),
+        imagetype: getImgType(img),
+    }
 
-  let c: Comment = {};
-  c.id = uuidV4();
-  c.commentCreator = uuidV5(form.get('iphash'), uuidNIL);
-  c.commentText = form.get('CommentText');
-  c.creationDate = Date.now();
-  c.imageId = await postImg(img);
-  c.fileType = getImgType(img);
-
-  return c;
+    return c;
 }
 
 function replaceURLs(text: string, board: string, OPtid?: string): string {
-  if(!text) return;
+    if(!text) return;
+
+    let quoteRegex = />\s.*/g;
+    text = text.replace(quoteRegex, (q) => {
+	    return ` <span class="quote"> ${q} </span> `;
+    });
 
-  if(OPtid) {
-    let replyRegex = /(^|[^>])>>[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/g;
+    let replyRegex = />>\d+/g;
     text = text.replace(replyRegex, (id) => {
-	  let showid = id;
-	  id = id.replace(/(>|\n| )/g, '');
-	  if(id == OPtid) showid += "(OP)";
-	  // this adds the targeted class
-	  // to the target id when its hovered on
-	  // and removes it when it stops hovering
-	  return ` <a class="${id}" href="#${id}" onmouseover="document.getElementById('${id}').classList.add('targeted')" onmouseleave="document.getElementById('${id}').classList.remove('targeted')"> ${showid} </a> `;
+	    let showid = id;
+	    id = id.replace(/>/g, '');
+	    if(id == OPtid) showid += "(OP)";
+        // to highlight referenced id
+	    return ` <a class="${id}" href="#${id}" onmouseover="document.getElementById('${id}').classList.add('targeted')" onmouseleave="document.getElementById('${id}').classList.remove('targeted')"> ${showid} </a> `;
+    });
+
+
+
+    // link to thread on other board
+    // let otherthreadlinkRegex = />>>\/.*\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/g;
+    // text = text.replace(otherthreadlinkRegex, (id) => {
+    //     let link = id.slice(4);
+    //     let parts = link.split('/');
+    //     let linkid = parts[1]; let board = parts[0];
+    //     return ` <a href="${board}/${linkid}#{linkid}"> >>>/${board}/${linkid} </a> `
+    // });
+    // link to thread on this board
+    // let threadlinkRegex = />>>[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/g;
+    // text = text.replace(threadlinkRegex, (id) => {
+    //     let linkid = id.slice(3); // remove the first >>>
+    //     return ` <a href="../${board}/${linkid}#${linkid}"> ${id} </a> `
+    // });
+    // link to another board
+    // let otherboardRegex = />>>\/.*\/($|[^0-9a-fA-F])/g;
+    // text = text.replace(otherboardRegex, (id) => {
+    //     let boardid = id.split('/')[1];
+    //     return ` <a href="../${boardid}"> >>>/${boardid}/ </a> `
+    // });
+
+    let newlineRegex = /(\r\n|\r|\n)/g;
+    text = text.replace(newlineRegex, () => {
+	    return ' <br> '
+    });
+
+    let urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
+    return text.replace(urlRegex, (url) => {
+	    var hyperlink = url;
+	    if (!hyperlink.match('^https?:\/\/')) {
+	        hyperlink = 'http://' + hyperlink;
+	    }
+	    return ' <a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a> '
     });
-  }
-
-  // link to thread on other board
-  let otherthreadlinkRegex = />>>\/.*\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/g;
-  text = text.replace(otherthreadlinkRegex, (id) => {
-    let link = id.slice(4);
-    let parts = link.split('/');
-    let linkid = parts[1]; let board = parts[0];
-    return ` <a href="${board}/${linkid}#{linkid}"> >>>/${board}/${linkid} </a> `
-  });
-  // link to thread on this board
-  let threadlinkRegex = />>>[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/g;
-  text = text.replace(threadlinkRegex, (id) => {
-    let linkid = id.slice(3); // remove the first >>>
-    return ` <a href="../${board}/${linkid}#${linkid}"> ${id} </a> `
-  });
-  // link to another board
-  let otherboardRegex = />>>\/.*\/($|[^0-9a-fA-F])/g;
-  text = text.replace(otherboardRegex, (id) => {
-    let boardid = id.split('/')[1];
-    return ` <a href="../${boardid}"> >>>/${boardid}/ </a> `
-  });
-
-  let newlineRegex = /(\r\n|\r|\n)/g;
-  text = text.replace(newlineRegex, () => {
-	return ' <br> '
-  });
-
-  let urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
-  return text.replace(urlRegex, (url) => {
-	var hyperlink = url;
-	if (!hyperlink.match('^https?:\/\/')) {
-	  hyperlink = 'http://' + hyperlink;
-	}
-	return ' <a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a> '
-  });
 }
diff --git a/src/lib/util.ts b/src/lib/util.ts
index b6dd442..8434c86 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -1,23 +1,12 @@
-export const creatorColor = (creatorid: string) => {
-  let parts = creatorid.split('-')
-  let ints = parts.map(function(d) { return parseInt(d,16) })
-  let code = ints[0]
-
-  let blue = (code >> 16) & 31;
-  let green = (code >> 21) & 31;
-  let red = (code >> 27) & 31;
-  let foreColor = `border:5px solid rgb(${red << 3}, ${green << 3}, ${blue << 3});`;
-  return foreColor;
-};
-
 export function formatTime(timestamp: number): string
 {
-  let date = new Date(timestamp);
-  let year = date.getFullYear();
-  let month = date.getMonth() + 1;
-  let day = date.getDate();
-  let time = date.toTimeString().split(' ')[0];
-  let formattedTime = `${time}, ${day}/${month}/${year}`
+    let date = new Date(timestamp*1000);
+    let year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+    let time = date.toTimeString().split(' ')[0];
+    console.log(date.toTimeString());
+    let formattedTime = `${time}, ${day}/${month}/${year}`
 
-  return formattedTime;
+    return formattedTime;
 }
diff --git a/src/models/Thread.ts b/src/models/Thread.ts
index c31404f..5960e11 100644
--- a/src/models/Thread.ts
+++ b/src/models/Thread.ts
@@ -1,19 +1,17 @@
 export type Comment = {
-  id: string;
-  commentCreator: string;
-  commentText: string;
-  creationDate: number;
-  imageId: string;
-  fileType: string //image or video
+    id: string;
+    timestamp: number;
+    content: string;
+    image: string;
+    imagetype: string //image or video
 };
 
 export type Thread = {
-  id: string;
-  threadName: string;
-  threadCreator: string;
-  threadText: string;
-  comments: Comment[];
-  creationDate: number;
-  imageId: string;
-  fileType: string; //image or video
+    id: string;
+    timestamp: number;
+    title: string;
+    content: string;
+    comments: Comment[];
+    image: string;
+    imagetype: string; //image or video
 };
diff --git a/src/pages/board/[board].astro b/src/pages/board/[board].astro
index eaea03e..de76964 100644
--- a/src/pages/board/[board].astro
+++ b/src/pages/board/[board].astro
@@ -15,8 +15,6 @@ const data = await api('get', `board/${board}`);
 if(data.status === 404) return Astro.redirect('/404');
 
 const threads: Thread[] = await data.json();
-for(let thread of threads)
-  await processThreadIn(board, thread);
 ---
 
 <ThreadLayout>
diff --git a/src/pages/board/[board]/[tid].astro b/src/pages/board/[board]/[tid].astro
index e9b345a..fa2f104 100644
--- a/src/pages/board/[board]/[tid].astro
+++ b/src/pages/board/[board]/[tid].astro
@@ -10,12 +10,12 @@ import { api } from '../../../lib/api';
 import { processThreadIn } from '../../../lib/thread';
 
 const { board, tid } = Astro.params;
-const data = await api('get', `thread/${board}/${tid}`);
+const data = await api('get', `board/${board}/${tid}`);
 
 if(data.status === 404) return Astro.redirect('/404');
 
 const thread: Thread = await data.json();
-await processThreadIn(board, thread, true);
+processThreadIn(board, thread);
 ---
 
 <ThreadLayout>
diff --git a/src/pages/create/[board].astro b/src/pages/create/[board].astro
index 152277c..3cbe1ab 100644
--- a/src/pages/create/[board].astro
+++ b/src/pages/create/[board].astro
@@ -12,8 +12,8 @@ const { board } = Astro.params;
 
   <Form board={board} tid="">
     <form id="form" method="post" action="/create/thread" onsubmit="document.getElementById('submit-button').disabled = true">
-      <textarea name="ThreadName" placeholder="Thread Name" style="height: 1.5rem; width: 350px;"></textarea> <br>
-      <textarea name="ThreadText" placeholder="Thread Contents" style="height: 150px; width: 350px;"></textarea>
+      <textarea name="title" placeholder="Thread Name" style="height: 1.5rem; width: 350px;"></textarea> <br>
+      <textarea name="content" placeholder="Thread Contents" style="height: 150px; width: 350px;"></textarea>
       <br> <input id="submit-button" type="submit" value="Create Thread" />
       <input id="image" type="file" accept=".png,.jpg,.gif,.bmp,.mp4" />
     </form>
diff --git a/src/pages/create/[board]/[tid].astro b/src/pages/create/[board]/[tid].astro
index f26c0d4..6f9cb8b 100644
--- a/src/pages/create/[board]/[tid].astro
+++ b/src/pages/create/[board]/[tid].astro
@@ -12,7 +12,7 @@ const { board, tid } = Astro.params;
 
   <Form board={board} tid={tid}>
     <form id="form" method="post" action="/create/comment" onsubmit="document.getElementById('submit-button').disabled = true">
-      <textarea name="CommentText" placeholder="Comment Contents" style="height: 150px; width: 350px;"></textarea>
+      <textarea name="content" placeholder="Comment Contents" style="height: 150px; width: 350px;"></textarea>
       <br> <input id="submit-button" type="submit" value="Create Comment" />
       <input id="image" type="file" accept=".png,.jpg,.gif,.bmp,.mp4" />
     </form>
diff --git a/src/pages/create/comment.ts b/src/pages/create/comment.ts
index f8d4c82..ebc0323 100644
--- a/src/pages/create/comment.ts
+++ b/src/pages/create/comment.ts
@@ -3,15 +3,13 @@ import { processCommentOut } from '../../lib/thread';
 import Comment from '../../models/Thread';
 
 export async function post({ request }) {
-  const form = await request.formData();
+    const form = await request.formData();
 
-  let c: Comment = await processCommentOut(form);
+    let c: Comment = processCommentOut(form);
 
-  console.log(c);
+    let r = await api('post', `board/${form.get('board')}/${form.get('tid')}`, JSON.stringify(c));
 
-  await api('post', `comment/${form.get('board')}/${form.get('tid')}`, JSON.stringify(c));
-
-  return new Response('close', {
-    status: 200
-  });
+    return new Response((r.status == 200) ? 'close' : await r.text(), {
+        status: r.status
+    });
 }
diff --git a/src/pages/create/thread.ts b/src/pages/create/thread.ts
index b3a02be..12702ba 100644
--- a/src/pages/create/thread.ts
+++ b/src/pages/create/thread.ts
@@ -3,15 +3,13 @@ import { processThreadOut } from '../../lib/thread';
 import Thread from '../../models/Thread';
 
 export async function post({ request }) {
-  const form = await request.formData();
+    const form = await request.formData();
 
-  let t: Thread = await processThreadOut(form);
+    let t: Thread = processThreadOut(form);
 
-  console.log(t);
+    let r = await api('post', `board/${form.get('board')}`, JSON.stringify(t));
 
-  await api('post', `thread/${form.get('board')}`, JSON.stringify(t));
-
-  return new Response(t.id, {
-    status: 200
-  });
+    return new Response(await r.text(), {
+        status: r.status
+    });
 }
diff --git a/src/styles/thread.css b/src/styles/thread.css
index 2667d6f..74b4d2a 100644
--- a/src/styles/thread.css
+++ b/src/styles/thread.css
@@ -11,6 +11,9 @@
   margin: 10px;
   background-color: white;
 }
+.quote {
+    color: darkgreen;
+}
 :target, .targeted {
   background-color: #ffa;
 }