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
15 changed files with 863 additions and 2400 deletions
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -1,22 +0,0 @@
-import js from "@eslint/js";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-import { defineConfig } from "eslint/config";
-
-export default defineConfig([
-	{
-		files:
-			["**/*.{js,mjs,cjs,ts,mts,cts}"],
-		plugins: {
-			js
-		},
-		extends: ["js/recommended"],
-		languageOptions: {
-			globals: globals.browser
-		},
-		rules: {
-			"indent": ["error", 2]
-		}
-	},
-	tseslint.configs.recommended,
-]);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -19,14 +19,10 @@
  "author": "Wholteza (Zackarias Montell)",
  "license": "ISC",
  "devDependencies": {
-    "@eslint/js": "^10.0.1",
    "@types/node": "^20.11.5",
    "browser-sync": "^3.0.4",
    "concurrently": "^8.2.1",
-    "eslint": "^10.0.3",
-    "globals": "^17.4.0",
    "nodemon": "^3.0.1",
-    "typescript": "^5.3.3",
-    "typescript-eslint": "^8.57.0"
+    "typescript": "^5.3.3"
  }
 }
--- a/packages/@zblog/toolchain/src/markdown-loader.ts
+++ b/packages/@zblog/toolchain/src/markdown-loader.ts
@@ -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
--- a/packages/@zblog/toolchain/src/markdown-parser.ts
+++ b/packages/@zblog/toolchain/src/markdown-parser.ts
@@ -166,7 +166,6 @@ class Paragraph extends Symbol {
   * @returns {boolean}
   */
  static canParse(line: string): boolean {
-		return false;
    return line === "";
  }

@@ -212,11 +211,7 @@ class UnorderedListItem extends Symbol {
  /**
   * @type {string}
   */
-	innerHtml: string = "";
-	/**
-	 * @type {string}
-	 */
-	innerMarkdown: string = "";
+  text: string = "";
  /**
   * @type {number}
   */
@@ -238,7 +233,7 @@ class UnorderedListItem extends Symbol {
  static create(lineFeed: LineFeed): Symbol {
    const instance = new UnorderedListItem();
    const line = lineFeed.claim();
-		instance.innerMarkdown = line.replace("-", "").trim();
+    instance.text = line.replaceAll("-", "").trim();
    instance.level = getAmountOfTokenInBeginningOfFile("  ", line);
    return instance;
  }
@@ -249,12 +244,11 @@ class UnorderedListItem extends Symbol {
   * @returns {void}
   */
  process(assetDirectory: string): void {
-		if (this.innerMarkdown.length === 0) return;
-		this.innerHtml = toHtml(this.innerMarkdown, assetDirectory)
+    return;
  }

  render() {
-		return `<li class="indent-${this.level}">${this.innerHtml}</li>`;
+    return `<li class="indent-${this.level}">${this.text} indentation level ${this.level}</li>`;
  }
 }

@@ -282,7 +276,7 @@ class OrderedListItem extends Symbol {
   * @returns {Symbol}
   */
  static create(lineFeed: LineFeed): Symbol {
-		const instance = new OrderedListItem();
+    const instance = new UnorderedListItem();
    const line = lineFeed.claim();
    instance.text = line.trim().replace(/^\d\. /, "");
    instance.level = getAmountOfTokenInBeginningOfFile("   ", line);
@@ -605,10 +599,6 @@ class MultiLineCode extends Symbol {
   * @type {string}
   */
  text: string = "";
-	/**
-	 * @type {string}
-	 */
-	language: string = "";
  /**
   *
   * @param {string} line
@@ -626,7 +616,7 @@ class MultiLineCode extends Symbol {
   */
  static create(lineFeed: LineFeed): Symbol {
    const instance = new MultiLineCode();
-		const line = lineFeed.claim();
+    const line = lineFeed.claim().trim();
    const lineWithoutStartTag = line.slice(3, line.length);

    const sameLineContainsEnding = lineWithoutStartTag.includes("```");
@@ -644,10 +634,9 @@ class MultiLineCode extends Symbol {
      instance.text = text;
      return instance;
    }
-		instance.language = lineWithoutStartTag
-		const lines = [];
+    const lines = [lineWithoutStartTag];

-		const endTokenFound = false;
+    let endTokenFound = false;
    while (!endTokenFound && !lineFeed.isEmpty()) {
      const nextLine = lineFeed.claim();
      if (!nextLine.includes("```")) {
@@ -670,18 +659,15 @@ class MultiLineCode extends Symbol {

  /**
   *
-	 * @param {string} _assetDirectory
+   * @param {string} assetDirectory
   * @returns {void}
   */
-	// NOTE: Needed to adhere to interface
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	process(_assetDirectory: string): void {
+  process(assetDirectory: string): void {
    return;
  }

  render() {
-		const codeLanguage = this.language.length > 0 ? `<pre class="code-language">${this.language}</pre>` : "";
-		return `${codeLanguage}<pre><code style="white-space: pre;">${this.text}</code></pre>`;
+    return `<pre><code>${this.text}</code></pre>`;
  }
 }

@@ -904,21 +890,18 @@ const AllSymbols: (typeof Symbol)[] = [
 export const toHtml = (markdown: string, assetDirectory: string): string => {
  // Stage one, markdown to symbols
  const symbols = toSymbols(markdown, assetDirectory);
-	console.log(symbols)

  // Stage two, expanding symbols
  symbols.forEach((s) => s.process(assetDirectory));
-	console.log(symbols)

  // Stage three, operations based on symbol relationship
  const stageThree = stageThreeProcessing(symbols);
  // Stage four, rendering
  const html = stageThree
-		//.filter((s) => !(s instanceof JustALineBreak))
+    // .filter((s) => !(s instanceof JustALineBreak))
    .map((s) => s.render())
    .join("");
-
-	return html;
+  return `<div class="content">${html}</div>`;
 };

 /**
@@ -936,10 +919,6 @@ const stageThreeProcessing = (symbols: Symbol[]): Symbol[] => {
    const subEndIndex = localSymbols
      .slice(startIndex + 1)
      .findIndex((s) => s instanceof JustALineBreak);
-		if (subEndIndex === -1) {
-			localSymbols.splice(startIndex);
-			break;
-		}
    const endIndex =
      subEndIndex === -1
        ? localSymbols.length - 1
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -11,28 +11,6 @@

 	--space-base: 1rem;
 }
-.indent-0 {
-	margin-left: 1rem;
-}
-.indent-1 {
-	margin-left: 2rem;
-}
-.indent-2 {
-	margin-left: 3rem;
-}
-.indent-3 {
-	margin-left: 4rem;
-}
-.indent-4 {
-	margin-left: 5rem;
-}
-.indent-5 {
-	margin-left: 6rem;
-}
-.indent-6 {
-	margin-left: 7rem;
-}
-

 .banner {
 	margin-top: 1rem;
--- a/src/index.ts
+++ b/src/index.ts
@@ -37,6 +37,7 @@ new ToolchainBuilder(paths)
        },
        {
          path: "src/playground/playground.html",
+          menuEntry: true,
          nameOverride: "CSS/HTML playground"
        }
      ],
--- a/src/notes/10-neovim-0.12-configuration/note.md
+++ b/src/notes/10-neovim-0.12-configuration/note.md
@@ -1,48 +0,0 @@
-# Neovim 0.12 Configuration
-
-In neovim's 0.12 nightly release an official package manager was added. This means that we no longer need to rely on third party software to bootstrap our configuration.
-
-The syntax is similar in the way that we previously specified src and name in Lazy, but setup of the package has to be done separately. At least for now. I have never done it in that way since i started using neovim when Lazy was already the go to package manager so it's going to be interesting to see how it affects my configuration structure.
-
-```lua
-vim.pack.add({
-	'https://github.com/folke/todo-comments.nvim',
-})
-
-require('todo-comments').setup({
-	keywords = {
-		SECTION = {
-			icon = "󰚟 ",
-			color = "hint",
-		}
-	}
-})
-
-```
-[Neovim pack](https://neovim.io/doc/user/pack)
-
-I wiped my current 0.11 configuration and started fresh with this new package manger. I try to keep it lean to reduce startup time, but i do work in a couple of different environments so language support is vital. [This is what i ended up with so far](https://git.zacke.dev/wholteza/dotfiles/src/commit/2b2ce07edc5e8eb5b9e4cffc234abe4cdc8512f6/.config/nvim/init.lua):
-
- Colorscheme: [catppuccin/nvim](https://github.com/catppuccin/nvim)
- File explorer: 🆕[stevearc/oil.nvim](https://github.com/stevearc/oil.nvim)
- File and fuzzy finder: 🆕[nvim-mini/mini.pick](https://github.com/nvim-mini/mini.pick)
- Notifications: 🆕[nvim-mini/mini.notify](https://github.com/nvim-mini/mini.notify)
- Quality of life:
-  - [nvim-mini/mini.pairs](https://github.com/nvim-mini/mini.pairs)
-    - Auto create pairs when you type {}, [], () etc.
-  - [folke/which-key.nvim](https://github.com/folke/which-key.nvim)
-    - Shows a popup menu of keybindings when pressing leader.
-  - [folke/todo-comments.nvim](https://github.com/folke/todo-comments.nvim)
-    - Highlights comments starting with TODO: WARNING: ERROR: etc.
- Language support: 
-  - Easier installation of language servers and dependencies.
-  - [neovim/nvim-lspconfig](https://github.com/neovim/nvim-lspconfig)
-  - [mason-org/mason.nvim](https://github.com/mason-org/mason.nvim)
-  - [mason-org/mason-lspconfig.nvim](https://github.com/mason-org/mason-lspconfig.nvim)
-  - [WhoIsSethDaniel/mason-tool-installer](https://github.com/WhoIsSethDaniel/mason-tool-installer.nvim)
-  - [folke/lazydev.nvim](https://github.com/folke/lazydev.nvim)
-  - [nvim-treesitter/nvim-treesitter](https://github.com/nvim-treesitter/nvim-treesitter)
-  - Syntax highlighting.
-    - Dependency: [nvim-lua/plenary](https://github.com/nvim-lua/plenary.nvim)
-
-[Here](https://git.zacke.dev/wholteza/dotfiles/src/branch/main/.config/nvim/init.lua) is the up to date configuration if you want to see what it looks like right now.
--- a/src/notes/7-second-hand-MTB-part-1/assets/bike-in-car.jpg
+++ b/src/notes/7-second-hand-MTB-part-1/assets/bike-in-car.jpg
--- a/src/notes/7-second-hand-MTB-part-1/note.md
+++ b/src/notes/7-second-hand-MTB-part-1/note.md
@@ -1,4 +1,4 @@
-# Second hand MTB - part 1
+# Second hand MTB

 _2025-08-17 - 2 minute read_

--- a/src/notes/8-live-demos-and-experiments/note.md
+++ b/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.
--- a/src/notes/9-kubernetes-tips/note.md
+++ b/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.
-
--- a/src/playground/playground.html
+++ b/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>
--- a/src/templates/index.html
+++ b/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 {
@@ -97,23 +96,27 @@
  </div>
  <div class="profile">
    <img class="picture" src="profile.jpg" width="150" height="150" fetchpriority="high" />
-    <p>Just a dude from sweden.</p>
-    <span>Things I do:</span>
+    <p>Software developer from Sweden. This is my place. Sometimes I publish thoughts or projects.</p>
+    <p>Things I do:</p>
    <ul>
-      <li><a href="https://git.zacke.dev/wholteza/blog">Programming for fun</a>.</li>
-      <li><a href="https://git.zacke.dev/wholteza/5x6-split-kb/src/branch/main/rev2">Elecronics and product
-          projects</a>.
-      <li><a href="/5-measuring-mash-temperatures.html">Brew beer in my garage</a>.</li>
-      <li><a href="https://www.strava.com/athletes/41297534">Running and biking</a>.</li>
+      <li>Program things for fun. This site is built using <a href="https://git.zacke.dev/wholteza/blog">my own blog
+          framework</a> that generates a static website from markdown + a little bit of html templating.</li>
+      <li>I build physical things as well. Lately it has been <a
+          href="https://git.zacke.dev/wholteza/5x6-split-kb/src/branch/main/rev2">keyboards</a> in multiple <a
+          href="https://git.zacke.dev/wholteza/5x6-split-kb/src/branch/main/rev1">revisions</a>.</li>
+      <li>Brew beer in my garage. <a href="/5-measuring-mash-temperatures.html">I find the process interesting..</a> and
+        i
+        enjoy drinking beer.</li>
+      <li>Running and biking. You can find me on <a href="https://www.strava.com/athletes/41297534">strava</a>.
+      </li>
    </ul>

-    <span style="font-size: 9px; line-height: 1rem; margin-top: 1rem;">
-      <a href="https://git.zacke.dev/explore/repos">Gitea</a>,
-      <a href="https://github.com/Wholteza">Github</a>,
-      <a href="mailto:contact@montell.se">contact@montell.se</a>
-      <span style="display: block; line-height: 1rem;">Not actually my email, try changing out contact
-        for my first name.</span>
-    </span>
+    <p><a href="https://git.zacke.dev/explore/repos">Gitea</a></p>
+    <p><a href="https://github.com/Wholteza">Github</a></p>
+    <p><a href="mailto:contact@montell.se">contact@montell.se</a> (not actually created yet but try changing out contact
+      for
+      my first name.)</p>
+

  </div>
  <div class="content">
--- a/src/templates/note.html
+++ b/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 {
@@ -35,16 +34,6 @@
      width: fit-content;
      max-width: 100%;
      white-space: normal;
-			margin-top: 0;
-    }
-
-		pre.code-language {
-			padding: 0.1rem 1rem 0 1rem;
-			margin: 0;
-			border-bottom: none;
-			color: #00FFFF;
-			font-weight:bold;
-			text-transform: capitalize;
    }

    img {
@@ -112,7 +101,7 @@
      <div class="name"><a href="/">Zackarias Montell</a></div>
    </div>
  </div>
-	<div class="content">{{markdown}}</div>
+  {{markdown}}
 </body>

 </html>
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