Improved build system.

build.js

@@ -4,7 +4,7 @@ import { log } from "console"
 import YAML from "yaml"
 import parseTemplate from "./parseTemplate.js"
 
-export default function buildNebulosa(debug) {
+export default function buildNebulosa(predictableOutputName) {
     log("Generating Nebulosa CSS...")
 
     log("Reading config...")
@@ -34,34 +34,44 @@ export default function buildNebulosa(debug) {
         }
     )
 
-    log("Compiling SCSS...")
+    try {
-    const { css } = sass.compile(
+        log("Compiling SCSS...")
-        "./src/main.scss",
+        const { css } = sass.compile(
-        { style: "compressed" }
+            "./src/main.scss",
-    )
+            { style: "compressed" }
+        )
 
-    const now = new Date()
+        const now = new Date()
-        .toISOString()
+            .toISOString()
-        .replace(/\.\S+/g, "")
+            .replace(/\.\S+/g, "")
-        .replace(/:/g, ".")
+            .replace(/:/g, ".")
-        .replace(/T/g, "_")
+            .replace(/T/g, "_")
 
-    const outFileName = debug ? "./out/main.css" : `./out/${now}.css`
+        const outFileName = predictableOutputName ? "./out/main.css" : `./out/${now}.css`
 
-    if (!fs.existsSync("./out"))
+        if (!fs.existsSync("./out"))
-        fs.mkdirSync("./out")
+            fs.mkdirSync("./out")
 
-    log("Writing file...")
+        log("Writing file...")
-    fs.writeFileSync(
+        fs.writeFileSync(
-        outFileName,
+            outFileName,
-        "/* Generated using Nebulosa CSS. https://git.qwik.space/BurnyLlama/nebulosa-css */\n" + css
+            "/* Generated using Nebulosa CSS. https://git.qwik.space/BurnyLlama/nebulosa-css */\n" + css
-    )
+        )
 
-    log(`Saved config file to ./out/${now}.css`)
+        log(`Saved config file to ${outFileName}`)
+    } catch (err) {
+        console.error("Encountered an error while building Nebulosa:")
+        console.error(err)
+    }
 }
 
 // If the file is run directly from the commandline, build Nebulosa.
 if (import.meta.url === `file://${process.argv[1]}`) {
     log("Building Nebulosa...")
-    buildNebulosa(false)
+    try {
+        buildNebulosa(false)
+    } catch (err) {
+        console.error(err)
+        process.exit(1)
+    }
 }

dev.js

@@ -20,7 +20,10 @@ njk.configure(
 // Do an initial build of Nebulosa, then watch for changes...
 buildNebulosa(true)
 chokidar
-    .watch(["./src", "./config.yml", "./example-config.yml"])
+    .watch(
+        ["./src", "./config.yml", "./example-config.yml"],
+        { ignored: ["./src/main.scss", "./src/_settings.scss"] }
+    )
     .on(
         "change",
         () => {
@@ -29,9 +32,9 @@ chokidar
             try {
                 buildNebulosa(true)
                 console.log("Saved!")
-            } catch (error) {
+            } catch (err) {
                 console.log("Error while compiling!")
-                console.error(error)
+                console.error(err)
             }
         }
     )

example-config.yml

@@ -5,10 +5,10 @@ general:
   # I recommend keeping it turned on.
   css_reset: true
   # Set the scroll behaviour. [ smooth | auto ]
-  scroll_behavior: smooth
+  scroll_behaviour: smooth
 
 # For `family` settings can be any valid CSS font family string.
-font-settings:
+font_settings:
   default:
     family: "'Manrope', sans-serif"
   heading:
@@ -20,7 +20,7 @@ font-settings:
 
 typography:
   # Enables headings, paragraphs, bold, and italic.
-  enable_basic: true
+  enabled: true
   # Enables ol and ul.
   enable_lists: true
   # Enables the blockquote element

parseTemplate.js

@@ -1,4 +1,4 @@
-import { log, error } from "console"
+import { log } from "console"
 
 /**
  * Flattens an object into a 1 level deep object.
@@ -32,6 +32,8 @@ function flattenObject(object) {
 
 export default function parseTemplate(template, data) {
     const flattenedData = flattenObject(data)
+    if (process.env.NODE_ENV === "debug")
+        log(flattenedData)
 
     return template
         // Syntax:  {{ variableName }}
@@ -40,11 +42,9 @@ export default function parseTemplate(template, data) {
             /{{\s*(\S+?)\s*}}/gm,
             (match, variableName) => {
                 if (flattenedData[variableName] === undefined || flattenedData[variableName] === null) {
-                    error(`Error: "${variableName}" is not defined!`)
+                    throw new Error(`Error: "${variableName}" is not defined`)
-                    process.exit(1)
                 }
 
-                log(`"${variableName}" = ${flattenedData[variableName]}`)
                 return flattenedData[variableName]
             }
         )
@@ -57,11 +57,9 @@ export default function parseTemplate(template, data) {
             /^{%\s*if\s*(\S+?)\s*%}$([\s\S]*?)^{%\s*endif\s*%}$/gm,
             (match, variableName, codeBlock) => {
                 if (flattenedData[variableName] === undefined || flattenedData[variableName] === null) {
-                    error(`Error: "${variableName}" is not defined!`)
+                    throw new Error(`Error: "${variableName}" is not defined`)
-                    process.exit(1)
                 }
 
-                log(`"${variableName}" = ${flattenedData[variableName]}`)
                 return flattenedData[variableName] ? codeBlock : ""
             }
         )

src/defaults.scss

@@ -5,16 +5,19 @@
 *,
 *::before,
 *::after {
-    margin: 0;
+    @if (settings.$css-reset) {
-    padding: 0;
+        margin: 0;
-    box-sizing: border-box;
+        padding: 0;
-    line-height: 1.5;
+        box-sizing: border-box;
+    }
+
     scroll-behavior: settings.$scroll-behaviour;
 }
 
 :root,
 body {
-    font-family: 'Manrope', sans-serif;
+    font-family: settings.$font-family-default;
+    line-height: 1.5;
     color: palette.$text;
     background-color: palette.$surface;
     font-size: 12pt;

src/templates/_settings.scss

@@ -1,6 +1,31 @@
-// Select the font to be used for most of the text.
+// This template is used to convert the YAML settings into something easily usable in SCSS.
-// $font-body-text: 'Manrope', sans-serif;
+// FIXME: One solution to this duct tape could be to use `main.scss` and `_settings.scss` as configs instead...
-$font-body-text: 'Alegreya', serif;
 
-// Select the scroll behavior. [ smooth | auto ]
+// General settings
-$scroll-behaviour: smooth;
+$css-reset: {{ general.css_reset }};
+$scroll-behaviour: {{ general.scroll_behaviour }};
+
+// Export font families....
+$font-family-default:   {{ font_settings.default.family }};
+$font-family-heading:   {{ font_settings.heading.family }};
+$font-family-paragraph: {{ font_settings.paragraph.family }};
+$font-family-forms:     {{ font_settings.forms.family }};
+
+// Typography
+$typography-enable-lists: {{ typography.enable_lists }};
+$typography-enable-blockquotes: {{ typography.enable_blockquotes }};
+
+// Buttons
+$buttons-enable-secondary: {{ buttons.enable_secondary }};
+$buttons-enable-disabled: {{ buttons.enable_disabled }};
+$buttons-enable-raised: {{ buttons.enabled_styles.raised }};
+$buttons-enable-filled: {{ buttons.enabled_styles.filled }};
+$buttons-enable-outline: {{ buttons.enabled_styles.outline }};
+$buttons-enable-text-only: {{ buttons.enabled_styles.text_only }};
+
+// Forms
+$custom-radio-checkbox: {{ forms.custom_radio_checkbox }};
+$enable-switch: {{ forms.enable_switch }};
+$custom-color: {{ forms.custom_color }};
+$custom-file: {{ forms.custom_file }};
+$custom-range: {{ forms.custom_range }};

src/templates/main.scss

@@ -1,11 +1,18 @@
-// This is the entry point for all SCSS!
-
 @use "defaults";
 @use "fonts";
+
+{% if typography.enabled %}
 @use "headings";
 @use "text";
+{% endif %}
+
+{% if buttons.enabled %}
 @use "buttons";
+{% endif %}
+
+{% if forms.enabled %}
 @use "forms";
+{% endif %}
 
 {% if layouts.publishing %}
 @use "layouts/publishing";

src/text.scss

@@ -1,13 +1,16 @@
 @use "palette";
 @use "settings";
 
-p, ul, ol {
+p,
-    font-family: settings.$font-body-text;
+ul,
+ol {
+    font-family: settings.$font-family-paragraph;
     font-size: 1rem;
     margin: 1rem 0 .5rem 0;
 }
 
-ul, ol {
+ul,
+ol {
     margin: 0 0 1.5rem 2rem;
 
     > li::marker {
@@ -17,14 +20,14 @@ ul, ol {
 
 blockquote {
     position: relative;
-    font-family: settings.$font-body-text;
+    font-family: settings.$font-family-paragraph;
     margin: 2rem 1rem;
     padding: 1rem;
     background-color: palette.$standout;
     box-shadow: .5rem .5rem 0 0 palette.$grey200;
 
     &::before {
-        font-family: settings.$font-body-text;
+        font-family: settings.$font-family-paragraph;
         font-size: 2rem;
         text-align: center;
         content: '"';