Starting work on thread stuff. This is probably a terrible idea but I guess I am going to find out why.

Updating a bunch of the Sludge fest pages and the front page to have more relevant info

src/lib/db/index.ts

@@ -63,3 +63,31 @@ export function get_all_pork() {
   return db.query('SELECT * FROM pork_cuts').all();
 }
 
+
+/**
+ * Thread Stuff
+ * 
+ * 
+ * 
+ */
+
+export function get_all_threads() {
+  return db.query('SELECT * FROM threads').all();
+}
+
+
+export function create_thread(title, id, creator){
+
+  db.query('INSERT INTO threads (id, title, progenator) VALUES ($id, $title, $creator)').get({$id: id, $title: title, $creator: creator})
+
+  return db.query(`CREATE TABLE
+  '${id}' (
+    'id' integer not null primary key autoincrement,
+    'created_at' datetime not null default CURRENT_TIMESTAMP,
+    'author' INT not null,
+    "is_edited?" BOOLEAN not null,
+    'content' TEXT not null,
+    unique ('id'),
+    foreign key('author') references users('id')
+  )`)
+}

src/routes/+page.server.ts

@@ -3,9 +3,8 @@ import { fail, type Actions } from '@sveltejs/kit';
 import { marked } from 'marked';
 
 export async function load() {
-  const html = marked.parse('# Sludge And Links\n\n**maybe**.');
 
-  return { html };
+  return {};
 }
 
 export const actions: Actions = {

src/routes/+page.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-  let { data, form } = $props<{ users: Array<{ name: string, email: string }>, html: string }>();
-  let { users, html } = data;
-
-  $inspect(form);
+  let { data, form } = $props<{ html: string }>();
 </script>
 
 <svelte:head>
@@ -10,16 +7,51 @@
   <meta name="description" content="Sludge's internet facing spot" />
 </svelte:head>
 
-<main>
-  <div>{@html html}</div>
-</main>
+<section>
+  <h1><b>S</b>ludge and <b>F</b>riends</h1>
+  <h3>Here we make friends and mistakes</h3>
+  <div>
+    <div>
+      <a href="/fest"><h2>Sludge Fest</h2></a>
+      <p>
+        Sludge Fest is a homegrown music festival of friends and fuckery; come
+        join us for a fun weekend out and make some memories
+      </p>
+    </div>
+    <div>
+      <a href="/pork"><h2>Pork</h2></a>
+      <p>
+        I made the mistake of getting hogs that are better at their job than I
+        am so please take some of it off my hands
+      </p>
+    </div>
+    <div>
+      <a href="/blag"><h2>Blag</h2></a>
+      <p>
+        There is nothing of value here, I like misspelling things and also for
+        some reason building my own versions of things that other people have
+        perfected
+      </p>
+    </div>
+  </div>
+</section>
 
 <style lang="scss">
-  @use '/src/app.scss' as *;
+  @use "/src/app.scss" as *;
 
-  main {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 2rem;
+  section {
+    max-width: 60rem;
+    margin: 1rem auto 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    h1 {
+      font-size: 1.5rem;
+      b {
+        font-family: Initials;
+        font-weight: 500;
+        font-size: 4.5rem;
+      }
+    }
   }
 </style>

src/routes/fest/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-	
+	let photos = ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19"]
 </script>
 
 <svelte:head>
@@ -13,11 +13,101 @@
   <h2>At Sludge Farm</h2>
   <p>Come out and enjoy live music and fun times</p>
   <p>If you'd like to perform fill out this <a href="https://forms.gle/CNUuN6guAWnUVqw19"> Artist Application </a></p>
+  <hr>
+  <div>
+    <div>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/08.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/01.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/02.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/04.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/05.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/07.jpg">
+      </label>
+    </div>
+    <div>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/06.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/17.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/16.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/14.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/15.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/18.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/19.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/13.jpg">
+      </label>
+    </div>
+    <div>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/00.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/09.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/10.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/11.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/12.jpg">
+      </label>
+      <label>
+        <input type="checkbox">
+        <img src="/fest/23/03.jpg">
+      </label>
+    </div>
+  </div>
 
 </section>
 
 <style lang="scss">
   @use '/src/app.scss' as *;
+  @use 'sass:color';
 
 	:global(body){
     background-color: $brown;
@@ -35,5 +125,37 @@
     h2{
       font-size: 2rem;
     }
+    hr{
+      background: color.complement($brown, oklch);
+      border: none;
+      height: 0.25rem;
+      margin: 2rem 0;
+    }
+    div{
+      display: flex;
+      gap: 1rem;
+      justify-content: center;
+      div{
+        flex-direction: column;
+        width: 30%;
+        align-items: center;
+        justify-content: unset;
+
+        // Really cool css image zoom
+        input[type=checkbox] {
+          display: none
+        }
+        img {
+          max-width: 100%;
+          transition: transform 0.25s ease;
+          cursor: zoom-in;
+          border-radius: 5px;
+        }
+        input[type=checkbox]:checked~img {
+          transform: scale(2);
+          cursor: zoom-out
+        }
+      }
+    }
   }
 </style>

src/routes/thread/+page.server.ts

@@ -1,16 +1,25 @@
-import { encode, decode } from 'proquint'
+import { encode } from 'proquint'
 import { randomBytes } from 'crypto'
 
-export async function load({ fetch, data, setHeaders, parent, depends}) {
-	console.log("data")
-	let r = randomBytes(4)
-	console.log(r.toString("hex"))
-	let d = encode(r)
-	console.log(d)
-	console.log(decode(d))
-}
-export const actions = {
-  default: async({cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest}) => {
+import { get_all_threads, create_thread } from '$lib/db'
 
+export async function load({ fetch, data, setHeaders, parent, depends}) {
+	console.log("thread")
+	let threads = await get_all_threads()
+	for( let thread of threads ){
+		thread.name = encode(Buffer.from(thread.id, "hex"))
+	}
+
+	return {
+		threads,
+		uid: 42
+	}
+}
+export const actions = {
+  default: async({ request }) => {
+    console.log("create thread")
+    let data = await request.formData()
+    console.log(data)
+    await create_thread(data.get("title"), randomBytes(4), data.get("uid"))
   }
 }

src/routes/thread/+page.svelte

@@ -1,5 +1,6 @@
-<script lang="javascript">
-	
+<script lang="ts">
+  let { data, form } = $props<{ threads: Array }>();
+  $inspect(data)
 </script>
 
 <svelte:head>
@@ -8,11 +9,21 @@
 </svelte:head>
 
 <section>
-	
+	{#each data.threads as thread}
+    <a href="thread/{thread.name}">{thread.title}</a>
+  {/each}
+  <form method="POST">
+    <input type="text" name="title">
+    <input hidden type="text" name="uid" bind:value={data.uid}>
+    <button>Create</button>
+  </form>
 </section>
 
 <style lang="scss">
 	section {
-
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 	}
 </style>

src/routes/thread/[id]/+page.server.js

@@ -0,0 +1,8 @@
+export async function load({ params }) {
+	console.log(params)
+}
+export const actions = {
+  default: async({cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest}) => {
+    
+  }
+}

src/routes/thread/[id]/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	
+</script>
+
+<svelte:head>
+	<title></title>
+	<meta name="description" content="" />
+</svelte:head>
+
+<section>
+	
+</section>
+
+<style lang="scss">
+	section {
+
+	}
+</style>

thread.md

@@ -0,0 +1,31 @@
+
+# Each conversation a thread
+Thread has
+- originator
+- created_at
+- id
+- tags - table
+- users - table
+- messages - table
+Each thread makes its own table?
+which stores the messages in that thread
+
+# Message has
+ - author
+ - edited flag
+ - content
+ - reactions - tables
+ - replies - tables
+ - forwards - tables
+ - id
+ - rich media
+
+# User has
+ - name
+ - id
+ - tags
+ - profile picture
+ - markdown bio
+ - email
+
+