From c2c49315fb269b65bfd3511c4c4808223fbc18e7 Mon Sep 17 00:00:00 2001
From: Sidhartha Veldhandi <76509525+SIDDHU123M@users.noreply.github.com>
Date: Wed, 27 Nov 2024 17:29:35 +0000
Subject: [PATCH] good

---
 index.html       |   2 +-
 scripts/main.js  |  68 +++++++++++++----------
 styles/style.css | 138 +++++++++++++++++++++++++++--------------------
 3 files changed, 119 insertions(+), 89 deletions(-)

diff --git a/index.html b/index.html
index bb1cd4c..1a9f3b8 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@ <h3>Sections</h3>
             <div id="right-nav-content"></div>
       </div>
       <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
-      <script src="scripts/main.js"></script>
+      <script defer src="scripts/main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
index 91c0930..e972882 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -13,8 +13,6 @@ document.addEventListener("DOMContentLoaded", () => {
 	});
 });
 
-/* Existing JavaScript code */
-
 const converter = new showdown.Converter();
 const iconMap = {
 	Overview: "home",
@@ -65,15 +63,21 @@ function renderSidebar(files) {
 }
 
 async function loadPage(file) {
-	const response = await fetch(file);
-	const markdown = await response.text();
-	let htmlContent = converter.makeHtml(markdown);
-	document.getElementById("content").innerHTML = htmlContent;
-	if (file !== "data/README.md") {
-		createRightNav();
+	try {
+		const response = await fetch(file);
+		if (!response.ok) {
+			throw new Error(`Failed to load ${file}: ${response.statusText}`);
+		}
+		const markdown = await response.text();
+		let htmlContent = converter.makeHtml(markdown);
+		document.getElementById("content").innerHTML = htmlContent;
+		if (file !== "data/README.md") {
+			createRightNav();
+		}
+	} catch (error) {
+		console.error(error);
+		document.getElementById("content").innerHTML = `<p>Error loading content. Please try again later.</p>`;
 	}
-	// Remove or define updatePagination function
-	// updatePagination();
 }
 
 function createRightNav() {
@@ -99,30 +103,36 @@ function createRightNav() {
 		});
 	});
 
-	// Add navigation links after the first line of the content for mobile users
 	if (window.innerWidth <= 768) {
-		content.append(document.createElement("hr"));
-		const mobileNav = `
-            <nav class="mobile-nav">
-                <ul>${rightNavContent}</ul>
-            </nav>`;
-		if (firstH2) {
-			firstH2.insertAdjacentHTML("afterend", mobileNav);
-		} else {
-			content.insertAdjacentHTML("afterbegin", mobileNav);
-		}
+		addMobileNav(content, rightNavContent, firstH2);
+	}
+}
+
+function addMobileNav(content, rightNavContent, firstH2) {
+	content.append(document.createElement("hr"));
+	const mobileNav = `
+        <nav class="mobile-nav" aria-label="Mobile Navigation">
+            <ul>${rightNavContent}</ul>
+        </nav>`;
+	if (firstH2) {
+		firstH2.insertAdjacentHTML("afterend", mobileNav);
+	} else {
+		content.insertAdjacentHTML("afterbegin", mobileNav);
 	}
 }
 
 function addSidebarEventListeners() {
-	document.querySelectorAll("#sidebar-content a").forEach((link, index) => {
-		link.addEventListener("click", (e) => {
-			e.preventDefault();
-			currentIndex = index;
-			loadPage(files[currentIndex].file);
-			setActiveLink(link);
-		});
-	});
+	document.getElementById("sidebar-content").addEventListener("click", handleSidebarClick);
+}
+
+function handleSidebarClick(e) {
+	if (e.target.tagName === "A") {
+		e.preventDefault();
+		const link = e.target;
+		const file = link.getAttribute("data-link");
+		loadPage(file);
+		setActiveLink(link);
+	}
 }
 
 function setActiveLink(activeLink) {
diff --git a/styles/style.css b/styles/style.css
index 8fd5c90..060665f 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,3 +1,31 @@
+:root {
+	--primary-color: #ff9800;
+	--secondary-color: #1a73e8;
+	--background-color: #f4f5f7;
+	--text-color: #333;
+	--sidebar-bg-color: #333;
+	--sidebar-text-color: #fff;
+	--sidebar-hover-bg-color: #444;
+	--right-nav-bg-color: #f8f9fa;
+	--right-nav-border-color: #ddd;
+	--right-nav-hover-bg-color: #ddd;
+	--font-family-main: Arial, sans-serif;
+	--font-family-title: "Nabla", system-ui;
+	--font-family-heading: "Space Grotesk", sans-serif;
+	--font-family-alt: "Titillium Web", sans-serif;
+	--font-family-kanit: "Kanit", sans-serif;
+	--font-size-title: 2.5em;
+	--font-size-heading: 1.5em;
+	--font-size-sidebar: 1em;
+	--font-size-right-nav: 0.95em;
+	--font-size-right-nav-heading: 1.2em;
+	--font-size-main-content: 1.05em;
+	--font-weight-bold: 600;
+	--font-weight-normal: 400;
+	--font-weight-heading: 900;
+	--transition-duration: 0.3s;
+}
+
 * {
 	margin: 0;
 	padding: 0;
@@ -6,17 +34,17 @@
 
 body {
 	display: flex;
-	font-family: Arial, sans-serif;
-	color: #333;
+	font-family: var(--font-family-main);
+	color: var(--text-color);
 	line-height: 1.6;
-	background-color: #f4f5f7;
+	background-color: var(--background-color);
 	/* overflow: hidden;  */
 }
 
 #sidebar {
 	width: 250px;
-	background-color: #333;
-	color: #fff;
+	background-color: var(--sidebar-bg-color);
+	color: var(--sidebar-text-color);
 	padding: 20px;
 	position: fixed;
 	top: 0;
@@ -29,7 +57,7 @@ body {
 #sidebar h2 {
 	font-size: 1.3em;
 	margin-bottom: 15px;
-	color: #ff9800;
+	color: var(--primary-color);
 }
 
 #sidebar-content {
@@ -48,23 +76,22 @@ body {
 	display: flex;
 	align-items: center;
 	padding: 10px;
-	font-size: 1em;
+	font-size: var(--font-size-sidebar);
 	text-decoration: none;
 	color: #ddd;
 	border-radius: 5px;
-	transition: background-color 0.3s;
-	font-weight: 500;
+	transition: background-color var(--transition-duration);
 	margin-right: 1.8em;
 }
 
 #sidebar-content a:hover {
-	background-color: #444;
+	background-color: var(--sidebar-hover-bg-color);
 }
 
 #sidebar-content .material-symbols-outlined {
 	margin-right: 10px;
 	font-size: 1.2em;
-	color: #ff9800;
+	color: var(--primary-color);
 }
 
 #main-content {
@@ -77,17 +104,17 @@ body {
 }
 
 header h1#doc-title {
-	font-family: "Nabla", system-ui;
-	font-size: 2.5em;
+	font-family: var(--font-family-title);
+	font-size: var(--font-size-title);
 	text-shadow: #000000 0px 0px 3px;
-	background: linear-gradient(to right, #ff9800 0%, rgba(255, 152, 0, 0) 100%);
-	color: #ff9800;
+	background: linear-gradient(to right, var(--primary-color) 0%, rgba(255, 152, 0, 0) 100%);
+	color: var(--primary-color);
 	font-weight: bold;
 	-webkit-background-clip: text;
 }
 
 h1#doc-title {
-	font-family: "Kanit", sans-serif;
+	font-family: var(--font-family-kanit);
 	/*   font-weight: 400; */
 	font-style: normal;
 }
@@ -96,35 +123,35 @@ h1#doc-title {
 #content h3,
 #content h4 {
 	color: #000000;
-	font-family: "Space Grotesk", sans-serif;
+	font-family: var(--font-family-heading);
 	/* margin-top: 20px; */
-	font-weight: 900;
-	font-size: 1.5em;
+	font-weight: var(--font-weight-heading);
+	font-size: var(--font-size-heading);
 	padding: 0.25em 0px;
 }
 
 #content p {
-	font-size: 1.05em;
+	font-size: var(--font-size-main-content);
 	color: #444;
-	font-weight: 400;
+	font-weight: var(--font-weight-normal);
 	line-height: 1.8;
 	margin-bottom: 20px;
 }
 
 #content ul,
 #content ol {
-	font-size: 1.05em;
+	font-size: var(--font-size-main-content);
 	color: #444;
-	font-weight: 400;
+	font-weight: var(--font-weight-normal);
 	margin-left: 20px;
 	line-height: 1.8;
 }
 
 #content a {
-	font-weight: 600;
-	color: #ff9800;
+	font-weight: var(--font-weight-bold);
+	color: var(--primary-color);
 	text-decoration: none;
-	transition: color 0.3s;
+	transition: color var(--transition-duration);
 }
 
 #content a:hover {
@@ -132,83 +159,76 @@ h1#doc-title {
 }
 
 #content li a {
-	font-weight: 600;
-	color: #1a73e8;
+	font-weight: var(--font-weight-bold);
+	color: var(--secondary-color);
 	text-decoration: none;
-	transition: color 0.3s;
+	transition: color var(--transition-duration);
 }
 
 #content li a:hover {
-	color: #ff9800;
+	color: var(--primary-color);
 }
 
 #content ul li {
-	font-family: "Space Grotesk", sans-serif;
+	font-family: var(--font-family-heading);
 	font-variation-settings: "wdth" 100;
-	font-weight: 400;
+	font-weight: var(--font-weight-normal);
 	> a {
-		font-family: "Titillium Web", sans-serif;
-		font-weight: 600;
+		font-family: var(--font-family-alt);
+		font-weight: var(--font-weight-bold);
 		font-style: normal;
 	}
 }
 
 #right-nav {
 	width: 200px;
-	background-color: #f8f9fa;
-	color: #333;
+	background-color: var(--right-nav-bg-color);
+	color: var(--text-color);
 	padding: 20px;
-	border-left: 1px solid #ddd;
+	border-left: 1px solid var(--right-nav-border-color);
 	overflow-y: auto;
 	position: fixed;
 	right: 0;
 	top: 0;
 	height: 100vh;
- > #right-nav-content ul {
-	list-style: none;
-	padding: 0;
+	> #right-nav-content ul {
+		list-style: none;
+		padding: 0;
 	}
 }
 
 #right-nav h3 {
-	font-size: 1.2em;
-	color: #333;
+	font-size: var(--font-size-right-nav-heading);
+	color: var(--text-color);
 	margin-bottom: 10px;
 }
 
 #right-nav a {
 	display: block;
 	padding: 10px 5px;
-	font-size: 0.95em;
+	font-size: var(--font-size-right-nav);
 	text-decoration: none;
-	color: #333;
-	transition: background-color 0.3s;
+	color: var(--text-color);
+	transition: background-color var(--transition-duration);
 	border-left: 3px solid transparent;
 }
 
 #right-nav a:hover {
-	background-color: #ddd;
-	border-left: 3px solid #ff9800;
-}
-
-#sidebar-content a.active,
-#right-nav a.active {
-	background-color: #444;
-	border-left: 3px solid #ff9800;
-	color: #fff;
+	background-color: var(--right-nav-hover-bg-color);
+	border-left: 3px solid var(--primary-color);
 }
 
 #sidebar-content a.active,
 #right-nav a.active {
-	background-color: #444;
-	border-left: 3px solid #ff9800;
+	background-color: var(--sidebar-hover-bg-color);
+	border-left: 3px solid var(--primary-color);
 	color: #fff;
 }
 
 #right-nav a.active {
-	background-color: #ddd;
-	border-left: 3px solid #ff9800;
-	color: #333;
+	background-color: var(--right-nav-hover-bg-color);
+	border-left: 3px solid var(--primary-color);
+	color: var(--text-color);
 }
 
 /* Existing styles */