I did some stuff with getting it set up and changing photos but i can't get the sqlite to work on prod

src/lib/db/index.ts

@@ -4,6 +4,28 @@ import { dev } from '$app/environment';
 // Initialize the database
 const db = new Database(dev ? 'dev.db' : 'prod.db', { create: true});
 
+db.exec(`
+  CREATE TABLE IF NOT EXISTS users (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    name TEXT NOT NULL,
+    email TEXT UNIQUE NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+  );
+`);
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS
+  'pork_cuts' (
+    'id' integer not null primary key autoincrement,
+    'name' varchar(40) null,
+    'raw_cut' BOOLEAN null,
+    'stock' INT null default 0,
+    "preweighed" BOOLEAN NULL,
+    "min_weight" DOUBLE NULL,
+    "max_weight" DOUBLE NULL,
+    unique ('id')
+  )
+`);
 
 // Close the database connection when the application shuts down
 process.on('SIGINT', () => {

src/routes/+layout.svelte

@@ -12,6 +12,12 @@
   $inspect(data);
 </script>
 
+<nav>
+  <a href="/">Sludge</a>
+  <a href="/fest">Fest</a>
+  <a href="/pork">Pork</a>
+</nav>
+
 <main>
   {@render children()}
 </main>
@@ -44,6 +50,22 @@
     // background-repeat: no-repeat;
     background-attachment: fixed;
   }
+  nav{
+    padding: 0 20%;
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    a{
+      text-decoration: none;
+      &:first-child{
+        margin-right: auto;
+      }
+      &:hover{
+        color: $orange;
+      }
+    }
+  }
+
   main {
     display: flex;
     flex-direction: row;
@@ -62,11 +84,11 @@
     font-size: 100%;
     font: inherit;
     color: inherit;
-    font-family: "Garamond",sans-serif;
+    font-family: "Garamond", serif;
     vertical-align: baseline;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
-    text-size-adjust: none;
+    font-size-adjust: 0.75;
   }
 
 

src/routes/+page.server.ts

@@ -4,7 +4,7 @@ import { marked } from 'marked';
 
 export async function load() {
   const users = await get_all_users();
-  const html = marked.parse('# Marked in Node.js\n\nRendered by **marked**.');
+  const html = marked.parse('# Sludge And Links\n\n**maybe**.');
 
   return { users, html };
 }

src/routes/+page.svelte

@@ -6,30 +6,7 @@
 </script>
 
 <main>
-  <h1>Add User</h1>
-  {#if form?.error}
-    <p class="error">{form.error}</p>
-  {/if}
-<!--   <form method="POST">
-    <div>
-      <label for="name">Name:</label>
-      <input type="text" id="name" name="name" required />
-    </div>
-    <div>
-      <label for="email">Email:</label>
-      <input type="email" id="email" name="email" required />
-    </div>
-    <button type="submit">Add User</button>
-  </form> -->
   <div>{@html html}</div>
-  <h2>User List</h2>
-  <ul>
-    {#each users as user}
-      <li>
-        {user.name} ({user.email})
-      </li>
-    {/each}
-  </ul>
 </main>
 
 <style lang="scss">
@@ -40,48 +17,4 @@
     margin: 0 auto;
     padding: 2rem;
   }
-
-  .error {
-    color: $orange;
-  }
-
-  form {
-    margin: 2rem 0;
-    div {
-      margin-bottom: 1rem;
-    }
-  }
-
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-  }
-
-  input {
-    width: 100%;
-    padding: 0.5rem;
-    background: $blue;
-  }
-
-  button {
-    padding: 0.5rem 1rem;
-    background: $blue;
-    color: $green;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    &:hover {
-      background: $orange;
-    }
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-  }
-
-  li {
-    padding: 0.5rem;
-    border-bottom: 1px solid $green;
-  }
 </style>

src/routes/fest/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="typescript">
+	
+</script>
+
+<svelte:head>
+	<title></title>
+	<meta name="description" content="" />
+</svelte:head>
+
+<section>
+  <h1>Coming Soon&trade; - 2025</h1>
+  <h2>This time its brown</h2>
+</section>
+
+<style lang="scss">
+	:global(body){
+    background-color: oklch(38% 0.042 42);
+  }
+</style>

src/routes/pork/+page.svelte

@@ -13,38 +13,23 @@
     };
   }
 
-  let selected = $state({
-    name: "Chop"
-  })
+  let selected = $state("Chop")
+
+  function change_photo({target:{id}}){
+    console.log(id)
+    selected = id
+  }
   
 </script>
 <section>
-  <h1>Pork</h1>
-  
- <!--  <div class="list">
-    {#each data.pork as pork}
-      {@const price_per_lb = pork.raw_cut ? RAW_COST : PROCESSED_COST}
-      <div>
-          <img src={`/pork/${pork.name.replace(' ', '_')}.jpg`} alt={`Image of a ${pork.name}`} />
-          <h2>{pork.name}</h2>
-          <span>
-              {#if pork.preweighed}
-                  <p>${price_per_lb * pork.min_weight}</p>
-              {:else}
-              <p>${price_per_lb * pork.min_weight} ~ ${ price_per_lb * pork.max_weight}</p>
-              {/if}
-              <p>~{pork.stock} in stock</p>
-          </span>
-      </div>
-    {/each}
-  </div> -->
-
+  <h1><b>F</b>arm Raised Pork</h1>
+  <h5>this ain't your grocery store's pork</h5>
   <div id="tui">
     <ol>
       <li><span>Cut</span><span>Weight</span><span>Stock</span></li>
       {#each data.pork as {name, raw_cut, preweighed, min_weight, max_weight, stock}}
         {@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST}
-        <li>
+        <li onmouseenter={change_photo} id={name}>
           <span>{name}</span>
           {#if preweighed}
             <span>{min_weight} lb</span>
@@ -55,12 +40,16 @@
         </li>
       {/each}
     </ol>
-    <img src={`/pork/${selected.name.replace(' ', '_')}.jpg`} alt={`Image of a ${selected.name}`} />
+    <img src={`/pork/${selected.replace(' ', '_')}.jpg`} alt={`Image of a ${selected}`} />
   </div>
 </section>
 
 <style lang="scss">
   @use '/src/app.scss' as *;
+  @use 'sass:color';
+  b{
+    font-weight: 100;
+  }
   section {
     width: 100%;
     display: flex;
@@ -69,25 +58,30 @@
     justify-content: center;
     h1 {
         text-align: center;
-        font-size: 5rem;
-        font-weight: 600;
-        margin: 0 0 2rem 0;
-    }   
+        font-size: 2.5rem;
+        font-weight: 500;
+    }
+    h5{
+      font-size: 0.75rem;
+      color:transparentize(black, 0.5)
+    }
+
     img {
-      width: 20rem;
+      width: 50%;
       height: fit-content;
       border-radius: 0.375rem;
+      text-align: center;
       // min-width: 10rem;
       // min-height: 10rem;
     }
 
     #tui{
       display: flex;
-      width: 80%;
-      font-size: 1.5rem;
-      
+      width: 90%;
+      font-size: 1rem;
+
       ol{
-        width: 75%;
+        width: 100%;
         display: inherit;
         flex-direction: column;
         list-style: none;
@@ -97,6 +91,13 @@
           span{
             flex-basis: 33%;
           }
+          &:nth-child(2n){
+            background: transparentize(color.to-space($blue, rgb), 0.75);
+          }
+          &:not(:first-child):hover{
+            background: transparentize(color.to-space($green, rgb), 0.5);
+            // background: $green;
+          }
         }
       }
     }