@lexho111/plainblog 0.3.8 → 0.4.1

package/Article.js

@@ -27,10 +27,12 @@ export default class Article {
   }
 
   toHTML() {
+    const moreButton = this.content.length > 400 ? `<a href="#">more</a>` : "";
     return `      <article>
         <h2>${this.title}</h2>
         <span class="datetime">${this.getFormattedDate()}</span>
         <p>${this.getContentShort()}</p>
+        ${moreButton}
       </article>`;
   }
 }

package/Blog.js

@@ -42,7 +42,7 @@ export default class Blog {
     console.log(`version: ${version}`);
   }
 
-  loadScripts() {
+  /*loadScripts() {
     const __filename = fileURLToPath(import.meta.url);
     const __dirname = path.dirname(__filename);
     try {
@@ -62,7 +62,7 @@ export default class Blog {
       this.compiledScripts = "";
       this.#scriptsHash = "";
     }
-  }
+  }*/
 
   loadStyles() {
     console.log("load styles")
@@ -87,6 +87,18 @@ export default class Blog {
     }
   }
 
+  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;
@@ -188,8 +200,9 @@ export default class Blog {
     this.loadStyles();
     this.loadScripts();
     //const assetFiles = await this.#findAssetFiles();
-    if(this.assetFiles != null)
-        await this.processAssets(this.assetFiles);
+    if(this.assetFiles != null) {
+      await this.processAssets(this.assetFiles);
+    }
     if (this.#isExternalAPI) {
       console.log("external API");
       await this.loadFromAPI();
@@ -205,8 +218,8 @@ 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.reloadScriptsStylesOnGET = false;
-      if(this.reloadScriptsStylesOnGET) console.log("reload scripts and styles on GET-Request");
+      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
       else title = dbTitle; // use title from the database
@@ -298,9 +311,13 @@ export default class Blog {
         // load articles
 
         // reload styles and scripts on (every) request
-        if(this.reloadScriptsStylesOnGET) {
-          this.loadScripts();
-          this.loadStyles();
+        if(this.reloadStylesOnGET) {
+          if (this.assetFiles) {
+            await this.processAssets(this.assetFiles);
+          } else {
+            this.loadStyles();
+            this.loadScripts();
+          }
         }
 
         let loggedin = false;
@@ -313,10 +330,11 @@ export default class Blog {
         }
 
         try {
-          const html = this.toHTML(loggedin); // render this blog to HTML
+          const html = await this.toHTML(loggedin); // render this blog to HTML
           res.writeHead(200, { "Content-Type": "text/html; charset=UTF-8" });
           res.end(html);
         } catch (err) {
+          console.error(err);
           res.writeHead(500, { "Content-Type": "text/plain" });
           res.end("Internal Server Error");
         }
@@ -358,7 +376,9 @@ export default class Blog {
     // 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) {
-        this.addArticle(new Article(articleData.title, articleData.content, articleData.createdAt));
+        const article = new Article(articleData.title, articleData.content, articleData.createdAt);
+        article.id = articleData.id;
+        this.addArticle(article);
       }
     }
   }
@@ -390,8 +410,11 @@ export default class Blog {
   // controller
   /** everything that happens in /api  */
   async #jsonAPI(req, res) {
+    const url = new URL(req.url, `http://${req.headers.host || "localhost"}`);
+    const pathname = url.pathname;
+
     if(req.method === "GET") {
-    if(req.url === "/api" || req.url === "/api/") {
+    if(pathname === "/api" || pathname === "/api/") {
       res.writeHead(200, { "Content-Type": "application/json" });
       const data = {
         title: this.title
@@ -399,37 +422,42 @@ export default class Blog {
       res.end(JSON.stringify(data));
     }
     // GET all blog data
-    if (req.url === "/api/articles") {
+    if (pathname === "/api/articles") {
+      // Use 'offset' param as startId (filter) to get items starting at ID
+      const pStartID = parseInt(url.searchParams.get("startID"));
+      const startID = !isNaN(pStartID) ? pStartID : null;
+      const pEndID = parseInt(url.searchParams.get("endID"));
+      const endID = !isNaN(pEndID) ? pEndID : null;
+      const limit = parseInt(url.searchParams.get("limit")) || 10;
       // controller
       res.writeHead(200, { "Content-Type": "application/json" });
-      const dbArticles = await this.#databaseModel.findAll();
+      const dbArticles = await this.#databaseModel.findAll(limit, 0, startID, endID);
       const responseData = {
         title: this.title, // Keep the title from the original constant
         articles: dbArticles,
       };
-      console.log(`responseData: ${responseData}`);
       res.end(JSON.stringify(responseData));
     }
 
     // POST a new article
-  } else if (req.method === "POST" && req.url === "/api/articles") {
+  } else if (req.method === "POST" && pathname === "/api/articles") {
       if (!this.isAuthenticated(req)) {
         res.writeHead(403, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ error: "Forbidden" }));
         return;
       }
-      let body = "";
-      req.on("data", (chunk) => (body += chunk.toString()));
-      req.on("end", async () => {
-        const newArticle = JSON.parse(body);
-
-        // local
-        await this.#databaseModel.save(newArticle); // --> to api server
-        // extern
-
-        res.writeHead(201, { "Content-Type": "application/json" });
-        res.end(JSON.stringify(newArticle));
+      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);
+      // local
+      await this.#databaseModel.save(newArticle); // --> to api server
+      // extern
+      res.writeHead(201, { "Content-Type": "application/json" });
+      res.end(JSON.stringify(newArticle));
     }
   }
 
@@ -449,8 +477,32 @@ 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 */
-  toHTML(loggedin) {
+  async toHTML(loggedin) {
     const data = {
       title: this.title,
       articles: this.articles,
@@ -460,9 +512,32 @@ 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 = this.styles + this.compiledStyles;
-    const finalScripts = this.scripts + this.compiledScripts;
-    const html = formatHTML(data, finalScripts, finalStyles);
+    const html = formatHTML(data, this.scripts, finalStyles);
     if (validate(html)) return html;
     throw new Error("Error. Invalid HTML!");
   }
@@ -487,6 +562,7 @@ export default class Blog {
    * @param {string[]} files - Array of file paths to process.
    */
   async processAssets(files) {
+    
     // Normalize input to array (handles string or array)
     const fileList = Array.isArray(files) ? files : [files];
 
@@ -501,7 +577,8 @@ export default class Blog {
     if (styleFiles.length > 0) {
       const fileData = await Promise.all(
         styleFiles.sort().map(async (f) => {
-          const content = await fs.promises.readFile(f);
+          const content = await fs.promises.readFile(f, "utf-8");
+          if(content == "") throw new Error("Invalid Filepath or empty file!");
           return { path: f, content };
         })
       );
@@ -522,6 +599,7 @@ export default class Blog {
         
         // Compile styles using the standalone script
         this.compiledStyles = await compileStyles(fileData);
+        //console.log(`compiledStyles: ${this.compiledStyles}`)
         
         await fs.promises.writeFile(
           path.join(__dirname, "styles.min.css"),

package/Formatter.js

@@ -30,8 +30,18 @@ export function formatHTML(data, script, style) {
     <h1>${data.title}</h1>
     <div style="max-width: 500px; width: 100%;">
     ${form}
-      <section class="grid">
-      ${data.articles.map((article) => article.toHTML()).join("")}
+      <section id="articles" class="grid">
+      ${data.articles
+        .map((article) => {
+          let html = article.toHTML();
+          if (article.id != null)
+            html = html.replace(
+              "<article",
+              `<article data-id="${article.id}" `
+            );
+          return html;
+        })
+        .join("")}
       </section>
     </div>
     <script>

package/build-styles.js

@@ -1,4 +1,3 @@
-import { promises as fs } from "fs";
 import path from "path";
 import { pathToFileURL } from "url";
 import * as sass from "sass";
@@ -6,21 +5,7 @@ import postcss from "postcss";
 import autoprefixer from "autoprefixer";
 import cssnano from "cssnano";
 
-// Configuration
-const srcDir = path.join("gulp_frontend", "src");
-
-// Helper to find files recursively
-async function getFiles(dir) {
-  const dirents = await fs.readdir(dir, { withFileTypes: true });
-  const files = await Promise.all(
-    dirents.map((dirent) => {
-      const res = path.resolve(dir, dirent.name);
-      return dirent.isDirectory() ? getFiles(res) : res;
-    })
-  );
-  return Array.prototype.concat(...files);
-}
-
+// array of files or a single file
 export async function compileStyles(fileData) {
   try {
     let combinedCss = "";
@@ -34,7 +19,6 @@ export async function compileStyles(fileData) {
       for (const file of scssFiles) {
         try {
           const result = sass.compileString(file.content.toString(), {
-            loadPaths: [srcDir],
             style: "expanded",
             url: pathToFileURL(file.path),
           });
@@ -46,22 +30,10 @@ export async function compileStyles(fileData) {
           );
         }
       }
-    } else {
-      const allFiles = await getFiles(srcDir);
-      const scssFiles = allFiles
-        .filter((f) => f.endsWith(".scss") && !path.basename(f).startsWith("_"))
-        .sort();
 
-      for (const file of scssFiles) {
-        try {
-          const result = sass.compile(file, {
-            loadPaths: [srcDir],
-            style: "expanded",
-          });
-          combinedCss += result.css + "\n";
-        } catch (err) {
-          console.error(`Error compiling ${path.basename(file)}:`, err.message);
-        }
+      const cssFiles = fileData.filter((f) => f.path.endsWith(".css"));
+      for (const file of cssFiles) {
+        combinedCss += file.content + "\n";
       }
     }
 

package/model/APIModel.js

@@ -1,31 +1,27 @@
 import fetch from "node-fetch";
-import { defer, firstValueFrom, timer, of } from "rxjs";
-import { retry, mergeMap, catchError } from "rxjs/operators";
 
 // EXTERNAL DATA API
 
 /** fetch data from an URL */
 export async function fetchData(apiUrl) {
-  const request$ = defer(() => fetch(apiUrl)).pipe(
-    // 1. Check response status inside the stream
-    mergeMap(async (response) => {
+  let retryCount = 0;
+  const maxRetries = 3;
+
+  while (true) {
+    try {
+      const response = await fetch(apiUrl);
       if (!response.ok)
         throw new Error(`HTTP error! status: ${response.status}`);
-      return response.json();
-    }),
-    // 2. Retry 3 times, waiting 1s, 2s, 3s respectively
-    retry({
-      count: 3,
-      delay: (error, retryCount) => timer(retryCount * 1000),
-    }),
-    // 3. Handle final failure
-    catchError((error) => {
-      console.error("Failed to fetch data after retries:", error);
-      return of(null);
-    })
-  );
-
-  return firstValueFrom(request$);
+      return await response.json();
+    } catch (error) {
+      retryCount++;
+      if (retryCount > maxRetries) {
+        console.error("Failed to fetch data after retries:", error);
+        return null;
+      }
+      await new Promise((resolve) => setTimeout(resolve, retryCount * 1000));
+    }
+  }
 }
 
 /** post data to an URL */

package/model/DatabaseModel.js

@@ -1,4 +1,4 @@
-import { Sequelize, DataTypes } from "sequelize";
+import { Sequelize, DataTypes, Op } from "sequelize";
 
 export default class DatabaseModel {
   #username;
@@ -91,11 +91,26 @@ export default class DatabaseModel {
   }
 
   // model
-  async findAll(limit = 10, offset = 0) {
+  async findAll(
+    limit = 4,
+    offset = 0,
+    startId = null,
+    endId = null,
+    order = "DESC"
+  ) {
+    const where = {};
+    if (startId !== null && endId !== null) {
+      where.id = {
+        [Op.between]: [Math.min(startId, endId), Math.max(startId, endId)],
+      };
+    } else if (startId !== null) {
+      where.id = { [order === "DESC" ? Op.lte : Op.gte]: startId };
+    }
     const options = {
+      where,
       order: [
-        ["createdAt", "DESC"],
-        ["id", "DESC"],
+        ["createdAt", order],
+        ["id", order],
       ],
       limit,
       offset,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexho111/plainblog",
-  "version": "0.3.8",
+  "version": "0.4.1",
   "description": "A tool for creating and serving a minimalist, single-page blog.",
   "main": "index.js",
   "type": "module",
@@ -16,19 +16,20 @@
   "author": "lexho111",
   "license": "ISC",
   "dependencies": {
+    "autoprefixer": "^10.4.23",
+    "cssnano": "^7.1.2",
     "node-fetch": "^3.3.2",
     "pg": "^8.16.3",
     "pg-hstore": "^2.3.4",
-    "sequelize": "^6.37.7",
-    "sqlite3": "^5.1.7",
-    "autoprefixer": "^10.4.23",
-    "cssnano": "^7.1.2",
     "postcss": "^8.4.35",
-    "sass": "^1.97.1"
+    "sass": "^1.97.1",
+    "sequelize": "^6.37.7",
+    "sqlite3": "^5.1.7"
   },
   "devDependencies": {
     "eslint": "^9.8.0",
     "eslint-plugin-jest": "^28.6.0",
-    "jest": "^29.7.0"
+    "jest": "^29.7.0",
+    "dom-parser": "^1.1.5"
   }
 }

package/scripts.min.js

@@ -1,2 +1 @@
-/*! gruntproject 2025-12-22 */
-function generateRandomContent(t){let n="";for(let e=0;e<t;e++){var o=Math.random()*("z".charCodeAt(0)-"A".charCodeAt(0)),o=String.fromCharCode("A".charCodeAt(0)+o);n+=o}return n}function fillWithContent(){var e=document.getElementById("title");document.getElementById("content").value=generateRandomContent(200),e.value=generateRandomContent(50)}
+function _createForOfIteratorHelper(e,t){var r,n,o,a,i="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(i)return o=!(n=!0),{s:function(){i=i.call(e)},n:function(){var e=i.next();return n=e.done,e},e:function(e){o=!0,r=e},f:function(){try{n||null==i.return||i.return()}finally{if(o)throw r}}};if(Array.isArray(e)||(i=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length)return i&&(e=i),a=0,{s:t=function(){},n:function(){return a>=e.length?{done:!0}:{done:!1,value:e[a++]}},e:function(e){throw e},f:t};throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){var r;if(e)return"string"==typeof e?_arrayLikeToArray(e,t):"Map"===(r="Object"===(r={}.toString.call(e).slice(8,-1))&&e.constructor?e.constructor.name:r)||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function _regenerator(){var g,e="function"==typeof Symbol?Symbol:{},t=e.iterator||"@@iterator",r=e.toStringTag||"@@toStringTag";function n(e,t,r,n){var o,a,i,c,l,u,f,s,d,t=t&&t.prototype instanceof h?t:h,t=Object.create(t.prototype);return _regeneratorDefine2(t,"_invoke",(o=e,a=r,f=n||[],s=!1,d={p:u=0,n:0,v:g,a:p,f:p.bind(g,4),d:function(e,t){return i=e,c=0,l=g,d.n=t,y}},function(e,t,r){if(1<u)throw TypeError("Generator is already running");for(s&&1===t&&p(t,r),c=t,l=r;(m=c<2?g:l)||!s;){i||(c?c<3?(1<c&&(d.n=-1),p(c,l)):d.n=l:d.v=l);try{if(u=2,i){if(m=i[e=c?e:"next"]){if(!(m=m.call(i,l)))throw TypeError("iterator result is not an object");if(!m.done)return m;l=m.value,c<2&&(c=0)}else 1===c&&(m=i.return)&&m.call(i),c<2&&(l=TypeError("The iterator does not provide a '"+e+"' method"),c=1);i=g}else if((m=(s=d.n<0)?l:o.call(a,d))!==y)break}catch(e){i=g,c=1,l=e}finally{u=1}}return{value:m,done:s}}),!0),t;function p(e,t){for(c=e,l=t,m=0;!s&&u&&!r&&m<f.length;m++){var r,n=f[m],o=d.p,a=n[2];3<e?(r=a===t)&&(l=n[(c=n[4])?5:c=3],n[4]=n[5]=g):n[0]<=o&&((r=e<2&&o<n[1])?(c=0,d.v=t,d.n=n[1]):o<a&&(r=e<3||n[0]>t||a<t)&&(n[4]=e,n[5]=t,d.n=a,c=0))}if(r||1<e)return y;throw s=!0,t}}var y={};function h(){}function o(){}function a(){}var m=Object.getPrototypeOf,e=[][t]?m(m([][t]())):(_regeneratorDefine2(m={},t,function(){return this}),m),i=a.prototype=h.prototype=Object.create(e);function c(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,a):(e.__proto__=a,_regeneratorDefine2(e,r,"GeneratorFunction")),e.prototype=Object.create(i),e}return _regeneratorDefine2(i,"constructor",o.prototype=a),_regeneratorDefine2(a,"constructor",o),_regeneratorDefine2(a,r,o.displayName="GeneratorFunction"),_regeneratorDefine2(i),_regeneratorDefine2(i,r,"Generator"),_regeneratorDefine2(i,t,function(){return this}),_regeneratorDefine2(i,"toString",function(){return"[object Generator]"}),(_regenerator=function(){return{w:n,m:c}})()}function _regeneratorDefine2(e,t,r,n){var a=Object.defineProperty;try{a({},"",{})}catch(e){a=0}(_regeneratorDefine2=function(e,t,r,n){function o(t,r){_regeneratorDefine2(e,t,function(e){return this._invoke(t,r,e)})}t?a?a(e,t,{value:r,enumerable:!n,configurable:!n,writable:!n}):e[t]=r:(o("next",0),o("throw",1),o("return",2))})(e,t,r,n)}function asyncGeneratorStep(e,t,r,n,o,a,i){try{var c=e[a](i),l=c.value}catch(e){return void r(e)}c.done?t(l):Promise.resolve(l).then(n,o)}function _asyncToGenerator(c){return function(){var e=this,i=arguments;return new Promise(function(t,r){var n=c.apply(e,i);function o(e){asyncGeneratorStep(n,t,r,o,a,"next",e)}function a(e){asyncGeneratorStep(n,t,r,o,a,"throw",e)}o(void 0)})}}var isLoading=!1;function handleScroll(){return _handleScroll.apply(this,arguments)}function _handleScroll(){return(_handleScroll=_asyncToGenerator(_regenerator().m(function e(){return _regenerator().w(function(e){for(;;)switch(e.n){case 0:if(isLoading)return e.a(2);e.n=1;break;case 1:if(document.documentElement.scrollHeight-window.innerHeight-window.scrollY<100)return e.n=2,loadMore();e.n=2;break;case 2:return e.a(2)}},e)}))).apply(this,arguments)}function loadMore(){return _loadMore.apply(this,arguments)}function _loadMore(){return(_loadMore=_asyncToGenerator(_regenerator().m(function e(){var t,r,n,o,a,i,c,l;return _regenerator().w(function(e){for(;;)switch(e.p=e.n){case 0:if(console.log("load more"),t=document.getElementById("articles"),t=t.querySelectorAll("article"),t=t[t.length-1],console.log("lastArticle",t),t){e.n=1;break}return e.a(2);case 1:if(r=parseInt(t.getAttribute("data-id")),console.log("lastId ".concat(r)),isNaN(r))return e.a(2);e.n=2;break;case 2:if((n=r-1)<1)return console.log("nextId < 1 ".concat(n<1)),window.removeEventListener("scroll",handleScroll),e.a(2);e.n=3;break;case 3:return isLoading=!0,o="/api/articles?startID=".concat(n,"&limit=5"),console.log("load more ".concat(o)),e.p=4,e.n=5,fetch(o);case 5:if((o=e.v).ok)return e.n=6,o.json();e.n=7;break;case 6:if((l=e.v).articles&&0<l.articles.length){a=_createForOfIteratorHelper(l.articles);try{for(a.s();!(i=a.n()).done;)fillWithContent((c=i.value).title,c.content,c.createdAt,c.id)}catch(e){a.e(e)}finally{a.f()}}case 7:e.n=9;break;case 8:e.p=8,l=e.v,console.error("Failed to load articles:",l);case 9:isLoading=!1;case 10:return e.a(2)}},e,null,[[4,8]])}))).apply(this,arguments)}function getFormattedDate(e){var t=e.getFullYear(),r=String(e.getMonth()+1).padStart(2,"0"),n=String(e.getDate()).padStart(2,"0"),o=String(e.getHours()).padStart(2,"0"),e=String(e.getMinutes()).padStart(2,"0");return"".concat(t,"/").concat(r,"/").concat(n," ").concat(o,":").concat(e)}function fillWithContent(e,t,r,n){var o=document.createElement("article"),n=(n&&o.setAttribute("data-id",n),document.createElement("h2")),a=document.createElement("span"),i=document.createElement("p");n.textContent=e,a.textContent=getFormattedDate(new Date(r)),i.textContent=t,o.appendChild(n),o.appendChild(a),o.appendChild(i),document.getElementById("articles").appendChild(o)}function test(){console.log("123")}document.addEventListener("DOMContentLoaded",function(){window.addEventListener("scroll",handleScroll)});

package/src/loader.js

@@ -0,0 +1,94 @@
+let isLoading = false;
+
+document.addEventListener("DOMContentLoaded", () => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+async function handleScroll() {
+  if (isLoading) return;
+  const scrollable = document.documentElement.scrollHeight - window.innerHeight;
+  const scrolled = window.scrollY;
+
+  /*console.log(`scrollable: ${scrollable}`);
+  console.log(`scrolled: ${scrolled}`);
+  console.log(`scrollable - scrolled: ${scrollable - scrolled}`);*/
+
+  // Load more when user is near the bottom (within 100px)
+  if (scrollable - scrolled < 100) {
+    await loadMore();
+  }
+}
+
+async function loadMore() {
+  console.log(`load more`);
+  const articlesContainer = document.getElementById("articles");
+  const articles = articlesContainer.querySelectorAll("article");
+  const lastArticle = articles[articles.length - 1];
+  console.log("lastArticle", lastArticle);
+  if (!lastArticle) return;
+
+  const lastId = parseInt(lastArticle.getAttribute("data-id"));
+  console.log(`lastId ${lastId}`);
+  if (isNaN(lastId)) return;
+
+  // Fetch older items: startID should be lastId - 1 (since we want older/smaller IDs)
+  const nextId = lastId - 1;
+  if (nextId < 1) {
+    console.log(`nextId < 1 ${nextId < 1}`);
+    window.removeEventListener("scroll", handleScroll);
+    return;
+  }
+
+  isLoading = true;
+  const url = `/api/articles?startID=${nextId}&limit=5`;
+  console.log(`load more ${url}`);
+  try {
+    const response = await fetch(url);
+    if (response.ok) {
+      const result = await response.json();
+      if (result.articles && result.articles.length > 0) {
+        for (const article of result.articles) {
+          fillWithContent(
+            article.title,
+            article.content,
+            article.createdAt,
+            article.id
+          );
+        }
+      } else {
+        // No more articles to load
+        //window.removeEventListener("scroll", handleScroll);
+      }
+    }
+  } catch (error) {
+    console.error("Failed to load articles:", error);
+  }
+  isLoading = false;
+}
+function getFormattedDate(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${year}/${month}/${day} ${hours}:${minutes}`;
+}
+function fillWithContent(title, content, date, id) {
+  const article = document.createElement("article");
+  if (id) article.setAttribute("data-id", id);
+
+  const heading = document.createElement("h2");
+  const time = document.createElement("span");
+  const text = document.createElement("p");
+
+  heading.textContent = title;
+  time.textContent = getFormattedDate(new Date(date));
+  text.textContent = content;
+
+  //article.textContent = "article1";
+  article.appendChild(heading);
+  article.appendChild(time);
+  article.appendChild(text);
+  const articles = document.getElementById("articles");
+  articles.appendChild(article);
+}

package/src/styles.css

@@ -0,0 +1,48 @@
+.grid {
+  border: 0 solid #000;
+  display: grid;
+  gap: 0.25rem;
+  grid-template-columns: 1fr;
+}
+.grid article {
+  border: 0 solid #ccc;
+  border-radius: 4px;
+  min-width: 0;
+  overflow-wrap: break-word;
+  padding: 0.25rem;
+}
+.grid article h2 {
+  color: rgb(53, 53, 53);
+  margin-bottom: 5px;
+}
+
+.grid article .datetime {
+  margin: 0;
+  color: rgb(117, 117, 117);
+}
+
+.grid article p {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
+article a {
+  color: rgb(105, 105, 105);
+}
+
+article a:visited {
+  color: rgb(105, 105, 105);
+}
+
+h1 {
+  color: #696969;
+}
+nav a {
+  color: #3b40c1;
+  font-size: 20px;
+  text-decoration: underline;
+}
+nav a:visited {
+  color: #3b40c1;
+  text-decoration-color: #3b40c1;
+}

package/styles.min.css

@@ -1,2 +1 @@
-.grid{border:0 solid #000;display:grid;gap:.25rem;grid-template-columns:1fr}.grid article{border:0 solid #ccc;border-radius:4px;min-width:0;overflow-wrap:break-word;padding:.25rem}h1{color:#696969}nav a{color:#3b40c1;font-size:20px;text-decoration:underline}nav a:visited{color:#3b40c1;text-decoration-color:#3b40c1}
-/* source-hash: cfa91156b4c55874a3e63989247cc5cb22e7ed78a4e66a9d8cc24f9b9c598bd0 */
+.grid{border:0 solid #000;display:grid;gap:.25rem;grid-template-columns:1fr}.grid article{border:0 solid #ccc;border-radius:4px;min-width:0;overflow-wrap:break-word;padding:.25rem}.grid article h2{color:#353535;margin-bottom:5px}.grid article .datetime{color:#757575;margin:0}.grid article p{margin-bottom:0;margin-top:10px}article a,article a:visited,h1{color:#696969}nav a{color:#3b40c1;font-size:20px;text-decoration:underline}nav a:visited{color:#3b40c1;text-decoration-color:#3b40c1}

package/test/server.test.js

@@ -21,13 +21,14 @@ describe("server test", () => {
   // Use beforeAll to set up and start the server once before any tests run
   beforeAll(async () => {
     //blog.database.type = "sqlite";
+    blog.database.dbname = "test_server_db";
     blog.setStyle(
       "body { font-family: Arial, sans-serif; } h1 { color: #333; }"
     );
     await blog.init();
     // Await it to ensure the server is running before tests start.
     await blog.startServer(PORT);
-  });
+  }, 10000);
 
   // Use afterAll to shut down the server once after all tests have finished
   afterAll(async () => {
@@ -105,6 +106,17 @@ describe("server test", () => {
     const responseData = await response.json();
     expect(responseData).toEqual(newArticle);
 
-    expect(blog.toHTML()).toContain(newArticle.content); // does blog contain my new article?
+    expect(await blog.toHTML()).toContain(newArticle.content); // does blog contain my new article?
+  });
+
+  test("performance: server should respond within acceptable time (e.g. 500ms)", async () => {
+    const start = Date.now();
+    const response = await fetch(`${apiBaseUrl}/api/articles`);
+    const end = Date.now();
+    const duration = end - start;
+
+    expect(response.status).toBe(200);
+    console.log(`Request took ${duration}ms`);
+    expect(duration).toBeLessThan(500); // Fail if request takes longer than 500ms
   });
 });

package/test/styles.test.js

@@ -0,0 +1,107 @@
+import Blog from "../Blog.js";
+import path from "path";
+import { fileURLToPath } from "url";
+import { parseFromString } from "dom-parser";
+import fs from "node:fs";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+describe("Blog Stylesheet Test", () => {
+  it("should load and compile the sass stylesheet (.scss) correctly", async () => {
+    const blog = new Blog();
+    blog.title = "My Blog";
+    blog.database.dbname = "test_styles_1";
+
+    blog.stylesheetPath = "test/stylesheets/styles.scss";
+
+    await blog.init();
+    const html = await blog.toHTML();
+
+    expect(html).toContain(".grid");
+    expect(html).toContain("article");
+    expect(html).toContain("nav");
+    expect(html).toContain("nav a:visited");
+  });
+
+  it("should load and compile the sass stylesheet (.scss) correctly [Array]", async () => {
+    const blog = new Blog();
+    blog.title = "My Blog";
+    blog.database.dbname = "test_styles_2";
+
+    blog.stylesheetPath = ["test/stylesheets/styles.scss"];
+
+    await blog.init();
+    const html = await blog.toHTML();
+
+    expect(html).toContain(".grid");
+    expect(html).toContain("article");
+    expect(html).toContain("nav");
+    expect(html).toContain("nav a:visited");
+  });
+
+  it("should load the stylesheet (.css) file", async () => {
+    const filepath = path.join(__dirname, "stylesheets/styles.css");
+
+    const data = await fs.promises.readFile(filepath, "utf8");
+    console.log(data);
+    expect(data).toContain("body");
+    expect(data).toContain("nav a");
+    expect(data).toContain(".datetime");
+    expect(data).toContain("font-style: normal");
+    expect(data).toContain("color: darkgray");
+  });
+
+  it("should load and compile the stylesheet (.css) correctly", async () => {
+    const blog = new Blog();
+    blog.title = "My Blog";
+    blog.database.dbname = "test_styles_3";
+    blog.stylesheetPath = "test/stylesheets/styles.css";
+    await blog.init();
+    const html = await blog.toHTML();
+
+    // dom-parser fails on <!DOCTYPE html>, so we remove it before parsing
+    const doc = parseFromString(
+      html.replace("<!DOCTYPE html>", ""),
+      "text/html"
+    );
+
+    // Find all style tags
+    const styleTags = doc.getElementsByTagName("style");
+    const css = styleTags.map((tag) => tag.innerHTML).join("\n");
+    console.log(css);
+
+    expect(html).not.toContain("<style>body { font-family: Arial; }</style>");
+    expect(css).toContain("body");
+    expect(css).toContain("nav a");
+    expect(css).toContain(".datetime");
+    expect(css).toContain("font-style:normal");
+    expect(css).toContain("color:");
+  });
+
+  it("should load and compile the stylesheet (.css) correctly [Array]", async () => {
+    const blog = new Blog();
+    blog.title = "My Blog";
+    blog.database.dbname = "test_styles_4";
+    blog.stylesheetPath = ["test/stylesheets/styles.css"];
+    await blog.init();
+    const html = await blog.toHTML();
+
+    // dom-parser fails on <!DOCTYPE html>, so we remove it before parsing
+    const doc = parseFromString(
+      html.replace("<!DOCTYPE html>", ""),
+      "text/html"
+    );
+
+    // Find all style tags
+    const styleTags = doc.getElementsByTagName("style");
+    const css = styleTags.map((tag) => tag.innerHTML).join("\n");
+    console.log(css);
+
+    expect(html).not.toContain("<style>body { font-family: Arial; }</style>");
+    expect(css).toContain("body");
+    expect(css).toContain("nav a");
+    expect(css).toContain(".datetime");
+    expect(css).toContain("font-style:normal");
+    expect(css).toContain("color:");
+  });
+});

package/test/stylesheets/styles.css

@@ -0,0 +1,29 @@
+body {
+  background-color: rgb(253, 253, 253);
+  font-family: Arial;
+}
+
+nav a {
+  text-decoration: underline;
+  color: rgb(59, 64, 193);
+  font-size: 20px;
+}
+
+.datetime {
+  font-style: normal;
+  color: rgb(67, 67, 67);
+}
+
+h2 {
+  margin: 0;
+  margin-bottom: 5px;
+  color: darkgray;
+}
+
+p {
+  margin-top: 10px;
+}
+
+span {
+  margin: 0;
+}

package/test/stylesheets/styles.scss

@@ -0,0 +1,34 @@
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.25rem;
+  border: 0px solid black;
+
+  article {
+    padding: 0.25rem;
+    border: 0px solid #ccc;
+    border-radius: 4px;
+    min-width: 0; /* Allow grid items to shrink */
+    overflow-wrap: break-word; /* Break long words */
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
+
+    h1 {
+      color: rgb(105, 105, 105);
+    }
+
+nav {
+  a {
+    text-decoration: underline;
+    color: rgb(59, 64, 193);
+    font-size: 20px;
+  }
+
+  a:visited {
+    color: rgb(59, 64, 193);
+    text-decoration-color: rgb(59, 64, 193);
+  }
+}