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",
"build": "vite build",
"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 ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"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">
<head>
<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" />
%sveltekit.head%
</head>
src/app.scss
+5 -4
View File
@@ -1,5 +1,6 @@
$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);
$yellow: oklch(0.84 0.123 100);
$orange: oklch(0.76 0.1239 65);
$brown: oklch(0.36 0.042 42);
$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';
// Initialize the database
const db = new Database(dev ? 'dev.db' : 'prod.db', { create: true});
const db = new Database('sludge.db', { create: true});
db.exec(`
CREATE TABLE IF NOT EXISTS users (
@@ -36,11 +36,15 @@ process.on('SIGINT', () => {
// 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 get_all_blags() {
return db.query('SELECT * FROM blags').all();
}
export function get_blag(uri) {
return db.query('SELECT * FROM blags WHERE uri = ?').get(uri);
}
export function create_user(name: string, email: string) {
try {
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() {
return {
users: get_all_users(),
};
return { };
}
src/routes/+layout.svelte
+58 -60
View File
@@ -1,53 +1,34 @@
<script lang="ts">
interface Props {
data: {
users: {
name: string;
email: string;
}[];
};
data: {};
children: any;
}
let { data, children }: Props = $props();
$inspect(data);
// $inspect("l",data);
</script>
<nav>
<a href="/">Sludge</a>
<a href="/fest">Fest</a>
<a href="/pork">Pork</a>
<a href="/blag">Blag</a>
</nav>
<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',
// '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-image: url('/patterns/arabesque.png');
background-attachment: fixed;
}
nav{
@@ -55,7 +36,9 @@
display: flex;
gap: 1rem;
justify-content: flex-end;
text-shadow: 3px 3px 3px $green;
a{
font-weight: 700;
text-decoration: none;
&:first-child{
margin-right: auto;
@@ -71,60 +54,75 @@
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: inherit;
color: $yellow;
font-family: "Garamond", serif;
font-size-adjust: 0.75;
vertical-align: baseline;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size-adjust: 0.75;
}
@font-face{
font-family: 'Garamond';
font-family: 'Baskerville';
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-style: italic;
font-weight: 500;
src: url(/font/EBGaramond08-Regular.otf) format('opentype');
src: url(/font/LibreBaskerville-Italic.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-family: 'Baskerville';
font-display: swap;
font-style: normal;
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>
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 { marked } from 'marked';
export async function load() {
const users = await get_all_users();
const html = marked.parse('# Sludge And Links\n\n**maybe**.');
return { users, html };
return { 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
+5
View File
@@ -5,6 +5,11 @@
$inspect(form);
</script>
<svelte:head>
<title>Sludge and Link</title>
<meta name="description" content="Sludge's internet facing spot" />
</svelte:head>
<main>
<div>{@html html}</div>
</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>
<svelte:head>
<title></title>
<meta name="description" content="" />
<title>!!Sludge Fest 2025!!</title>
<meta name="description" content="Sludge Fest's internet facing spot" />
</svelte:head>
<section>
<h1>Coming Soon&trade; - 2025</h1>
<h1>August 9 2025</h1>
<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>
<style lang="scss">
@use '/src/app.scss' as *;
: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>
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>
<svelte:head>
<title>Sludge Farm Pork</title>
<meta name="description" content="Please buy some Pork, it tastes good I swear" />
</svelte:head>
<section>
<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>
<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}}
{@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST}
<li onmouseenter={change_photo} id={name}>
@@ -34,9 +41,10 @@
{#if preweighed}
<span>{min_weight} lb</span>
{:else}
<span>{min_weight} ~ ${max_weight} lbs</span>
<span>{min_weight} ~ {max_weight} lbs</span>
{/if}
<span>{stock}</span>
<span class="small">{price_per_lb}$</span>
<span class="small">{stock}</span>
</li>
{/each}
</ol>
@@ -47,7 +55,10 @@
<style lang="scss">
@use '/src/app.scss' as *;
@use 'sass:color';
b{
font-family: "Initials";
font-weight: 100;
}
section {
@@ -57,28 +68,26 @@
align-items: center;
justify-content: center;
h1 {
font-family: "Initials";
text-align: center;
font-size: 2.5rem;
font-weight: 500;
text-shadow: 3px 3px 3px $green;
}
h5{
font-size: 0.75rem;
color:transparentize(black, 0.5)
color: color.adjust($yellow, $alpha: -0.5)
}
img {
width: 50%;
height: fit-content;
border-radius: 0.375rem;
text-align: center;
// min-width: 10rem;
// min-height: 10rem;
display: none;
}
#tui{
display: flex;
width: 90%;
font-size: 1rem;
gap: 1rem;
ol{
width: 100%;
@@ -88,54 +97,39 @@
li{
display: inherit;
gap: 1rem;
padding-left: 1rem;
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){
background: transparentize(color.to-space($blue, rgb), 0.75);
background: color.adjust($blue, $alpha: -0.75);
}
&:not(:first-child):hover{
background: transparentize(color.to-space($green, rgb), 0.5);
background: color.adjust($green, $alpha: -0.5);
// background: $green;
}
}
}
}
}
.list, .used-to-be-div {
display: flex;
background: $blue;
border: 4px solid $green;
border-radius: 1rem;
flex-direction: column;
@media screen and (min-width: 640px){
img{
display: unset!important;
width: 50%;
height: fit-content;
border-radius: 0.375rem;
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;
}
}
align-self: center;
}
}
</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.