playground post

src/index.ts

@@ -37,7 +37,6 @@ new ToolchainBuilder(paths)
         },
         {
           path: "src/playground/playground.html",
-          menuEntry: true,
           nameOverride: "CSS/HTML playground"
         }
       ],

src/notes/7-second-hand-MTB-part-1/note.md

@@ -1,4 +1,4 @@
-# Second hand MTB
+# Second hand MTB - part 1
 
 _2025-08-17 - 2 minute read_
 

src/notes/8-live-demos-and-experiments/note.md

@@ -0,0 +1,17 @@
+# Live demos and experiments
+
+I recently attended a Swedish frontend development conference called nordicjs. Something that I noticed was that some of the speakers had made tools and demos that they were using live in their keynotes which I thought was pretty neat! 
+
+It got me thinking about being able to host tools like that along with my [static site generator](https://git.zacke.dev/wholteza/blog). As long as they're not too heavy and dependent on JS libraries.
+
+My SSG project is built up around a plugin chain where one of the plugins available is a [file loader](https://git.zacke.dev/wholteza/blog/src/branch/main/packages/@zblog/toolchain/src/file-loader.ts). So to start off i just added a new directory for what I call playgrounds and added a new HTML file into the [files array of the plugin](https://git.zacke.dev/wholteza/blog/src/commit/52089dd9dc163ddbf1dbbc56af31e39bb7a0254f/src/index.ts) which makes sure that it is available in the built site.
+
+The result? The very first [playground](/playground.html) of this site. It's a very simple HTML + CSS playground with a preview pane that will show you the result. To start off it shows the CSS logotype, but change any parameter and it will update immediately. [Source BTW](https://git.zacke.dev/wholteza/blog/src/commit/52089dd9dc163ddbf1dbbc56af31e39bb7a0254f/src/playground/playground.html).
+
+This initial playground is meant to be part of something bigger. I have thoughts about building a presentation framework and I want these kinds of interactive and editable examples to be part of it. But we will see when I get the urge to build it.
+
+Until then I will have a way to make different demos and experiments available.
+
+Right now they will show up as menu alternatives on the home page. I also noticed that since files loaded by the file loader plugin wasn't designed to end up on the home page post flow they always end up at the top which isn't ideal. I'll have to do something about that in the future or just simply have a blog post that link to each playground. I probably want to write something about it anyways. _Edit: I updated the file loading so that is isn't present on the home page._
+
+Until next time.

src/playground/playground.html

@@ -28,6 +28,10 @@
 			box-sizing: border-box;
 			margin: var(--space-base);
 			padding: var(--space-base);
+
+			a {
+				color: var(--color-accent);
+			}
 		}
 
 		#style-editor {
@@ -128,14 +132,15 @@
 		</div>
 	</div>
 	<p id="description">This is an interactive HTML and CSS playground built with minimal JS. Alter the HTML and CSS below
-		to preview the changes.</p>
+		to preview the changes. <a
-	<div id="preview"></div>
+			href="https://git.zacke.dev/wholteza/blog/src/branch/main/src/playground/playground.html">Source here!</a></p>
-	<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>
+	<textarea rows="15" autocomplete="false" autocorrect="false" id="style-editor"
+		oninput="document.getElementById('style').innerHTML = this.value">
+	</textarea>
+	<div id="preview"></div>
 </body>
 
 </html>

src/templates/index.html

@@ -19,7 +19,7 @@
     }
 
     a {
-      color: #FFF;
+      color: var(--color-accent);
     }
 
     body {
@@ -118,6 +118,10 @@
       for
       my first name.)</p>
 
+    <p>Live demos and experiments:</p>
+    <ul>
+      <li><a href="/playground.html">CSS + HTML Playground</a></li>
+    </ul>
 
   </div>
   <div class="content">