shift asset processing to webpack (#424)

also migrated SASS to latest syntax (via dart-sass) and vastly simplified light/dark theme logic

webpack.config.js

@@ -0,0 +1,89 @@
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const WebpackAssetsManifest = require("webpack-assets-manifest");
+const SriPlugin = require("webpack-subresource-integrity");
+const CopyPlugin = require("copy-webpack-plugin");
+
+const isProd = process.env.NODE_ENV === "production";
+
+module.exports = {
+  entry: [
+    path.resolve(__dirname, "assets/js/index.js"),
+    path.resolve(__dirname, "assets/sass/main.scss"),
+  ],
+  mode: isProd ? "production" : "development",
+  devtool: "source-map",
+  output: {
+    filename: isProd ? "js/[name]-[contenthash:8].js" : "js/[name].js",
+    path: path.resolve(__dirname, "static/assets/"),
+    publicPath: "/assets/",
+    clean: true,
+    crossOriginLoading: "anonymous",
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: isProd ? "css/[name]-[contenthash:8].css" : "css/[name].css",
+    }),
+    new SriPlugin({
+      hashFuncNames: ["sha512"],
+      enabled: true,
+    }),
+    new WebpackAssetsManifest({
+      writeToDisk: true,
+      output: path.resolve(__dirname, "data/manifest.json"),
+      publicPath: true,
+      integrity: true,
+    }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve(__dirname, "assets/images/"),
+          to: "images/"
+        },
+        {
+          from: path.resolve(__dirname, "node_modules/twemoji-emojis/vendor/svg/"),
+          to: "emoji/"
+        },
+      ],
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          { loader: "babel-loader" }
+        ],
+      },
+      {
+        test: /\.(sa|sc|c)ss$/i,
+        use: [
+          { loader: MiniCssExtractPlugin.loader },
+          { loader: "css-loader" },
+          { loader: "postcss-loader" },
+          { loader: "sass-loader" },
+        ],
+      },
+      {
+        test: /\.(woff(2)?|ttf|otf|eot)$/i,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              name: "[name].[ext]",
+              outputPath: "fonts/",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  devServer: {
+    contentBase: path.join(__dirname, "public/"),
+    publicPath: "/assets/",
+    // host: "0.0.0.0",  // required when inside Docker
+    port: process.env.PORT || 1337,
+    compress: true,
+  },
+};