@lexho111/plainblog 0.6.10 → 0.6.11

package/Blog - Kopie.js

@@ -0,0 +1,979 @@
+import http from "http";
+import crypto from "node:crypto";
+import fs from "fs";
+import { URLSearchParams } from "url";
+import process from "node:process";
+import path from "path";
+import { fileURLToPath } from "url";
+import pkg from "./package.json" with { type: "json" };
+import Article from "./Article.js";
+import DatabaseModel from "./model/DatabaseModel.js";
+import { fetchData, postData } from "./model/APIModel.js";
+import { formatHTML, header, formatMarkdown, validate } from "./Formatter.js";
+import { compileStyles, mergeStyles } from "./build-styles.js";
+import { compileScripts } from "./build-scripts.js";
+import FileAdapter from "./model/FileAdapter.js";
+import DataModel from "./model/DataModel.js";
+import { BinarySearchTreeHashMap } from "./model/datastructures/BinarySearchTreeHashMap.js";
+import createDebug from "./debug-loader.js";
+import { readFile } from "node:fs/promises";
+import { login, logout, api, new1, getPages } from "./router.js";
+
+// Initialize the debugger with a specific namespace
+const debug = createDebug("plainblog:Blog");
+
+export default class Blog {
+  #makeDataModel() {
+    return new BinarySearchTreeHashMap();
+  }
+
+  setDataModel(datamodel) {
+    this.#articles = datamodel;
+  }
+
+  constructor() {
+    this.database = {
+      type: "file",
+      username: "user",
+      password: "password",
+      host: "localhost",
+      dbname: "articles.txt", // x
+    };
+    this.#title = "";
+    this.#articles = new DataModel(this.#makeDataModel());
+    this.#server = null;
+    this.#password = "admin";
+    this.#styles = "body { font-family: Arial; }";
+    //this.scripts = "";
+    this.compiledStyles = "";
+    //this.compiledScripts = "";
+    this.reloadStylesOnGET = false;
+    this.angular = false;
+    this.sessions = new Set();
+
+    this.#version = pkg.version;
+    console.log(`version: ${this.#version}`);
+  }
+
+  /** @returns a json representation of the blog */
+  json() {
+    const serverInfo = this.#server
+      ? {
+          listening: this.#server.listening,
+          address: this.#server.address(),
+        }
+      : null;
+
+    const json = {
+      version: this.#version,
+      title: this.#title,
+      articles: this.#articles.getAllArticles(),
+      server: serverInfo,
+      compiledStyles: this.compiledStyles,
+      sessions: this.sessions,
+      database: this.database,
+      password: this.#password,
+      styles: this.#styles,
+      reloadStylesOnGET: this.reloadStylesOnGET,
+    };
+
+    return JSON.parse(JSON.stringify(json)); // make json read-only
+  }
+
+  // Private fields
+  #version = null;
+  #server = null;
+  #password = null;
+  #databaseModel;
+  #isExternalAPI = false;
+  #apiUrl = "";
+  #title = "";
+  #articles = [];
+  #styles = "";
+  #stylesHash = "";
+  #scriptsHash = "";
+  #stylesheetPath = "";
+  compilestyle = false;
+  #initPromise = null;
+  #publicDir = path.join(process.cwd(), "public");
+
+  setTitle(title) {
+    this.#title = title;
+  }
+
+  setPassword(password) {
+    this.#password = password;
+  }
+
+  /**
+   * Appends CSS rules to the \<style\>-tag.
+   * @param {string} style - A string containing CSS rules.
+   */
+  setStyle(style) {
+    this.#styles += style;
+    this.compilestyle = true;
+  }
+
+  set title(t) {
+    this.#title = t;
+  }
+
+  get title() {
+    return this.#title;
+  }
+
+  set password(x) {
+    this.#password = x;
+  }
+
+  /**
+   * allows you to inject a specific database implementation
+   * @param {*} adapter a database adapter like PostgresAdapter or SqliteAdapter
+   */
+  setDatabaseAdapter(adapter) {
+    if (!this.#databaseModel) {
+      if (this.database.type === "file") {
+        const adapter = new FileAdapter(this.database);
+        this.#databaseModel = new DatabaseModel(adapter);
+      }
+    }
+    this.#databaseModel.setDatabaseAdapter(adapter);
+  }
+
+  /**
+   * Appends CSS rules to the \<style\>-tag.
+   * @param {string} style - A string containing CSS rules.
+   */
+  set style(style) {
+    this.#styles += style;
+    this.compilestyle = true;
+  }
+
+  /**
+   * Sets the path(s) to custom CSS or SCSS files to be compiled and used by the blog.
+   * @param {string|string[]} files - A single file path or an array of file paths.
+   */
+  set stylesheetPath(files) {
+    this.#stylesheetPath = files;
+    console.log(`this.#stylesheetPath: ${this.#stylesheetPath}`);
+    this.compilestyle = true;
+  }
+
+  addArticle(article) {
+    this.#articles.insert(article);
+  }
+
+  #isAuthenticated(req) {
+    if (!req.headers.cookie) return false;
+    const match = req.headers.cookie.match(/(?:^|;\s*)session=([^;]*)/);
+    return match ? this.sessions.has(match[1]) : false;
+  }
+
+  async #handleLogin(req, res) {
+    debug("handle login");
+    const body = await new Promise((resolve, reject) => {
+      let data = "";
+      req.on("data", (chunk) => (data += chunk.toString()));
+      req.on("end", () => resolve(data));
+      req.on("error", reject);
+    });
+    const params = new URLSearchParams(body);
+
+    if (params.get("password") === this.#password) {
+      const id = crypto.randomUUID();
+      this.sessions.add(id);
+      res.writeHead(303, {
+        "Set-Cookie": `session=${id}; HttpOnly; Path=/`,
+        Location: "/",
+      });
+      res.end();
+    } else {
+      debug("login failed");
+      debug("password did not match %s", params.get("password"));
+      res.writeHead(401, { "Content-Type": "application/json" });
+
+      // Send the JSON string
+      res.end(
+        JSON.stringify({
+          error: "unauthorized",
+          message: "Please enter the correct password.",
+        }),
+      );
+    }
+  }
+
+  #handleLogout(req, res) {
+    debug("handle logout");
+    if (req.headers.cookie) {
+      const params = new URLSearchParams(
+        req.headers.cookie.replace(/; /g, "&"),
+      );
+      const sessionId = params.get("session");
+      if (this.sessions.has(sessionId)) {
+        this.sessions.delete(sessionId);
+      }
+    }
+    res.writeHead(303, {
+      "Set-Cookie": "session=; HttpOnly; Path=/; Max-Age=0",
+      Location: "/",
+    });
+    res.end();
+  }
+
+  /** initializes database */
+  async init() {
+    if (this.#initPromise) return this.#initPromise;
+    this.#initPromise = (async () => {
+      //this.loadStyles();
+      //this.loadScripts();
+      // if there is a stylesheet path provided, process it
+      if (this.#stylesheetPath != null && this.compilestyle) {
+        // read file from stylesheet path, compare checksums and write to public/styles.min.css
+        await this.#processStylesheets(this.#stylesheetPath);
+      }
+      if (!this.#stylesheetPath) {
+        // this.#styles
+        // src/styles.css
+        // compile and merge hardcoded styles in "this.#styles" with "src/styles.css" and write to file "styles.min.css"
+        // which will be imported by webbrowser via '<link rel="stylesheet" href="styles.min.css"...'
+
+        const __filename = fileURLToPath(import.meta.url);
+        const __dirname = path.dirname(__filename);
+        const srcStylePath = path.join(__dirname, "src", "styles.css");
+        const publicStylePath = path.join(this.#publicDir, "styles.min.css");
+
+        let publicHash = null;
+        let srcStyles = "";
+
+        await Promise.all([
+          fs.promises
+            .readFile(publicStylePath, "utf8")
+            .then((publicCSS) => {
+              const match = publicCSS.match(
+                /\/\* source-hash: ([a-f0-9]{64}) \*\//,
+              );
+              if (match) publicHash = match[1];
+            })
+            .catch((err) => console.error(err)), // public/styles.min.css doesn't exist, will be created.
+          fs.promises
+            .readFile(srcStylePath, "utf8")
+            .then((content) => {
+              srcStyles = content;
+            })
+            .catch((err) => {
+              if (err.code !== "ENOENT") console.error(err);
+            }), // ignore if src/styles.css doesn't exist
+        ]);
+
+        const combinedStyles = this.#styles + srcStyles;
+        const srcHash = crypto
+          .createHash("sha256")
+          .update(combinedStyles)
+          .digest("hex");
+
+        if (srcHash !== publicHash && this.compilestyle) {
+          console.log("Styles have changed. Recompiling...");
+          const finalStyles = await mergeStyles(this.#styles, srcStyles);
+          try {
+            await fs.promises.mkdir(path.dirname(publicStylePath), {
+              recursive: true,
+            });
+            await fs.promises.writeFile(
+              publicStylePath,
+              finalStyles + `\n/* source-hash: ${srcHash} */`,
+            );
+          } catch (err) {
+            console.error("Failed to write styles to public folder:", err);
+          }
+        }
+      }
+
+      // Process Scripts
+      const __filename = fileURLToPath(import.meta.url);
+      const __dirname = path.dirname(__filename);
+      const srcScriptPath = path.join(__dirname, "src", "fetchData.js");
+      await this.#processScripts(srcScriptPath);
+
+      if (this.#isExternalAPI) {
+        console.log("external API");
+        await this.#loadFromAPI();
+      } else {
+        console.log(`database: ${this.database.type}`);
+        if (!this.#databaseModel) {
+          if (this.database.type === "file") {
+            const adapter = new FileAdapter(this.database);
+            this.#databaseModel = new DatabaseModel(adapter);
+          }
+        }
+        console.log(`connected to database`);
+        await this.#databaseModel.initialize();
+        this.#articles.setDatabase(this.#databaseModel);
+        const [dbTitle, dbArticles] = await Promise.all([
+          this.#databaseModel.getBlogTitle(),
+          this.#databaseModel.findAll(),
+        ]);
+
+        debug("dbArticles.size(): %d", dbArticles.length);
+        //log(filename, "dbArticles.size(): " + dbArticles.length);
+        //log(filename, "dbArticles.size(): " + dbArticles.length, "Blog.js");
+        debug("all articles in Blog after loading from db");
+
+        // Displays a beautiful table in the console
+        //table(dbArticles)
+
+        if (dbArticles.length == 0) {
+          dbArticles.push(
+            new Article(
+              1,
+              "Sample Entry #1",
+              "Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.",
+              new Date(),
+            ),
+          );
+          dbArticles.push(
+            new Article(
+              2,
+              "Sample Entry #2",
+              "Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.",
+              new Date(),
+            ),
+          );
+        }
+        if (this.reloadStylesOnGET)
+          console.log("reload scripts and styles on GET-Request");
+        let title = "";
+        if (this.#title != null && this.#title.length > 0)
+          title = this.#title; // use blog title if set
+        else title = dbTitle; // use title from the database
+        const responseData = { title: title, articles: dbArticles };
+        this.#applyBlogData(responseData);
+      }
+    })();
+    return this.#initPromise;
+  }
+
+  async postArticle(newArticle) {
+    try {
+      // Save the new article to the database via the ApiServer
+      const promises = [];
+      //if (this.#databaseModel)
+      //  promises.push(this.#databaseModel.save(newArticle));
+      if (this.#isExternalAPI)
+        promises.push(postData(this.#apiUrl, newArticle));
+      await Promise.all(promises);
+      const title = newArticle.title;
+      const content = newArticle.content;
+      // Add the article to the local list for immediate display
+      this.#articles.insert(Article.createNew(title, content));
+      // remove sample entries
+      this.#articles.remove(1); // "Sample Entry #1"
+      this.#articles.remove(2); // "Sample Entry #2"
+    } catch (error) {
+      console.error("Failed to post new article to API:", error);
+    }
+  }
+
+  /** start a http server with default port 8080 */
+  async startServer(port = 8080) {
+    await this.init();
+
+    const server = http.createServer(async (req, res) => {
+      //debug("query %s", req.url);
+      await login(
+        req,
+        res,
+        async (req, res) => {
+          await this.#handleLogin(req, res);
+        },
+        async (req, res) => {
+          res.end(`${header("My Blog")}<body>
+            <form class="loginform" id="loginForm">
+  <h1>Blog</h1>
+  <!-- Message container -->
+  <div id="statusMessage"></div>
+  <label for="username">Username</label>
+  <input type="username" class="form_element" name="username" placeholder="username" required />
+  <label for="password">Password</label>
+  <input type="password" class="form_element" name="password" placeholder="password" required />
+  <button class="btn" type="submit">Login</button>
+</form>
+
+<script>
+  const loginForm = document.getElementById('loginForm');
+  const statusDiv = document.getElementById('statusMessage');
+
+  loginForm.addEventListener('submit', async (e) => {
+    e.preventDefault(); // Prevent page reload
+    
+    // Clear previous messages
+    statusDiv.innerHTML = '';
+
+    const formData = new FormData(loginForm);
+    const body = new URLSearchParams(formData); // Replicates form-urlencoded
+
+    try {
+      const response = await fetch('/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: body.toString()
+      });
+
+      if (response.ok) {
+        window.location.href = '/'; // Redirect on success
+      } else if (response.status === 401) {
+        // Handle Unauthorized status
+        statusDiv.innerHTML = '<h2>Unauthorized</h2><p>Please enter the correct password.</p>';
+      } else {
+        statusDiv.innerHTML = '<p>Something went wrong. Please try again.</p>';
+      }
+    } catch (error) {
+      console.error('Network Error:', error);
+      statusDiv.innerHTML = '<p>Unable to connect to server.</p>';
+    }
+  });
+</script>
+</body></html>`);
+        },
+      );
+      if (res.headersSent) return;
+
+      await logout(req, res, async (req, res) => {
+        this.#handleLogout(req, res);
+      });
+      if (res.headersSent) return;
+
+      await api(req, res, async (req, res) => {
+        await this.#jsonAPI(req, res);
+      });
+      if (res.headersSent) return;
+
+      await new1(req, res, (req, res) => {
+        return new Promise((resolve, reject) => {
+          if (!this.#isAuthenticated(req)) {
+            debug("not authenticated");
+            res.writeHead(403, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "Forbidden" }));
+            resolve();
+            return;
+          }
+          let body = "";
+
+          // 1. Collect data chunks
+          req.on("data", (chunk) => {
+            body += chunk.toString();
+          });
+
+          req.on("end", async () => {
+            try {
+              // 2. Parse x-www-form-urlencoded using URLSearchParams
+              const params = new URLSearchParams(body);
+
+              // 3. Convert to a plain object
+              const articleData = Object.fromEntries(params.entries());
+
+              console.log("New Article Data:", articleData);
+              // local
+              await this.#databaseModel.save(articleData); // --> to api server
+              this.postArticle(articleData);
+              // external
+
+              // Success response
+              res.writeHead(302, { Location: "/" });
+              res.end();
+              resolve();
+            } catch (err) {
+              if (!res.headersSent) {
+                res.writeHead(400, { "Content-Type": "application/json" });
+                res.end(JSON.stringify({ error: "Failed to parse form data" }));
+              }
+              resolve();
+            }
+          });
+          req.on("error", reject);
+        });
+
+        /*await this.#handleLogin(req, res, async () => {
+          await this.#handleLogin(req, res);
+        })*/
+      });
+      if (res.headersSent) return;
+
+      await getPages(
+        req,
+        res,
+        async (req, res) => {
+          // reload styles and scripts on (every) request
+          if (this.reloadStylesOnGET) {
+            if (this.#stylesheetPath != null && this.compilestyle) {
+              await this.#processStylesheets(this.#stylesheetPath);
+            }
+            const __filename = fileURLToPath(import.meta.url);
+            const __dirname = path.dirname(__filename);
+            const srcScriptPath = path.join(__dirname, "src", "fetchData.js");
+            await this.#processScripts(srcScriptPath);
+          }
+
+          let loggedin = false;
+          if (!this.#isAuthenticated(req)) {
+            // login
+            loggedin = false;
+          } else {
+            // logout
+            loggedin = true;
+          }
+
+          if (this.angular) {
+            // use angular frontend
+            const filePath = path.join(this.#publicDir, "index.html");
+
+            debug("%s", filePath);
+            try {
+              const data = await readFile(filePath);
+              // Manual MIME type detection (simplified)
+              const ext = path.extname(filePath);
+              const mimeTypes = {
+                ".html": "text/html",
+                ".css": "text/css",
+                ".js": "text/javascript",
+              };
+
+              res.writeHead(200, {
+                "Content-Type": mimeTypes[ext] || "application/octet-stream",
+              });
+              res.end(data);
+            } catch (err) {
+              if (err) {
+                res.writeHead(404);
+                return res.end("Index-File Not Found");
+              }
+            }
+          } else {
+            // use built in view engine
+            try {
+              const html = await this.toHTML(loggedin); // render this blog to HTML
+              res.writeHead(200, {
+                "Content-Type": "text/html; charset=UTF-8",
+              });
+              res.end(html);
+              return;
+            } catch (err) {
+              console.error(err);
+              if (!res.headersSent) {
+                res.writeHead(500, { "Content-Type": "text/plain" });
+                res.end("Internal Server Error");
+              }
+              return;
+            }
+          }
+        },
+        this.#publicDir,
+      );
+    });
+
+    this.#server = server;
+
+    return new Promise((resolve, reject) => {
+      const errorHandler = (err) => reject(err);
+      this.#server.once("error", errorHandler);
+      this.#server.listen(port, "0.0.0.0", () => {
+        // <-- for docker 0.0.0.0, localhost 127.0.0.1
+        this.#server.removeListener("error", errorHandler);
+        console.log(`server running at http://localhost:${port}/`);
+        resolve(); // Resolve the promise when the server is listening
+      });
+    });
+  } // http server
+
+  async closeServer() {
+    return new Promise((resolve, reject) => {
+      if (this.#server) {
+        // if server is running
+        this.#server.close((err) => {
+          if (err && err.code !== "ERR_SERVER_NOT_RUNNING") return reject(err);
+          console.log("Server closed.");
+          resolve();
+        });
+      } else {
+        // server is not running
+        resolve(); // Nothing to close
+      }
+    });
+  }
+
+  /** Populates the blog's title and articles from a data object. */
+  #applyBlogData(data) {
+    debug("applyBlogData");
+    if (this.#articles.storage.clear) {
+      this.#articles.storage.clear();
+    } else {
+      //this.#articles.setDataModel(this.#makeDataModel()); // Fallback if clear() isn't implemented
+    }
+    this.#title = data.title;
+    // Assuming data contains a title and an array of articles with title and content
+    if (this.#articles && data.articles && Array.isArray(data.articles)) {
+      if (this.#articles.getStorageName().includes("BinarySearchTree")) {
+        debug("using special insert method for BST");
+        const insertBalanced = (start, end) => {
+          if (start > end) return;
+          const mid = Math.floor((start + end) / 2);
+          const articleData = data.articles[mid];
+          const article = new Article(
+            articleData.id,
+            articleData.title,
+            articleData.content,
+            articleData.createdAt,
+          );
+          this.addArticle(article);
+          insertBalanced(start, mid - 1);
+          insertBalanced(mid + 1, end);
+        };
+        insertBalanced(0, data.articles.length - 1);
+      } else {
+        for (const articleData of data.articles) {
+          const article = new Article(
+            articleData.id,
+            articleData.title,
+            articleData.content,
+            articleData.createdAt,
+          );
+          this.addArticle(article);
+        }
+      }
+    }
+  }
+
+  async #loadFromAPI() {
+    const data = await fetchData(this.#apiUrl);
+    if (data) {
+      this.#applyBlogData(data);
+    }
+  }
+
+  // controller
+  /** everything that happens in /api  */
+  async #jsonAPI(req, res) {
+    const origin = req.headers.origin;
+    if (origin) {
+      res.setHeader("Access-Control-Allow-Origin", origin);
+      res.setHeader("Access-Control-Allow-Credentials", "true");
+      res.setHeader(
+        "Access-Control-Allow-Methods",
+        "GET, POST, PUT, DELETE, OPTIONS",
+      );
+      res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+    }
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    const url = new URL(req.url, `http://${req.headers.host || "localhost"}`);
+    const pathname = url.pathname;
+
+    if (req.method === "GET") {
+      if (pathname === "/api" || pathname === "/api/") {
+        debug("GET /api");
+        res.writeHead(200, { "Content-Type": "application/json" });
+        const data = {
+          title: this.title,
+        };
+        res.end(JSON.stringify(data));
+      }
+      // Search
+      if (url.searchParams.has("q")) {
+        debug("GET search article by query");
+        const query = url.searchParams.get("q");
+        const pLimit = parseInt(url.searchParams.get("limit"));
+        const limit = !isNaN(pLimit) ? pLimit : null;
+        debug("GET search article by query %s with limit %s", query, limit);
+        res.writeHead(200, { "Content-Type": "application/json" });
+        const results = this.#articles.search(query, limit);
+        res.end(JSON.stringify({ articles: results }));
+        return;
+      }
+      // GET article by ID
+      // /api/articles/1
+      const match = pathname.match(/^\/api\/articles\/(\d+)$/);
+      if (match) {
+        debug("GET article by id");
+        const id = parseInt(match[1]);
+        debug("GET article by id %d", id);
+        //console.log(this.#articles.getAllArticles());
+        const article = this.#articles.get(id);
+        if (article) {
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify(article));
+        } else {
+          res.writeHead(404, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ error: "Not Found" }));
+        }
+        return;
+      }
+      // GET all blog data
+      if (pathname === "/api/articles") {
+        debug("GET all articles");
+        // Use 'offset' param as startId (filter) to get items starting at ID
+        const pLimit = parseInt(url.searchParams.get("limit"));
+        const limit = !isNaN(pLimit) ? pLimit : null;
+
+        const start = url.searchParams.get("startdate");
+        const end = url.searchParams.get("enddate");
+
+        debug("startdate: %d, enddate: %d, limit: %d", start, end, limit);
+
+        //const parsedStart = parseDateParam(qStartdate);
+        //const parsedEnd = parseDateParam(qEnddate, true);
+
+        //const effectiveStart = parsedStart !== null ? parsedStart : startID;
+        //const effectiveEnd = parsedEnd !== null ? parsedEnd : endID;
+
+        // controller
+        res.writeHead(200, { "Content-Type": "application/json" });
+        const dbArticles = await this.#articles.findAll(start, end, limit);
+        const responseData = {
+          title: this.title, // Keep the title from the original constant
+          articles: dbArticles,
+        };
+        res.end(JSON.stringify(responseData));
+      }
+
+      // POST a new article
+    } else if (req.method === "POST" && pathname === "/api/articles") {
+      debug("POST an article");
+      if (!this.#isAuthenticated(req)) {
+        debug("not authenticated");
+        res.writeHead(403, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: "Forbidden" }));
+        return;
+      }
+      const body = await new Promise((resolve, reject) => {
+        let data = "";
+        req.on("data", (chunk) => (data += chunk.toString()));
+        req.on("end", () => resolve(data));
+        req.on("error", reject);
+      });
+      const newArticle = JSON.parse(body);
+      debug("new article: %s", newArticle.title);
+      // local
+      await this.#databaseModel.save(newArticle); // --> to api server
+      this.postArticle(newArticle);
+      // external
+      res.writeHead(201, { "Content-Type": "application/json" });
+      res.end(JSON.stringify(newArticle));
+    } else if (req.method === "DELETE") {
+      debug("DELETE an article");
+      const match = pathname.match(/^\/api\/articles\/(\d+)$/);
+      if (pathname === "/api/articles" || match) {
+        if (!this.#isAuthenticated(req)) {
+          res.writeHead(403, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ error: "Forbidden" }));
+          return;
+        }
+        const id = match ? match[1] : url.searchParams.get("id");
+        debug("delete an article by id $d", id);
+        if (id) {
+          this.#articles.remove(parseInt(id));
+          if (this.#databaseModel) {
+            await this.#databaseModel.remove(parseInt(id));
+          }
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ status: "deleted", id }));
+        }
+      }
+    } else if (req.method === "PUT") {
+      debug("PUT an article");
+      if (!this.#isAuthenticated(req)) {
+        res.writeHead(403, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: "Forbidden" }));
+        return;
+      }
+      const match = pathname.match(/^\/api\/articles\/(\d+)$/);
+      if (pathname === "/api/articles" || match) {
+        const id = match ? match[1] : url.searchParams.get("id");
+        debug("PUT article id: %d", id);
+        const body = await new Promise((resolve) => {
+          let data = "";
+          req.on("data", (chunk) => (data += chunk));
+          req.on("end", () => resolve(data));
+        });
+        const { title, content } = JSON.parse(body);
+        this.#articles.update(parseInt(id), title, content);
+        if (this.#databaseModel) {
+          await this.#databaseModel.update(parseInt(id), { title, content });
+        }
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ status: "updated", id }));
+      }
+    }
+  }
+
+  /** set external API */
+  setAPI(APIUrl) {
+    this.#apiUrl = APIUrl;
+    this.#isExternalAPI = true;
+  }
+
+  /** print markdown to the console */
+  print() {
+    const data = {
+      title: this.title,
+      articles: this.#articles.getAllArticles(),
+    };
+    const markdown = formatMarkdown(data);
+    console.log(markdown);
+  }
+
+  /** render this blog content to valid html */
+  async toHTML(loggedin) {
+    const articles = this.#articles.getAllArticles();
+    const articles_after = articles.slice(0, 50);
+    // prettier-ignore
+    debug("slice articles from %d to %d", articles.length, articles_after.length);
+    const data = {
+      title: this.title,
+      articles: articles_after,
+      loggedin,
+      login: "",
+    };
+
+    if (loggedin)
+      data.login = `<form action="/logout" method="POST" style="display:inline;">
+  <button type="submit" class="btn">
+    logout
+  </button>
+</form>`;
+    else data.login = `<a class="btn login" href="/login">login</a>`;
+
+    //debug("typeof data: %o", typeof data);
+    //debug("typeof data.articles: %o", typeof data.articles);
+    //debug("typeof data.articles: %O", data.articles);
+    const article = data.articles[0];
+    debug("first article: ");
+    debug("%d %s %s", article.id, article.title, article.getContentVeryShort());
+    const html = formatHTML(data);
+    if (validate(html)) return html;
+    throw new Error("Error. Invalid HTML!");
+  }
+
+  /**
+   * read files, compare checksums, compile and write to public/styles.min.css
+   * @param {string[]} files - Array of css/scss file paths to process.
+   */
+  async #processStylesheets(files) {
+    console.log("process stylesheets");
+
+    // Normalize input to array (handles string or array)
+    // "file1.css" --> ["file1.css"]
+    // ["file1.css", "file2.css",...]
+    const fileList = Array.isArray(files) ? files : [files];
+    const styleFiles = fileList.filter(
+      (f) =>
+        typeof f === "string" &&
+        (f.endsWith(".scss") || f.endsWith(".css")) &&
+        !f.endsWith(".min.css"),
+    );
+    //const scriptFiles = files.filter((f) => f.endsWith(".js") && !f.endsWith(".min.js"));
+
+    // --- Process Styles ---
+    if (styleFiles.length > 0) {
+      // read file
+      const fileData = await Promise.all(
+        styleFiles.sort().map(async (f) => {
+          const content = await fs.promises.readFile(f, "utf-8");
+          if (content == "") throw new Error("Invalid Filepath or empty file!");
+          return { path: f, content };
+        }),
+      );
+
+      // compute hash
+      const currentHash = crypto
+        .createHash("sha256")
+        .update(
+          fileData
+            .map((f) =>
+              crypto.createHash("sha256").update(f.content).digest("hex"),
+            )
+            .join(""),
+        )
+        .digest("hex");
+
+      // check if hash matches
+      if (currentHash !== this.#stylesHash && this.compilestyle) {
+        console.log("Style assets have changed. Recompiling...");
+        this.#stylesHash = currentHash;
+
+        // Compile styles using the standalone script from build-styles.js
+        this.compiledStyles = await compileStyles(fileData);
+
+        // generate a file
+        await fs.promises.mkdir(this.#publicDir, { recursive: true });
+        await fs.promises.writeFile(
+          path.join(this.#publicDir, "styles.min.css"),
+          this.compiledStyles + `\n/* source-hash: ${currentHash} */`,
+        );
+      } else {
+        console.log("styles are up-to-date");
+      }
+    }
+  }
+
+  /**
+   * read files, compare checksums, compile and write to public/scripts.min.js
+   * @param {string|string[]} files - File path(s) to process.
+   */
+  async #processScripts(files) {
+    // Normalize input to array
+    const fileList = Array.isArray(files) ? files : [files];
+    const scriptFiles = fileList.filter(
+      (f) =>
+        typeof f === "string" && f.endsWith(".js") && !f.endsWith(".min.js"),
+    );
+
+    if (scriptFiles.length > 0) {
+      const fileData = await Promise.all(
+        scriptFiles.map(async (f) => {
+          const content = await fs.promises.readFile(f, "utf-8");
+          if (content == "") throw new Error("Invalid Filepath or empty file!");
+          return { path: f, content };
+        }),
+      );
+
+      const currentHash = crypto
+        .createHash("sha256")
+        .update(
+          fileData
+            .map((f) =>
+              crypto.createHash("sha256").update(f.content).digest("hex"),
+            )
+            .join(""),
+        )
+        .digest("hex");
+
+      if (!this.#scriptsHash) {
+        try {
+          const existing = await fs.promises.readFile(
+            path.join(this.#publicDir, "scripts.min.js"),
+            "utf-8",
+          );
+          const match = existing.match(/\/\* source-hash: ([a-f0-9]{64}) \*\//);
+          if (match) this.#scriptsHash = match[1];
+        } catch (err) {
+          // ignore
+        }
+      }
+
+      if (currentHash !== this.#scriptsHash) {
+        console.log("Script assets have changed. Recompiling...");
+        this.#scriptsHash = currentHash;
+
+        const compiledScripts = await compileScripts(fileData);
+
+        await fs.promises.mkdir(this.#publicDir, { recursive: true });
+        await fs.promises.writeFile(
+          path.join(this.#publicDir, "scripts.min.js"),
+          compiledScripts + `\n/* source-hash: ${currentHash} */`,
+        );
+      }
+    }
+  }
+}

package/Blog.js

@@ -169,6 +169,15 @@ export default class Blog {
     return match ? this.sessions.has(match[1]) : false;
   }
 
+  async #readBody(req) {
+    return new Promise((resolve, reject) => {
+      let data = "";
+      req.on("data", (chunk) => (data += chunk.toString()));
+      req.on("end", () => resolve(data));
+      req.on("error", reject);
+    });
+  }
+
   async #handleLogin(req, res) {
     debug("handle login");
     const body = await new Promise((resolve, reject) => {
@@ -379,6 +388,11 @@ export default class Blog {
 
     const server = http.createServer(async (req, res) => {
       //debug("query %s", req.url);
+      await api(req, res, async (req, res) => {
+        await this.#jsonAPI(req, res);
+      });
+      if (res.headersSent) return;
+
       await login(
         req,
         res,
@@ -442,59 +456,34 @@ export default class Blog {
       });
       if (res.headersSent) return;
 
-      await api(req, res, async (req, res) => {
-        await this.#jsonAPI(req, res);
-      });
-      if (res.headersSent) return;
+      await new1(req, res, async (req, res) => {
+        if (!this.#isAuthenticated(req)) {
+          debug("not authenticated");
+          res.writeHead(403, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ error: "Forbidden" }));
+          return;
+        }
 
-      await new1(req, res, (req, res) => {
-        return new Promise((resolve, reject) => {
-          if (!this.#isAuthenticated(req)) {
-            debug("not authenticated");
-            res.writeHead(403, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({ error: "Forbidden" }));
-            resolve();
-            return;
+        try {
+          const body = await this.#readBody(req);
+          const params = new URLSearchParams(body);
+          const articleData = Object.fromEntries(params.entries());
+
+          console.log("New Article Data:", articleData);
+          // local
+          await this.#databaseModel.save(articleData); // --> to api server
+          this.postArticle(articleData);
+          // external
+
+          // Success response
+          res.writeHead(302, { Location: "/" });
+          res.end();
+        } catch (err) {
+          if (!res.headersSent) {
+            res.writeHead(400, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "Failed to parse form data" }));
           }
-          let body = "";
-
-          // 1. Collect data chunks
-          req.on("data", (chunk) => {
-            body += chunk.toString();
-          });
-
-          req.on("end", async () => {
-            try {
-              // 2. Parse x-www-form-urlencoded using URLSearchParams
-              const params = new URLSearchParams(body);
-
-              // 3. Convert to a plain object
-              const articleData = Object.fromEntries(params.entries());
-
-              console.log("New Article Data:", articleData);
-              // local
-              await this.#databaseModel.save(articleData); // --> to api server
-              this.postArticle(articleData);
-              // external
-
-              // Success response
-              res.writeHead(302, { Location: "/" });
-              res.end();
-              resolve();
-            } catch (err) {
-              if (!res.headersSent) {
-                res.writeHead(400, { "Content-Type": "application/json" });
-                res.end(JSON.stringify({ error: "Failed to parse form data" }));
-              }
-              resolve();
-            }
-          });
-          req.on("error", reject);
-        });
-
-        /*await this.#handleLogin(req, res, async () => {
-          await this.#handleLogin(req, res);
-        })*/
+        }
       });
       if (res.headersSent) return;
 
@@ -568,6 +557,12 @@ export default class Blog {
         },
         this.#publicDir,
       );
+      if (res.headersSent) return;
+
+      // If no route was matched, send a 404
+      debug("unmatched route: %s %s", req.method, req.url);
+      res.writeHead(404, { "Content-Type": "text/plain" });
+      res.end("Not Found");
     });
 
     this.#server = server;
@@ -849,7 +844,12 @@ export default class Blog {
     //debug("typeof data.articles: %O", data.articles);
     const article = data.articles[0];
     debug("first article: ");
-    debug("%d %s %s", article.id, article.title, article.getContentVeryShort());
+    debug(
+      "%d %s %s...",
+      article.id,
+      article.title,
+      article.getContentVeryShort(),
+    );
     const html = formatHTML(data);
     if (validate(html)) return html;
     throw new Error("Error. Invalid HTML!");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexho111/plainblog",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "description": "A tool for creating and serving a minimalist, single-page blog.",
   "main": "index.js",
   "type": "module",

package/public/styles.min.css

@@ -1,2 +1,2 @@
-body{font-family:Arial,sans-serif}h1{color:#333}:root{--black:#111;--clearwhite:#fefefe;--white:#eee;--darkgray:rgba(54,54,54,.5);--text-primary:var(--black);--text-secondary:var(--clearwhite)}body,html{margin:0}html{font-size:clamp(.85rem,1vw + .5rem,1.1rem)}body{background:var(--white_darker);color:var(--text-primary);font-family:Arial}nav{align-items:center;background:#ebebeb;display:flex;margin-top:10px;max-width:800px;padding:5px}#header h1,nav{margin-left:25px}button,form input,form textarea{box-sizing:border-box;padding:5px 10px}button{width:-moz-fit-content;width:fit-content;field-sizing:content;padding:10px}input,input:focus,textarea,textarea:focus{box-shadow:6px 6px 1px 1px rgba(50,50,50,.2)}input:focus,textarea:focus{background-color:var(--clearwhite);border:2px solid #3b40c1;outline:none}.form_element{display:block;font-family:monospace;font-size:103%;margin-bottom:10px;padding:4px}.wide{width:100%}.password{width:250px}.new_title{height:35px;padding:10px}.new_content{height:300px;padding:10px;resize:none}#createNew{max-width:800px;width:100%}#search{border:1px solid var(--text-primary);box-shadow:none;font-size:1rem;margin-left:auto;padding:.4rem 1rem}hr{margin:40px 0}.articles,hr{max-width:800px}.articles{border:0 solid #000;display:grid;gap:.25rem;grid-template-columns:1fr}.articles article{border:2px solid #a9a9a9;border-radius:4px;margin-bottom:10px;min-width:0;overflow-wrap:break-word;padding:.4rem}.articles article h2{color:#353535;margin-bottom:5px}.articles article .datetime{color:#757575;margin:0}.articles article p{margin-bottom:0;margin-top:10px}article a,article a:visited,h1{color:#696969}h2{border:0 solid #000;margin-top:0}nav a{color:#3b40c1;font-size:20px;text-decoration:underline}nav a:visited{color:#3b40c1;text-decoration-color:#3b40c1}.loginform{margin-left:25px}#wrapper{margin-left:5px;max-width:1200px;padding:0 20px}#wrapper,.buttons{box-sizing:border-box;width:100%}.buttons{align-items:center;border:0 solid #000;display:flex;gap:5px;height:25px;list-style:none;margin:0 0 16px;padding:15px 15px 15px 0}.box{margin-left:25px}.btn{border:none;border:1px solid var(--text-primary);border-radius:0;box-shadow:3px 2px 2px var(--darkgray);color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:500;padding:.4rem 1rem;text-decoration:none;width:-moz-fit-content;width:fit-content}.btn:hover{background-color:#fff;border:2px solid var(--black);color:#000}.light{background:var(--clearwhite);color:var(--black)}.light:hover{background:var(--black);color:var(--clearwhite)}.hide-image{display:none}.edit{background-color:blue}.delete,.edit{color:var(--clearwhite)}.delete{background-color:red}@media screen and (min-width:1000px){#wrapper,body{font-size:.75rem;margin:0 auto;max-width:1400px;padding:0 40px;width:90%}.articles article p,.form_element{font-size:105%}}
-/* source-hash: a15768c8883273ae7a9f42583fad69fb48bd68a95492f42d5ec1734153d2de5e */
+body{font-family:Arial,sans-serif}h1{color:#333}:root{--black:#111;--clearwhite:#fefefe;--white:#eee;--darkgray:rgba(54,54,54,.5);--text-primary:var(--black);--text-secondary:var(--clearwhite);--max-width:600px}body,html{margin:0;overflow-x:hidden}html{font-size:clamp(.85rem,1vw + .5rem,1.1rem)}body{background:var(--white_darker);color:var(--text-primary);font-family:Arial}nav{align-items:center;background:#ebebeb;box-sizing:border-box;display:flex;margin-top:10px;max-width:var(--max-width);padding:5px}button,form input,form textarea{box-sizing:border-box;padding:5px 10px}button{width:-moz-fit-content;width:fit-content;field-sizing:content;padding:10px}input,textarea{border:1px solid #ababab}input,input:focus,textarea,textarea:focus{box-shadow:6px 6px 1px 1px rgba(50,50,50,.2)}input:focus,textarea:focus{background-color:var(--clearwhite);border:2px solid #3b40c1;outline:none}.form_element{display:block;font-family:monospace;font-size:103%;margin-bottom:10px;padding:4px}.wide{width:100%}.password{width:250px}.new_title{height:35px;padding:10px}.new_content{height:300px;padding:10px;resize:none}#createNew{max-width:var(--max-width);width:100%}#search{border:1px solid var(--text-primary);box-shadow:none;font-size:1rem;margin-left:auto;padding:.4rem 1rem}hr{margin:40px 0}.articles,hr{max-width:var(--max-width)}.articles{border:0 solid #000;display:grid;gap:.25rem;grid-template-columns:1fr}.articles article{border:2px solid #a9a9a9;border-radius:4px;margin-bottom:10px;min-width:0;overflow-wrap:break-word;padding:.4rem}.articles article h2{color:#353535;margin-bottom:5px}.articles article .datetime{color:#757575;margin:0}.articles article p{margin-bottom:0;margin-top:10px}article a,article a:visited,h1{color:#696969}h2{border:0 solid #000;margin-top:0}nav a{color:#3b40c1;font-size:20px;text-decoration:underline}nav a:visited{color:#3b40c1;text-decoration-color:#3b40c1}.loginform{margin-left:25px}#wrapper{margin-left:0;max-width:1200px;padding:0 20px}#wrapper,.buttons{box-sizing:border-box;width:100%}.buttons{align-items:center;border:0 solid #000;display:flex;gap:5px;height:25px;list-style:none;margin:0 0 16px;padding:15px 15px 15px 0}.btn{border:none;border:1px solid var(--text-primary);border-radius:0;box-shadow:3px 2px 2px var(--darkgray);color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:500;padding:.4rem 1rem;text-decoration:none;width:-moz-fit-content;width:fit-content}.btn:hover{background-color:#fff;border:2px solid var(--black);color:#000}.light{background:var(--clearwhite);color:var(--black)}.light:hover{background:var(--black);color:var(--clearwhite)}.login{font-weight:600}.hide-image{display:none}.edit{background-color:blue}.delete,.edit{color:var(--clearwhite)}.delete{background-color:red}@media screen and (min-width:1000px){#wrapper,body{font-size:.75rem;margin:0 auto;max-width:1400px;padding:0 40px;width:90%}.articles article p,.form_element{font-size:105%}}
+/* source-hash: 9dc9009bca6e59acfb055334bd4573d078c478e8fc31b6ca204010e282075c24 */

package/router.js

@@ -61,13 +61,12 @@ export async function handleLogin(req, res, cb) {
 }
 
 export async function getPages(req, res, cb, publicDir) {
-  if (req.method === "GET" && req.url === "/") {
-    debug(`${req.method} ${req.url}`);
-    await cb(req, res);
-    return;
-  } else {
-    //debug(`serve static files from public folder: ${req.method} ${req.url}`);
-    //await cb2(req, res);
+  if (req.method === "GET") {
+    if (req.url === "/") {
+      debug(`${req.method} ${req.url}`);
+      await cb(req, res);
+      return;
+    }
     // Try to serve static files from public folder
     // Normalize path to prevent directory traversal attacks
     const safePath = path.normalize(req.url).replace(/^(\.\.[\/\\])+/, "");

package/src/styles.css

@@ -5,11 +5,13 @@
   --darkgray: rgba(54, 54, 54, 0.5);
   --text-primary: var(--black);
   --text-secondary: var(--clearwhite);
+  --max-width: 600px;
 }
 
 html,
 body {
   margin: 0;
+  overflow-x: hidden;
 }
 html {
   font-size: clamp(0.85rem, 1vw + 0.5rem, 1.1rem);
@@ -23,14 +25,19 @@ nav {
   margin-top: 10px;
   display: flex;
   align-items: center;
-  max-width: 800px;
+  max-width: var(--max-width);
   background: hsl(0deg 0% 92.27%);
   padding: 5px;
+  box-sizing: border-box;
 }
 nav,
 #header h1 {
 }
 
+#header {
+  max-width: var(--max-width);
+}
+
 form input,
 form textarea,
 button {
@@ -44,6 +51,10 @@ button {
   padding: 10px;
 }
 
+img {
+  max-width: 100%;
+}
+
 input,
 textarea {
   box-shadow: 6px 6px 1px 1px rgb(50 50 50 / 0.2);
@@ -87,7 +98,7 @@ textarea:focus {
 
 #createNew {
   width: 100%;
-  max-width: 800px;
+  max-width: var(--max-width);
 }
 
 #search {
@@ -99,7 +110,7 @@ textarea:focus {
 }
 
 hr {
-  max-width: 800px;
+  max-width: var(--max-width);
   margin-left: 0;
   margin: 40px 0;
 }
@@ -109,7 +120,7 @@ hr {
   display: grid;
   gap: 0.25rem;
   grid-template-columns: 1fr;
-  max-width: 800px;
+  max-width: var(--max-width);
 }
 .articles article {
   border: 0 solid #ccc;
@@ -172,7 +183,7 @@ nav a:visited {
   /*margin: 0 auto; /* Centers the layout on PC */
   padding: 0 20px; /* Consistent spacing on edges */
   width: 100%;
-  margin-left: 5px;
+  margin-left: 0;
   box-sizing: border-box;
 }