@lexho111/plainblog 0.5.0 → 0.5.2

package/Blog.js

@@ -1,5 +1,5 @@
 import http from "http";
-import crypto from "crypto";
+import crypto from "node:crypto";
 import fs from "fs";
 import { URLSearchParams } from "url";
 import Article from "./Article.js";
@@ -498,6 +498,7 @@ export default class Blog {
    * @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"]
@@ -541,7 +542,7 @@ export default class Blog {
         
         // Compile styles using the standalone script from build-styles.js
         //this.compiledStyles = await compileStyles(fileData);
-        this.compiledStyles = fileData; // TODO workaround
+        this.compiledStyles = fileData.map((f) => f.content).join("\n");
 
         // generate a file
         const __filename = fileURLToPath(import.meta.url);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexho111/plainblog",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "A tool for creating and serving a minimalist, single-page blog.",
   "main": "index.js",
   "type": "module",
@@ -19,7 +19,6 @@
   "dependencies": {
     "autoprefixer": "^10.4.23",
     "child_process": "^1.0.2",
-    "crypto": "^1.0.1",
     "fs": "^0.0.1-security",
     "http": "^0.0.1-security",
     "path": "^0.12.7",

package/public/styles.min.css

@@ -1,68 +1,126 @@
-body { font-family: Arial; } .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;
-}
-
-#wrapper {
-  max-width: 500px;
-  width: 100%;
-}
-
-/* Mobile Layout (screens smaller than 1000px) */
-@media screen and (max-width: 1000px) {
-  * {
-    font-size: 4vw;
-  }
-  #wrapper {
-    max-width: 100%;
-    width: 100%;
-    padding: 0 10px; /* Prevents text from touching the edges */
-    box-sizing: border-box;
-  }
-}
+* {
+  margin: 0;
+}
 
-/* source-hash: bcb6644ec5b5c6f9685c9ad6c14ee551a6f908b8a2c372d3294e2d2e80d17fb7 */
+body {
+  color: red;
+  background-color: orange;
+}
+
+h1 {
+  font: italic bold 2.5em/2.3em Verdana, sans-serif;
+  margin: 0;
+  padding: 0;
+  letter-spacing: 0.1em;
+}
+
+#wrapper {
+  max-width: 600px;
+  width: 100%;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.25rem;
+  border: 0px solid lightgray;
+}
+.grid article h2 {
+  color: hsl(100, 59%, 53%);
+  margin-bottom: 5px;
+}
+.grid 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 */
+}
+.grid article .datetime {
+  color: darkgray;
+  font-style: italic;
+}
+.grid article p {
+  margin-top: 12px;
+  margin-bottom: 0;
+}
+.grid article a:link {
+  color: hsl(100, 59%, 53%);
+}
+.grid article a:visited {
+  color: hsl(100, 59%, 53%);
+  text-decoration-color: #fcfcfc;
+}
+.grid article a:hover {
+  color: hsl(100, 59%, 53%);
+  background-color: #fcfcfc;
+}
+.grid article a:active {
+  color: hsl(100, 59%, 53%);
+}
+
+h1 {
+  color: primary;
+}
+
+nav {
+  padding: 10px;
+  background-color: #fcfcfc;
+}
+nav a {
+  text-decoration: underline;
+  color: #fcfcfc;
+  background-color: hsl(100, 59%, 53%);
+  font-size: 20px;
+  padding: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-bottom: 4px solid rgb(104, 104, 104);
+  border-right: 4px solid rgb(104, 104, 104);
+}
+nav a:link {
+  color: #fcfcfc;
+}
+nav a:visited {
+  color: #fcfcfc;
+  text-decoration-color: #fcfcfc;
+}
+nav a:hover {
+  color: hsl(100, 59%, 53%);
+  background-color: #fcfcfc;
+}
+nav a:active {
+  color: #fcfcfc;
+}
+
+#header {
+  background: linear-gradient(#fcfcfc, hsl(235, 22%, 73%));
+  height: 200px;
+  height: 400px;
+}
+#header h1 {
+  color: hsl(100, 59%, 53%);
+  margin-left: 10px;
+}
+#header img {
+  width: 1290px;
+  height: 300px;
+  margin-left: 10px;
+}
+
+/* Mobile Layout (screens smaller than 1000px) */
+@media screen and (max-width: 1000px) {
+  * {
+    font-size: 4vw;
+  }
+  #header h1 {
+    font-size: 1em;
+  }
+  #wrapper {
+    max-width: 100%;
+    width: 100%;
+    padding: 0 10px; /* Prevents text from touching the edges */
+    box-sizing: border-box;
+  }
+}
+/* source-hash: 477a9b23fb6307399e67090d39d6a5e4c322550f5fcdeddc6ce28e4382038f5d */

package/build-styles.js

@@ -1,71 +0,0 @@
-import path from "path";
-import { pathToFileURL } from "url";
-import * as sass from "sass";
-import postcss from "postcss";
-import autoprefixer from "autoprefixer";
-//import cssnano from "cssnano";
-
-// array of files or a single file
-export async function compileStyles(fileData) {
-  try {
-    let combinedCss = "";
-
-    if (fileData) {
-      const scssFiles = fileData.filter(
-        (f) =>
-          f.path.endsWith(".scss") && !path.basename(f.path).startsWith("_")
-      );
-
-      for (const file of scssFiles) {
-        try {
-          const result = sass.compileString(file.content.toString(), {
-            style: "expanded",
-            url: pathToFileURL(file.path),
-          });
-          combinedCss += result.css + "\n";
-        } catch (err) {
-          console.error(
-            `Error compiling ${path.basename(file.path)}:`,
-            err.message
-          );
-        }
-      }
-
-      const cssFiles = fileData.filter((f) => f.path.endsWith(".css"));
-      for (const file of cssFiles) {
-        combinedCss += file.content + "\n";
-      }
-    }
-
-    // 2. PostCSS (Autoprefixer + CSSNano)
-    if (combinedCss) {
-      const plugins = [autoprefixer()];
-      const result = await postcss(plugins).process(combinedCss, {
-        from: undefined,
-      });
-      return result.css;
-    }
-    return "";
-  } catch (error) {
-    console.error("Build failed:", error);
-    return "";
-  }
-}
-
-export async function mergeStyles(...cssContents) {
-  try {
-    const combinedCss = cssContents.join("\n");
-
-    if (combinedCss) {
-      const plugins = [autoprefixer()];
-      const result = await postcss(plugins).process(combinedCss, {
-        from: undefined,
-      });
-      return result.css;
-    }
-    return "";
-  } catch (error) {
-    console.error("Merge failed:", error);
-    return "";
-  }
-}

package/public/styles.min.css.map

@@ -1 +0,0 @@
-{"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,CAEA,GACA,SACA,CAOA,cACA,aAAA,CACA,6BACA,CC1BA,KACA,wBAAA,CACA,iBACA,CAEA,MAEA,aAAA,CACA,cAAA,CAFA,yBAGA,CAEA,UAEA,aAAA,CADA,iBAEA,CAEA,GAEA,cACA,CAEA,EACA,eACA,CAEA,KACA,QACA","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\nh1 {\n  color: red;\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\nh2 {\n  margin: 0;\n  margin-bottom: 5px;\n}\n\np {\n  margin-top: 10px;\n}\n\nspan {\n  margin: 0;\n}\n"]}