@lexho111/plainblog 0.2.2 → 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)) { 
@@ -296,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));
       }
     }
   }

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.2",
+  "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"]}