Improve on profile

bs-config.cjs

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

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

@@ -23,7 +23,6 @@ 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/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

@@ -1,13 +0,0 @@
-# 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

@@ -7,7 +7,8 @@
   <title>Document</title>
   <style>
     html {
-      font-size: 18px;
+      font-family: Arial, sans-serif;
+      font-size: 17px;
       line-height: 26px;
       display: flex;
       justify-content: center;
@@ -97,32 +98,25 @@
       font-family: monospace;
     }
 
-    .banner {
+    .banner .title {
-      .title {
+      display: flex;
-        display: flex;
+      flex-direction: row;
-        flex-direction: row;
+      flex: 1;
-        flex: 1;
+    }
 
-        .name {
+    .banner .title::after {
-          color: #1c1b28;
+      background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
-          background-color: #00FFFF;
+      content: "";
-          white-space: nowrap;
+      display: block;
-          padding: 5px;
+      width: 100%;
+      margin-left: 10px;
+    }
 
-          a {
+    .banner .title .name {
-            color: unset;
+      color: #1c1b28;
-            text-decoration: none;
+      background-color: #00FFFF;
-          }
+      white-space: nowrap;
-        }
+      padding: 5px;
-      }
-
-      .title::after {
-        background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
-        content: "";
-        display: block;
-        width: 100%;
-        margin-left: 10px;
-      }
     }
   </style>
 </head>
@@ -130,7 +124,7 @@
 <body>
   <div class="banner">
     <div class="title">
-      <div class="name"><a href="/">Zackarias Montell</a></div>
+      <div class="name">Zackarias Montell</div>
     </div>
   </div>
   <div class="profile">
@@ -143,8 +137,7 @@
       <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
+      <li>Brew beer in my garage. <a href="/5-measuring-mash-temperatures">I find the process interesting..</a> and i
-        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>

src/templates/note.html

@@ -1,146 +1,56 @@
 <!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: monospace;
+      font-family: Arial, sans-serif;
-      font-size: 18px;
+      font-size: 1.3em;
       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: #1c1b28;
+      background-color: #1c1b22;
       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: 4px;
+      border-radius: 8px;
     }
-
+    p{
-    p {
+      margin: 20px;
       margin-top: 20px;
       margin-bottom: 0px;
     }
-
+    h1, h2, h3, h4, h5, h6 {
-    h1 {
+      margin: 20px;
-      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) {
-    h1+p:has(> i) {
+      font-size: smaller;
-      margin-top: 1rem;
+      margin-top: 10px;
-      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>