@lexho111/plainblog 0.4.2 → 0.5.0

package/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package/Blog.js

@@ -2,18 +2,15 @@ import http from "http";
 import crypto from "crypto";
 import fs from "fs";
 import { URLSearchParams } from "url";
-import { MapTransform } from "./streams.js";
 import Article from "./Article.js";
-import DatabaseModel from "./model/DatabaseModel.js";
+import DatabaseModel from "./model/DatabaseModel2.js";
 import { fetchData, postData } from "./model/APIModel.js";
-import { save as saveToFile, load as loadFromFile } from "./model/fileModel.js";
-import { formatHTML, formatMarkdown, validate } from "./Formatter.js";
+import { formatHTML, header, formatMarkdown, validate } from "./Formatter.js";
 import pkg from "./package.json" with { type: "json" };
 import path from "path";
 import { fileURLToPath } from "url";
 import { exec } from "child_process";
 import { promisify } from "util";
-import { compileStyles, mergeStyles } from "./build-styles.js";
 
 const execPromise = promisify(exec);
 
@@ -28,13 +25,14 @@ export default class Blog {
     this.scripts = "";
     this.compiledStyles = "";
     this.compiledScripts = "";
+    this.reloadStylesOnGET = false;
 
     this.database = {
-      type: "sqlite",
-      username: "user1",
-      password: "password1",
+      type: "file",
+      username: "user",
+      password: "password",
       host: "localhost",
-      dbname: "blog",
+      dbname: "blog.json",
     };
     this.sessions = new Set();
 
@@ -42,63 +40,6 @@ export default class Blog {
     console.log(`version: ${version}`);
   }
 
-  /*loadScripts() {
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = path.dirname(__filename);
-    try {
-      const content = fs.readFileSync(
-        path.join(__dirname, "scripts.min.js"),
-        "utf-8"
-      );
-      const match = content.match(/\/\* source-hash: ([a-f0-9]+) \*\//);
-      if (match) {
-        this.#scriptsHash = match[1];
-        this.compiledScripts = content.replace(match[0], "").trim();
-      } else {
-        this.compiledScripts = content;
-        this.#scriptsHash = "";
-      }
-    } catch(err) {
-      this.compiledScripts = "";
-      this.#scriptsHash = "";
-    }
-  }*/
-
-  loadStyles() {
-    console.log("load styles")
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = path.dirname(__filename);
-    try {
-      const content = fs.readFileSync(
-        path.join(__dirname, "styles.min.css"),
-        "utf-8"
-      );
-      const match = content.match(/\/\* source-hash: ([a-f0-9]+) \*\//);
-      if (match) {
-        this.#stylesHash = match[1];
-        this.compiledStyles = content.replace(match[0], "").trim();
-      } else {
-        this.compiledStyles = content;
-        this.#stylesHash = "";
-      }
-    } catch(err) {
-      this.compiledStyles = "";
-      this.#stylesHash = "";
-    }
-  }
-
-  loadScripts() {
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = path.dirname(__filename);
-    try {
-      this.scripts = fs.readFileSync(path.join(__dirname, "scripts.min.js"), "utf-8");
-      //console.log(this.scripts)
-    } catch (err) {
-      console.error(err);
-      this.scripts = "";
-    }
-  }
-
   // Private fields
   #server = null;
   #password = null;
@@ -108,6 +49,7 @@ export default class Blog {
   #title = "";
   #stylesHash = "";
   #scriptsHash = "";
+  #stylesheetPath = "";
 
   setTitle(title) {
     this.#title = title;
@@ -123,6 +65,10 @@ export default class Blog {
 
   set title(t) {
     this.#title = t;
+    this.#databaseModel = new DatabaseModel(this.database);
+    console.log(`connected to database`);
+    if(t != this.#title && t.length == 0)
+      this.#databaseModel.updateBlogTitle(t);
   }
 
   get title() {
@@ -138,7 +84,8 @@ export default class Blog {
   }
 
   set stylesheetPath(files) {
-    this.assetFiles = files;
+    this.#stylesheetPath = files;
+    console.log(`this.#stylesheetPath: ${this.#stylesheetPath}`)
   }
 
   addArticle(article) {
@@ -170,7 +117,7 @@ export default class Blog {
         res.end();
       } else {
         res.writeHead(401, { "Content-Type": "text/html" });
-        res.end(`<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>${this.styles}</style></head>
+        res.end(`${header("My Blog")}
 <body>
 <h1>Unauthorized</h1><p>Please enter the password.<form method="POST">
 <input type="password" name="password" placeholder="Password" />
@@ -197,11 +144,52 @@ export default class Blog {
   /** initializes database */
   async init() {
     //await this.buildFrontend();
-    this.loadStyles();
-    this.loadScripts();
-    //const assetFiles = await this.#findAssetFiles();
-    if(this.assetFiles != null) {
-      await this.processAssets(this.assetFiles);
+    //this.loadStyles();
+    //this.loadScripts();
+    if(this.#stylesheetPath != null) {
+      await this.processStylesheets(this.#stylesheetPath);
+    }
+    if(!this.#stylesheetPath) { 
+      // compile and merge hardcoded 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(__dirname, "public", "styles.min.css");
+
+      let publicHash = null;
+      try {
+        const publicCSS = await fs.promises.readFile(publicStylePath, "utf8");
+        const match = publicCSS.match(/\/\* source-hash: ([a-f0-9]{64}) \*\//);
+        if (match) {
+          publicHash = match[1];
+        }
+      } catch (err) {
+        // public/styles.min.css doesn't exist, will be created.
+      }
+
+      let srcStyles = "";
+      try {
+        srcStyles = await fs.promises.readFile(srcStylePath, "utf8");
+      } catch (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) {
+        console.log("Styles have changed. Recompiling...");
+        //const finalStyles = await mergeStyles(this.styles, srcStyles);
+        const finalStyles = 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);
+        }
+      }
     }
     if (this.#isExternalAPI) {
       console.log("external API");
@@ -218,7 +206,6 @@ export default class Blog {
         dbArticles.push(new Article("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("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())); 
       }
-      this.reloadStylesOnGET = false;
       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
@@ -280,7 +267,7 @@ export default class Blog {
       if (req.url === "/login") {
         if (req.method === "GET") {
           res.writeHead(200, { "Content-Type": "text/html" });
-          res.end(`<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>${this.styles}</style></head>
+          res.end(`${header("My Blog")}
 <body>
 <h1>Login</h1><form method="POST">
 <input type="password" name="password" placeholder="Password" />
@@ -304,7 +291,6 @@ export default class Blog {
           res.end("Forbidden");
           return;
         }
-        await this.#databaseModel.updateBlogTitle(this.title);
         await this.postArticle(req, res);
         // GET artciles
       } else if (req.method === "GET" && req.url === "/") {
@@ -312,11 +298,8 @@ export default class Blog {
 
         // reload styles and scripts on (every) request
         if(this.reloadStylesOnGET) {
-          if (this.assetFiles) {
-            await this.processAssets(this.assetFiles);
-          } else {
-            this.loadStyles();
-            this.loadScripts();
+          if (this.#stylesheetPath) {
+            await this.processStylesheets(this.#stylesheetPath);
           }
         }
 
@@ -339,6 +322,39 @@ export default class Blog {
           res.end("Internal Server Error");
         }
       } else {
+        // Try to serve static files from public folder
+        try {
+          const __filename = fileURLToPath(import.meta.url);
+          const __dirname = path.dirname(__filename);
+          const publicDir = path.join(__dirname, "public");
+          const parsedUrl = new URL(req.url, `http://${req.headers.host || "localhost"}`);
+          const filePath = path.join(publicDir, parsedUrl.pathname);
+
+          if (filePath.startsWith(publicDir)) {
+            const stats = await fs.promises.stat(filePath);
+            if (stats.isFile()) {
+              const ext = path.extname(filePath).toLowerCase();
+              const mimeTypes = {
+                ".html": "text/html",
+                ".js": "text/javascript",
+                ".css": "text/css",
+                ".json": "application/json",
+                ".png": "image/png",
+                ".jpg": "image/jpeg",
+                ".gif": "image/gif",
+                ".svg": "image/svg+xml",
+                ".ico": "image/x-icon",
+              };
+              const contentType = mimeTypes[ext] || "application/octet-stream";
+              res.writeHead(200, { "Content-Type": contentType });
+              fs.createReadStream(filePath).pipe(res);
+              return;
+            }
+          }
+        } catch (err) {
+          // Continue to 404
+        }
+
         // Error 404
         res.writeHead(404, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ message: "Not Found" }));
@@ -372,7 +388,7 @@ export default class Blog {
   /** Populates the blog's title and articles from a data object. */
   #applyBlogData(data) {
     this.articles = []; // Clear existing articles before loading new ones
-    this.title = data.title;
+    this.#title = data.title;
     // Assuming the API returns an array of objects with title and content
     if (data.articles && Array.isArray(data.articles)) {
       for (const articleData of data.articles) {
@@ -383,23 +399,6 @@ export default class Blog {
     }
   }
 
-  async save(filename = this.filename) {
-    if (this.#databaseModel === undefined) this.init(); // init blog if it didn't already happen
-    //await this.#apiServer.initialize();
-    if (this.#isExternalAPI) await this.loadFromAPI();
-    const blogData = { title: this.title, articles: this.articles };
-    saveToFile(filename, blogData);
-  }
-
-  async load(filename) {
-    loadFromFile(filename, (title, articles) => {
-      this.title = title;
-      this.articles = articles.map(
-        (article) => new Article(article.title, article.content)
-      );
-    });
-  }
-
   async loadFromAPI() {
     const data = await fetchData(this.#apiUrl);
     if (data) {
@@ -477,30 +476,6 @@ export default class Blog {
     console.log(markdown);
   }
 
-  /*async isItFileOrArray(filesInput) {
-    const __dirname = path.dirname(fileURLToPath(import.meta.url));
-    const files = Array.isArray(filesInput) ? filesInput : [filesInput];
-    const fileData = await Promise.all(files.map(async (f) => {
-      const filepath = path.isAbsolute(f) ? f : path.join(__dirname, f);
-      const content = await fs.promises.readFile(filepath, "utf8");
-      return { path: filepath, content };
-    }));
-    return fileData;
-  }*/
-
-  /*computeHashsum(fileData) {
-    return  crypto
-    .createHash("sha256")
-    .update(
-      fileData
-        .map((f) =>
-          crypto.createHash("sha256").update(f.content).digest("hex")
-        )
-        .join("")
-    )
-    .digest("hex");
-  }*/
-
   /** render this blog content to valid html */
   async toHTML(loggedin) {
     const data = {
@@ -512,58 +487,21 @@ export default class Blog {
 
     if(loggedin) data.login = `<a href="/logout">logout</a>`;
     else data.login = `<a href="/login">login</a>`;
-    
-    /*const __dirname = path.dirname(fileURLToPath(import.meta.url));
-    const filepath = path.join(__dirname, "test/stylesheets/styles.css");
-    const fileData = await fs.promises.readFile(filepath, 'utf8');
-    console.log(fileData);
-    this.compiledStyles = fileData;*/
-
-    //await this.processAssets(this.assetFiles);
-
-    // is it file or array of file?
-    /*if (this.assetFiles) {
-      const fileData = await this.isItFileOrArray(this.assetFiles);
-      
-      const currentHash = this.computeHashsum(fileData);
-        console.log(`currentHash: ${currentHash}`)
-        if(currentHash !== this.#stylesHash) {
-          console.log("Style assets have changed. Recompiling...");
-          this.#stylesHash = currentHash;
-          this.compiledStyles = await compileStyles(fileData);
-        }
-    }*/
 
-    this.loadScripts();
-
-    const finalStyles = await mergeStyles(this.styles, this.compiledStyles);
-    const html = formatHTML(data, this.scripts, finalStyles);
+    const html = formatHTML(data);
     if (validate(html)) return html;
     throw new Error("Error. Invalid HTML!");
   }
 
-  async buildFrontend() {
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = path.dirname(__filename);
-    const gulpDir = path.join(__dirname, "./gulp_frontend");
-    console.log("Building frontend assets...");
-    try {
-      const { stdout, stderr } = await execPromise("npx gulp build", { cwd: gulpDir });
-      if (stdout) console.log(stdout);
-      if (stderr) console.error(stderr);
-    } catch (err) {
-      console.error("Failed to build frontend:", err);
-    }
-  }
-
   /**
-   * Loads files, converts them to Vinyl format, and processes them via Gulp.
-   * Updates this.styles and this.scripts with the compiled output.
-   * @param {string[]} files - Array of file paths to process.
+   * Loads files, generates checksums and compiles sass files to css if anything changed
+   * @param {string[]} files - Array of css/scss file paths to process.
    */
-  async processAssets(files) {
+  async processStylesheets(files) {
     
     // Normalize input to array (handles string or array)
+    // "file1.css" --> ["file1.css"]
+    // ["file1.css", "file2.css",...]
     const fileList = Array.isArray(files) ? files : [files];
 
     const __filename = fileURLToPath(import.meta.url);
@@ -575,6 +513,7 @@ export default class Blog {
 
     // --- 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");
@@ -583,6 +522,7 @@ export default class Blog {
         })
       );
 
+      // compute hash
       const currentHash = crypto
         .createHash("sha256")
         .update(
@@ -593,16 +533,23 @@ export default class Blog {
             .join("")
         )
         .digest("hex");
+
+      // check if hash matches
       if (currentHash !== this.#stylesHash) {
         console.log("Style assets have changed. Recompiling...");
         this.#stylesHash = currentHash;
         
-        // Compile styles using the standalone script
-        this.compiledStyles = await compileStyles(fileData);
-        //console.log(`compiledStyles: ${this.compiledStyles}`)
+        // Compile styles using the standalone script from build-styles.js
+        //this.compiledStyles = await compileStyles(fileData);
+        this.compiledStyles = fileData; // TODO workaround
+
+        // generate a file
+        const __filename = fileURLToPath(import.meta.url);
+        const __dirname = path.dirname(__filename);
+        const publicDir = path.join(__dirname, "public");
         
         await fs.promises.writeFile(
-          path.join(__dirname, "styles.min.css"),
+          path.join(publicDir, "styles.min.css"),
           this.compiledStyles + `\n/* source-hash: ${currentHash} */`
         );
       } else {
@@ -610,29 +557,4 @@ export default class Blog {
       }
     }
   }
-
-  async #findAssetFiles() {
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = path.dirname(__filename);
-    const srcDir = path.join(__dirname, "gulp_frontend", "src");
-    const files = [];
-
-    async function walk(dir) {
-      try {
-        const list = await fs.promises.readdir(dir, { withFileTypes: true });
-        for (const dirent of list) {
-          const res = path.join(dir, dirent.name);
-          if (dirent.isDirectory()) {
-            await walk(res);
-          } else {
-            files.push(res);
-          }
-        }
-      } catch (err) {
-        // Directory might not exist or is not accessible
-      }
-    }
-    await walk(srcDir);
-    return files;
-  }
 }

package/Formatter.js

@@ -1,5 +1,18 @@
+export function header(title) {
+  return `<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${title}</title>
+    <style type="text/css">body { font-family: Arial,sans-serif; }</style>
+    <link rel="stylesheet" href="styles.min.css" type="text/css" media="screen" />
+    <link rel="stylesheet" href="print.min.css" type="text/css" media="print" />
+  </head>`;
+}
+
 /** format content to html */
-export function formatHTML(data, script, style) {
+export function formatHTML(data) {
   //console.log(`${data} ${script} ${style}`);
   //export function formatHTML(data) {
   //const button = `<button type="button" onClick="fillWithContent();" style="margin: 4px;">generate random text</button>`;
@@ -15,20 +28,16 @@ export function formatHTML(data, script, style) {
       <hr>`;
   }
   const form = form1;
-  return `<!DOCTYPE html>
-<html lang="de">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${data.title}</title>
-    <style>${style}</style>
-  </head>
+  return `${header(data.title)}
   <body>
     <nav>
   ${data.login}
   </nav>
-    <h1>${data.title}</h1>
-    <div style="max-width: 500px; width: 100%;">
+  <div id="header">
+  <h1>${data.title}</h1>
+  <!--<img src="headerphoto.jpg"/>-->
+    </div>
+    <div id="wrapper">
     ${form}
       <section id="articles" class="grid">
       ${data.articles
@@ -44,8 +53,7 @@ export function formatHTML(data, script, style) {
         .join("")}
       </section>
     </div>
-    <script>
-      ${script}
+    <script src="scripts.min.js">
     </script>
   </body>
 </html>`;

package/README.md

@@ -25,24 +25,6 @@ Now you can open your blog in your webbrowser on `http://localhost:8080`. Login
 
 ## More Features
 
-**SQLite** is the default database. But you can use **PostgreSQL** instead.
-
-### run api server with postgres database
-
-```
-import Blog from "@lexho111/plainblog";
-
-const blog = new Blog();
-blog.database.type = "postgres";
-blog.database.username = "user";
-blog.database.password = "password";
-blog.database.host = "localhost";
-blog.setStyle("body { font-family: Arial, sans-serif; } h1 { color: #333; }");
-await blog.init(); // load data from database
-
-blog.startServer(8080);
-```
-
 ### set an API to fetch data from an external database
 
 ```
@@ -56,36 +38,18 @@ await blog.init(); // load data from database
 blog.startServer(8080);
 ```
 
-### provide custom style sheets and scripts
+### provide custom style sheets
 
 ```
 const blog = new Blog();
 blog.title = "My Blog";
 blog.style = "body { font-family: Arial, sans-serif; } h1 { color: #333; }";
 blog.password = "mypassword";
-blog.stylesheetPath = "path/to/my/styles.scss";
+blog.stylesheetPath = "path/to/my/styles.css";
 
 blog.startServer(8080);
 ```
 
-save data to file
-
-```
-import Blog from "@lexho111/plainblog";
-import { Article } from "@lexho111/plainblog";
-
-const blog = new Blog();
-blog.setStyle("body { font-family: Arial, sans-serif; } h1 { color: #333; }");
-
-const article = new Article("hello", "hello world!");
-blog.addArticle(article);
-
-blog.save("myblog.json");
-
-// load data from 'myblog.json'
-await blog.load("myblog.json");
-```
-
 print your blog articles in markdown
 
 ```