Working playground

packages/@zblog/toolchain/src/markdown-loader.ts

@@ -44,9 +44,9 @@ const createMarkdownLoaderManifest = ({
       publicAssetDirectoryPath: `/${noteDirectory}_`,
       assetFiles: fs.existsSync(assetDirectoryPath)
         ? fs.readdirSync(assetDirectoryPath).map((name) => ({
-          path: `${assetDirectoryPath}/${name}`,
-          name,
-        }))
+            path: `${assetDirectoryPath}/${name}`,
+            name,
+          }))
         : [],
     };
   });
@@ -85,12 +85,10 @@ const writeMarkdownAsHtmlToOutputDirectory = (
 ) => {
   markdownManifest.forEach((m) => {
     const markdownAsHtml = toHtml(m.markdown, m.publicAssetDirectoryPath);
-    const titleWithoutDashesOrNumbers = (m.name.slice(m.name.indexOf('-') + 1) ?? "").replaceAll('-', ' ');
     const noteHtmlDocument = noteHtmlTemplate.replace(
       markdownHtmlReplacementTag,
       markdownAsHtml
-
-    ).replace("{{title}}", titleWithoutDashesOrNumbers);
+    );
     writeTextAsFile(
       `${outputDirectory}/${m.directoryName}.html`,
       noteHtmlDocument

src/index.ts

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

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

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

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

@@ -1,17 +0,0 @@
-# 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/notes/9-kubernetes-tips/note.md

@@ -1,18 +0,0 @@
-# Kubernetes tricks
-
-A collection of nice to haves while managing applications in kubernetes.
-
-## Kubectl proxy
-
-Running `kubectl proxy` will open a tunnel to the selected cluster. You can then access the webapi on the port that was displayed.
-
-Using that webapi you can browse the resources and even access the application hosted within your cluster.
-
-### Explore a namespace
-Enter the following address and replace the namespace name and the resource type (pods|services) to get a list of the available resources.
-`http://localhost:8001/api/v1/namespaces/<namespace-name>/<resource-type>`
-
-### Make a request to a service or pod
-The url pattern looks like this: `http://localhost:8001/api/v1/namespaces/<namespace-name>/<pods|services>/<protocol>:<name>:<port>/proxy/<url-path>`
-Example: `http://localhost:8001/api/v1/namespaces/hangfire-services/services/http:hangfire-services:80/proxy/hangfire` will make a request to my hangfire dashboard.
-

src/playground/playground.html

@@ -1,9 +1,5 @@
 <!DOCTYPE html>
 <meta>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>zacke.dev - playground</title>
-<link href="https://blog.zacke.dev" rel="preconnect" />
 <link href="base.css" rel="stylesheet" />
 <style>
 	html {
@@ -24,16 +20,6 @@
 		flex-direction: column;
 		align-items: center;
 
-		#description {
-			box-sizing: border-box;
-			margin: var(--space-base);
-			padding: var(--space-base);
-
-			a {
-				color: var(--color-accent);
-			}
-		}
-
 		#style-editor {
 			width: 100%;
 			padding: 1rem;
@@ -131,16 +117,14 @@
 			<div class="name"><a href="/">Zackarias Montell</a></div>
 		</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. <a
-			href="https://git.zacke.dev/wholteza/blog/src/branch/main/src/playground/playground.html">Source here!</a></p>
-	<textarea id="html-editor" oninput="document.getElementById('preview').innerHTML=this.value" rows="15"
-		autocomplete="false" autocorrect="false" id="style-editor">
-	</textarea>
+	<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>
-	<div id="preview"></div>
+	<textarea id="html-editor" oninput="document.getElementById('preview').innerHTML=this.value" rows="15"
+		autocomplete="false" autocorrect="false" id="style-editor">
+	</textarea>
 </body>
 
 </html>

src/templates/index.html

@@ -4,8 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>zacke.dev</title>
-  <link href="https://blog.zacke.dev" rel="preconnect" />
+  <title>Document</title>
   <link href="base.css" rel="stylesheet" />
   <style>
     html {
@@ -19,7 +18,7 @@
     }
 
     a {
-      color: var(--color-accent);
+      color: #FFF;
     }
 
     body {
@@ -118,10 +117,6 @@
       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">

src/templates/note.html

@@ -4,8 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>zacke.dev - {{title}}</title>
-  <link href="https://blog.zacke.dev" rel="preconnect" />
+  <title>Document</title>
   <link href="base.css" rel="stylesheet" />
   <style>
     html {