💄 Improve the UX of the data site

NMSUD · Feb 5, 2024 · ea66a05 · ea66a05
1 parent d0ebfbb
commit ea66a05
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/buildIndex.js b/buildIndex.js
@@ -7,21 +7,25 @@ const exportFolder = 'data';
 
 async function generateHtml() {
 	await copyFile('./CNAME', `./${exportFolder}/CNAME`);
-	await generateHtmlForFolder(`./${exportFolder}`);
+	await generateHtmlForFolder(`./${exportFolder}`, [`<a href="/">🏠 Home</a>`]);
 }
 
-async function generateHtmlForFolder(folder) {
+async function generateHtmlForFolder(folder, breadcrumbs) {
 	let fileLists = [];
 
 	const allFiles = fs.readdirSync(folder, { withFileTypes: true });
 	for (const dirent of allFiles) {
 		if (dirent.isDirectory()) {
 			fileLists.push(getLink(0, dirent.name));
-			await generateHtmlForFolder(`./${folder}/${dirent.name}`, `./${dirent.name}/`);
+			await generateHtmlForFolder(
+				`./${folder}/${dirent.name}`, 
+				[...breadcrumbs, `<a href="/${folder}">${dirent.name}</a>`]
+				);
 			continue;
 		}
 
 		if (dirent.name.includes('index.html')) continue;
+		if (dirent.name.includes('CNAME')) continue;
 		if (dirent.name[0] == ".") continue;
 		if (dirent.name[0] == "_") continue;
 		fileLists.push(getLink(1, dirent.name));
@@ -33,15 +37,26 @@ async function generateHtmlForFolder(folder) {
 <!DOCTYPE html>
 <html>
 <head>
+	<title>NMSUD - Data browser</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
 	<style>
+		h3 li a,
 		ul li a {
 			text-decoration: none;
+            color: lightblue;
+		}
+		body {
+			background: #1c222f;
+			color: #FFFFFF;
 		}
 	</style>
 </head>
 <body>
 
 	<h1>NMSUD - Data browser</h1>
+	<h3>${breadcrumbs.join('&nbsp;&nbsp;/&nbsp;&nbsp;')}</h3>
 	
 	<hr />