code refactor

src/lib/components/Footer.svelte

@@ -1,3 +1,7 @@
+<script>
+	import "$lib/styles/style.css";
+</script>
+
 <!-- Footer.svelte -->
 <footer>
 	<a href="/">Home</a>
@@ -16,10 +20,6 @@
 	</nav>
 </footer>
 
-<script>
-	import '$lib/styles/style.css';
-</script>
-
 <style>
 	footer {
 		padding: 1rem;

src/lib/components/Header.svelte

@@ -1,7 +1,10 @@
 <!-- Header.svelte -->
 <header>
 	<div class="header-title">
-		<a href="/"><img src="/favicon.png" alt="logo" width="50" height="50"><h1 style="">wiki.jonasjones.dev</h1></a>
+		<a href="/"
+			><img src="/favicon.png" alt="logo" width="50" height="50" />
+			<h1 style="">wiki.jonasjones.dev</h1></a
+		>
 	</div>
 	<nav>
 		<ul>
@@ -45,10 +48,10 @@
 	}
 
 	h1 {
-		font-size:35px;
-		padding:0;
-		margin:0;
-		margin-left:20px;
+		font-size: 35px;
+		padding: 0;
+		margin: 0;
+		margin-left: 20px;
 		float: left;
 	}
 

src/lib/components/Navbar.svelte

@@ -1,23 +1,33 @@
 <script>
-	let data = import.meta.glob('/src/routes/**/+page.md');
+	// @ts-nocheck
+
+	let data = import.meta.glob("/src/routes/**/+page.md");
 	let paths = data;
-  
+
+	/**
+	 * @param {Record<string, () => Promise<unknown>>} paths
+	 */
 	function buildHierarchy(paths) {
 		const nestedList = {};
 		let fixedpaths = [];
+		/**
+		 * @type {string[]}
+		 */
 		let fixedpaths2 = [];
 		fixedpaths = Object.keys(paths);
 		fixedpaths.forEach((path) => {
-			const fixedpath = path.replace("/+page.md", "").replace("/src/routes", "");
+			const fixedpath = path
+				.replace("/+page.md", "")
+				.replace("/src/routes", "");
 			fixedpaths2.push(fixedpath);
 		});
 		fixedpaths2.forEach((folder) => {
-			const parts = folder.split('/').filter(Boolean);
+			const parts = folder.split("/").filter(Boolean);
 			let currentNode = nestedList;
 
 			parts.forEach((part) => {
 				if (!currentNode[part]) {
-				currentNode[part] = {};
+					currentNode[part] = {};
 				}
 				currentNode = currentNode[part];
 			});
@@ -26,17 +36,25 @@
 		return nestedList;
 	}
 
-  const nestedFolders = buildHierarchy(paths);
+	const nestedFolders = buildHierarchy(paths);
 
-  // Helper function to recursively render the nested list
-  function renderNestedList(node, prefix = '') {
-    return Object.keys(node).map((key) => {
-      const fullPath = `${prefix}/${key}`;
-      return `<li><a href="${fullPath}">${key}</a><ul>${renderNestedList(node[key], fullPath)}</ul></li>`;
-    }).join('');
-  }
+	// Helper function to recursively render the nested list
+	/**
+	 * @param {{ [x: string]: any; }} node
+	 */
+	function renderNestedList(node, prefix = "") {
+		return Object.keys(node)
+			.map((key) => {
+				const fullPath = `${prefix}/${key}`;
+				return `<li><a href="${fullPath}">${key}</a><ul>${renderNestedList(
+					node[key],
+					fullPath
+				)}</ul></li>`;
+			})
+			.join("");
+	}
 
-  const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
+	const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
 </script>
 
 <div class="container navbar">
@@ -46,4 +64,4 @@
 			{@html renderedList}
 		</div>
 	</div>
-</div>
+</div>

src/lib/styles/style.css

@@ -1,14 +1,12 @@
 /* style.css */
-
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
 
 @font-face {
-  font-family: 'sary_soft_semiboldregular';
-  src: url('/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'),
-       url('/font/sary-soft.soft-semibold-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-
+	font-family: 'sary_soft_semiboldregular';
+	src: url('/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'),
+		url('/font/sary-soft.soft-semibold-webfont.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
 }
 
 :root {
@@ -64,46 +62,46 @@ main {
 	margin: 2rem;
 	background-color: var(--container-background-color);
 	border-radius: 0.5rem;
-	overflow:visible;
-  }
+	overflow: visible;
+}
 
-  .flex_grow {
+.flex_grow {
 	flex-grow: 1;
-  }
+}
 
-  .navbar {
+.navbar {
 	float: left;
 	padding: 2rem;
-  }
+}
 
-  ul {
+ul {
 	padding-left: 10px;
-  }
+}
 
-  .container {
+.container {
 	display: flex;
-  }
-  
-  .row:after {
+}
+
+.row:after {
 	content: "";
 	display: table;
 	clear: both;
-  }
+}
 
-  .not-selectable {
+.not-selectable {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
 	-khtml-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
-  }
+}
 
-  a {
+a {
 	color: var(--link-text-color);
 	text-decoration: none;
-  }
+}
 
-  a:hover {
+a:hover {
 	color: var(--text-color);
-  }
+}

src/routes/+layout.svelte

@@ -1,10 +1,10 @@
 <script>
-	import Header from '$lib/components/Header.svelte';
-    import Footer from '$lib/components/Footer.svelte';
-    import Navbar from '$lib/components/Navbar.svelte';
-
+    import Header from "$lib/components/Header.svelte";
+    import Footer from "$lib/components/Footer.svelte";
+    import Navbar from "$lib/components/Navbar.svelte";
 </script>
-<div style="height:2rem"></div>
+
+<div style="height:2rem" />
 <Header />
 <div class="container">
     <div class="column"><Navbar /></div>
@@ -12,10 +12,16 @@
         <main>
             <slot />
             <!-- Please god forgive me -->
-            <h1 style="color: var(--container-background-color);margin:0;padding:0" class="unselectable">YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS</h1>
+            <h1
+                style="color: var(--container-background-color);margin:0;padding:0"
+                class="unselectable"
+            >
+                YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT
+                SEE THIS
+            </h1>
         </main>
     </div>
 </div>
 
 <Footer />
-<div style="height:2rem"></div>
+<div style="height:2rem" />