Cleanup structure - dist folder. Update readme

.gitignore

@@ -3,7 +3,6 @@
 .idea
 *.iml
 build
-dist
 *.egg*
 .DS_Store
 *.zip

README.md

@@ -19,3 +19,33 @@ manually enter this URL:
 
 
 If you don't see the styled header bar, go into Settings -> Appeareance and set Color to "default" and uncheck "Transparent Color".
+
+## Contribute
+
+Contributions are always welcome, especially new themes!
+
+The Javascript and Less are compiled and bundled with webpack.
+The reason for this is to be able to use new JS features and have one place to build both the less and JS.
+
+### Getting started
+
+```bash
+git clone https://github.com/Birkbjo/OctoPrint-Themeify.git
+```
+
+```bash
+yarn install && yarn build
+```
+
+Start hacking! 
+
+If you have setup `stylesheet: less` in your `config.yaml` you can edit the less-files and reload the page without re-building for each change.
+
+#### Build
+
+Build javascript and css:
+```bash
+yarn build
+```
+
+

octoprint_themeify/__init__.py

@@ -15,8 +15,8 @@ def on_after_startup(self):
     def get_assets(self):
         return dict(
             less=["less/base.less"],
-            css=["css/themeify.css", "css/includes.css"],
-            js=["js/themeify.min.js"]
+            css=["dist/themeify.min.css", "css/includes.css"],
+            js=["dist/themeify.min.js"]
         )
 
     def get_settings_defaults(self):

octoprint_themeify/static/js/themeify.js

@@ -4,13 +4,12 @@
  * Author: Birk Johansson
  * License: MIT
  */
-import "../less/base.less"
+
 $(function() {
     function ThemeifyViewModel(parameters) {
         var self = this;
         self.classId = "themeify";
-        self.system = parameters[0];
-        self.settings = parameters[1];
+        self.settings = parameters[0];
 
         self.ownSettings = {};
         self.customRules = [];
@@ -116,10 +115,7 @@ $(function() {
                     old
                 });
             }
-            $(rule.selector()).css(
-                rule.rule(),
-                rule.value()
-            );
+            $(rule.selector()).css(rule.rule(), rule.value());
         };
 
         self.clone = function(obj) {
@@ -174,7 +170,7 @@ $(function() {
 
         self.onThemeChange = function(newVal) {
             var prev = oldVal("theme");
-            var hasClass = (clazz) => {
+            var hasClass = clazz => {
                 return $("html").hasClass(clazz);
             };
             if (!hasClass(newVal)) {
@@ -307,12 +303,7 @@ $(function() {
 
     OCTOPRINT_VIEWMODELS.push([
         ThemeifyViewModel,
-        // e.g. loginStateViewModel, settingsViewModel, ...
-        [
-            "systemViewModel",
-            "settingsViewModel" /* "loginStateViewModel", "settingsViewModel" */
-        ],
-        // e.g. #settings_plugin_themeify, #tab_plugin_themeify, ...
+        ["settingsViewModel"],
         ["#settings_plugin_themeify"]
     ]);
 });

octoprint_themeify/static/less/discorded/discorded.less

@@ -4,7 +4,7 @@
 
  .discorded() {
         body {
-            background-color: @darkish;
+            background-color: white;
             color: @notquiteWhite;
             font-weight: 400;
         }

package.json

@@ -0,0 +1,18 @@
+{
+    "scripts": {
+        "build": "webpack -p",
+        "clean": "rm -r octoprint_themeify/static/dist",
+        "clean-css": "rm octoprint_themeify/static/dist/themeify.min.css"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.0.0-beta.34",
+        "@babel/preset-env": "^7.0.0-beta.34",
+        "babel-loader": "8.0.0-beta.0",
+        "css-loader": "^0.28.7",
+        "extract-text-webpack-plugin": "^3.0.2",
+        "less": "^2.7.3",
+        "less-loader": "^4.0.5",
+        "style-loader": "^0.19.0",
+        "webpack": "^3.10.0"
+    }
+}

webpack.config.js

@@ -2,13 +2,15 @@ const path = require("path");
 const webpack = require("webpack");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
-const jsPath = path.resolve(__dirname, "octoprint_themeify/static/js");
-
+const staticPath = path.resolve(__dirname, "octoprint_themeify/static");
 module.exports = {
-    entry: "./octoprint_themeify/static/js/themeify.js",
+    entry: [
+        path.join(staticPath, "js", "themeify.js"),
+        "./octoprint_themeify/static/less/base.less"
+    ],
     output: {
         filename: "themeify.min.js",
-        path: jsPath
+        path: path.join(staticPath, "dist")
     },
     module: {
         rules: [
@@ -25,11 +27,10 @@ module.exports = {
             {
                 test: /\.less$/,
                 use: ExtractTextPlugin.extract({
-                    fallback: "style-loader",
                     use: [
                         {
                             loader: "css-loader",
-                            options: {url: false, minimize: true}
+                            options: { url: false, minimize: true }
                         },
                         {
                             loader: "less-loader"
@@ -41,9 +42,12 @@ module.exports = {
         ]
     },
     plugins: [
-        new webpack.optimize.UglifyJsPlugin({ minimize: true, comments: false }),
+        new webpack.optimize.UglifyJsPlugin({
+            minimize: true,
+            comments: false
+        }),
         new ExtractTextPlugin({
-            filename: "../css/themeify.css",
+            filename: "../dist/themeify.min.css",
             disable: false,
             allChunks: true
         })