Added a bunch of stuff to make it work and trying out bun
This commit is contained in:
@@ -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-*
|
||||
@@ -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);
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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
|
||||
@@ -0,0 +1,7 @@
|
||||
import { get_all_users } from '$lib/db';
|
||||
|
||||
export async function load() {
|
||||
return {
|
||||
users: get_all_users(),
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
};
|
||||
+87
-2
@@ -1,2 +1,87 @@
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<script lang="ts">
|
||||
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>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
import { get_all_pork } from '$lib/db';
|
||||
|
||||
export async function load() {
|
||||
return {
|
||||
pork: get_all_pork()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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 };
|
||||
}
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user