gotosocial/web/gotosocial-styling/index.js
f0x52 026674bc2c
Thread views on the web (#207)
* Webviews for status threads

* fix up templates

* add ForkAwesome and gotosocial-styling into repo

* clean up gotosocial-styling, old styling

* update CONTRIBUTING with new css building, and nodemon recommendation

* update Dockerfile with new css bundling

* those weren't supposed to make it in

* upgrade gotosocial-styling deps

* update authorize template with main wrapper

* update css pipeline

* abstract status from thread to avoid copy-pasting

* basic CW implementation

* fix PR review suggestions

* fix no-image-desc icon alignment

* remove template loading println

* remove println

* remove changes to testmodels

* reset changes to testmodels
2021-09-13 14:45:33 +02:00

71 lines
No EOL
1.9 KiB
JavaScript

"use strict";
const Promise = require("bluebird");
const fs = require("fs").promises;
const postcss = require('postcss');
const {parse} = require("postcss-scss");
/*
Bundle all postCSS files under the `templates/` directory separately, each prepended with the (variable) contents of ./colors.css
Outputs in plain CSS are in `build/`, split by template
*/
const postcssPlugins = ["postcss-strip-inline-comments", "postcss-nested", "postcss-simple-vars", "postcss-color-function"].map((plugin) => require(plugin)());
function getTemplates() {
return fs.readdir(`${__dirname}/templates`).then((templates) => {
return templates.map((a) => {
return [a, `${__dirname}/templates/${a}`];
});
});
}
getTemplates();
function bundle([template, path]) {
return Promise.try(() => {
return Promise.all([
fs.readFile(`${__dirname}/colors.css`, "utf-8"),
fs.readFile(path, "utf-8")
]);
}).then(([colors, style]) => {
return parse(colors + "\n" + style);
}).then((ast) => {
return postcss(postcssPlugins).process(ast, {
from: template,
to: template
});
}).then((bundle) => {
return fs.writeFile(`${buildDir}/${template}`, bundle.css);
}).then(() => {
console.log(`Finished writing CSS to ${buildDir}/${template}`);
});
}
let buildDir = process.env.BUILD_DIR;
if (buildDir == undefined) {
buildDir = `${__dirname}/build`;
}
console.log("bundling to", buildDir);
function bundleAll() {
return getTemplates().then((templates) => {
return Promise.map(templates, bundle);
});
}
if (process.env.NODE_ENV != "development") {
bundleAll();
} else {
const chokidar = require("chokidar");
console.log("Watching for changes");
chokidar.watch(`${__dirname}/templates`).on("all", (_, path) => {
if (path.endsWith(".css")) {
bundle([path.split("/").slice(-1)[0], path]);
}
});
chokidar.watch(`${__dirname}/colors.css`).on("all", () => {
console.log("colors.css updated, rebuilding all templates");
bundleAll();
});
}