Working playground

wip playground
wip
2025-10-04 16:07:40 +02:00 · 2025-10-04 08:48:02 +02:00 · 2025-10-03 20:59:17 +02:00
7 changed files with 216 additions and 100 deletions
--- 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,
          });
        }
      });
--- a/src/assets/base.css
+++ 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;
+	}
+}
--- 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"
        }
      ],
    }),
--- a/src/playground/playground.html
+++ 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>
--- a/src/templates/404.html
+++ b/src/templates/404.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Not Found</title>
-  </head>
-  <body>
+</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>
+</body>
+
 </html>
--- 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>

--- 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;
    }
Author	SHA1	Message	Date
wholteza	c3e31bb7c9	Working playground	2025-10-04 16:07:40 +02:00
wholteza	49d3623c49	wip playground	2025-10-04 08:48:02 +02:00
wholteza	f091733d29	wip	2025-10-03 20:59:17 +02:00