Add prettier to format frontend

.gitlab-ci.yml

@@ -1,5 +1,3 @@
-image: python:3.10-slim
-
 stages:
   - build
   - test
@@ -41,6 +39,7 @@ pip:
     expire_in: 30 mins
 
 .python_test_template: &python_test_template
+  image: python:3.10-slim
   stage: test
   dependencies:
     - pip
@@ -50,6 +49,12 @@ pip:
   variables:
     SECRET_KEY: super-secret
 
+.node_test_template: &node_test_template
+  image: node:alpine
+  stage: test
+  dependencies:
+    - static
+
 test_python:
   <<: *python_test_template
   script:
@@ -81,3 +86,8 @@ mypy:
   <<: *python_test_template
   script:
     - mypy website
+
+prettier:
+  <<: *node_test_template
+  script:
+    - npm run lint

justfile

@@ -30,9 +30,15 @@ test *ARGS:
 format:
   black website
   isort website
+  npm run format
 
-lint:
+lint: lint_python lint_node
+
+lint_python:
   black --check website
   isort --check website
   flake8 website
   mypy website
+
+@lint_node:
+  npm run lint

package-lock.json

@@ -15,6 +15,7 @@
       "devDependencies": {
         "esbuild": "^0.14.43",
         "npm-run-all": "^4.1.5",
+        "prettier": "2.6.2",
         "sass": "^1.52.3"
       }
     },
@@ -1256,6 +1257,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -2377,6 +2393,12 @@
       "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
       "dev": true
     },
+    "prettier": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "dev": true
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

package.json

@@ -8,12 +8,15 @@
     "build:js": "esbuild static/src/js/*.js --bundle --outdir=static/build/js --minify --sourcemap",
     "build:css": "sass --style=compressed --load-path=$PWD/node_modules static/src/scss:static/build/css",
     "build:contrib": "./scripts/copy-npm-contrib.sh",
-    "build": "npm-run-all build:*"
+    "build": "npm-run-all build:*",
+    "lint": "prettier --check static/src",
+    "format": "prettier --write static/src"
   },
   "author": "Jake Howard",
   "devDependencies": {
     "esbuild": "^0.14.43",
     "npm-run-all": "^4.1.5",
+    "prettier": "2.6.2",
     "sass": "^1.52.3"
   },
   "dependencies": {

static/src/js/base.js

@@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   navbarBurger.addEventListener("click", () => {
     console.log("click");
-    navbarBurger.classList.toggle('is-active');
-    navbar.classList.toggle('is-active');
-  })
+    navbarBurger.classList.toggle("is-active");
+    navbar.classList.toggle("is-active");
+  });
 });

static/src/js/darkmode.js

@@ -1,11 +1,11 @@
-import Darkmode from 'darkmode-js';
+import Darkmode from "darkmode-js";
 
 const DARKMODE_OPTIONS = {
-  left: '32px',
-  right: 'unset',
-  time: '0.7s',
+  left: "32px",
+  right: "unset",
+  time: "0.7s",
   saveInCookies: false,
-  label: '🌓',
+  label: "🌓",
 };
 
 window.addEventListener("load", () => {
@@ -15,9 +15,11 @@ window.addEventListener("load", () => {
 });
 
 // Also listen to native theme changes
-window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
-  if (e.matches !== window.darkmodejs.isActivated()) {
-    // HACK: .toggle doesn't work quite right
-    window.darkmodejs.button.click();
-  }
-});
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (e) => {
+    if (e.matches !== window.darkmodejs.isActivated()) {
+      // HACK: .toggle doesn't work quite right
+      window.darkmodejs.button.click();
+    }
+  });