@lexho111/plainblog 0.2.1 → 0.2.3

package/Article.js

@@ -1,7 +1,8 @@
 export default class Article {
-  constructor(title, content) {
+  constructor(title, content, createdAt) {
     this.title = title;
     this.content = content;
+    this.createdAt = createdAt;
   }
 
   getContent() {
@@ -14,4 +15,22 @@ export default class Article {
     contentShort += "...";
     return contentShort;
   }
+
+  getFormattedDate() {
+    const date = new Date(this.createdAt);
+    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}`;
+  }
+
+  toHTML() {
+    return `      <article>
+        <h2>${this.title}</h2>
+        <span class="datetime">${this.getFormattedDate()}</span>
+        <p>${this.getContentShort()}</p>
+      </article>`;
+  }
 }

package/Blog.js

@@ -146,6 +146,9 @@ export default class Blog {
       await this.#databaseModel.initialize();
       const dbTitle = await this.#databaseModel.getBlogTitle();
       const dbArticles = await this.#databaseModel.findAll();
+      //console.log(`articles: ${JSON.stringify(dbarticles)}`)
+      this.reloadScriptsStylesOnGET = true;
+      if(this.reloadScriptsStylesOnGET) console.log("reload scripts and styles on GET-Request");
       let title = "";
       if (this.title.length > 0) title = this.title; // use blog title if set
       else title = dbTitle;
@@ -185,7 +188,7 @@ export default class Blog {
         if (this.#databaseModel) await this.#databaseModel.save(newArticleData);
         if (this.#isExternalAPI) await postData(this.#apiUrl, newArticleData);
         // Add the article to the local list for immediate display
-        this.addArticle(new Article(title, content));
+        this.articles.unshift(new Article(title, content));
       } catch (error) {
         console.error("Failed to post new article to API:", error);
       }
@@ -239,7 +242,7 @@ export default class Blog {
         // load articles
 
         // reload styles and scripts on (every) request
-        //this.loadScripts(); this.loadStyles();
+        if(this.reloadScriptsStylesOnGET) this.loadScripts(); this.loadStyles();
 
         let loggedin = false;
         if (!this.isAuthenticated(req)) { 
@@ -250,9 +253,14 @@ export default class Blog {
           loggedin = true;
         }
 
-        const html = await this.toHTML(loggedin); // render this blog to HTML
-        res.writeHead(200, { "Content-Type": "text/html; charset=UTF-8" });
-        res.end(html);
+        try {
+          const html = this.toHTML(loggedin); // render this blog to HTML
+          res.writeHead(200, { "Content-Type": "text/html; charset=UTF-8" });
+          res.end(html);
+        } catch (err) {
+          res.writeHead(500, { "Content-Type": "text/plain" });
+          res.end("Internal Server Error");
+        }
       } else {
         // Error 404
         res.writeHead(404, { "Content-Type": "application/json" });
@@ -291,7 +299,7 @@ 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));
+        this.addArticle(new Article(articleData.title, articleData.content, articleData.createdAt));
       }
     }
   }
@@ -373,37 +381,17 @@ export default class Blog {
   }
 
   /** print markdown to the console */
-  async print() {
+  print() {
     const data = {
       title: this.title,
       articles: this.articles,
     };
-    //const markdown = formatMarkdown(data);
-    
-    return new Promise((resolve, reject) => {
-    let markdownResult = "";
-      pipeline(
-        Readable.from([data]),
-        new MapTransform((chunk) => formatMarkdown(chunk, this.scripts, this.styles)),
-        new Writable({
-          write(chunk, encoding, callback) {
-            markdownResult += chunk.toString();
-            callback();
-          },
-        }),
-        (err) => {
-          if (err) reject(err);
-          else {
-            console.log(markdownResult)
-            resolve(markdownResult);
-          }
-        }
-      );
-    });
+    const markdown = formatMarkdown(data);
+    return markdown;
   }
 
   /** render this blog content to valid html */
-  async toHTML(loggedin) {
+  toHTML(loggedin) {
     const data = {
       title: this.title,
       articles: this.articles,
@@ -413,28 +401,8 @@ export default class Blog {
 
     if(loggedin) data.login = `<a href="/logout">logout</a>`;
     else data.login = `<a href="/login">login</a>`;
-
-    return new Promise((resolve, reject) => {
-      let htmlResult = "";
-      pipeline(
-        Readable.from([data]),
-        new MapTransform((chunk) => formatHTML(chunk, this.scripts, this.styles)),
-        new MapTransform((chunk) => {
-              const html = chunk.toString();
-              if (validate(html)) return html;
-              throw new Error("Error. Invalid HTML!");
-            }),
-        new Writable({
-          write(chunk, encoding, callback) {
-            htmlResult += chunk.toString();
-            callback();
-          },
-        }),
-        (err) => {
-          if (err) reject(err);
-          else resolve(htmlResult);
-        }
-      );
-    });
+    const html = formatHTML(data, this.scripts, this.styles);
+    if (validate(html)) return html;
+    throw new Error("Error. Invalid HTML!");
   }
 }

package/Formatter.js

@@ -32,15 +32,7 @@ export function formatHTML(data, script, style) {
     <div style="width: 500px;">
     ${form}
       <section class="grid">
-      ${data.articles
-        .map(
-          (article) => `
-      <article>
-        <h2>${article.title}</h2>
-        <p>${article.getContentShort()}</p>
-      </article>`
-        )
-        .join("")}
+      ${data.articles.map((article) => article.toHTML()).join("")}
       </section>
     </div>
   </body>

package/model/DatabaseModel.js

@@ -52,9 +52,17 @@ export default class DatabaseModel {
       {
         title: DataTypes.STRING,
         content: DataTypes.TEXT,
+        createdAt: {
+          type: DataTypes.DATE,
+          defaultValue: DataTypes.NOW,
+        },
+        updatedAt: {
+          type: DataTypes.DATE,
+          defaultValue: DataTypes.NOW,
+        },
       },
       {
-        timestamps: false, // Assuming you don't need createdAt/updatedAt for this simple model
+        timestamps: true,
       }
     );
 
@@ -83,8 +91,16 @@ export default class DatabaseModel {
   }
 
   // model
-  async findAll() {
-    return this.#Article.findAll();
+  async findAll(limit = 10, offset = 0) {
+    const options = {
+      order: [
+        ["createdAt", "DESC"],
+        ["id", "DESC"],
+      ],
+      limit,
+      offset,
+    };
+    return this.#Article.findAll(options);
   }
 
   async save(newArticle) {

package/package.json

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

package/styles.min.css

@@ -1,2 +1,2 @@
-.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}nav a:visited{color:#3b40c1;text-decoration-color:#3b40c1}body{background-color:#fdfdfd;font-family:Arial}nav a{color:#3b40c1;font-size:20px;text-decoration:underline}
+.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}nav a:visited{color:#3b40c1;text-decoration-color:#3b40c1}body{background-color:#fdfdfd;font-family:Arial}nav a{color:#3b40c1;font-size:20px;text-decoration:underline}.datetime{color:#434343;font-style:italic}
 /*# sourceMappingURL=styles.min.css.map */

package/styles.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":["styles-compiled.css","styles.css"],"names":[],"mappings":"AAAA,MAIA,mBAAA,CAHA,YAAA,CAEA,UAAA,CADA,yBAGA,CACA,cAEA,mBAAA,CACA,iBAAA,CACA,WAAA,CACA,wBAAA,CAJA,cAKA,CAOA,cACA,aAAA,CACA,6BACA,CCtBA,KACA,wBAAA,CACA,iBACA,CAEA,MAEA,aAAA,CACA,cAAA,CAFA,yBAGA","file":"styles.min.css","sourcesContent":[".grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 0.25rem;\n  border: 0px solid black;\n}\n.grid article {\n  padding: 0.25rem;\n  border: 0px solid #ccc;\n  border-radius: 4px;\n  min-width: 0; /* Allow grid items to shrink */\n  overflow-wrap: break-word; /* Break long words */\n}\n\nnav a {\n  text-decoration: underline;\n  color: rgb(59, 64, 193);\n  font-size: 20px;\n}\nnav a:visited {\n  color: rgb(59, 64, 193);\n  text-decoration-color: rgb(59, 64, 193);\n}","body {\n  background-color: rgb(253, 253, 253);\n  font-family: Arial;\n}\n\nnav a {\n  text-decoration: underline;\n  color: rgb(59, 64, 193);\n  font-size: 20px;\n}\n"]}
+{"version":3,"sources":["styles-compiled.css","styles.css"],"names":[],"mappings":"AAAA,MAIA,mBAAA,CAHA,YAAA,CAEA,UAAA,CADA,yBAGA,CACA,cAEA,mBAAA,CACA,iBAAA,CACA,WAAA,CACA,wBAAA,CAJA,cAKA,CAOA,cACA,aAAA,CACA,6BACA,CCtBA,KACA,wBAAA,CACA,iBACA,CAEA,MAEA,aAAA,CACA,cAAA,CAFA,yBAGA,CAEA,UAEA,aAAA,CADA,iBAEA","file":"styles.min.css","sourcesContent":[".grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 0.25rem;\n  border: 0px solid black;\n}\n.grid article {\n  padding: 0.25rem;\n  border: 0px solid #ccc;\n  border-radius: 4px;\n  min-width: 0; /* Allow grid items to shrink */\n  overflow-wrap: break-word; /* Break long words */\n}\n\nnav a {\n  text-decoration: underline;\n  color: rgb(59, 64, 193);\n  font-size: 20px;\n}\nnav a:visited {\n  color: rgb(59, 64, 193);\n  text-decoration-color: rgb(59, 64, 193);\n}","body {\n  background-color: rgb(253, 253, 253);\n  font-family: Arial;\n}\n\nnav a {\n  text-decoration: underline;\n  color: rgb(59, 64, 193);\n  font-size: 20px;\n}\n\n.datetime {\n  font-style: italic;\n  color: rgb(67, 67, 67);\n}\n"]}

package/test/server.test.js

@@ -105,6 +105,6 @@ describe("server test", () => {
     const responseData = await response.json();
     expect(responseData).toEqual(newArticle);
 
-    expect(await blog.toHTML()).toContain(newArticle.content); // does blog contain my new article?
+    expect(blog.toHTML()).toContain(newArticle.content); // does blog contain my new article?
   });
 });