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

1 files changed, 71 insertions, 0 deletions

diff --git a/web/gotosocial-styling/index.js b/web/gotosocial-styling/index.js
new file mode 100644
index 000000000..88d9398b2
--- /dev/null
+++ b/web/gotosocial-styling/index.js
@@ -0,0 +1,71 @@
+"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();
+	});
+}
\ No newline at end of file