1
0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-09-19 19:00:11 +00:00
jfa-go/scripts/missing-colors.js
Harvey Tindall 2057823b7a
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.

The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).

`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.

Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 18:31:54 +01:00

90 lines
3.1 KiB
JavaScript

let parser = require("cheerio");
let fs = require("fs");
let path = require("path");
let pre = require("perl-regex");
const template = process.env.NOTEMPLATE != "1";
const hasDark = (item) => {
let list = item.attr("class").split(/\s+/);
for (let i = 0; i < list.length; i++) {
if (list[i].substring(0,5) == "dark:") {
return true;
}
}
return false;
};
if (typeof String.prototype.replaceAll === "undefined") {
String.prototype.replaceAll = function(match, replace) {
return this.replace(new RegExp(match, 'g'), () => replace);
}
}
function fixHTML(infile, outfile) {
let f = fs.readFileSync(infile).toString();
// Find all go template strings ({{ example }})
let templateStrings = pre.exec(f, "(?s){{(?:(?!{{).)*?}}", "gi");
if (template) {
for (let i = 0; i < templateStrings.length; i++) {
let s = templateStrings[i].replace(/\\/g, '');
// let s = templateStrings[i];
f = f.replaceAll(s, "<!--" + s.slice(3).slice(0, -3) + "-->");
}
}
let doc = new parser.load(f);
for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field", "textarea", "section"]) {
let items = doc("."+item);
items.each((i, elem) => {
let hasColor = false;
for (let color of ["neutral", "positive", "urge", "warning", "info", "critical"]) {
//console.log(color);
if (doc(elem).hasClass("~"+color)) {
hasColor = true;
// console.log("adding to", items[i].classList)
if (!hasDark(doc(elem))) {
doc(elem).addClass("dark:~d_"+color);
}
break;
}
}
if (!hasColor) {
if (!hasDark(doc(elem))) {
// card (and sections in sectioned cards) without ~neutral look different than with.
if (item != "card" && item != "section") doc(elem).addClass("~neutral");
doc(elem).addClass("dark:~d_neutral");
}
}
if (!doc(elem).hasClass("@low") && !doc(elem).hasClass("@high")) {
doc(elem).addClass("@low");
}
});
}
let out = doc.html();
// let out = f
if (template) {
for (let i = 0; i < templateStrings.length; i++) {
let s = templateStrings[i].replace(/\\/g, '');
out = out.replaceAll("<!--" + s.slice(3).slice(0, -3) + "-->", s);
}
out = out.replaceAll("&lt;!--", "{{");
out = out.replaceAll("--&gt;", "}}");
}
fs.writeFileSync(outfile, out);
console.log(infile, outfile);
};
let inpath = process.argv[process.argv.length-2];
let outpath = process.argv[process.argv.length-1];
if (fs.statSync(inpath).isDirectory()) {
let files = fs.readdirSync(inpath);
for (let i = 0; i < files.length; i++) {
if (files[i].indexOf(".html")>=0) {
fixHTML(path.join(inpath, files[i]), path.join(outpath, files[i]));
}
}
} else {
fixHTML(inpath, outpath);
}