Fix width of pre element

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,9 +304,10 @@ class Link extends Symbol {
   /**
    * @type {RegExp}
    */
-  static textAndLinkRegExp: RegExp = new RegExp(
+  static textAndLinkRegExp: RegExp = new RegExp
-    /\[(?<text>.*)\]\((?<link>.*)\)/
+    (
-  );
+      /\[(?<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/notes/5-measuring-mash-temperatures/note.md

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

src/templates/index.html

@@ -7,8 +7,7 @@
   <title>Document</title>
   <style>
     html {
-      font-family: Arial, sans-serif;
+      font-size: 18px;
-      font-size: 17px;
       line-height: 26px;
       display: flex;
       justify-content: center;
@@ -98,25 +97,32 @@
       font-family: monospace;
     }
 
-    .banner .title {
+    .banner {
-      display: flex;
+      .title {
-      flex-direction: row;
+        display: flex;
-      flex: 1;
+        flex-direction: row;
-    }
+        flex: 1;
 
-    .banner .title::after {
+        .name {
-      background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
+          color: #1c1b28;
-      content: "";
+          background-color: #00FFFF;
-      display: block;
+          white-space: nowrap;
-      width: 100%;
+          padding: 5px;
-      margin-left: 10px;
-    }
 
-    .banner .title .name {
+          a {
-      color: #1c1b28;
+            color: unset;
-      background-color: #00FFFF;
+            text-decoration: none;
-      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>
@@ -124,7 +130,7 @@
 <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,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-family: monospace;
-      font-size: 1.3em;
+      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;
+    h1+p:has(> i) {
-      margin-top: 10px;
+      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>