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

initial commit of the sludge fest application using protonmail to do the

Browse Source 
emailing with nodemailer
This commit is contained in:
Will Stensvold
2026-04-02 23:10:53 -05:00
parent b47c7a51b4
commit cd8b0a913e
6 changed files with 549 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+1 -1
View File
@@ -42,7 +42,7 @@
--br: 0.375rem;
--bs: 2px 2px 9px var(--primary-8);
--primary: 0;
--primary: 42;
--primary-1: oklch(0.91 0.046 var(--primary));
--primary-2: oklch(0.843 0.083 var(--primary));
--primary-3: oklch(0.777 0.122 var(--primary));
src/routes/fest/+page.svelte
+7 -169
View File
@@ -2,146 +2,14 @@
</script>
<svelte:head>
<title>!!Sludge Fest 2025!!</title>
<title>!!Sludge Fest 2026!!</title>
<meta name="description" content="Sludge Fest's internet facing spot" />
</svelte:head>
<section>
<img
alt="Sludge Fest poster; This time its Brown! August 9th 2025; 2488 County Road G, Grand Marsh, WI 53936 Campground opens 11am CT Shows start 4pm. Gleeplebleepo"
src="/fest/sludge-25.jpg"
/>
<h1>Sludge Fest 26: This time its Brother</h1>
<hr />
<div>
<div>
<label>
<input type="checkbox" />
<img src="/fest/23/08.jpg" alt="SLUDGE lettering on pig fence" />
</label>
<label>
<input type="checkbox" />
<img src="/fest/23/01.jpg" alt="THIS IS A GOOD SIGN; sign on long" />
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/02.jpg"
alt="MOST PEOPLE DON'T LITTER AT SLUDGE; sign on a tree"
/>
</label>
<label>
<input type="checkbox" />
<img src="/fest/23/04.jpg" alt="Merch Tent selling Sludge merch" />
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/05.jpg"
alt="Musicians playing on a stage under some trees"
/>
</label>
<label>
<input type="checkbox" />
<img src="/fest/23/07.jpg" alt="Sound Engineer studying a monitor" />
</label>
</div>
<div>
<label>
<input type="checkbox" />
<img
src="/fest/23/06.jpg"
alt="Allie and Pagel painting a canvas by a mulberry tree"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/17.jpg"
alt="SLUDGE lettering on a fence light by bonfire light"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/16.jpg"
alt="Two men laying on the ground enjoying a bonfire"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/14.jpg"
alt="Band playing on stage at night with lights"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/15.jpg"
alt="Singer dancing on stage at night with lights"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/18.jpg"
alt="DJ playing on the stage with lasers shining on him"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/19.jpg"
alt="Audience watching a band play at night with lights"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/13.jpg"
alt="Light techs putting lights up on a stage"
/>
</label>
</div>
<div>
<label>
<input type="checkbox" />
<img src="/fest/23/00.jpg" alt="Musicians on stage" />
</label>
<label>
<input type="checkbox" />
<img src="/fest/23/09.jpg" alt="Lights and fog in pine alley" />
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/10.jpg"
alt="Lasers and fog with dancers in the pines"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/11.jpg"
alt="Lasers and fog with dancers in the pines 2"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/12.jpg"
alt="Lasers and fog with dancers in the pines 3"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/03.jpg"
alt="Shot from behind the DJ booth with dancers and lights playing against the canopy"
/>
</label>
</div>
</div>
<h2><a href="/fest/apply">Apply Here</a></h2>
</section>
<style lang="scss">
@@ -150,48 +18,18 @@
text-align: center;
padding-top: 2rem;
text-shadow: 3px 3px 3px var(--primary-9);
h1 {
font-size: 2rem;
}
hr {
background: var(--primary-4);
border: none;
height: 0.25rem;
margin: 2rem 0;
}
img {
width: 100%;
}
div {
display: flex;
gap: 1rem;
justify-content: center;
div {
flex-direction: column;
width: 30%;
align-items: center;
justify-content: unset;
// Really cool css image zoom
input[type="checkbox"] {
display: none;
}
img {
max-width: 100%;
transition: transform 0.25s ease;
cursor: zoom-in;
border-radius: 5px;
}
input[type="checkbox"]:checked ~ img {
transform: scale(2);
cursor: zoom-out;
}
}
color: red;
}
}
@media screen and (min-width: 600px) {
section {
img {
width: unset;
}
}
}
</style>
src/routes/fest/25/+page.svelte
+197
View File
@@ -0,0 +1,197 @@
<script lang="typescript">
</script>
<svelte:head>
<title>!!Sludge Fest 2025!!</title>
<meta name="description" content="Sludge Fest's internet facing spot" />
</svelte:head>
<section>
<img
alt="Sludge Fest poster; This time its Brown! August 9th 2025; 2488 County Road G, Grand Marsh, WI 53936 Campground opens 11am CT Shows start 4pm. Gleeplebleepo"
src="/fest/sludge-25.jpg"
/>
<hr />
<div>
<div>
<label>
<input type="checkbox" />
<img src="/fest/23/08.jpg" alt="SLUDGE lettering on pig fence" />
</label>
<label>
<input type="checkbox" />
<img src="/fest/23/01.jpg" alt="THIS IS A GOOD SIGN; sign on long" />
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/02.jpg"
alt="MOST PEOPLE DON'T LITTER AT SLUDGE; sign on a tree"
/>
</label>
<label>
<input type="checkbox" />
<img src="/fest/23/04.jpg" alt="Merch Tent selling Sludge merch" />
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/05.jpg"
alt="Musicians playing on a stage under some trees"
/>
</label>
<label>
<input type="checkbox" />
<img src="/fest/23/07.jpg" alt="Sound Engineer studying a monitor" />
</label>
</div>
<div>
<label>
<input type="checkbox" />
<img
src="/fest/23/06.jpg"
alt="Allie and Pagel painting a canvas by a mulberry tree"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/17.jpg"
alt="SLUDGE lettering on a fence light by bonfire light"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/16.jpg"
alt="Two men laying on the ground enjoying a bonfire"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/14.jpg"
alt="Band playing on stage at night with lights"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/15.jpg"
alt="Singer dancing on stage at night with lights"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/18.jpg"
alt="DJ playing on the stage with lasers shining on him"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/19.jpg"
alt="Audience watching a band play at night with lights"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/13.jpg"
alt="Light techs putting lights up on a stage"
/>
</label>
</div>
<div>
<label>
<input type="checkbox" />
<img src="/fest/23/00.jpg" alt="Musicians on stage" />
</label>
<label>
<input type="checkbox" />
<img src="/fest/23/09.jpg" alt="Lights and fog in pine alley" />
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/10.jpg"
alt="Lasers and fog with dancers in the pines"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/11.jpg"
alt="Lasers and fog with dancers in the pines 2"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/12.jpg"
alt="Lasers and fog with dancers in the pines 3"
/>
</label>
<label>
<input type="checkbox" />
<img
src="/fest/23/03.jpg"
alt="Shot from behind the DJ booth with dancers and lights playing against the canopy"
/>
</label>
</div>
</div>
</section>
<style lang="scss">
section {
width: 100%;
text-align: center;
padding-top: 2rem;
text-shadow: 3px 3px 3px var(--primary-9);
hr {
background: var(--primary-4);
border: none;
height: 0.25rem;
margin: 2rem 0;
}
img {
width: 100%;
}
div {
display: flex;
gap: 1rem;
justify-content: center;
div {
flex-direction: column;
width: 30%;
align-items: center;
justify-content: unset;
// Really cool css image zoom
input[type="checkbox"] {
display: none;
}
img {
max-width: 100%;
transition: transform 0.25s ease;
cursor: zoom-in;
border-radius: 5px;
}
input[type="checkbox"]:checked ~ img {
transform: scale(2);
cursor: zoom-out;
}
}
}
}
@media screen and (min-width: 600px) {
section {
img {
width: unset;
}
}
}
</style>
src/routes/fest/apply/+page.server.ts
+41
View File
@@ -0,0 +1,41 @@
export async function load({ }) {
console.log("sludge fest application")
}
export const actions = {
default: async ({ request }) => {
let data = await request.formData();
console.log("apply", data);
transporter.sendMail({
from: SMTP_USERNAME,
to: "fuckyou@sludge.link",
subject: "This is a test",
html: `
<!DOCTYPE html>
<html>
<body>
<h1>Hello email</h1 >
</body>
</html
`
}, (error, info) => {
if (error) {
console.error("Error sending email:", error);
} else {
console.log("Email sent successfully:", info.response);
}
})
}
}
import { SMTP_TOKEN, SMTP_USERNAME } from '$env/static/private'
import nodemailer from "nodemailer"
const transporter = nodemailer.createTransport({
service: "Proton",
auth: {
user: SMTP_USERNAME,
pass: SMTP_TOKEN
},
authMethod: "PLAIN"
} as nodemailer.TransportOptions)
src/routes/fest/apply/+page.svelte
+300
View File
@@ -0,0 +1,300 @@
<script lang="typescript">
let act_type, perf_length, perf_time, donation_confirmation;
</script>
<section>
<div>
<h1>Sludge Fest Application - 2026</h1>
<p>
Thanks for your interest in performing at <b>Sludge Fest!</b> If you're a
musician, comedian, poet, or any kind of performer, we'd love to hear from
you! Whether you've performed for years or are just getting started, we
want to make you a part of the <b>SLUDGE</b>.
</p>
<ul>
<li><b>Date:</b> August 28/29 2026</li>
<li><b>Location:</b> Sludge Farm - Grand Marsh, WI</li>
</ul>
<p>
This is a DIY event, and while we can't guarantee payment, any donations
collected will be split among performers after covering event costs
(Bathrooms, Tech Rentals, First Aid). We appreciate your understanding and
your art.
</p>
</div>
<form method="POST">
<fieldset>
<legend> Who are You? </legend>
<label>
Band/Artist Name
<input type="text" name="artist_name" />
</label>
<label>
Primary Contact Name
<input type="text" name="artist_contact_name" />
</label>
<label>
Phone Number
<input type="text" name="artist_contact_number" />
</label>
<label>
Email
<input type="text" name="artist_contact_email" />
</label>
<label>
City & State of Origin
<input type="text" name="artist_city" />
</label>
</fieldset>
<fieldset>
<legend>About Your Act</legend>
<label>
Type of Act
<ul>
<label>
<input type="radio" bind:group={act_type} value="live band" />
Live Band
</label>
<label>
<input type="radio" bind:group={act_type} value="dj/electronic" />
DJ / Electronic
</label>
<label>
<input
type="radio"
bind:group={act_type}
value="visual art/installation"
/>
Visual Art / Installation
</label>
<label>
<input type="radio" bind:group={act_type} value="performance art" />
Performance Art
</label>
<label>
<input
type="radio"
bind:group={act_type}
value="spoken word/comedy"
/>
Spoken Word / Comedy
</label>
<label>
<input type="radio" bind:group={act_type} value="other" />
Other:
<input
onfocus={() => (act_type = "other")}
type="text"
name="other_act"
/>
</label>
<input hidden name="act_type" bind:value={act_type} />
</ul>
</label>
<label>
Genre(s)
<input type="text" name="act_genre" />
</label>
<label>
Number of Members Performing
<input type="text" name="act_performer_amount" />
</label>
<label>
Brief Bio
<input type="text" name="act_bio" />
</label>
<label>
Links - BandCamp | Spotify | Youtube | Website | Social Media
<input type="text" name="act_links" />
</label>
</fieldset>
<fieldset>
<legend>The Performance</legend>
<label>
Set Length
<ul>
<label>
<input type="radio" bind:group={perf_length} value="15-25" />
15 - 25 min
</label>
<label>
<input type="radio" bind:group={perf_length} value="30-45" />
30 - 45 min
</label>
<label>
<input type="radio" bind:group={perf_length} value="45-60" />
45 - 60 min
</label>
<label>
<input type="radio" bind:group={perf_length} value="60+" />
60+ min
</label>
<label>
<input type="radio" bind:group={perf_length} value="all day" />
All Day / Ongoing
</label>
<label>
<input type="radio" bind:group={perf_length} value="flexible" />
Flexible / Whatever Works
</label>
<label>
<input type="radio" bind:group={perf_length} value="other" />
Other:
<input
onfocus={() => (perf_length = "other")}
type="text"
name="other_length"
/>
</label>
<input hidden name="perf_length" bind:value={perf_length} />
</ul>
</label>
<label>
Preferred Time
<ul>
<label>
<input type="radio" bind:group={perf_time} value="no preference" />
No Preference
</label>
<label>
<input
type="radio"
bind:group={perf_time}
value="morning/early afternoon"
/>
Morning / Early Afternoon
</label>
<label>
<input type="radio" bind:group={perf_time} value="afternoon" />
Afternoon
</label>
<label>
<input type="radio" bind:group={perf_time} value="evening" />
Evening
</label>
<label>
<input type="radio" bind:group={perf_time} value="late night" />
Late Night
</label>
<label>
<input type="radio" bind:group={perf_time} value="other" />
Other:
<input
onfocus={() => (perf_time = "other")}
type="text"
name="other_time"
/>
</label>
<input hidden name="perf_time" bind:value={perf_time} />
</ul>
</label>
<label>
Tech / Space / Setup Needs
<input type="text" name="performance_needs" />
</label>
</fieldset>
<fieldset>
<legend>One Last Thing</legend>
<label>
What drew you to Sludge Fest?
<input type="text" name="olt_draw" />
</label>
<label>
Anything else you'd like us to know?
<input type="text" name="olt_know" />
</label>
<label>
Preferred Time
<ul>
<label>
<input
type="radio"
bind:group={donation_confirmation}
value="yes"
/>
Yes
</label>
<label>
<input type="radio" bind:group={donation_confirmation} value="no" />
No
</label>
<label>
<input
type="radio"
bind:group={donation_confirmation}
value="discuss"
/>
I'd like to discuss this more
</label>
<input
hidden
name="donation_confirmation"
bind:value={donation_confirmation}
/>
</ul>
</label>
</fieldset>
<button>Submit</button>
</form>
</section>
<style lang="scss">
section {
max-width: 50rem;
margin: 0 auto;
form {
display: flex;
flex-direction: column;
gap: 1rem;
button {
background: var(--primary-6);
color: var(--primary-11);
border: none;
font-weight: 700;
border-radius: var(--br);
font-size: 1.5rem;
width: fit-content;
padding: 0.75rem 1rem;
margin: 0 auto;
&:hover {
background: var(--primary-8);
}
}
}
fieldset {
display: flex;
flex-direction: column;
gap: 1rem;
border: thick outset var(--primary-5);
padding: 0 1rem 1rem 1rem;
border-radius: var(--br);
legend {
font-weight: 900;
font-size: 1.125rem;
margin-left: 1rem;
}
label {
display: flex;
gap: 1rem;
&:has(ul) {
flex-direction: column;
}
input {
background: var(--primary-9);
border: none;
outline: none;
border-radius: var(--br);
color: var(--primary-1);
font-size: 1rem;
padding: 0 0.5rem;
accent-color: var(--primary-6);
}
ul {
display: flex;
flex-direction: column;
}
}
}
}
</style>