Added a bunch of stuff to make it work and trying out bun

.gitignore

@@ -21,3 +21,11 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+
+# Photos
+*.jpg
+*.png
+
+# Databases
+*.db

bun.lock

@@ -9,6 +9,9 @@
         "@types/nodemailer": "^7.0.11",
         "nodemailer": "^8.0.4",
       },
+      "dependencies": {
+        "marked": "^15.0.11",
+      },
       "devDependencies": {
         "@sveltejs/adapter-node": "^5.5.4",
         "@sveltejs/vite-plugin-svelte": "^5.1.1",
@@ -17,6 +20,15 @@
         "svelte-check": "^4.3.1",
         "typescript": "^5.9.2",
         "vite": "^6.3.5",
+        "@sveltejs/adapter-auto": "^6.0.0",
+        "@sveltejs/kit": "^2.16.0",
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+        "sass": "^1.87.0",
+        "svelte": "^5.0.0",
+        "svelte-adapter-bun": "^0.5.2",
+        "svelte-check": "^4.0.0",
+        "typescript": "^5.0.0",
+        "vite": "^6.2.6",
       },
     },
   },
@@ -249,6 +261,19 @@
 
     "is-module": ["is-module@1.0.0", "", {}, "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="],
 
+    "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
+    "globalyzer": ["globalyzer@0.1.0", "", {}, "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="],
+
+    "globrex": ["globrex@0.1.2", "", {}, "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="],
+
+    "immutable": ["immutable@5.1.1", "", {}, "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg=="],
+
+    "import-meta-resolve": ["import-meta-resolve@4.1.0", "", {}, "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
     "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
 
     "is-reference": ["is-reference@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],
@@ -261,6 +286,10 @@
 
     "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
 
+    "marked": ["marked@15.0.11", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-1BEXAU2euRCG3xwgLVT1y0xbJEld1XOrmRJpUwRCcy7rxhSCwMrmEu9LXoPhHSCJG41V7YcQ2mjKRr5BA3ITIA=="],
+
+    "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
+
     "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
 
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
@@ -275,6 +304,8 @@
 
     "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
 
+    "node-addon-api": ["node-addon-api@7.1.1", "", {}, "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.2", "", {}, "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="],
@@ -291,6 +322,8 @@
 
     "sass": ["sass@1.90.0", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q=="],
 
+    "sass": ["sass@1.87.0", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-d0NoFH4v6SjEK7BoX810Jsrhj7IQSYHAHLi/iSpgqKc7LaIDshFRlSg5LOymf9FqQhxEHs2W5ZQXlvy0KD45Uw=="],
+
     "set-cookie-parser": ["set-cookie-parser@2.7.1", "", {}, "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="],
 
     "sirv": ["sirv@3.0.1", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A=="],
@@ -302,6 +335,13 @@
     "svelte": ["svelte@5.38.0", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^2.1.0", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-cWF1Oc2IM/QbktdK89u5lt9MdKxRtQnRKnf2tq6KOhYuhLOd2hbMuTiJ+vWMzAeMDe81AzbCgLd4GVtOJ4fDRg=="],
 
     "svelte-check": ["svelte-check@4.3.1", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-lkh8gff5gpHLjxIV+IaApMxQhTGnir2pNUAqcNgeKkvK5bT/30Ey/nzBxNLDlkztCH4dP7PixkMt9SWEKFPBWg=="],
+    "svelte": ["svelte@5.28.2", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^1.4.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-FbWBxgWOpQfhKvoGJv/TFwzqb4EhJbwCD17dB0tEpQiw1XyUEKZJtgm4nA4xq3LLsMo7hu5UY/BOFmroAxKTMg=="],
+
+    "svelte-adapter-bun": ["svelte-adapter-bun@0.5.2", "", { "dependencies": { "tiny-glob": "^0.2.9" } }, "sha512-xEtFgaal6UgrCwwkSIcapO9kopoFNUYCYqyKCikdqxX9bz2TDYnrWQZ7qBnkunMxi1HOIERUCvTcebYGiarZLA=="],
+
+    "svelte-check": ["svelte-check@4.1.7", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-1jX4BzXrQJhC/Jt3SqYf6Ntu//vmfc6VWp07JkRfK2nn+22yIblspVUo96gzMkg0Zov8lQicxhxsMzOctwcMQQ=="],
+
+    "tiny-glob": ["tiny-glob@0.2.9", "", { "dependencies": { "globalyzer": "0.1.0", "globrex": "^0.1.2" } }, "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg=="],
 
     "tinyglobby": ["tinyglobby@0.2.13", "", { "dependencies": { "fdir": "^6.4.4", "picomatch": "^4.0.2" } }, "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw=="],
 
@@ -364,5 +404,7 @@
     "vite/rollup/@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.40.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-DfcogW8N7Zg7llVEfpqWMZcaErKfsj9VvmfSyRjCyo4BI3wPEfrzTtJkZG6gKP/Z92wFm6rz2aDO7/JfiR/whA=="],
 
     "vite/rollup/@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.40.1", "", { "os": "win32", "cpu": "x64" }, "sha512-ECyOuDeH3C1I8jH2MK1RtBJW+YPMvSfT0a5NN0nHfQYnDSJ6tUiZH3gzwVP5/Kfh/+Tt7tpWVF9LXNTnhTJ3kA=="],
+
+    "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
   }
 }

package.json

@@ -15,9 +15,14 @@
 		"@sveltejs/adapter-auto": "^6.0.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"sass": "^1.87.0",
 		"svelte": "^5.0.0",
+		"svelte-adapter-bun": "^0.5.2",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.2.6"
+	},
+	"dependencies": {
+		"marked": "^15.0.11"
 	}
 }

src/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

src/app.scss

@@ -0,0 +1,5 @@
+$blue: oklch(0.76 0.0358 233.23);
+$yellow: oklch(0.98 0.1102 107.17);
+$orange: oklch(0.76 0.1039 65.65);
+$green: oklch(0.22 0.0211 174.37);
+$green-42: oklch(42% 0.042 142);

src/lib/db/index.ts

@@ -0,0 +1,39 @@
+import Database from 'bun:sqlite';
+import { dev } from '$app/environment';
+
+// Initialize the database
+const db = new Database(dev ? 'dev.db' : 'prod.db', { create: true});
+
+
+// Close the database connection when the application shuts down
+process.on('SIGINT', () => {
+  db.close(false);
+  process.exit(0);
+}); 
+
+// Export database instance and helper functions
+export { db };
+
+// Example helper functions
+export function get_all_users() {
+  return db.query('SELECT * FROM users').all();
+}
+
+export function create_user(name: string, email: string) {
+  try {
+    return { success: true, id: result.lastInsertRowid, name, email };
+    const result = db.query('INSERT INTO users (name, email) VALUES ($name, $email)').get({$name: name, $email: email});
+  } catch (error) {
+    console.error(error);
+    return { success: false, error: 'Failed to create user' + (error as Error).message };
+  }
+}
+
+export function get_user(name: string) {
+  return db.query('SELECT * FROM users WHERE name = ?').get(name);
+}
+
+export function get_all_pork() {
+  return db.query('SELECT * FROM pork_cuts').all();
+}
+

src/lib/index.ts

@@ -1 +1,3 @@
 // place files you want to import through the `$lib` alias in this folder.
+export const RAW_COST = 6.5
+export const PROCESSED_COST = 7.5

src/routes/+layout.server.ts

@@ -0,0 +1,7 @@
+import { get_all_users } from '$lib/db';
+
+export async function load() {
+  return {
+    users:  get_all_users(),
+  };
+}

src/routes/+layout.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  interface Props {
+    data: {
+      users: {
+        name: string;
+        email: string;
+      }[];
+    };
+    children: any;
+  }
+  let { data, children }: Props = $props();
+  $inspect(data);
+</script>
+
+<main>
+  {@render children()}
+</main>
+
+<aside>
+  <!-- <h2>Sidebar</h2> -->
+<!--   <ul>
+    {#each data.users as user}
+      <li>
+        <a href={`/user/${user.name}`}>{user.name}</a>
+      </li>
+    {/each}
+  </ul> -->
+</aside>
+
+<style lang="scss">
+  @use '/src/app.scss' as *;
+  :global(body) {
+    background-color: $green-42;
+    $list: (
+      // '3px-tile.png',
+      'arabesque.png',
+      // 'beige-paper.png',
+      // 'binding-dark.png',
+      // '45-degree-fabric-light.png'
+    );
+    $bg: nth($list, random(length($list)));
+    background-image: url('/patterns/#{$bg}');
+    // background-image: url('/pattern.svg');
+    // background-repeat: no-repeat;
+    background-attachment: fixed;
+  }
+  main {
+    display: flex;
+    flex-direction: row;
+  }
+
+  aside {
+    width: 200px;
+    padding: 1rem;
+  }
+
+
+  :global(html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video){
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    color: inherit;
+    font-family: "Garamond",sans-serif;
+    vertical-align: baseline;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    text-size-adjust: none;
+  }
+
+
+  @font-face{
+    font-family: 'Garamond';
+    font-display: swap;
+    font-style: normal;
+    font-weight: 100;
+    src: url(/font/EBGaramond-Initials.otf) format('opentype');
+  }
+  @font-face{
+    font-family: 'Garamond';
+    font-display: swap;
+    font-style: normal;
+    font-weight: 500;
+    src: url(/font/EBGaramond08-Regular.otf) format('opentype');
+  }
+  @font-face{
+    font-family: 'Garamond';
+    font-display: swap;
+    font-style: normal;
+    font-weight: 600;
+    src: url(/font/EBGaramondSC08-Regular.otf) format('opentype');
+  }
+  @font-face{
+    font-family: 'Garamond';
+    font-display: swap;
+    font-style: normal;
+    font-weight: 800;
+    src: url(/font/EBGaramond12-Regular.otf) format('opentype');
+  }
+  @font-face{
+    font-family: 'Garamond';
+    font-display: swap;
+    font-style: normal;
+    font-weight: 900;
+    src: url(/font/EBGaramondSC12-ExtraBold.otf) format('opentype');
+  }
+</style>

src/routes/+page.server.ts

@@ -0,0 +1,24 @@
+import { get_all_users, create_user } from '$lib/db';
+import { fail, type Actions } from '@sveltejs/kit';
+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**.');
+
+  return { users, html };
+}
+
+export const actions: Actions = {
+  default: async ({ request }: { request: Request }) => {
+    const formData = await request.formData();
+    const name = formData.get('name');
+    const email = formData.get('email');
+
+    if (!name || !email) {
+      return fail(400, { name, email, error: 'Name and email are required' });
+    }
+    
+    return create_user(name as string, email as string);
+  }
+};

src/routes/+page.svelte

@@ -1,2 +1,87 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+  let { data, form } = $props<{ users: Array<{ name: string, email: string }>, html: string }>();
+  let { users, html } = data;
+
+  $inspect(form);
+</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">
+  @use '/src/app.scss' as *;
+
+  main {
+    max-width: 800px;
+    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/pork/+page.server.js

@@ -0,0 +1,8 @@
+import { get_all_pork } from '$lib/db';
+
+export async function load() {
+  return {
+    pork: get_all_pork()
+  }
+}
+

src/routes/pork/+page.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { RAW_COST, PROCESSED_COST } from '$lib/index';
+  let { data } = $props<{ data: { pork: Pork[] } }>();
+  interface Pork {
+    pork: {
+        name: string;
+        min_weight: number;
+        max_weight: number;
+        stock: number;
+        raw_cut: boolean;
+        id: number;
+        preweighed: boolean;
+    };
+  }
+
+  let selected = $state({
+    name: "Chop"
+  })
+  
+</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> -->
+
+  <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>
+          <span>{name}</span>
+          {#if preweighed}
+            <span>{min_weight} lb</span>
+          {:else}
+            <span>{min_weight} ~ ${max_weight} lbs</span>
+          {/if}
+          <span>{stock}</span>
+        </li>
+      {/each}
+    </ol>
+    <img src={`/pork/${selected.name.replace(' ', '_')}.jpg`} alt={`Image of a ${selected.name}`} />
+  </div>
+</section>
+
+<style lang="scss">
+  @use '/src/app.scss' as *;
+  section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    h1 {
+        text-align: center;
+        font-size: 5rem;
+        font-weight: 600;
+        margin: 0 0 2rem 0;
+    }   
+    img {
+      width: 20rem;
+      height: fit-content;
+      border-radius: 0.375rem;
+      // min-width: 10rem;
+      // min-height: 10rem;
+    }
+
+    #tui{
+      display: flex;
+      width: 80%;
+      font-size: 1.5rem;
+      
+      ol{
+        width: 75%;
+        display: inherit;
+        flex-direction: column;
+        list-style: none;
+        li{
+          display: inherit;
+          gap: 1rem;
+          span{
+            flex-basis: 33%;
+          }
+        }
+      }
+    }
+
+    .list, .used-to-be-div {
+        display: flex;
+        background: $blue;
+        border: 4px solid $green;
+        border-radius: 1rem;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        flex-basis: 30rem;
+        &.list {
+            background: none;
+            flex-direction: row;
+            border: none;
+            flex-wrap: wrap;
+        }
+        h2 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin: 0;
+        }
+        span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            p {
+                font-size: 1.25rem;
+                font-weight: 400;
+                margin: 0;
+            }
+        }
+    }
+  }
+</style>

src/routes/user/[user]/+page.server.ts

@@ -0,0 +1,7 @@
+import { get_user } from "$lib/db";
+
+export async function load({ params }) {
+  const user = await get_user(params.user);
+  console.log(user);
+  return { user };
+}

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Props {
+    data: {
+      user: {
+        name: string;
+        email: string;
+      };
+    };
+  }
+  let { data }: Props = $props();
+  $inspect(data);
+</script>
+<main>
+  <h1>{data.user.name}</h1>
+  <p>{data.user.email}</p>
+</main>

static/pattern.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="2560px" width="1440px">
+  <defs>
+    <radialGradient id="0" gradientTransform="translate(-0.49 0.51) scale(1.93, 0.11)">
+      <stop offset="0%" stop-color="#dfa468"/>
+      <stop offset="25%" stop-color="rgba(224, 145, 83, 0.75)"/>
+      <stop offset="50%" stop-color="rgba(228, 123, 62, 0.5)"/>
+      <stop offset="100%" stop-color="rgba(255, 0, 0, 0)"/>
+    </radialGradient>
+    <radialGradient id="1" gradientTransform="translate(-0.25 0.28) scale(1.51, 0.52)">
+      <stop offset="0%" stop-color="#fffda4"/>
+      <stop offset="25%" stop-color="rgba(255, 213, 66, 0.75)"/>
+      <stop offset="50%" stop-color="rgba(250, 170, 0, 0.5)"/>
+      <stop offset="100%" stop-color="rgba(255, 0, 0, 0)"/>
+    </radialGradient>
+    <linearGradient id="2" x1="0.5" y1="0" x2="0.5" y2="1">
+      <stop offset="0%" stop-color="#9bb5c4"/>
+      <stop offset="25%" stop-color="rgba(157, 161, 207, 0.75)"/>
+      <stop offset="50%" stop-color="rgba(202, 121, 218, 0.5)"/>
+      <stop offset="100%" stop-color="rgba(255, 0, 0, 0)"/>
+    </linearGradient>
+    <linearGradient id="3" x1="0.5" y1="1" x2="0.5" y2="0">
+      <stop offset="0%" stop-color="#101e1a"/>
+      <stop offset="25%" stop-color="rgba(26, 57, 25, 0.75)"/>
+      <stop offset="50%" stop-color="rgba(75, 77, 32, 0.5)"/>
+      <stop offset="100%" stop-color="rgba(255, 0, 0, 0)"/>
+    </linearGradient>
+  </defs>
+  <rect fill="url(#0)" height="100%" width="100%"/>
+  <rect fill="url(#1)" height="100%" width="100%"/>
+  <rect fill="url(#2)" height="100%" width="100%"/>
+  <rect fill="url(#3)" height="100%" width="100%"/>
+</svg>

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from 'svelte-adapter-bun';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */

vite.config.ts

@@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	server:{
+		port: 4242
+	}
 });