From 2ef2f5d97448367c552a7a4029db68e7d7c5dedc Mon Sep 17 00:00:00 2001
From: wholteza <zackarias@montell.se>
Date: Sat, 4 Oct 2025 16:08:11 +0200
Subject: [PATCH] Add playground

---
 packages/@zblog/toolchain/src/file-loader.ts |  13 +-
 src/assets/base.css                          |  53 ++++++++
 src/index.ts                                 |   9 +-
 src/playground/playground.html               | 130 +++++++++++++++++++
 src/templates/404.html                       |  27 ++--
 src/templates/index.html                     |  43 +-----
 src/templates/note.html                      |  41 +-----
 7 files changed, 216 insertions(+), 100 deletions(-)
 create mode 100644 src/assets/base.css
 create mode 100644 src/playground/playground.html

diff --git a/packages/@zblog/toolchain/src/file-loader.ts b/packages/@zblog/toolchain/src/file-loader.ts
index 640b273..9b3f019 100644
--- a/packages/@zblog/toolchain/src/file-loader.ts
+++ b/packages/@zblog/toolchain/src/file-loader.ts
@@ -19,23 +19,24 @@ export class FileLoader implements IPluginBuilder {
       const { menuManifest } = builderContext;
       const { files } = this.options;
       files.forEach((file) => {
-        const fileName =
-          file.nameOverride ?? file.path.split("/").pop() ?? file.path;
+        const filePath = file.path.split("/").pop() ?? file.path;
+        const fileName = file.nameOverride ?? filePath;
         const isImage = fileName.match(/\.(png|jpe?g|gif|webp)$/);
         if (isImage) {
           console.log("Processing image", file.path);
           ffmpeg(file.path)
-            .output(`${builderContext.outputDirectory}/${fileName}`)
+            .output(`${builderContext.outputDirectory}/${filePath}`)
             .size(`${this.options.imageWidth ?? 200}x?`)
             .run();
         } else {
-          console.log("Copying file", file.path);
-          copyFile(file.path, `${builderContext.outputDirectory}/${fileName}`);
+          const destination = `${builderContext.outputDirectory}/${filePath}`;
+          console.log("Copying file", file.path, "to", destination);
+          copyFile(file.path, destination);
         }
         if (file.menuEntry) {
           menuManifest.push({
             name: fileName,
-            link: file.path,
+            link: filePath,
           });
         }
       });
diff --git a/src/assets/base.css b/src/assets/base.css
new file mode 100644
index 0000000..a6e6280
--- /dev/null
+++ b/src/assets/base.css
@@ -0,0 +1,53 @@
+:root {
+	--color-background: #1c1b28;
+	--color-accent: #00FFFF;
+	--color-text: #FFF;
+
+	--content-width: 800px;
+
+	--font-size-base: 18px;
+	--line-height-base: 26px;
+	--font-family: monospace;
+
+	--space-base: 1rem;
+}
+
+.banner {
+	margin-top: 1rem;
+	width: 100%;
+	height: 40px;
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 1rem;
+	align-items: center;
+	flex: 1;
+	font-family: monospace;
+}
+
+.banner {
+	.title {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+
+		.name {
+			color: #1c1b28;
+			background-color: #00FFFF;
+			white-space: nowrap;
+			padding: 5px;
+
+			a {
+				color: unset;
+				text-decoration: none;
+			}
+		}
+	}
+
+	.title::after {
+		background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
+		content: "";
+		display: block;
+		width: 100%;
+		margin-left: 10px;
+	}
+}
diff --git a/src/index.ts b/src/index.ts
index 8f10ac9..23ccf86 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,7 +24,6 @@ new ToolchainBuilder(paths)
       files: [
         {
           path: "src/templates/404.html",
-          nameOverride: "Not Found Page",
           menuEntry: false,
         },
         {
@@ -32,6 +31,14 @@ new ToolchainBuilder(paths)
         },
         {
           path: "src/assets/favicon.ico",
+        },
+        {
+          path: "src/assets/base.css"
+        },
+        {
+          path: "src/playground/playground.html",
+          menuEntry: true,
+          nameOverride: "CSS/HTML playground"
         }
       ],
     }),
diff --git a/src/playground/playground.html b/src/playground/playground.html
new file mode 100644
index 0000000..a7b96d4
--- /dev/null
+++ b/src/playground/playground.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<meta>
+<link href="base.css" rel="stylesheet" />
+<style>
+	html {
+		line-height: var(--line-height-base);
+		font-size: 18px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-family: var(--font-family);
+	}
+
+	body {
+		max-width: var(--content-width);
+		background-color: var(--color-background);
+		color: var(--color-text);
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		align-items: center;
+
+		#style-editor {
+			width: 100%;
+			padding: 1rem;
+			margin-bottom: 1rem;
+			background-color: var(--color-background);
+			color: var(--color-text);
+			font-size: 18px;
+			display: flex;
+			flex: 1;
+			outline: none;
+			border: 1px solid var(--color-accent);
+			box-sizing: border-box;
+		}
+
+		#html-editor {
+			width: 100%;
+			padding: 1rem;
+			margin-bottom: 1rem;
+			background-color: var(--color-background);
+			color: var(--color-text);
+			font-size: 18px;
+			display: flex;
+			flex: 1;
+			outline: none;
+			border: 1px solid var(--color-accent);
+			box-sizing: border-box;
+		}
+
+		#preview {
+			width: 100%;
+			box-sizing: border-box;
+			padding: 1rem;
+			margin-bottom: 1rem;
+			background-color: var(--color-background);
+			color: var(--color-text);
+			font-size: 18px;
+			display: flex;
+			flex: 1;
+			outline: none;
+			border: 1px solid var(--color-accent);
+			justify-content: center;
+			align-items: center;
+		}
+	}
+</style>
+<style id="style">
+	.square {
+		height: 150px;
+		width: 150px;
+		background-color: #553FF3;
+		color: white;
+		font-weight: bold;
+		font-size: 3rem;
+		position: ;
+		border-radius: 30px;
+		border-top-left-radius: 5px;
+
+	}
+
+	span {
+		display: block;
+		position: relative;
+		top: 100px;
+		left: 45px;
+	}
+</style>
+<div id="markup" aria-hidden="true" hidden="true" style="display: none;">
+	<div class="square"><span>CSS</span></div>
+</div>
+<script type="text/javascript">
+	window.onload = function () {
+		const style = document.getElementById('style').innerHTML;
+		const formattedStyle = style.split("\n").reduce((agg, curr) => {
+			console.log(curr)
+			if (curr === "") return agg;
+			const line = curr.replace('\t', '').replaceAll('\t', '  ');
+			if (agg.length === 0) return line;
+			return agg + "\n" + line;;
+		}, "");
+		console.log(formattedStyle)
+		document.getElementById('style-editor').value = formattedStyle;
+		document.getElementById('style').innerHTML = formattedStyle;
+
+		const markup = document.getElementById('markup').innerHTML;
+		const formattedMarkup = markup.replace('\t', '').replaceAll('\t', '  ').split('\n').filter(line => line !== '').join('\n');
+		document.getElementById('html-editor').value = formattedMarkup;
+		document.getElementById('preview').innerHTML = formattedMarkup;
+	}
+</script>
+</meta>
+
+<body>
+	<div class="banner">
+		<div class="title">
+			<div class="name"><a href="/">Zackarias Montell</a></div>
+		</div>
+	</div>
+	<p>This is an interactive html and css playground built with minimal JS.</p>
+	<div id="preview"></div>
+	<textarea rows="15" autocomplete="false" autocorrect="false" id="style-editor"
+		oninput="document.getElementById('style').innerHTML = this.value">
+	</textarea>
+	<textarea id="html-editor" oninput="document.getElementById('preview').innerHTML=this.value" rows="15"
+		autocomplete="false" autocorrect="false" id="style-editor">
+	</textarea>
+</body>
+
+</html>
diff --git a/src/templates/404.html b/src/templates/404.html
index 9857560..dce71aa 100644
--- a/src/templates/404.html
+++ b/src/templates/404.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Page Not Found</title>
-  </head>
-  <body>
-    <div id="message">
-      <h2>404</h2>
-      <h1>Page Not Found</h1>
-      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
-    </div>
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Page Not Found</title>
+</head>
+
+<body>
+  <div id="message">
+    <h2>404</h2>
+    <h1>Page Not Found</h1>
+    <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+  </div>
+</body>
+
 </html>
diff --git a/src/templates/index.html b/src/templates/index.html
index 23ecd71..c9d98d4 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
+  <link href="base.css" rel="stylesheet" />
   <style>
     html {
       font-size: 18px;
@@ -23,7 +24,7 @@
     body {
       max-width: 800px;
       color: #fbfbfe;
-      background-color: #1c1b28;
+      background-color: var(--color-background);
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -84,46 +85,6 @@
     }
 
     .profile li {}
-
-    .banner {
-      margin-top: 1rem;
-      width: 100%;
-      height: 40px;
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 1rem;
-      align-items: center;
-      flex: 1;
-      font-family: monospace;
-    }
-
-    .banner {
-      .title {
-        display: flex;
-        flex-direction: row;
-        flex: 1;
-
-        .name {
-          color: #1c1b28;
-          background-color: #00FFFF;
-          white-space: nowrap;
-          padding: 5px;
-
-          a {
-            color: unset;
-            text-decoration: none;
-          }
-        }
-      }
-
-      .title::after {
-        background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
-        content: "";
-        display: block;
-        width: 100%;
-        margin-left: 10px;
-      }
-    }
   </style>
 </head>
 
diff --git a/src/templates/note.html b/src/templates/note.html
index 0003d97..e71e1ea 100644
--- a/src/templates/note.html
+++ b/src/templates/note.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
+  <link href="base.css" rel="stylesheet" />
   <style>
     html {
       font-family: monospace;
@@ -82,46 +83,6 @@
       margin-top: 0px;
     }
 
-    .banner {
-      margin-top: 1rem;
-      width: 100%;
-      height: 40px;
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 1rem;
-      align-items: center;
-      flex: 1;
-      font-family: monospace;
-    }
-
-    .banner {
-      .title {
-        display: flex;
-        flex-direction: row;
-        flex: 1;
-
-        .name {
-          color: #1c1b28;
-          background-color: #00FFFF;
-          white-space: nowrap;
-          padding: 5px;
-
-          a {
-            color: unset;
-            text-decoration: none;
-          }
-        }
-      }
-
-      .title::after {
-        background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
-        content: "";
-        display: block;
-        width: 100%;
-        margin-left: 10px;
-      }
-    }
-
     a {
       color: #00FFFF;
     }