chore: add biome job for CI

nfoert · Oct 6, 2024 · 067bd04 · 067bd04
1 parent d08e6a6
commit 067bd04
Show file tree

Hide file tree

Showing 16 changed files with 477 additions and 411 deletions.
diff --git a/.github/workflows/lint-and-format.yml b/.github/workflows/lint-and-format.yml
@@ -0,0 +1,22 @@
+name: Lint and Format checks
+on: [ push, pull_request ]
+jobs:
+  ruff:
+    name: Python
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: chartboost/ruff-action@v1
+        with:
+          path: './cardie'
+
+  biome:
+    name: CSS and JS
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Biome CLI
+        uses: biomejs/setup-biome@v2
+
+      - name: Run Biome
+        run: biome ci
diff --git a/.github/workflows/ruff.yml b/.github/workflows/ruff.yml
diff --git a/README.md b/README.md
@@ -113,5 +113,15 @@ ruff check cardie --fix
 ```
 For VS Code users, you can install the `ruff` extension to get linting and formatting on save.
 
+### biome
+This project uses [`biome`](https://biomejs.dev/) to lint CSS and JS files.
+For simpler installation, it is recommended to use the VS Code add-on or to download the binary
+version (go to [docs](https://biomejs.dev/guides/manual-installation/) for more information).
+
+```bash
+biome check
+```
+For VS Code users, you can install the `biome` extension to get linting and formatting on save.
+
 ## Contributing
 Please see [CONTRIBUTING.md](CONTRIBUTING.md) for instructions on how you can contribute to Cardie
diff --git a/biome.json b/biome.json
@@ -0,0 +1,33 @@
+{
+  "files": {
+    "include":[
+      "static/main/scripts/global/**/*.js"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "ignore": [],
+    "attributePosition": "auto",
+    "indentStyle": "space",
+    "indentWidth": 4,
+    "lineWidth": 80,
+    "lineEnding": "lf"
+  },
+  "javascript": {
+    "formatter": {
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "bracketSpacing": true,
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "semicolons": "always",
+      "trailingCommas": "all"
+    }
+  },
+  "json": {
+    "formatter": {
+      "enabled": false
+    }
+  }
+}
diff --git a/cardie/main/templates/base.html b/cardie/main/templates/base.html
@@ -20,6 +20,7 @@
               href="{% static '/main/images/favicon_light.ico' %}" />
         <meta name="darkreader-lock">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="{% static '/main/scripts/common.js' %}"></script>
         <script src="{% url "config_js" %}"></script>
         <title>Cardie |
             {% block head_title %}{% endblock %}

diff --git a/cardie/main/views.py b/cardie/main/views.py
@@ -6,8 +6,9 @@
 from django.shortcuts import HttpResponse, render
 from django.utils import timezone
 from django.views.decorators.csrf import csrf_exempt
+
 from main.icons import icons
-from main.models import Card, Server, TempCard
+from main.models import Card, TempCard
 
 
 def index(request):

diff --git a/cardie/static/main/scripts/common.js b/cardie/static/main/scripts/common.js
@@ -0,0 +1,7 @@
+function get_or_throw(selector) {
+    const element = document.querySelector(selector);
+    if (!element) {
+        throw new Error(`Could not find element with selector "${selector}"`);
+    }
+    return element;
+}
diff --git a/cardie/static/main/scripts/editor/editor_information.js b/cardie/static/main/scripts/editor/editor_information.js
@@ -5,147 +5,145 @@ var currently_editing_icon;
 var items_list;
 
 function open_iconselector_foritem(event) {
-    const item = event.target.closest(".link_item, .text_item");
-    currently_editing_icon = item;
-    show_iconselector();
+	const item = event.target.closest(".link_item, .text_item");
+	currently_editing_icon = item;
+	show_iconselector();
 }
 
 function editor_create_json() {
-    const card_json = {
-        uuid: "unknown",
-        name: "",
-        author: "unknown",
-        layout: "left",
-        details: {
-            primary: "",
-            secondary: "",
-        },
-        information: {
-            items: [],
-        },
-        colors: {
-            background: "#ffffff",
-            accent: "#000000",
-            text: "#000000",
-        },
-        font_style: "Simple",
-        version: 4,
-    };
-
-    card_json["name"] = document.querySelector(
-        "#editor_header_name_text_cardname",
-    ).innerText;
-    card_json["author"] = username;
-    card_json["layout"] = layout;
-    card_json["details"]["primary"] = document.querySelector(
-        "#editor_main_settings_details_primary",
-    ).value;
-    card_json["details"]["secondary"] = document.querySelector(
-        "#editor_main_settings_details_secondary",
-    ).value;
-
-    card_json["colors"]["background"] = document.querySelector(
-        "#editor_main_settings_colors_background",
-    ).value;
-    card_json["colors"]["accent"] = document.querySelector(
-        "#editor_main_settings_colors_accent",
-    ).value;
-    card_json["colors"]["text"] = document.querySelector(
-        "#editor_main_settings_colors_text",
-    ).value;
-    card_json["font_style"] = font_style;
-
-    for (const item in items_list) {
-        const item_uuid = items_list[item].id;
-        const item_icon = items_list[item].icon;
-        const item_text = items_list[item].text;
-        const item_url = items_list[item].url;
-        const item_url_enabled = items_list[item].url_enabled;
-        const item_position = items_list[item].position;
-
-        const item_json = {
-            uuid: item_uuid,
-            icon: item_icon,
-            text: item_text,
-            url: item_url,
-            url_enabled: item_url_enabled,
-            position: item_position,
-        };
-
-        card_json["information"]["items"].push(item_json);
-
-        card_json["information"]["items"].sort(
-            (a, b) => a.position - b.position,
-        );
-    }
-
-    return card_json;
+	const card_json = {
+		uuid: "unknown",
+		name: "",
+		author: "unknown",
+		layout: "left",
+		details: {
+			primary: "",
+			secondary: "",
+		},
+		information: {
+			items: [],
+		},
+		colors: {
+			background: "#ffffff",
+			accent: "#000000",
+			text: "#000000",
+		},
+		font_style: "Simple",
+		version: 4,
+	};
+
+	card_json["name"] = document.querySelector(
+		"#editor_header_name_text_cardname",
+	).innerText;
+	card_json["author"] = username;
+	card_json["layout"] = layout;
+	card_json["details"]["primary"] = document.querySelector(
+		"#editor_main_settings_details_primary",
+	).value;
+	card_json["details"]["secondary"] = document.querySelector(
+		"#editor_main_settings_details_secondary",
+	).value;
+
+	card_json["colors"]["background"] = document.querySelector(
+		"#editor_main_settings_colors_background",
+	).value;
+	card_json["colors"]["accent"] = document.querySelector(
+		"#editor_main_settings_colors_accent",
+	).value;
+	card_json["colors"]["text"] = document.querySelector(
+		"#editor_main_settings_colors_text",
+	).value;
+	card_json["font_style"] = font_style;
+
+	for (const item in items_list) {
+		const item_uuid = items_list[item].id;
+		const item_icon = items_list[item].icon;
+		const item_text = items_list[item].text;
+		const item_url = items_list[item].url;
+		const item_url_enabled = items_list[item].url_enabled;
+		const item_position = items_list[item].position;
+
+		const item_json = {
+			uuid: item_uuid,
+			icon: item_icon,
+			text: item_text,
+			url: item_url,
+			url_enabled: item_url_enabled,
+			position: item_position,
+		};
+
+		card_json["information"]["items"].push(item_json);
+
+		card_json["information"]["items"].sort((a, b) => a.position - b.position);
+	}
+
+	return card_json;
 }
 
 function editor_load_from_json(json) {
-    // Sets up all the buttons based on the json
-
-    json = JSON.parse(json);
-
-    document.querySelector("#editor_header_name_text_cardname").innerText =
-        json["name"];
-    document.querySelector("#editor_main_settings_details_primary").value =
-        json["details"]["primary"];
-    document.querySelector("#editor_main_settings_details_secondary").value =
-        json["details"]["secondary"];
-
-    document.querySelector("#editor_main_settings_colors_background").value =
-        json["colors"]["background"];
-    document.querySelector("#editor_main_settings_colors_accent").value =
-        json["colors"]["accent"];
-    document.querySelector("#editor_main_settings_colors_text").value =
-        json["colors"]["text"];
-    font_style = json["font_style"];
-
-    card_set_font(".card_card", font_style);
-    window.dispatchEvent(
-        new CustomEvent("sendLoadedFontFromJson", {
-            detail: { font_style },
-        }),
-    );
-
-    card_set_layout(".card_card", json["layout"]);
-    layout = json["layout"];
-
-    json["information"]["items"].sort((a, b) => a.position - b.position);
-
-    for (const item in json["information"]["items"]) {
-        const uuid = json["information"]["items"][item]["uuid"];
-        const text = json["information"]["items"][item]["text"];
-        const icon = json["information"]["items"][item]["icon"];
-        const url = json["information"]["items"][item]["url"];
-        const url_enabled = json["information"]["items"][item]["url_enabled"];
-        const position = json["information"]["items"][item]["position"];
-
-        window.dispatchEvent(
-            new CustomEvent("createItem", {
-                detail: { uuid, text, icon, url, url_enabled, position },
-            }),
-        );
-    }
+	// Sets up all the buttons based on the json
+
+	json = JSON.parse(json);
+
+	document.querySelector("#editor_header_name_text_cardname").innerText =
+		json["name"];
+	document.querySelector("#editor_main_settings_details_primary").value =
+		json["details"]["primary"];
+	document.querySelector("#editor_main_settings_details_secondary").value =
+		json["details"]["secondary"];
+
+	document.querySelector("#editor_main_settings_colors_background").value =
+		json["colors"]["background"];
+	document.querySelector("#editor_main_settings_colors_accent").value =
+		json["colors"]["accent"];
+	document.querySelector("#editor_main_settings_colors_text").value =
+		json["colors"]["text"];
+	font_style = json["font_style"];
+
+	card_set_font(".card_card", font_style);
+	window.dispatchEvent(
+		new CustomEvent("sendLoadedFontFromJson", {
+			detail: { font_style },
+		}),
+	);
+
+	card_set_layout(".card_card", json["layout"]);
+	layout = json["layout"];
+
+	json["information"]["items"].sort((a, b) => a.position - b.position);
+
+	for (const item in json["information"]["items"]) {
+		const uuid = json["information"]["items"][item]["uuid"];
+		const text = json["information"]["items"][item]["text"];
+		const icon = json["information"]["items"][item]["icon"];
+		const url = json["information"]["items"][item]["url"];
+		const url_enabled = json["information"]["items"][item]["url_enabled"];
+		const position = json["information"]["items"][item]["position"];
+
+		window.dispatchEvent(
+			new CustomEvent("createItem", {
+				detail: { uuid, text, icon, url, url_enabled, position },
+			}),
+		);
+	}
 }
 
 function status_saved() {
-    document.querySelector("#editor_status").innerHTML =
-        '<i class="ph-bold ph-check-circle"></i> Saved';
+	document.querySelector("#editor_status").innerHTML =
+		'<i class="ph-bold ph-check-circle"></i> Saved';
 }
 
 function status_saving() {
-    document.querySelector("#editor_status").innerHTML =
-        '<i class="ph-bold ph-spinner-gap"></i> Saving...';
+	document.querySelector("#editor_status").innerHTML =
+		'<i class="ph-bold ph-spinner-gap"></i> Saving...';
 }
 
 function status_error() {
-    document.querySelector("#editor_status").innerHTML =
-        '<i class="ph-bold ph-warning"></i> Error';
+	document.querySelector("#editor_status").innerHTML =
+		'<i class="ph-bold ph-warning"></i> Error';
 }
 
 window.addEventListener("itemData", (event) => {
-    const { items } = event.detail;
-    items_list = items;
+	const { items } = event.detail;
+	items_list = items;
 });