posting thread and image works

20 files changed, 297 insertions, 212 deletions

diff --git a/package-lock.json b/package-lock.json
index f8fe288..52b6d33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@astrojs/deno": "^1.0.0",
         "@astrojs/node": "^1.0.0",
         "express": "^4.18.1",
+        "js-sha256": "^0.9.0",
         "uuid": "^8.3.2"
       },
       "devDependencies": {
@@ -3151,6 +3152,11 @@
       "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",
@@ -8935,6 +8941,11 @@
       "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",
diff --git a/package.json b/package.json
index 264a7ad..5270003 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@astrojs/deno": "^1.0.0",
     "@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
index dcb7dd5..b10db49 100755
--- a/run.sh
+++ b/run.sh
@@ -1,11 +1,11 @@
 #!/bin/sh
 
+cd ${0%/*} # go to project root
 set -xe
 
-NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev
+# NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev -- --host
 
-# npm run build
-
-# NODE_TLS_REJECT_UNAUTHORIZED=0 node server.mjs
+npm run build
+NODE_TLS_REJECT_UNAUTHORIZED=0 node server.mjs
 
 # deno run --allow-net --allow-read --allow-env --unsafely-ignore-certificate-errors=localhost ./dist/server/entry.mjs
diff --git a/server.mjs b/server.mjs
index f554ee2..5dd9851 100644
--- a/server.mjs
+++ b/server.mjs
@@ -5,6 +5,6 @@ const app = express();
 app.use(express.static('dist/client/'))
 app.use(ssrHandler);
 
-app.listen(8080);
+app.listen(3000);
 
 console.log('Server started');
\ No newline at end of file
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
deleted file mode 100644
index bc53f4d..0000000
--- a/src/components/Comment.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-  import { creatorColor, formatTime } from '../lib/util';
-  import type Comment from '../models/Thread';
-  export let comment: Comment;
-</script>
-
-
-<div class="commentbox" id="{comment.id}">
-
-  <span style="line-height: 2rem;">
-    <span style="font-family: mono">{comment.id}</span>
-    at {formatTime(comment.creationDate)} <br>
-    ->  <span style="{creatorColor(comment.commentCreator)}; font-family: mono">
-      {comment.commentCreator}
-    </span> <br>
-  </span>
-
-  {#if comment.imageId!= null && comment.imageId != undefined}
-    {#if comment.fileType == 'image'}
-      <a href="{comment.imageId}" target="_blank" rel="noopener noreferrer">
-        <img src="{comment.imageId}" alt="{comment.imageId}" height="300px" width="300px"> <br>
-      </a>
-    {:else if comment.fileType == 'video'}
-      <video width="320" height="240" controls muted>
-        <source src="{comment.imageId}">
-      </video>
-    {/if}
-  {/if}
-
-<p>{@html comment.commentText}</p>
-
-</div>
-
-<style>
-  .commentbox {
-    width: 500px;
-    border: 5px solid green;
-    padding: 10px;
-    margin: 10px;
-    background-color: white;
-  }
-  :target, .targeted {
-    background-color: #ffa;
-  }
-</style>
diff --git a/src/components/Form.astro b/src/components/Form.astro
new file mode 100644
index 0000000..417b569
--- /dev/null
+++ b/src/components/Form.astro
@@ -0,0 +1,53 @@
+---
+import '../styles/blackbox.css';
+import { sha256 } from 'js-sha256';
+
+const { board, tid } = Astro.props;
+const iphash = sha256(Astro.clientAddress);
+---
+
+<div class="blackbox">
+  <slot />
+</div>
+
+<script define:vars={{ board, iphash, tid }}>
+  document.forms['form'].addEventListener('submit', async (event) => {
+    event.preventDefault();
+
+    let form = new FormData(event.target);
+    let reader = new FileReader();
+
+      reader.onload = (e) => {
+      form.append('image',
+                  (e != null) ? e.target.result.toString() : ''
+                 );
+    }
+
+    reader.onloadend = async () => {
+      await fetch(event.target.action, {
+        method: event.target.method,
+        body: new URLSearchParams(form)
+      }).then(async (r) => {
+        if(r.status == 200) {
+          alert('Thread Successfuly Posted');
+          let id = await r.text();
+          window.location.assign(`/board/${board}/${id}`);
+        }
+        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];
+    if(image) {
+      reader.readAsDataURL(image);
+    } else {
+      reader.onload(null);
+      await reader.onloadend();
+    }
+
+  });
+</script>
diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
index fee1a78..0321b8d 100644
--- a/src/components/Thread.svelte
+++ b/src/components/Thread.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-  import { creatorColor, formatTime } from '../lib/util';
+  import { creatorColor, formatTime} from '../lib/util';
   import type Thread from '../models/Thread';
+
   export let thread: Thread;
   export let board: string;
+  export let comments: boolean = false;
 
   let replies: string[] = [];
-  const listReplies = (id: string): boolean => {
+  const listReplies = (id: string, getReplies: boolean = false): any => {
+    if(getReplies) return replies;
+
     replies = [];
     thread.comments.forEach(comment => {
       if(comment.commentText.includes(id))
@@ -15,8 +19,8 @@
     if(replies.length <= 0) return false;
     return true
   }
-</script>
 
+</script>
 
 {#if thread.id != "rules"}
   <div class="threadbox" id="{thread.id}">
@@ -27,13 +31,16 @@
       ->  <span style="{creatorColor(thread.threadCreator )}; font-family: mono">
         {thread.threadCreator}
       </span > <br>
+      <hr>
 
-      {#if listReplies(thread.id)}
-        <hr> <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
-          {#each replies as id}
-            <a href="/board/{board}/{thread.id}#{id}" onmouseover="document.getElementById('{id}').classList.add('targeted')" onmouseleave="document.getElementById('{id}').classList.remove('targeted')">>>{id}</a> &#xfeff
-          {/each}
-        </span> <hr>
+      {#if comments}
+        {#if listReplies(thread.id) }
+          <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
+            {#each listReplies(thread.id, true) as id}
+              <a href="/board/{board}/{thread.id}#{id}" onmouseover="document.getElementById('{id}').classList.add('targeted')" onmouseleave="document.getElementById('{id}').classList.remove('targeted')">>>{id}</a> &#xfeff
+            {/each}
+          </span> <hr>
+        {/if}
       {/if}
 
     </span>
@@ -54,21 +61,45 @@
 
 <p>{@html thread.threadText}</p>
 
-<slot />
+{#if comments}
+  {#each thread.comments as comment}
+    <div class="commentbox" id="{comment.id}">
+      <span style="line-height: 2rem;">
+        <span style="font-family: mono">{comment.id}</span>
+        at {formatTime(comment.creationDate)} <br>
 
-  </div>
+        ->  <span style="{creatorColor(comment.commentCreator)}; font-family: mono">
+          {comment.commentCreator}
+        </span> <br>
+        <hr>
+
+        {#if listReplies(comment.id)}
+          <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
+            {#each listReplies(comment.id, true) as id}
+              <a href="/board/{board}/{thread.id}#{id}" onmouseover="document.getElementById('{id}').classList.add('targeted')" onmouseleave="document.getElementById('{id}').classList.remove('targeted')">>>{id}</a> &#xfeff
+            {/each}
+          </span> <hr>
+        {/if}
+
+      </span>
+
+      {#if comment.imageId!= null && comment.imageId != undefined}
+        {#if comment.fileType == 'image'}
+          <a href="{comment.imageId}" target="_blank" rel="noopener noreferrer">
+            <img src="{comment.imageId}" alt="{comment.imageId}" height="300px" width="300px"> <br>
+          </a>
+        {:else if comment.fileType == 'video'}
+          <video width="320" height="240" controls muted>
+            <source src="{comment.imageId}">
+          </video>
+        {/if}
+      {/if}
+
+<p>{@html comment.commentText}</p>
+
+    </div>
+  {/each}
 {/if}
 
-<style>
-  .threadbox {
-    width: 600px;
-    border: 10px solid green;
-    padding: 10px;
-    margin: 10px;
-    margin-left: 0px;
-    background-color: white;
-  }
-  :target, .targeted {
-    background-color: #ffa;
-  }
-</style>
+  </div>
+{/if}
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 5a2a372..3c0b6ff 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -1,12 +1,15 @@
 ---
+const { title } = Astro.props as Props;
 ---
 
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
+	<meta name="viewport" content="width=device-width" />
+	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+	<meta name="generator" content={Astro.generator} />
+	<title>{title}</title>
   </head>
   <body>
     <slot />
@@ -15,7 +18,7 @@
 
 <style>
   html {
-  font-family: sans-serif;
-  padding-left: 1em;
+    font-family: sans-serif;
+    padding-left: 1em;
   }
 </style>
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 221a7b3..645fc23 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -2,8 +2,6 @@ const base = 'https://localhost:5001/api'
 
 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: {
diff --git a/src/lib/image.ts b/src/lib/image.ts
index 53d4c98..c7d4d49 100644
--- a/src/lib/image.ts
+++ b/src/lib/image.ts
@@ -1,10 +1,39 @@
 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;
+  if(imgId == null || imgId == '' || imgId == undefined) return null;
 
-	const response = await api('get', `image/${imgId}`)
+  const response = await api('get', `image/${imgId}`)
 
-	if(response.status !== 200) return `Server error: ${response.status}`;
-    return response.text();
+  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}`;
+
+  //save file in this server
+  writeFileSync(`dist/client/images/${filename}`, img_b64, "base64");
+  // writeFileSync(`public/images/${filename}`, img_b64, "base64");
+
+  let data = {
+    'name': filename,
+    'base64': img_b64
+  };
+  await api('post', 'image', JSON.stringify(data));
+
+  return filename;
+}
+
+export function getImgType(img: string): string
+{
+  if(!img) return null;
+  return img.split('/')[0].split(':')[1];
 }
diff --git a/src/lib/thread.ts b/src/lib/thread.ts
index 6bc54ce..e0f0aa4 100644
--- a/src/lib/thread.ts
+++ b/src/lib/thread.ts
@@ -1,12 +1,15 @@
-import { writeFileSync, existsSync } from 'fs';
-import { getImg } from './image';
-import type Thread from '../models/Thread'
+import { existsSync } from 'fs';
+import { v4 as uuidV4, v5 as uuidV5, NIL as uuidNIL } from 'uuid';
 
-export async function processThreadIn(board: string, thread: Thread, comments? =false) {
+import { getImg, postImg, 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(`public/images/${imageId}`))
+  if(existsSync(`dist/client/images/${imageId}`))
+  // if(existsSync(`public/images/${imageId}`))
 	thread.imageId = `/images/${imageId}`;
   else
 	thread.imageId = await getImg(imageId);
@@ -18,7 +21,8 @@ export async function processThreadIn(board: string, thread: Thread, comments? =
   for(let comment of thread.comments)
   {
     let cimageId = comment.imageId;
-    if(existsSync(`public/images/${cimageId}`))
+    if(existsSync(`dist/client/images/${cimageId}`))
+    // if(existsSync(`public/images/${cimageId}`))
 	  comment.imageId = `/images/${cimageId}`;
 	else
 	  comment.imageId = await getImg(cimageId);
@@ -27,8 +31,23 @@ export async function processThreadIn(board: string, thread: Thread, comments? =
   }
 }
 
-export async function processThreadOUT(board: string, thread: Thread, comments? = false) {
+export async function processThreadOut(form: any): Thread {
+  let img = form.get('image').toString();
+
+  let t: Thread = {};
+  t.id = uuidV4();
+  t.ThreadName = form.get('ThreadName').toString();
+  t.ThreadCreator = uuidV5(form.get('iphash'), uuidNIL);
+  t.ThreadText = form.get('ThreadText').toString();
+  t.Comments = [];
+  t.CreationDate = Date.now();
+  t.ImageId = await postImg(img);
+  t.FileType = getImgType(img);
+
+  return t;
+}
 
+export async function processCommentOut(form: any): Comment {
 }
 
 function replaceURLs(text: string, board: string, OPtid?: string): string {
diff --git a/src/lib/util.ts b/src/lib/util.ts
index a0734b9..b6dd442 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -1,23 +1,23 @@
 export const creatorColor = (creatorid: string) => {
-    let parts = creatorid.split('-')
-    let ints = parts.map(function(d) { return parseInt(d,16) })
-    let code = ints[0]
+  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;
+  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);
+  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}`
 
-    return formattedTime;
+  return formattedTime;
 }
diff --git a/src/models/Thread.ts b/src/models/Thread.ts
index e5d9f66..c31404f 100644
--- a/src/models/Thread.ts
+++ b/src/models/Thread.ts
@@ -1,19 +1,19 @@
 export type Comment = {
-    id: string;
-    commentCreator: string;
-    commentText: string;
-    creationDate: number;
-    imageId: string;
-    fileType: string //image or video
+  id: string;
+  commentCreator: string;
+  commentText: string;
+  creationDate: number;
+  imageId: string;
+  fileType: 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;
+  threadName: string;
+  threadCreator: string;
+  threadText: string;
+  comments: Comment[];
+  creationDate: number;
+  imageId: string;
+  fileType: string; //image or video
 };
diff --git a/src/pages/board/[board].astro b/src/pages/board/[board].astro
index 23a5551..a529d3c 100644
--- a/src/pages/board/[board].astro
+++ b/src/pages/board/[board].astro
@@ -1,6 +1,8 @@
 ---
 import Default from '../../layouts/Default.astro';
 import Thread from '../../components/Thread.svelte'
+import '../../styles/thread.css'
+import '../../styles/blackbox.css?'
 import type Thread from '../../models/Thread';
 
 import { api } from '../../lib/api.ts';
@@ -18,8 +20,17 @@ for(let thread of threads)
 
 <Default>
   <h1><a href="/boards"> {board} </a></h1>
+  <div class="blackbox">
+    <button style="left: 50%; position: relative; transform: translate(-50%, 0);" onclick=`window.location='/create/${board}'`>Create Thread</button>
+  </div>
 
   {threads.map((thread) => (
     <Thread thread={thread} board={board} />
   ))}
 </Default>
+
+<style is:inline>
+  :root {
+    --wdt: 600px;
+  }
+</style>
diff --git a/src/pages/board/[board]/[tid].astro b/src/pages/board/[board]/[tid].astro
index 80e7fbe..4aa34ef 100644
--- a/src/pages/board/[board]/[tid].astro
+++ b/src/pages/board/[board]/[tid].astro
@@ -1,7 +1,7 @@
 ---
 import Default from '../../../layouts/Default.astro';
 import Thread from '../../../components/Thread.svelte'
-import Comment from '../../../components/Comment.svelte'
+import '../../../styles/thread.css'
 import type Thread from '../../../models/Thread';
 
 import { api } from '../../../lib/api';
@@ -14,13 +14,8 @@ if(data.status === 404) return Astro.redirect('/404');
 
 const thread: Thread = await data.json();
 await processThreadIn(board, thread, true);
-const comments: Comment[] = thread.comments;
 ---
 
 <Default>
-  <Thread thread={thread} board={board}>
-    {comments.map((comment) => (
-      <Comment comment={comment} />
-    ))}
-  </Thread>
-</Default>
+  <Thread thread={thread} board={board} comments=true />
+</Default>
\ No newline at end of file
diff --git a/src/pages/boards.astro b/src/pages/boards.astro
index ab3158f..f10fa3a 100644
--- a/src/pages/boards.astro
+++ b/src/pages/boards.astro
@@ -1,32 +1,26 @@
 ---
 import Default from '../layouts/Default.astro';
+import '../styles/blackbox.css'
 import { api } from '../lib/api.ts';
 
 const data = await api('get', 'boards');
 const boards: string[] = await data.json();
 ---
 
-<Default>
-  <div class="blackbox">
-    <h3>Boards</h3>
+<Default title="Boards">
+  <h1>Boards</h1>
 
+  <div class="blackbox">
     <ul>
       {boards.map((board) => (
-      <li><a href=`/board/${board}`>{board}</a></li>
+        <li><a href=`/board/${board}`>{board}</a></li>
       ))}
     </ul>
   </div>
 </Default>
 
-<style>
-  .blackbox {
-    width: 300px;
-    height: 210px;
-    border: 10px solid black;
-    padding: 10px;
-    padding-top: 0px;
-    margin: 10px;
-    margin-left: 0px;
-    background-color: white;
+<style is:inline>
+  :root {
+    --wdt: 300px;
   }
 </style>
diff --git a/src/pages/create/[board].astro b/src/pages/create/[board].astro
index 45f8b0d..9c2308f 100644
--- a/src/pages/create/[board].astro
+++ b/src/pages/create/[board].astro
@@ -1,54 +1,25 @@
 ---
-import Default from '../../layouts/Default.astro'
+import Default from '../../layouts/Default.astro';
+import Form from '../../components/Form.astro';
+
 const { board } = Astro.params;
 ---
 
-<h1>{board}</h1>
-
 <Default>
-  <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>
-    <br> <input id="submit-button" type="submit" value="Create Thread" />
-    <input id="image" type="file" accept=".png,.jpg,.gif,.bmp,.mp4" />
-
-  </form>
-  <script define:vars={{ board }}>
-    document.forms['form'].addEventListener('submit', async (event) => {
-      event.preventDefault();
-
-      let form = new FormData(event.target);
-      let reader = new FileReader();
-
-      reader.onload = e => {
-        form.append('image',
-          (e != null) ? e.target.result.toString() : ''
-        );
-      }
-
-      reader.onloadend = () => {
-        fetch(event.target.action, {
-          method: event.target.method,
-          body: new URLSearchParams(form)
-        }).then((r) => {
-          if(r.status == 200) {
-            alert('Thread Successfuly Posted');
-            window.location.assign(`/board/${board}`);
-          }
-          else alert('An Error has Accured');
-        });
-      }
-
-      form.append('board', board);
-
-      let image = document.getElementById("image").files[0];
-      if(image) {
-        reader.readAsDataURL(image);
-      } else {
-        reader.onload(null);
-        reader.onloadend();
-      }
-
-    });
-  </script>
+  <h1>{board}</h1>
+
+  <Form board={board} tid="niggers">
+    <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>
+      <br> <input id="submit-button" type="submit" value="Create Thread" />
+      <input id="image" type="file" accept=".png,.jpg,.gif,.bmp,.mp4" />
+    </form>
+  </Form>
 </Default>
+
+<style>
+  :root {
+    --wdt: 360px;
+  }
+</style>
diff --git a/src/pages/create/thread.ts b/src/pages/create/thread.ts
index 0af3471..0a0b7d1 100644
--- a/src/pages/create/thread.ts
+++ b/src/pages/create/thread.ts
@@ -1,28 +1,16 @@
-import type { APIRoute } from 'astro';
-import { v4 as uuidV4 } from 'uuid';
+import { api } from '../../lib/api';
+import { processThreadOut } from '../../lib/thread';
 
-import type Thread from '../../models/Thread'
-import { api } from '../../lib/api'
+export async function post({ request }) {
+  const form = await request.formData();
 
-export async function post({ params, request }): APIRoute {
-    const form = await request.formData();
+  console.log(form);
 
-    let t: Thread = {};
-    t.id = uuidV4().toString();
-    t.ThreadName = form.get('ThreadName').toString();
-    // data["ThreadCreator"] = locals.userid;
-    t.ThreadCreator = '';
-    t.ThreadText = form.get('ThreadText').toString();
-    t.Comments = [];
-    t.CreationDate = Date.now();
-    // data["ImageId"] = await post_img(base64image, writeFileSync);
-    // data["FileType"] = get_img_type(base64image);
-    t.ImageId = form.get('image').toString();
-    t.FileType = '';
+  let t: Thread = await processThreadOut(form);
 
-    // await api('post', `thread/${form.get('board')}`, JSON.stringify(data));
+  await api('post', `thread/${form.get('board')}`, JSON.stringify(t));
 
-    return new Response(null, {
-        status: 200
-    });
+  return new Response(t.id, {
+    status: 200
+  });
 }
diff --git a/src/styles/blackbox.css b/src/styles/blackbox.css
new file mode 100644
index 0000000..4a0e63f
--- /dev/null
+++ b/src/styles/blackbox.css
@@ -0,0 +1,8 @@
+  .blackbox {
+    width: var(--wdt);
+    border: 10px solid black;
+    padding: 10px;
+    margin: 10px;
+    margin-left: 0px;
+    background-color: white;
+  }
diff --git a/src/styles/thread.css b/src/styles/thread.css
new file mode 100644
index 0000000..14997de
--- /dev/null
+++ b/src/styles/thread.css
@@ -0,0 +1,18 @@
+.threadbox {
+  width: 600px;
+  border: 10px solid green;
+  padding: 10px;
+  margin: 10px;
+  margin-left: 0px;
+  background-color: white;
+}
+.commentbox {
+  width: 500px;
+  border: 5px solid green;
+  padding: 10px;
+  margin: 10px;
+  background-color: white;
+}
+:target, .targeted {
+  background-color: #ffa;
+}