From 32dfa801ade0def909d65bbac0b9b533ca75f2c7 Mon Sep 17 00:00:00 2001 From: BurnyLlama Date: Sat, 5 Aug 2023 01:59:08 +0200 Subject: [PATCH] Improved build system. --- build.js | 52 +++++++++++++++++++++--------------- dev.js | 9 ++++--- example-config.yml | 6 ++--- parseTemplate.js | 12 ++++----- src/defaults.scss | 13 +++++---- src/templates/_settings.scss | 35 ++++++++++++++++++++---- src/templates/main.scss | 11 ++++++-- src/text.scss | 13 +++++---- 8 files changed, 100 insertions(+), 51 deletions(-) diff --git a/build.js b/build.js index c8feab9..e7ff87c 100644 --- a/build.js +++ b/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...") - const { css } = sass.compile( - "./src/main.scss", - { style: "compressed" } - ) + try { + log("Compiling SCSS...") + const { css } = sass.compile( + "./src/main.scss", + { style: "compressed" } + ) - const now = new Date() - .toISOString() - .replace(/\.\S+/g, "") - .replace(/:/g, ".") - .replace(/T/g, "_") + const now = new Date() + .toISOString() + .replace(/\.\S+/g, "") + .replace(/:/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")) - fs.mkdirSync("./out") + if (!fs.existsSync("./out")) + fs.mkdirSync("./out") - log("Writing file...") - fs.writeFileSync( - outFileName, - "/* Generated using Nebulosa CSS. https://git.qwik.space/BurnyLlama/nebulosa-css */\n" + css - ) + log("Writing file...") + fs.writeFileSync( + outFileName, + "/* 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) + } } \ No newline at end of file diff --git a/dev.js b/dev.js index 86cdf16..ee0ddc2 100644 --- a/dev.js +++ b/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) } } ) diff --git a/example-config.yml b/example-config.yml index 4499aba..c488e26 100644 --- a/example-config.yml +++ b/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 diff --git a/parseTemplate.js b/parseTemplate.js index c5c04c7..1efeee6 100644 --- a/parseTemplate.js +++ b/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!`) - process.exit(1) + throw new Error(`Error: "${variableName}" is not defined`) } - 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!`) - process.exit(1) + throw new Error(`Error: "${variableName}" is not defined`) } - log(`"${variableName}" = ${flattenedData[variableName]}`) return flattenedData[variableName] ? codeBlock : "" } ) diff --git a/src/defaults.scss b/src/defaults.scss index dea13bc..7dee18e 100644 --- a/src/defaults.scss +++ b/src/defaults.scss @@ -5,16 +5,19 @@ *, *::before, *::after { - margin: 0; - padding: 0; - box-sizing: border-box; - line-height: 1.5; + @if (settings.$css-reset) { + margin: 0; + padding: 0; + 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; diff --git a/src/templates/_settings.scss b/src/templates/_settings.scss index 3b58132..9d54b02 100644 --- a/src/templates/_settings.scss +++ b/src/templates/_settings.scss @@ -1,6 +1,31 @@ -// Select the font to be used for most of the text. -// $font-body-text: 'Manrope', sans-serif; -$font-body-text: 'Alegreya', serif; +// This template is used to convert the YAML settings into something easily usable in SCSS. +// FIXME: One solution to this duct tape could be to use `main.scss` and `_settings.scss` as configs instead... -// Select the scroll behavior. [ smooth | auto ] -$scroll-behaviour: smooth; \ No newline at end of file +// General settings +$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 }}; diff --git a/src/templates/main.scss b/src/templates/main.scss index 169884c..346da38 100644 --- a/src/templates/main.scss +++ b/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"; diff --git a/src/text.scss b/src/text.scss index 24b7fe5..2e4d823 100644 --- a/src/text.scss +++ b/src/text.scss @@ -1,13 +1,16 @@ @use "palette"; @use "settings"; -p, ul, ol { - font-family: settings.$font-body-text; +p, +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: '"';