Improved build system.
parent
66dae1820a
commit
32dfa801ad
52
build.js
52
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)
|
||||
}
|
||||
}
|
||||
9
dev.js
9
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)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 : ""
|
||||
}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// 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 }};
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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: '"';
|
||||
|
|
|
|||
Loading…
Reference in New Issue