Moved most of the page to js, added settings & removed a bunch of hardcoded stuff

author: HampusM <hampus@hampusmat.com> 2021-04-20 10:36:55 +0200
committer: HampusM <hampus@hampusmat.com> 2021-04-20 10:36:55 +0200
commit: 5bbbbad5f192afba603892d6b46aa53be4e71b18 (patch)
tree: 50b15dad6c3cdb66291bd2846ded505bd75cd359 /src
parent: 15992970bc9d3eec402f6d85e40236e3095f0fc0 (diff)
4 files changed, 231 insertions, 55 deletions
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..b980ff8
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="scss/style.scss">
+		<script type="text/javascript" src="js/app.js"></script>
+	</head>
+	<body>
+		<div id="container" class="container-fluid px-0"></div>
+	</body>
+</html>
+\ No newline at end of file
diff --git a/src/index.html b/src/index.html
deleted file mode 100644
index 0c607b3..0000000
--- a/src/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<link rel="stylesheet" href="scss/style.scss">
-		<script type="text/javascript" src="js/app.js"></script>
-	</head>
-	<body>
-		<div class="container-fluid px-0">
-			<div class="row mx-0">
-				<div class="col ms-4 mt-2" id="header">
-					<a id="title" class="fs-1" href="/">HampusMat's Git Repository</a>
-					<p id="about">The source code of various of my projects</p>
-				</div>
-			</div>
-			<div class="row mx-0 mt-5">
-				<div id="projects-header" class="col ms-5">
-					<p class="fs-2">Projects</p>
-				</div>
-				<div id="projects-search" class="col d-flex justify-content-end">
-					<form>
-						<input type="search" name="q">
-						<input type="submit" value="Search">
-					</form>
-				</div>
-			</div>
-			<div class="row mx-0">
-				<div class="col ms-5">
-					<ul id="repos"></ul>
-				</div>
-			</div>
-		</div>
-	</body>
-</html>
-\ No newline at end of file
diff --git a/src/js/app.js b/src/js/app.js
index d39d848..aa8ce9c 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -20,10 +20,90 @@ function request(method, source, data = null)
 	});
 }
 
+async function buildHeader(container, endpoint, title_text, about_text, repo_page = false)
+{
+	const info = JSON.parse(await request("GET", `http://localhost:1337/api/v1/${endpoint}`))["data"];
 
-document.addEventListener("DOMContentLoaded", async function ()
+	const row_div = document.createElement("div");
+	row_div.classList.add("row", "mx-0");
+
+	const col_div = document.createElement("div");
+	col_div.classList.add("col", "ms-4", "mt-2");
+	col_div.setAttribute("id", "header");
+
+	const title = document.createElement("a");
+	title.classList.add("fs-1");
+	title.setAttribute("id", "title");
+	title.setAttribute("href", "/");
+	title.appendChild(document.createTextNode(info[title_text]));
+
+	const about = document.createElement("p");
+	about.setAttribute("id", "about");
+	about.classList.add("mb-3", "fs-4")
+	about.appendChild(document.createTextNode(info[about_text]));
+
+	col_div.appendChild(title);
+	col_div.appendChild(about);
+
+	if(repo_page) {
+		buildBackSVG(col_div);
+	}
+
+	row_div.appendChild(col_div);
+
+	container.appendChild(row_div);
+}
+
+function buildProjectsHeader(container)
+{
+	const row_div = document.createElement("div");
+	row_div.classList.add("row", "mx-0", "mt-5");
+
+	// Title column
+	const title_col_div = document.createElement("div");
+	title_col_div.classList.add("col", "ms-4");
+	title_col_div.setAttribute("id", "projects-header");
+
+	const projects_title = document.createElement("p");
+	projects_title.classList.add("fs-1");
+	projects_title.appendChild(document.createTextNode("Projects"));
+
+	title_col_div.appendChild(projects_title);
+
+	// Search column
+	const search_col_div = document.createElement("div");
+	search_col_div.classList.add("col", "d-flex", "justify-content-end");
+	search_col_div.setAttribute("id", "projects-search");
+
+	const form = document.createElement("form");
+	const search = document.createElement("input");
+	search.setAttribute("type", "search");
+	search.setAttribute("name", "q");
+	const submit = document.createElement("input");
+	submit.setAttribute("type", "submit");
+	submit.setAttribute("value", "Search");
+	
+	form.appendChild(search);
+	form.appendChild(submit);
+	search_col_div.appendChild(form);
+	
+	row_div.appendChild(title_col_div);
+	row_div.appendChild(search_col_div);
+
+	container.appendChild(row_div);
+}
+
+async function buildProjects(container)
 {
-	const list = document.getElementById("repos");
+	const row_div = document.createElement("div");
+	row_div.classList.add("row", "mx-0");
+
+	const col_div = document.createElement("div");
+	col_div.classList.add("col", "ms-4");
+	
+	const list = document.createElement("ul");
+	list.setAttribute("id", "repos");
+
 	const repos = JSON.parse(await request("GET", "http://localhost:1337/api/v1/repos"))["data"];
 
 	const params = new URLSearchParams(window.location.search);
@@ -38,15 +118,15 @@ document.addEventListener("DOMContentLoaded", async function ()
 		link.setAttribute("href", key);
 		link.appendChild(document.createTextNode(key));
 		repo_title.appendChild(link);
-		repo_title.classList.add("repo-title");
+		repo_title.classList.add("fs-3");
 
 		const repo_last_updated = document.createElement("span");
 		repo_last_updated.appendChild(document.createTextNode(`Last updated about ${value["last_updated"]} ago`));
-		repo_last_updated.classList.add("repo-last-updated");
+		repo_last_updated.classList.add("repo-last-updated", "fs-4");
 
 		const repo_desc = document.createElement("span");
 		repo_desc.appendChild(document.createTextNode(value["description"]));
-		repo_desc.classList.add("repo-desc");
+		repo_desc.classList.add("fs-4");
 
 		repo_div.appendChild(repo_title)
 		repo_div.appendChild(repo_last_updated)
@@ -63,4 +143,105 @@ document.addEventListener("DOMContentLoaded", async function ()
 			list.appendChild(li);
 		}
 	}
+
+	col_div.appendChild(list);
+	row_div.appendChild(col_div);
+	container.appendChild(row_div);
+}
+
+function buildRepoNavbar(container, repo, page)
+{
+	const row_div = document.createElement("div");
+	row_div.classList.add("row", "mx-0");
+
+	const col_div = document.createElement("div");
+	col_div.classList.add("col", "ms-3");
+	col_div.setAttribute("id", "repo-navbar");
+
+	const nav = document.createElement("nav");
+	nav.classList.add("navbar", "navbar-expand", "navbar-dark");
+
+	const nav_container = document.createElement("div");
+	nav_container.classList.add("container-fluid", "px-0");
+
+	const nav_collapse = document.createElement("div");
+	nav_collapse.classList.add("collapse", "navbar-collapse");
+
+	const nav_nav = document.createElement("ul");
+	nav_nav.classList.add("navbar-nav");
+
+	const nav_items = ["log", "refs", "tree"];
+
+	nav_items.forEach(item =>
+	{
+		const item_li = document.createElement("li");
+		item_li.classList.add("nav-item");
+
+		const item_link = document.createElement("a");
+		item_link.classList.add("nav-link", "fs-3");
+		if(item === page) {
+			item_link.classList.add("active");
+			item_link.setAttribute("aria-current", "page");
+		}
+		item_link.setAttribute("href", `/${repo}/${item}`);
+		item_link.appendChild(document.createTextNode(item));
+
+		item_li.appendChild(item_link);
+		
+		nav_nav.appendChild(item_li);
+	});
+
+	nav_collapse.appendChild(nav_nav);
+	nav_container.appendChild(nav_collapse);
+	nav.appendChild(nav_container);
+	col_div.appendChild(nav);
+	row_div.appendChild(col_div);
+	container.appendChild(row_div);
+}
+
+function buildBackSVG(container)
+{
+	const xmlns = "http://www.w3.org/2000/svg";
+
+	let svg = document.createElementNS(xmlns, "svg");
+	
+	svg.setAttributeNS(null, "height", "24px");
+	svg.setAttributeNS(null, "width", "24px");
+	svg.setAttributeNS(null, "viewBox", "0 0 24 24");
+	svg.setAttributeNS(null, "fill", "#FFFFFF");
+
+	const path_one = document.createElementNS(xmlns, "path");
+	path_one.setAttributeNS(null, "d", "M0 0h24v24H0z");
+	path_one.setAttributeNS(null, "fill", "none");
+
+	const path_two = document.createElementNS(xmlns, "path");
+	path_two.setAttributeNS(null, "d", "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z");
+
+	svg.appendChild(path_one);
+	svg.appendChild(path_two);
+	container.appendChild(svg);
+}
+
+document.addEventListener("DOMContentLoaded", async function ()
+{
+	let path = window.location.pathname;
+
+	if(path === "/") {
+		const container = document.getElementById("container");
+		await buildHeader(container, "info", "title", "about");
+		buildProjectsHeader(container);	
+		buildProjects(container);
+	}
+
+	const path_valid_and_split = /\/([a-zA-Z0-9\.\-_]+)\/([a-z]+)$/;
+	if(path_valid_and_split.test(path)) {
+		path = path_valid_and_split.exec(path);
+		const repo = path[1];
+		const page = path[2];
+		
+		const container = document.getElementById("container");
+
+		await buildHeader(container, `repos/${repo}`, "name", "description", true);
+		buildRepoNavbar(container, repo, page);
+	}
 });
 \ No newline at end of file
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 239194b..aa9bd02 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -5,17 +5,30 @@
 @import "../../node_modules/bootstrap/scss/variables";
 @import "../../node_modules/bootstrap/scss/mixins";
 
+$font-size-base: 0.75rem;
+
+$h1-font-size:                $font-size-base * 2.5;
+$h2-font-size:                $font-size-base * 2;
+$h3-font-size:                $font-size-base * 1.75;
+$h4-font-size:                $font-size-base * 1.4;
+$h5-font-size:                $font-size-base * 1.125;
+$h6-font-size:                $font-size-base;
+
 $font-sizes: (
-	1: 2.375rem,
-	2: 2.125rem,
-	3: 2rem,
-	4: 1.5rem,
-	5: 1.3125rem,
-	6: 1rem
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size
 );
 
+$navbar-nav-link-padding-x: 1rem;
+
 @import "../../node_modules/bootstrap/scss/utilities";
 @import "../../node_modules/bootstrap/scss/utilities/api";
+@import "../../node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/navbar";
 
 @import "../../node_modules/bootstrap/scss/containers";
 @import "../../node_modules/bootstrap/scss/grid";
@@ -51,7 +64,6 @@ p {
 
 #about {
 	font-weight: 300;
-	font-size: 1.125rem;
 	padding-left: 1px;
 }
 
@@ -71,17 +83,8 @@ p {
 	margin-top: 25px;
 }
 
-.repo-title {
-	font-size: calc(1.0625rem + 0.25vw);
-}
-
-.repo-desc {
-	font-size: calc(0.875rem + 0.05vw);
-}
-
 .repo-last-updated {
 	display: block;
-	font-size: calc(0.875rem + 0.05vw);
 	font-weight: 300;
 	font-style: italic;
 }
@@ -100,4 +103,19 @@ a {
 	&:hover {
 		color: colors.$primary;
 	}
+}
+
+@media (max-width: 1200px) {
+	.fs-1 {
+		font-size: calc(1.375rem + 0.667vw) !important;
+	}
+	.fs-2 {
+		font-size: calc(1.325rem + 1.584vw) !important;
+	}
+	.fs-3 {
+		font-size: calc(1.3rem + 0.017vw) !important;
+	}
+	.fs-4 {
+		font-size: calc(0.75rem + 0.4vw) !important;
+	}
 }
 \ No newline at end of file
author	HampusM <hampus@hampusmat.com>	2021-04-20 10:36:55 +0200
committer	HampusM <hampus@hampusmat.com>	2021-04-20 10:36:55 +0200
commit	5bbbbad5f192afba603892d6b46aa53be4e71b18 (patch)
tree	50b15dad6c3cdb66291bd2846ded505bd75cd359 /src
parent	15992970bc9d3eec402f6d85e40236e3095f0fc0 (diff)