Working playground

Fixed link regex
Fixed pre width

Squashed commit of the following:

commit 20038e290a
Author: wholteza <zackarias@montell.se>
Date:   Sat Sep 20 20:55:21 2025 +0200

    Fix width of pre element

commit 52b49e18a2
Author: wholteza <zackarias@montell.se>
Date:   Sat Sep 20 18:59:36 2025 +0200

    Fix link regexp

commit 5036b3bca6
Author: wholteza <zackarias@montell.se>
Date:   Sat Sep 20 18:53:00 2025 +0200

    Changed font size

commit 5063c088eb
Author: wholteza <zackarias@montell.se>
Date:   Sat Sep 20 18:52:22 2025 +0200

    Fixed margins

commit acd6ed63e1
Author: wholteza <zackarias@montell.se>
Date:   Sat Sep 20 18:51:03 2025 +0200

    Add leading space to links

commit 8b3c7871ab
Author: wholteza <zackarias@montell.se>
Date:   Sat Sep 20 18:50:38 2025 +0200

    Add color to links

commit 2658d688ca
Author: wholteza <zackarias@montell.se>
Date:   Sat Sep 20 18:45:49 2025 +0200

    Fixed reloading of browser when developing

commit 03e2361798
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 21:45:40 2025 +0200

    Change header line height

commit a1f6994c02
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 21:42:08 2025 +0200

    Align note with index

bs-config.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+	port: 3000,
+	server: "./dist",
+	files: "./dist/**/*",
+	watchOptions: {
+		usePolling: true,
+		interval: 200,
+		binaryInterval: 200
+	}
+}

package.json

@@ -6,9 +6,9 @@
   "main": "index.js",
   "scripts": {
     "dev": "concurrently --kill-others -n Build,Serve -c auto \"npm run watch-build\" \"npm run serve\"",
-    "watch-build": "nodemon --ext js,ts,json,md,html --watch notes --watch src --watch packages/@zblog/toolchain/src --watch markdown.ts --exec \"npm run build --workspaces && npm run build && npm run generate-blog\"",
+    "watch-build": "nodemon --ext js,ts,json,md,html --watch notes --watch src --watch templates --watch packages/@zblog/toolchain/src --watch markdown.ts --exec \"npm run build --workspaces && npm run build && npm run generate-blog\"",
     "build": "tsc -p tsconfig.json",
-    "serve": "serve dist",
+    "serve": "browser-sync start --config bs-config.cjs",
     "generate-blog": "node bin/index.js",
     "initialize-firebase": "npm install -g firebase-tools && firebase login",
     "deploy": "npm run generate-blog && firebase deploy"
@@ -20,9 +20,9 @@
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^20.11.5",
+    "browser-sync": "^3.0.4",
     "concurrently": "^8.2.1",
     "nodemon": "^3.0.1",
-    "serve": "^14.2.1",
     "typescript": "^5.3.3"
   }
 }

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,
           });
         }
       });

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

@@ -304,8 +304,9 @@ class Link extends Symbol {
   /**
    * @type {RegExp}
    */
-  static textAndLinkRegExp: RegExp = new RegExp(
-    /\[(?<text>.*)\]\((?<link>.*)\)/
+  static textAndLinkRegExp: RegExp = new RegExp
+    (
+      /\[(?<text>[^\]]+)\]\((?<link>[^)]+)\)/
     );
   /**
    * @type {string}
@@ -350,7 +351,8 @@ class Link extends Symbol {
   }
 
   render() {
-    return `<a href="${this.link}">${this.text}</a>`;
+    // TODO: This leading space should probably be somewhere else.
+    return ` <a href="${this.link}">${this.text}</a>`;
   }
 }
 
@@ -899,7 +901,7 @@ export const toHtml = (markdown: string, assetDirectory: string): string => {
     // .filter((s) => !(s instanceof JustALineBreak))
     .map((s) => s.render())
     .join("");
-  return `<div>${html}</div>`;
+  return `<div class="content">${html}</div>`;
 };
 
 /**

packages/@zblog/toolchain/src/start-page-plugin.ts

@@ -23,6 +23,7 @@ export class StartPagePlugin implements IPluginBuilder {
         ${links.join("")}
       `;
       htmlTemplate = htmlTemplate.replace("{{content}}", html);
+      console.log("Generating index", this.options.indexTemplatePath);
       writeTextAsFile(
         `${builderContext.outputDirectory}/index.html`,
         htmlTemplate

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;
+	}
+}

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"
         }
       ],
     }),

src/notes/1-initial-commit/note.md

@@ -1,6 +1,6 @@
 # Initial commit
 
-_2023-09-15_
+_2023-09-15 - 1 minute read_
 
 I've been thinking a long time about having a place to publicly publish things. I'm not really into doing that on social media since it would lock my content in their format and make it hard to move anywhere else so i thought i would just write my "things" in plain markdown and then find a way of hosting them online.
 

src/notes/2-markdown-parser/note.md

@@ -1,8 +1,8 @@
 # Markdown parser
 
-## Part 1
+_2023-09-16 - 5 minute read_
 
-_2023-09-16_
+## Part 1
 
 While traveling today i thought about ways to structure my markdown parser.
 
@@ -10,7 +10,7 @@ What I want is a function that takes a string containing markdown formatted text
 
 My plan is to solve this using a markdown line feed and symbol classes representing the different possible elements.
 These symbols are for example headings, list items, code snippets, paragraphs and links. 
-Each symbol will know how to render itself as well as being able to tell if it's the right symbol for the current line feed line.
+Each symbol will know how to render itself as well as being able to tell if it's the right symbol for the current feed line.
 
 Lets say we have a markdown file that looks something like this:
 

src/notes/3-tunneling-traffic-through-ssh/note.md

@@ -1,5 +1,7 @@
 # Tunneling traffic through ssh
 
+_2024-12-23 - 1 minute read_
+
 This lets you tunnel port 80 from your machine, to port 80 on another machine, using some ssh server as jump node.
 
 ```bash

src/notes/4-converting-document-formats/note.md

@@ -1,5 +1,7 @@
 # Converting various document formats
 
+_2025-01-10 - 1 minute read_
+
 I was in need of a way to convert markdown documents + images into pdfs and came over the [pandoc](https://pandoc.org/) project which seems to be very powerful.
 
 This is how i used it.

src/notes/5-measuring-mash-temperatures/note.md

@@ -1,4 +1,4 @@
-# Measuring mash temperatures 🍺 🌡️
+# Measuring mash temperatures
 
 _2025-02-03 - 5 minute read_
 
@@ -13,7 +13,7 @@ Esphome made the setup very easy. After defining the onewire hub component i cou
 
 ![nodemcu](@asset/3.png)
 
-My esphome instance is running in my local homeassistant (HASS) instance which integrates neatly and makes all sensors available to both systems. I created a new view in HASS and added the sensors showing the current values as well as a histogram of the last 5 minutes thinking that is should be a reasonable timespan to have when comparing temperatures. To my suprise the 5 minute interval in HASS didn't show 5 minutes at all but rather 24h. It was possible to zoom in on the graph to see it in more detail but i wasn't happy with how it turned out. Ideally I wanted this view to be visible on one of my screens in my brewery and it should show what I want to see without me having to interact with it.
+My esphome instance is running in my local homeassistant (HASS) instance which integrates neatly and makes all sensors available to both systems. I created a new view in HASS and added the sensors showing the current values as well as a histogram of the last 5 minutes thinking that it should be a reasonable timespan to have when comparing temperatures. To my suprise the 5 minute interval in HASS didn't show 5 minutes at all but rather 24h. It was possible to zoom in on the graph to see it in more detail but i wasn't happy with how it turned out. Ideally I wanted this view to be visible on one of my screens in my brewery and it should show what I want to see without me having to interact with it.
 
 ![nodemcu](@asset/4.png)
 
@@ -27,7 +27,7 @@ We usually brew two batches the same day since it allows us to do utilize the ti
 
 ![mash](@asset/mash.png)
 
-We did the first batch as usual, heating up the water to 67c before dumping in the malt pipe along with our 5KG grain bill of mostly pilsner malt and some wheat. Historically we have been going off of the bult in temperature sensor in the bottom of our brewzilla brewsystem, but one of its flaws is that the sensor is located right above the two heating elements which means that it is going to measure the warmest water in the pot. This works for turning the heater on and off while recirculating using a pump while the brewery has no equipment or ingredients in it, but as soon as you add anything it is no longer going do represent the temperature of the whole vessel. We put the first sensor below the malt pipe right above the false bottom of the brewery, then we put the second one in the middle of grains.
+We did the first batch as usual, heating up the water to 67c before dumping in the malt pipe along with our 5KG grain bill of mostly pilsner malt and some wheat. Historically we have been going off of the built-in temperature sensor in the bottom of our brewzilla brewsystem, but one of its flaws is that the sensor is located right above the two heating elements which means that it is going to measure the warmest water in the pot. This works for turning the heater on and off while recirculating using a pump while the brewery has no equipment or ingredients in it, but as soon as you add anything it is no longer going do represent the temperature of the whole vessel. We put the first sensor below the malt pipe right above the false bottom of the brewery, then we put the second one in the middle of grains.
 
 ![Picture of first batch mash temperature graph](@asset/first-batch-mash-graph.png)
 _Yellow: temperature of the grain bed. Green: temperature just below the malt pipe._
@@ -46,4 +46,12 @@ For the next batch we heated up the strike water to 75c. After adding the malt p
 
 Now we just had to maintain that temperature, something that we have done before with great success by setting the heaters to 67c and starting to pump.
 
-![Picure of second mash histogram](@asset/second-batch-mash-histogram.png)
+![Picture of second mash histogram](@asset/second-batch-mash-histogram.png)
+
+By the end of the brew day the last batch measured 1.050 so suprisingly we ended up 4 points below the last batch that was identical recipe-wise. That could of course be due to multiple factors. We use pre-milled grain so depending on if we use the malt from the top or the bottom of the bucket there might be more or less grain flour. Or perhaps the mash is just more efficient at a bit lower temperature. However from what I've read the most efficient mashing range is between 65-67 degrees celcius so I'm a bit confused.
+
+I think we need to brew some more beers using this method and see if we if it increases our result to recipe accuracy.
+
+In the end the only thing that matters is that we brew good tasting beer and i don't think this process will change much when it comes to that. It's just feels good to hit the target!
+
+Cheers!

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

@@ -0,0 +1,23 @@
+# Second hand MTB
+
+_2025-08-17 - 2 minute read_
+
+![bike-in-car](@asset/bike-in-car.jpg)
+_Tadaa!_
+
+I have wanted a hardtail for a while. I've been browsing the shops from time to time but never been ready to pull the trigger on buying a second full price bike. Some weeks ago my mother made a great local find on facebook marketplace. It was a modern 11-speed carbon fiber hardtail with SRAM x01 components and it got me determined to find one myself.
+
+My musts were:
+- Correct frame size (XL), duh.
+- 1x drivetrain or being able to convert to 1x easily.
+- No obvious signs of complete neglect such as rust horizontal rule broken components.
+
+I want to keep this bike simple. My focus is for it to just work and be as close to a workhorse as it can be when it comes to mountain biking. That means no extra linkages, suspension or dropper-post to service. When my FS-bike needs fixing or I just want to hit the trail for some stupid fun it should be there ready to go.
+
+So I found the bike I in the picture. After some detective work I found out that it probably is a 2012 KHS. Carbon fiber frame, SRAM x01 2x10 drivetrain, and best of all the guy would throw in some of the stuff that he had for the bike, one of those things was a 1x drive gear. That means that I will be able to convert it into a 1x10 drivetrain with very little effort. It looked pretty good. The top tube has been professionally repaired 5 years ago but I figured that if it had survived for this long it will probably work for me as well. I also got 3 more wheels that need some work and a longer steering bar.
+
+I got to ride it a bit before deciding on the purchase and it did not creek or make any other strange sounds. The drivetrain shifted well and the suspension seemed responsive. Of course things could use a little cleaning and service but a lot of bikes do. I was pretty stoked that i found a carbon fiber bike for a good price.
+
+I know that I probably want to change out the front drive gear pretty soon but first I just want to try it out on the trail to see how it performs without any changes.
+
+Cheerio!

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>

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>

src/templates/index.html

@@ -5,10 +5,10 @@
   <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: Arial, sans-serif;
-      font-size: 17px;
+      font-size: 18px;
       line-height: 26px;
       display: flex;
       justify-content: center;
@@ -24,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;
@@ -85,46 +85,13 @@
     }
 
     .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;
-    }
-
-    .banner .title::after {
-      background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
-      content: "";
-      display: block;
-      width: 100%;
-      margin-left: 10px;
-    }
-
-    .banner .title .name {
-      color: #1c1b28;
-      background-color: #00FFFF;
-      white-space: nowrap;
-      padding: 5px;
-    }
   </style>
 </head>
 
 <body>
   <div class="banner">
     <div class="title">
-      <div class="name">Zackarias Montell</div>
+      <div class="name"><a href="/">Zackarias Montell</a></div>
     </div>
   </div>
   <div class="profile">

src/templates/note.html

@@ -1,56 +1,107 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <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: Arial, sans-serif;
-      font-size: 1.3em;
+      font-family: monospace;
+      font-size: 18px;
       display: flex;
       justify-content: center;
       align-items: center;
+      line-height: 26px;
       flex-direction: column;
     }
-    @media screen and (max-width: 800px) {
-      html {
-        font-size: 0.9em;
-      } 
-    }
+
     body {
       max-width: 800px;
       color: #fbfbfe;
-      background-color: #1c1b22;
+      background-color: #1c1b28;
       display: flex;
       flex-direction: column;
       align-items: center;
+      flex: 1;
     }
+
+    pre {
+      box-sizing: border-box;
+      border: 1px solid #00FFFF;
+      padding: 1rem;
+      width: fit-content;
+      max-width: 100%;
+      white-space: normal;
+    }
+
     img {
       max-width: 100%;
-      border-radius: 8px;
+      border-radius: 4px;
     }
-    p{
-      margin: 20px;
+
+    p {
       margin-top: 20px;
       margin-bottom: 0px;
     }
-    h1, h2, h3, h4, h5, h6 {
-      margin: 20px;
+
+    h1 {
+      color: #00FFFF;
+    }
+
+    h1::after {
+      margin-top: 1rem;
+      content: "";
+      width: 100%;
+      display: block;
+      border-top: 3px dotted #00FFFF;
+      border-bottom: 3px dotted #00FFFF;
+      height: 8px;
+      box-sizing: border-box;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: 20px;
       margin-bottom: 0px;
       text-transform: capitalize;
+      line-height: 32px;
     }
-    h1 + p:has(> i) {
-      font-size: smaller;
-      margin-top: 10px;
+
+    h1+p:has(> i) {
+      margin-top: 1rem;
+      color: #00FFFF;
     }
-    p:has(> img) + p:has(> i) {
+
+    p:has(> img)+p:has(> i) {
       font-size: smaller;
       margin-top: 0px;
     }
+
+    a {
+      color: #00FFFF;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
   </style>
 </head>
+
 <body>
+  <div class="banner">
+    <div class="title">
+      <div class="name"><a href="/">Zackarias Montell</a></div>
+    </div>
+  </div>
   {{markdown}}
 </body>
+
 </html>