@lexho111/plainblog 0.5.1 → 0.5.3

package/Blog.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/README.md

@@ -50,6 +50,23 @@ blog.stylesheetPath = "path/to/my/styles.css";
 blog.startServer(8080);
 ```
 
+### use sass compiled stylesheets
+
+```
+import * as sass from "sass";
+import fs from "node:fs";
+
+const compiled = sass.compile( "stylesheets/styles.scss");
+fs.writeFile("stylesheets_compiled/styles.css", compiled.css, (err) => {
+  if (err) console.error(err);
+});
+const blog = new Blog();
+blog.stylesheetPath = "stylesheets_compiled/styles.css";
+blog.title = "My Blog";
+await blog.init();
+blog.startServer(8080);
+```
+
 print your blog articles in markdown
 
 ```

package/package.json

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

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/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"]}