I did some stuff with getting it set up and changing photos but i can't get the sqlite to work on prod
This commit is contained in:
@@ -29,3 +29,6 @@ vite.config.ts.timestamp-*
|
||||
|
||||
# Databases
|
||||
*.db
|
||||
|
||||
# zips
|
||||
*.zip
|
||||
@@ -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', () => {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
<script lang="typescript">
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title></title>
|
||||
<meta name="description" content="" />
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<h1>Coming Soon™ - 2025</h1>
|
||||
<h2>This time its brown</h2>
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
:global(body){
|
||||
background-color: oklch(38% 0.042 42);
|
||||
}
|
||||
</style>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user