Fix width of pre element

Squashed commit of the following:

commit 1d157b529f
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 20:53:00 2025 +0200

    Improve on profile

commit 3e3c209ac9
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 20:28:21 2025 +0200

    Finish styling index

commit 4e68f393bd
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 19:45:22 2025 +0200

    Links

commit fcba900a7e
Author: wholteza <zackarias@montell.se>
Date:   Fri Sep 19 15:37:35 2025 +0200

    add fetchpriority

commit 0478cb71b9
Author: wholteza <zackarias@montell.se>
Date:   Thu Sep 18 14:44:35 2025 +0200

    wip redesign

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

@@ -14,15 +14,16 @@ export class StartPagePlugin implements IPluginBuilder {
     return (builderContext) => {
       let htmlTemplate = readFileAsText(this.options.indexTemplatePath);
       const links = builderContext.menuManifest
-        .map((m) => `<a href='${m.link}'>${m.name}</a>`)
+        .map((m) => {
+          const name = m.name.slice(m.name.indexOf("-") + 1).replaceAll("-", " ");
+          return `<div class="entry"><h2>${name}</h2><a href='${m.link}'>Read here!</a></div>`
+        })
         .reverse();
-      const unorderedListItems = links.map((l) => `<li>${l}</li>`).join("\r\n");
       const html = `
-      <ul>
-        ${unorderedListItems}
-      <ul>
+        ${links.join("")}
       `;
       htmlTemplate = htmlTemplate.replace("{{content}}", html);
+      console.log("Generating index", this.options.indexTemplatePath);
       writeTextAsFile(
         `${builderContext.outputDirectory}/index.html`,
         htmlTemplate

src/index.ts

@@ -25,8 +25,14 @@ new ToolchainBuilder(paths)
         {
           path: "src/templates/404.html",
           nameOverride: "Not Found Page",
-          menuEntry: true,
+          menuEntry: false,
         },
+        {
+          path: "src/assets/profile.jpg",
+        },
+        {
+          path: "src/assets/favicon.ico",
+        }
       ],
     }),
     new StartPagePlugin({

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

@@ -1,4 +1,4 @@
-# Measuring mash temperatures 🍺 🌡️
+# Measuring mash temperatures
 
 _2025-02-03 - 5 minute read_
 

src/notes/6-you-would-not-download-a-theme/note.md

@@ -0,0 +1,13 @@
+# You would not download a theme
+
+_2025-09-19 - 1 minute read_
+
+I read this [blog](https://www.jmaguire.tech/) by a guy called John Maguire. It popped up when i was searching for how to configure [code folding in neovim](https://www.jmaguire.tech/posts/treesitter_folding/) and i thought the style was pretty neat!
+
+I thought the least i could do was to provide some credits and a link to the place.
+
+Both the header and the blog post list double dot underlining was done with ::after elements, which i thought was quite nifty. The header uses a repeating linear gradient of the accent color and transparent, never used that before.
+
+You learn every day!
+
+Also, I just noticed that my blog engine cannot manage file names with single quotes in them, whoopsie.

src/templates/index.html

@@ -1,54 +1,166 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
     html {
-      font-family: Arial, sans-serif;
-      font-size: 1.3em;
+      font-size: 18px;
+      line-height: 26px;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
+      font-family: monospace;
     }
+
+    a {
+      color: #FFF;
+    }
+
     body {
       max-width: 800px;
       color: #fbfbfe;
-      background-color: #1c1b22;
+      background-color: #1c1b28;
       display: flex;
       flex-direction: column;
       align-items: center;
     }
-    ul {
-      list-style-type: none;
-      padding: 0;
 
+    .content {
+      display: flex;
+      width: 100%;
+      flex: 1;
+      flex-direction: column;
+    }
 
+    .content .entry {
+      margin-top: 1rem;
+
+      h2 {
+        color: #00FFFF;
+        text-transform: capitalize;
       }
-    li:nth-child(1){
-      display: none;
+
+      h2::after {
+        margin-top: 1rem;
+        top: 8px;
+        border-bottom: 3px dotted #00FFFF;
+        border-top: 3px dotted #00FFFF;
+        content: "";
+        width: 100%;
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        height: 8px;
       }
-    li {
-      margin: 1em 0;
-      padding: 8px;
-      border-radius: 8px;
-      border-style: solid;
+
+      h2 a {
+        color: white;
+      }
+    }
+
+    .profile {
+      border-color: #00FFFF;
       border-width: 1px;
-      border-color: #aaa;
+      border-style: solid;
+      width: 100%;
+      padding: 20px;
+      box-sizing: border-box;
+      font-family: monospace;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
     }
-    li::before {
-      content: "📝";
-      margin-right: 8px;
+
+    .profile .picture {
+      border-radius: 50%;
     }
+
+    .profile ul {
+      margin: 0;
+    }
+
+    .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: #fbfbfe;
+            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>
+
 <body>
+  <div class="banner">
+    <div class="title">
+      <div class="name"><a href="/">Zackarias Montell</a></div>
+    </div>
+  </div>
+  <div class="profile">
+    <img class="picture" src="profile.jpg" width="150" height="150" fetchpriority="high" />
+    <p>Software developer from Sweden. This is my place. Sometimes I publish thoughts or projects.</p>
+    <p>Things I do:</p>
+    <ul>
+      <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>
+
+    <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">
     {{content}}
+  </div>
 </body>
+
 </html>

src/templates/note.html

@@ -1,56 +1,146 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <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;
     }
+
+    .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;
+    }
+
+    .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>