diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.html | 11 | ||||
| -rw-r--r-- | src/index.html | 34 | ||||
| -rw-r--r-- | src/js/app.js | 191 | ||||
| -rw-r--r-- | src/scss/style.scss | 50 |
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 |