Fixed reloading of browser when developing

Change header line height
Align note with index
2025-09-20 18:45:49 +02:00 · 2025-09-19 21:45:40 +02:00 · 2025-09-19 21:42:08 +02:00
7 changed files with 1390 additions and 727 deletions
--- a/bs-config.cjs
+++ b/bs-config.cjs
@@ -0,0 +1,10 @@
+module.exports = {
+	port: 3000,
+	server: "./dist",
+	files: "./dist/**/*",
+	watchOptions: {
+		usePolling: true,
+		interval: 200,
+		binaryInterval: 200
+	}
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
  }
-}
+}
--- a/packages/@zblog/toolchain/src/start-page-plugin.ts
+++ b/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
--- a/src/notes/5-measuring-mash-temperatures/note.md
+++ b/src/notes/5-measuring-mash-temperatures/note.md
@@ -1,4 +1,4 @@
-# Measuring mash temperatures 🍺 🌡️
+# Measuring mash temperatures

 _2025-02-03 - 5 minute read_

--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -7,8 +7,7 @@
  <title>Document</title>
  <style>
    html {
-      font-family: Arial, sans-serif;
-      font-size: 17px;
+      font-size: 18px;
      line-height: 26px;
      display: flex;
      justify-content: center;
@@ -98,25 +97,32 @@
      font-family: monospace;
    }

-    .banner .title {
-      display: flex;
-      flex-direction: row;
-      flex: 1;
-    }
+    .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;
-    }
+        .name {
+          color: #1c1b28;
+          background-color: #00FFFF;
+          white-space: nowrap;
+          padding: 5px;

-    .banner .title .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;
+      }
    }
  </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">
--- a/src/templates/note.html
+++ b/src/templates/note.html
@@ -1,56 +1,133 @@
 <!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: 17px;
      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;
    }
+
+    pre {
+      box-sizing: border-box;
+      border: 1px solid #00FFFF;
+      padding: 1rem;
+    }
+
    img {
      max-width: 100%;
-      border-radius: 8px;
+      border-radius: 4px;
    }
-    p{
+
+    p {
      margin: 20px;
      margin-top: 20px;
      margin-bottom: 0px;
    }
-    h1, h2, h3, h4, h5, h6 {
+
+    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: 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;
+      }
+    }
  </style>
 </head>
+
 <body>
+  <div class="banner">
+    <div class="title">
+      <div class="name"><a href="/">Zackarias Montell</a></div>
+    </div>
+  </div>
  {{markdown}}
 </body>
-</html>
+
+</html>
Author	SHA1	Message	Date
wholteza	2658d688ca	Fixed reloading of browser when developing	2025-09-20 18:45:49 +02:00
wholteza	03e2361798	Change header line height	2025-09-19 21:45:40 +02:00
wholteza	a1f6994c02	Align note with index	2025-09-19 21:42:08 +02:00