From a3fb9921593a62ac5d5cdfef42bb56ca35c2ca14 Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Thu, 28 Sep 2023 01:38:19 +0000
Subject: [PATCH] fix nav.css style issue, make search feature not case
 sensitive

---
 css/nav.css         | 10 +++++-----
 scripts/index.js    |  4 ++--
 scripts/instance.js | 13 +++++++++----
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/css/nav.css b/css/nav.css
index bb0929b..f4ab1c7 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -68,16 +68,16 @@ label[for="navtoggle"], #navtoggle {
 		color: var(--nav-link-active-text-color);
 		background-color: var(--nav-link-active-bg-color);
 	}
-	
-	nav:hover a[aria-current="page"]:has(~ a:hover) {
-		color: var(--nav-text-color);
-		background-color: var(--nav-bg-color);
-	}
 
 	nav:hover a[aria-current="page"]:hover {
 		color: var(--nav-link-active-text-color);
 		background-color: var(--nav-link-active-bg-color);
 	}
+	
+	nav:hover a[aria-current="page"]:has(~ a:hover) {
+		color: var(--nav-text-color);
+		background-color: var(--nav-bg-color);
+	}
 }
 
 @media screen and (width <= 600px){
diff --git a/scripts/index.js b/scripts/index.js
index 9218c38..2820412 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -47,8 +47,8 @@ async function populateInstances () {
 	}
 	else {
 		criteria = (a, b) => {
-			const aInc = a.name.includes(searchQuery);
-			const bInc = b.name.includes(searchQuery);
+			const aInc = a.name.toLowerCase().includes(searchQuery.toLowerCase());
+			const bInc = b.name.toLowerCase().includes(searchQuery.toLowerCase());
 			if (aInc && bInc) {
 				return a.vmid > b.vmid ? 1 : -1;
 			}
diff --git a/scripts/instance.js b/scripts/instance.js
index 03fbb7d..c3425a9 100644
--- a/scripts/instance.js
+++ b/scripts/instance.js
@@ -77,10 +77,15 @@ class InstanceCard extends HTMLElement {
 
 		const nameParagraph = this.shadowRoot.querySelector("#instance-name");
 		if (this.searchQuery) {
-			const nameParts = this.name.split(this.searchQuery);
-			nameParagraph.innerHTML += `<span>${nameParts[0]}</span>`;
-			for (let i = 1; i < nameParts.length; i++) {
-				nameParagraph.innerHTML += `<span style="color: var(--lightbg-text-color); background-color: var(--highlight-color);">${this.searchQuery}</span><span>${nameParts[i]}</span>`;
+			const regEscape = v => v.replace("[-[\]{}()*+?.,\\^$|#\s]", "\\$&");
+			const nameParts = this.name.split(new RegExp(regEscape(`(${this.searchQuery})`), "ig"));
+			for (let i = 0; i < nameParts.length; i++) {
+				const part = document.createElement("span");
+				part.innerText = nameParts[i];
+				if (nameParts[i].toLowerCase() === this.searchQuery.toLowerCase()) {
+					part.style = "color: var(--lightbg-text-color); background-color: var(--highlight-color);";
+				}
+				nameParagraph.append(part);
 			}
 		}
 		else {