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
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
+63 -65
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',
// '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-color: $green-42;
// '3px-tile.png',
// 'arabesque.png',
// 'beige-paper.png',
// 'binding-dark.png',
// '45-degree-fabric-light.png'
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
+41 -47
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;
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;
}
}
@media screen and (min-width: 640px){
img{
display: unset!important;
width: 50%;
height: fit-content;
border-radius: 0.375rem;
text-align: center;
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>