Move JS from a tag into a file

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "dabapps/commonjs",
+    "dabapps/browser",
+    "dabapps/es",
+    "plugin:prettier/recommended"
+  ],
+  "globals": {
+    "M": true
+  }
+}

package.json

@@ -11,6 +11,10 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.13.0",
     "materialize-css": "1.0.0",
-    "node-sass": "4.14.0"
+    "parcel-bundler": "1.12.4",
+    "sass": "1.26.5"
+  },
+  "devDependencies": {
+    "eslint-config-dabapps": "6.0.4"
   }
 }

scripts/build-static.sh

@@ -8,7 +8,10 @@ rm -rf static/build
 
 mkdir -p static/build/css static/build/js
 
-node-sass --include-path node_modules/ -q static/src/scss/index.scss static/build/css/index.css
+parcel build --no-autoinstall --no-source-maps -d static/build/js static/src/js/index.js
+
+# Separate step because parcel process images itself, and breaks them
+sass -I node_modules/ -s compressed --no-source-map static/src/scss/index.scss static/build/css/index.css
 
 # Install materialize CSS
 cp node_modules/materialize-css/dist/js/materialize.min.js static/build/js/materialize.min.js

scripts/test.sh

@@ -2,7 +2,7 @@
 
 set -e
 
-export PATH=env/bin:${PATH}
+export PATH=env/bin:node_modules/.bin:${PATH}
 
 coverage run --source=website manage.py test $@
 
@@ -20,3 +20,7 @@ isort -rc -c website/
 
 echo "> Running type checker..."
 mypy website/
+
+echo "> Running eslint..."
+
+eslint static/src/js

static/src/js/index.js

@@ -0,0 +1,3 @@
+document.addEventListener("DOMContentLoaded", function() {
+  M.Sidenav.init(document.querySelectorAll(".sidenav"), {});
+});

templates/base.html

@@ -51,13 +51,7 @@
     </footer>
 
     <script type="text/javascript" src="{% static 'js/materialize.min.js' %}"></script>
-
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        var elems = document.querySelectorAll('.sidenav');
-        var instances = M.Sidenav.init(elems, {});
-      });
-    </script>
+    <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
 
     {% block extrascripts %}{% endblock %}
   </body>