fix html build output to be human-readable, add new route group for oldschool webpages

Author: gchartier

src/routes/(oldschool)/+layout.ts

@@ -0,0 +1 @@
+export const csr = false; // no client-side JS

src/routes/+page.svelte renamed to src/routes/(oldschool)/+page.svelte

@@ -53,7 +53,7 @@
 
 	function getHostname(url: string) {
 		try {
-			let hostname = new URL(url).hostname;
+			const hostname = new URL(url).hostname;
 			// Remove www. prefix if present
 			return hostname.replace(/^www\./, '');
 		} catch {

src/routes/html-day-austin-2025/+page.svelte renamed to src/routes/(oldschool)/html-day-austin-2025/+page.svelte

@@ -4,7 +4,7 @@
 	<script type="text/javascript" src="html-energy-webring/onionring/widget.js" defer></script>
 </svelte:head>
 
-<aside class="border-b-4 border-black bg-lime-400 p-2 text-black">
+<aside class="aside-banner">
 	<p>
 		This page was made during <a
 			href="https://www.gabriel-export.earth/html-day-austin-2025"
@@ -13,72 +13,66 @@
 	</p>
 </aside>
 <main>
-	<div
-		style="width: fit-content; background: lightgray; border-radius: 20px; padding: 2rem; border: 5px solid black;"
-	>
+	<div class="main-content-box">
 		<h1>What is a Pattern?</h1>
 		<p>There's actually a lot of different kinds out there...</p>
 
 		<h2>Textiles, Fabrics, and Tiles</h2>
-		<div style="display: flex; gap: 4rem;">
+		<div class="flex-container">
 			<div>
 				<p>Maybe you think of plaid?</p>
 				<img
-					src="patterns/plaid.gif"
-					style="width: 10rem;"
+					src="/patterns/plaid.gif"
+					class="small-image"
 					alt="a dog in a picnic basekt with a plaid blanket"
 				/>
 			</div>
 
 			<div>
 				<p>or houndstooth?</p>
-				<img src="patterns/houndstooth.gif" style="width: 10rem;" alt="houndstooth pattern" />
+				<img src="/patterns/houndstooth.gif" class="small-image" alt="houndstooth pattern" />
 			</div>
 
 			<div>
 				<p>or some bathroom tiles?</p>
-				<img src="patterns/tiles.jpg" style="width: 10rem;" alt="houndstooth pattern" />
+				<img src="/patterns/tiles.jpg" class="small-image" alt="houndstooth pattern" />
 			</div>
 		</div>
 
 		<h2>Nature</h2>
-		<p style="padding-bottom: 1rem;">Maybe you might think of patterns in nature.</p>
-		<div style="display: flex; gap: 4rem;">
+		<p class="nature-intro">Maybe you might think of patterns in nature.</p>
+		<div class="flex-container">
 			<div>
 				<p>Like the ripples in dunes...</p>
 				<img
-					src="patterns/dunes.jpg"
+					src="/patterns/dunes.jpg"
 					alt="sand dunes with ripples in the sand"
-					style="width: 20rem;"
+					class="large-image"
 				/>
 			</div>
 
 			<div>
 				<p>or the waves of the sea</p>
-				<img
-					src="patterns/waves.gif"
-					alt="a gif of waves in the sea"
-					style="width: 20rem; height: 3rem;"
-				/>
+				<img src="/patterns/waves.gif" alt="a gif of waves in the sea" class="wave-image" />
 				<p>
 					or the spirals in shells <img
-						src="patterns/shell.webp"
+						src="/patterns/shell.webp"
 						alt="a nautilus shell with the golden ratio spiral"
-						style="width: 20rem;"
+						class="large-image"
 					/>
 				</p>
 			</div>
 
 			<div>
 				<p>
 					or how lightning, tree roots, tree branches, and human veins all look the same. <span
-						style="background-color: yellow;">wtf is up with that</span
+						class="highlight-text">wtf is up with that</span
 					>
 				</p>
 				<img
-					src="patterns/fractals.jpg"
+					src="/patterns/fractals.jpg"
 					alt="examples of fractals in nature looking the same like tree roots, tree branches, rivers, lightning, and leaf veins"
-					style="width: 20rem;"
+					class="large-image"
 				/>
 			</div>
 		</div>
@@ -89,7 +83,7 @@
 <style>
 	main {
 		padding: 3rem;
-		background-image: url('patterns/bg.gif');
+		background-image: url('/patterns/bg.gif');
 	}
 
 	h1 {
@@ -107,4 +101,46 @@
 		margin: 0 auto;
 		margin-top: 2rem;
 	}
+
+	.aside-banner {
+		border-bottom-width: 4px;
+		border-bottom-color: black;
+		background-color: #a3e635; /* lime-400 equivalent */
+		padding: 0.5rem; /* p-2 equivalent */
+		color: black;
+	}
+
+	.main-content-box {
+		width: fit-content;
+		background: lightgray;
+		border-radius: 20px;
+		padding: 2rem;
+		border: 5px solid black;
+	}
+
+	.flex-container {
+		display: flex;
+		gap: 4rem;
+	}
+
+	.small-image {
+		width: 10rem;
+	}
+
+	.large-image {
+		width: 20rem;
+	}
+
+	.wave-image {
+		width: 20rem;
+		height: 3rem;
+	}
+
+	.nature-intro {
+		padding-bottom: 1rem;
+	}
+
+	.highlight-text {
+		background-color: yellow;
+	}
 </style>

src/routes/html-energy-webring/+page.svelte renamed to src/routes/(oldschool)/html-energy-webring/+page.svelte

@@ -1 +1 @@
-export const prerender = true;
+export const prerender = true; // generate HTML at build

src/routes/patterns/+page.svelte renamed to src/routes/(oldschool)/patterns/+page.svelte

@@ -8,6 +8,9 @@ const config = {
 	kit: {
 		adapter: adapter({ fallback: '404.html' })
 	},
+	compilerOptions: {
+		preserveWhitespace: true
+	},
 	extensions: ['.svelte', '.svx']
 };
 

src/routes/+layout.ts

@@ -4,5 +4,9 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit(), devtoolsJson()]
+	plugins: [tailwindcss(), sveltekit(), devtoolsJson()],
+	build: {
+		minify: false,
+		cssMinify: false
+	}
 });