will/sludge-link
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

I did a bunch of stuff. No dev db because that was too hard for me. I got the blag stuff working and figured out the Intials Stuff. I had to build it myself

Browse Source
This commit is contained in:
Will Stensvold
2025-05-15 22:37:24 -05:00
parent 99c4781cb6
commit 09f07e7291
37 changed files with 347 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev.db
BIN
View File
Binary file not shown.
package.json
+2
View File
@@ -7,6 +7,8 @@
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"zip": "rm -f build.zip && zip -r build.zip build/",
"prod": "bun --bun run build && bun run zip",
"prepare": "svelte-kit sync || echo ''", "prepare": "svelte-kit sync || echo ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
src/app.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
src/app.scss
+5 -4
View File
@@ -1,5 +1,6 @@
$blue: oklch(0.76 0.0358 233.23); $blue: oklch(0.76 0.0358 233.23);
$yellow: oklch(0.98 0.1102 107.17); $yellow: oklch(0.84 0.123 100);
$orange: oklch(0.76 0.1039 65.65); $orange: oklch(0.76 0.1239 65);
$green: oklch(0.22 0.0211 174.37); $brown: oklch(0.36 0.042 42);
$green-42: oklch(42% 0.042 142); $green: oklch(0.22 0.0211 174);
$green-42: oklch(0.42 0.042 142);
src/lib/db/index.ts
+8 -4
View File
@@ -2,7 +2,7 @@ import Database from 'bun:sqlite';
import { dev } from '$app/environment'; import { dev } from '$app/environment';
// Initialize the database // Initialize the database
const db = new Database(dev ? 'dev.db' : 'prod.db', { create: true}); const db = new Database('sludge.db', { create: true});
db.exec(` db.exec(`
CREATE TABLE IF NOT EXISTS users ( CREATE TABLE IF NOT EXISTS users (
@@ -36,11 +36,15 @@ process.on('SIGINT', () => {
// Export database instance and helper functions // Export database instance and helper functions
export { db }; export { db };
// Example helper functions export function get_all_blags() {
export function get_all_users() { return db.query('SELECT * FROM blags').all();
return db.query('SELECT * FROM users').all();
} }
export function get_blag(uri) {
return db.query('SELECT * FROM blags WHERE uri = ?').get(uri);
}
export function create_user(name: string, email: string) { export function create_user(name: string, email: string) {
try { try {
return { success: true, id: result.lastInsertRowid, name, email }; return { success: true, id: result.lastInsertRowid, name, email };
src/routes/+layout.server.ts
+1 -5
View File
@@ -1,7 +1,3 @@
import { get_all_users } from '$lib/db';
export async function load() { export async function load() {
return { return { };
users: get_all_users(),
};
} }
src/routes/+layout.svelte
+58 -60
View File
@@ -1,53 +1,34 @@
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
data: { data: {};
users: {
name: string;
email: string;
}[];
};
children: any; children: any;
} }
let { data, children }: Props = $props(); let { data, children }: Props = $props();
$inspect(data); // $inspect("l",data);
</script> </script>
<nav> <nav>
<a href="/">Sludge</a> <a href="/">Sludge</a>
<a href="/fest">Fest</a> <a href="/fest">Fest</a>
<a href="/pork">Pork</a> <a href="/pork">Pork</a>
<a href="/blag">Blag</a>
</nav> </nav>
<main> <main>
{@render children()} {@render children()}
</main> </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"> <style lang="scss">
@use '/src/app.scss' as *; @use '/src/app.scss' as *;
:global(body) { :global(body) {
background-color: $green-42; background-color: $green-42;
$list: (
// '3px-tile.png', // '3px-tile.png',
'arabesque.png', // 'arabesque.png',
// 'beige-paper.png', // 'beige-paper.png',
// 'binding-dark.png', // 'binding-dark.png',
// '45-degree-fabric-light.png' // '45-degree-fabric-light.png'
);
$bg: nth($list, random(length($list))); background-image: url('/patterns/arabesque.png');
background-image: url('/patterns/#{$bg}');
// background-image: url('/pattern.svg');
// background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
} }
nav{ nav{
@@ -55,7 +36,9 @@
display: flex; display: flex;
gap: 1rem; gap: 1rem;
justify-content: flex-end; justify-content: flex-end;
text-shadow: 3px 3px 3px $green;
a{ a{
font-weight: 700;
text-decoration: none; text-decoration: none;
&:first-child{ &:first-child{
margin-right: auto; margin-right: auto;
@@ -71,60 +54,75 @@
flex-direction: row; 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){ :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; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font: inherit; // font: inherit;
color: inherit; color: $yellow;
font-family: "Garamond", serif; font-family: "Garamond", serif;
font-size-adjust: 0.75;
vertical-align: baseline; vertical-align: baseline;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size-adjust: 0.75;
} }
@font-face{ @font-face{
font-family: 'Garamond'; font-family: 'Baskerville';
font-display: swap; font-display: swap;
font-style: normal; font-style: italic;
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; font-weight: 500;
src: url(/font/EBGaramond08-Regular.otf) format('opentype'); src: url(/font/LibreBaskerville-Italic.otf) format('opentype');
} }
@font-face{ @font-face{
font-family: 'Garamond'; font-family: 'Baskerville';
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-display: swap;
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
src: url(/font/EBGaramondSC12-ExtraBold.otf) format('opentype'); src: url(/font/LibreBaskerville-Bold.otf) format('opentype');
}
@font-face{
font-family: 'Baskerville';
font-display: swap;
font-style: normal;
font-weight: 500;
src: url(/font/LibreBaskerville-Regular.otf) format('opentype');
}
@font-face{
font-family: 'Initials';
font-display: swap;
font-style: normal;
font-weight: 500;
src: url(/font/EBGaramond-Initials.otf) format('opentype');
}
@font-face{
font-family: 'Initials';
font-display: swap;
font-style: normal;
font-weight: 100;
src: url(/font/EBGaramond-InitialsF1.otf) format('opentype');
}
@font-face{
font-family: 'Initials';
font-display: swap;
font-style: normal;
font-weight: 200;
src: url(/font/EBGaramond-InitialsF2.otf) format('opentype');
}
@font-face{
font-family: 'Garamond';
font-display: swap;
font-style: italic;
src: url(/font/EBGaramond-Italic.ttf) format('truetype');
}
@font-face{
font-family: 'Garamond';
font-display: swap;
font-style: normal;
src: url(/font/EBGaramond.ttf) format('truetype');
} }
</style> </style>
src/routes/+page.server.ts
+2 -12
View File
@@ -1,24 +1,14 @@
import { get_all_users, create_user } from '$lib/db'; import { create_user } from '$lib/db';
import { fail, type Actions } from '@sveltejs/kit'; import { fail, type Actions } from '@sveltejs/kit';
import { marked } from 'marked'; import { marked } from 'marked';
export async function load() { export async function load() {
const users = await get_all_users();
const html = marked.parse('# Sludge And Links\n\n**maybe**.'); const html = marked.parse('# Sludge And Links\n\n**maybe**.');
return { users, html }; return { html };
} }
export const actions: Actions = { export const actions: Actions = {
default: async ({ request }: { request: Request }) => { 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
+5
View File
@@ -5,6 +5,11 @@
$inspect(form); $inspect(form);
</script> </script>
<svelte:head>
<title>Sludge and Link</title>
<meta name="description" content="Sludge's internet facing spot" />
</svelte:head>
<main> <main>
<div>{@html html}</div> <div>{@html html}</div>
</main> </main>
src/routes/blag/+page.server.ts
+12
View File
@@ -0,0 +1,12 @@
import { get_all_blags } from '$lib/db'
export async function load({ fetch, data, setHeaders, parent, depends}) {
return{
blags: await get_all_blags()
}
}
export const actions = {
default: async({cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest}) => {
}
}
src/routes/blag/+page.svelte
+44
View File
@@ -0,0 +1,44 @@
<script lang="javascript">
let {data} = $props()
$inspect("b",data)
</script>
<svelte:head>
<title></title>
<meta name="description" content="" />
</svelte:head>
<section>
<h1>I might decide to write sometime</h1>
<ol>
{#each data.blags as {title, uri, created_at}}
<li><a href="blag/{uri}">{title}</a> @ <p>{new Date(created_at).toLocaleDateString()}</p></li>
{/each}
</ol>
</section>
<style lang="scss">
@use '/src/app.scss' as *;
section {
margin: 1rem auto;
min-width: 60rem;
display: flex;
flex-direction: column;
align-items: center;
h1{
font-size: 1.5rem;
text-shadow: 3px 3px 3px $green;
}
ol{
list-style: none;
padding: 0;
li{
display: flex;
gap: 1rem;
justify-content: space-between;
}
}
}
</style>
src/routes/blag/[uri]/+page.server.ts
+13
View File
@@ -0,0 +1,13 @@
import {get_blag} from '$lib/db'
export async function load({ params, fetch, data, setHeaders, parent, depends}) {
console.log('uri', params.uri)
return {
post: get_blag(params.uri)
}
}
export const actions = {
default: async({cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest}) => {
}
}
src/routes/blag/[uri]/+page.svelte
+22
View File
@@ -0,0 +1,22 @@
<script lang="javascript">
let {data} = $props()
let {post} = data
$inspect('bu', data)
</script>
<svelte:head>
<title>{post.title}</title>
<meta name="description" content="" />
</svelte:head>
<section>
<h1>{post.title}</h1>
{@html post.body}
<span>{post.created_at}</span>
</section>
<style lang="scss">
section {
}
</style>
src/routes/blag/new/+page.server.ts
+8
View File
@@ -0,0 +1,8 @@
export async function load({}) {
console.log("new blag")
}
export const actions = {
default: async({cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest}) => {
}
}
src/routes/blag/new/+page.svelte
+96
View File
@@ -0,0 +1,96 @@
<script lang="javascript">
import { marked } from 'marked'
let value = $state(`# Heading 1
This is a paragraph that I need to put in *here is some italics*
1. This is a list
2. This is a second list
3.
## Heading 2
---
**Bold**
Regular; hmm double enter gets a new \<p>
> This is a quote
> This is starting to work
> It will only line over on width basis I guess that makes sense
`)
$inspect("n", value)
</script>
<svelte:head>
<title></title>
<meta name="description" content="" />
</svelte:head>
<section>
<div>
<h1>Editor</h1>
<div>
<textarea bind:value={value}>
</textarea>
</div>
</div>
<div id="preview">
<h1>Preview</h1>
<div>
{@html marked.parse(value)}
</div>
</div>
</section>
<style lang="scss">
@use '/src/app.scss' as *;
section {
width: 100%;
display: flex;
gap: 1rem;
div{
margin: 0 auto;
flex-basis: 45%;
textarea {
resize: none;
width: 100%;
height: 40rem;
line-height: 1.5;
border-radius: 5px;
border: 1px solid $green;
background: $green-42;
color: $yellow;
font-family: "Garamond";
}
}
em{
// font-weight: 240;
color: black;
}
#preview{
:global(h1){
font-family: "Initials";
}
:global(hr){
color: $green;
}
:global(blockquote) {
background: $green-42;
border-left: 1rem solid $green;
padding: 0.5rem 1rem;
&:before {
color: $orange;
content: open-quote;
font-size: 2rem;
line-height: 0.1rem;
vertical-align: -0.6rem;
}
&:p {
display: inline;
}
}
}
}
</style>
src/routes/fest/+page.svelte
+24 -4
View File
@@ -3,17 +3,37 @@
</script> </script>
<svelte:head> <svelte:head>
<title></title> <title>!!Sludge Fest 2025!!</title>
<meta name="description" content="" /> <meta name="description" content="Sludge Fest's internet facing spot" />
</svelte:head> </svelte:head>
<section> <section>
<h1>Coming Soon&trade; - 2025</h1> <h1>August 9 2025</h1>
<h2>This time its brown</h2> <h2>This time its brown</h2>
<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>
</section> </section>
<style lang="scss"> <style lang="scss">
@use '/src/app.scss' as *;
:global(body){ :global(body){
background-color: oklch(38% 0.042 42); background-color: $brown;
}
section{
width: 100%;
text-align: center;
padding-top: 2rem;
text-shadow: 3px 3px 3px $green;
h1{
font-size: 3rem;
font-weight: 600;
}
h2{
font-size: 2rem;
}
} }
</style> </style>
src/routes/pork/+page.server.js → src/routes/pork/+page.server.ts
View File
src/routes/pork/+page.svelte
+40 -46
View File
@@ -21,12 +21,19 @@
} }
</script> </script>
<svelte:head>
<title>Sludge Farm Pork</title>
<meta name="description" content="Please buy some Pork, it tastes good I swear" />
</svelte:head>
<section> <section>
<h1><b>F</b>arm Raised Pork</h1> <h1><b>F</b>arm Raised Pork</h1>
<h5>this ain't your grocery store's pork</h5> <h5>this ain't your grocery store's pork</h5>
<div id="tui"> <div id="tui">
<ol> <ol>
<li><span>Cut</span><span>Weight</span><span>Stock</span></li> <li><span>Cut</span><span>Weight</span><span class="small">$/#</span><span class="small">Stock</span></li>
{#each data.pork as {name, raw_cut, preweighed, min_weight, max_weight, stock}} {#each data.pork as {name, raw_cut, preweighed, min_weight, max_weight, stock}}
{@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST} {@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST}
<li onmouseenter={change_photo} id={name}> <li onmouseenter={change_photo} id={name}>
@@ -34,9 +41,10 @@
{#if preweighed} {#if preweighed}
<span>{min_weight} lb</span> <span>{min_weight} lb</span>
{:else} {:else}
<span>{min_weight} ~ ${max_weight} lbs</span> <span>{min_weight} ~ {max_weight} lbs</span>
{/if} {/if}
<span>{stock}</span> <span class="small">{price_per_lb}$</span>
<span class="small">{stock}</span>
</li> </li>
{/each} {/each}
</ol> </ol>
@@ -47,7 +55,10 @@
<style lang="scss"> <style lang="scss">
@use '/src/app.scss' as *; @use '/src/app.scss' as *;
@use 'sass:color'; @use 'sass:color';
b{ b{
font-family: "Initials";
font-weight: 100; font-weight: 100;
} }
section { section {
@@ -57,28 +68,26 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
h1 { h1 {
font-family: "Initials";
text-align: center; text-align: center;
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 500; font-weight: 500;
text-shadow: 3px 3px 3px $green;
} }
h5{ h5{
font-size: 0.75rem; font-size: 0.75rem;
color:transparentize(black, 0.5) color: color.adjust($yellow, $alpha: -0.5)
} }
img { img {
width: 50%; display: none;
height: fit-content;
border-radius: 0.375rem;
text-align: center;
// min-width: 10rem;
// min-height: 10rem;
} }
#tui{ #tui{
display: flex; display: flex;
width: 90%; width: 90%;
font-size: 1rem; font-size: 1rem;
gap: 1rem;
ol{ ol{
width: 100%; width: 100%;
@@ -88,54 +97,39 @@
li{ li{
display: inherit; display: inherit;
gap: 1rem; gap: 1rem;
padding-left: 1rem;
span{ span{
flex-basis: 33%; flex-basis: 50%;
text-align: center;
text-shadow: 3px 3px 3px $green;
&.small{
flex-basis: 25%;
}
&:first-child{
text-align: left;
}
} }
&:nth-child(2n){ &:nth-child(2n){
background: transparentize(color.to-space($blue, rgb), 0.75); background: color.adjust($blue, $alpha: -0.75);
} }
&:not(:first-child):hover{ &:not(:first-child):hover{
background: transparentize(color.to-space($green, rgb), 0.5); background: color.adjust($green, $alpha: -0.5);
// background: $green; // background: $green;
} }
} }
} }
} }
}
.list, .used-to-be-div {
display: flex; @media screen and (min-width: 640px){
background: $blue; img{
border: 4px solid $green; display: unset!important;
border-radius: 1rem; width: 50%;
flex-direction: column; height: fit-content;
border-radius: 0.375rem;
text-align: center; text-align: center;
align-items: center; align-self: 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> </style>
src/routes/user/[user]/+page.server.ts
-7
View File
@@ -1,7 +0,0 @@
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
-16
View File
@@ -1,16 +0,0 @@
<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/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

static/favicon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

static/font/EBGaramond-Initials.otf
BIN
View File
Binary file not shown.
static/font/EBGaramond-InitialsF1.otf
BIN
View File
Binary file not shown.
static/font/EBGaramond-InitialsF2.otf
BIN
View File
Binary file not shown.
static/font/EBGaramond-Italic.ttf
BIN
View File
Binary file not shown.
static/font/EBGaramond.ttf
BIN
View File
Binary file not shown.
static/font/EBGaramond08-Italic.otf
BIN
View File
Binary file not shown.
static/font/EBGaramond08-Regular.otf
BIN
View File
Binary file not shown.
static/font/EBGaramond12-AllSC.otf
BIN
View File
Binary file not shown.
static/font/EBGaramond12-Italic.otf
BIN
View File
Binary file not shown.
static/font/EBGaramond12-Regular.otf
BIN
View File
Binary file not shown.
static/font/EBGaramondSC08-Regular.otf
BIN
View File
Binary file not shown.
static/font/EBGaramondSC12-Regular.otf
BIN
View File
Binary file not shown.
static/font/LibreBaskerville-Bold.otf
BIN
View File
Binary file not shown.
static/font/LibreBaskerville-Italic.otf
BIN
View File
Binary file not shown.
static/font/LibreBaskerville-Regular.otf
BIN
View File
Binary file not shown.