diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.html | 27 | ||||
| -rw-r--r-- | src/js/app.js | 66 | ||||
| -rw-r--r-- | src/scss/abstracts/_colors.scss | 3 | ||||
| -rw-r--r-- | src/scss/abstracts/_fonts.scss | 5 | ||||
| -rw-r--r-- | src/scss/style.scss | 103 |
5 files changed, 202 insertions, 2 deletions
diff --git a/src/index.html b/src/index.html index 1d91a18..0c607b3 100644 --- a/src/index.html +++ b/src/index.html @@ -2,10 +2,33 @@ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="scss/style.scss"> + <script type="text/javascript" src="js/app.js"></script> </head> <body> - Hello world! + <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 new file mode 100644 index 0000000..d39d848 --- /dev/null +++ b/src/js/app.js @@ -0,0 +1,66 @@ +function request(method, source, data = null) +{ + return new Promise(function (resolve, reject){ + let xhr = new XMLHttpRequest(); + xhr.open(method, source, true); + xhr.setRequestHeader("Content-Type", "application/json"); + xhr.send(data); + + xhr.onload = function() + { + if(this.status >= 200 && this.status < 300){ + resolve(xhr.response); + } + resolve({ status: this.status, statusText: xhr.statusText }); + }; + xhr.onerror = () => + { + resolve({ status: this.status, statusText: xhr.statusText }); + } + }); +} + + +document.addEventListener("DOMContentLoaded", async function () +{ + const list = document.getElementById("repos"); + const repos = JSON.parse(await request("GET", "http://localhost:1337/api/v1/repos"))["data"]; + + const params = new URLSearchParams(window.location.search); + const search = params.get("q"); + + for(const [key, value] of Object.entries(repos)) { + const li = document.createElement("li"); + const repo_div = document.createElement("div"); + + const repo_title = document.createElement("p"); + const link = document.createElement("a"); + link.setAttribute("href", key); + link.appendChild(document.createTextNode(key)); + repo_title.appendChild(link); + repo_title.classList.add("repo-title"); + + 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"); + + const repo_desc = document.createElement("span"); + repo_desc.appendChild(document.createTextNode(value["description"])); + repo_desc.classList.add("repo-desc"); + + repo_div.appendChild(repo_title) + repo_div.appendChild(repo_last_updated) + repo_div.appendChild(repo_desc) + + li.appendChild(repo_div); + + if(search !== null) { + if(key.indexOf(search) != -1) { + list.appendChild(li); + } + } + else { + list.appendChild(li); + } + } +});
\ No newline at end of file diff --git a/src/scss/abstracts/_colors.scss b/src/scss/abstracts/_colors.scss new file mode 100644 index 0000000..40f08af --- /dev/null +++ b/src/scss/abstracts/_colors.scss @@ -0,0 +1,3 @@ +$primary: #0947ba; +$text: #ffffff; +$background: #121212;
\ No newline at end of file diff --git a/src/scss/abstracts/_fonts.scss b/src/scss/abstracts/_fonts.scss new file mode 100644 index 0000000..6af5233 --- /dev/null +++ b/src/scss/abstracts/_fonts.scss @@ -0,0 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap'); + +$title: 'Oxygen', sans-serif; +$primary: 'Open Sans', sans-serif;
\ No newline at end of file diff --git a/src/scss/style.scss b/src/scss/style.scss index e69de29..239194b 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -0,0 +1,103 @@ +@use "abstracts/colors"; +@use "abstracts/fonts"; + +@import "../../node_modules/bootstrap/scss/functions"; +@import "../../node_modules/bootstrap/scss/variables"; +@import "../../node_modules/bootstrap/scss/mixins"; + +$font-sizes: ( + 1: 2.375rem, + 2: 2.125rem, + 3: 2rem, + 4: 1.5rem, + 5: 1.3125rem, + 6: 1rem +); + +@import "../../node_modules/bootstrap/scss/utilities"; +@import "../../node_modules/bootstrap/scss/utilities/api"; + +@import "../../node_modules/bootstrap/scss/containers"; +@import "../../node_modules/bootstrap/scss/grid"; + +body { + background-color: colors.$background; + color: colors.$text; + font-family: fonts.$primary; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + margin-bottom: 25px; + div { + h2 { + margin: 0px; + } + } +} + +p { + margin: 0px; +} + +#title { + font-family: fonts.$title; + font-weight: 300; +} + +#about { + font-weight: 300; + font-size: 1.125rem; + padding-left: 1px; +} + +#projects-search { + align-items: center; + form { + display: flex; + align-items: center; + height: 35px; + input[type=search] { + margin-right: 15px; + } + } +} + +#repos { + 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; +} + +input[type=submit] { + background-color: colors.$primary; + color: colors.$text; + border: 0px; + border-radius: 7px; + padding: 8px 15px 8px 15px; +} + +a { + color: colors.$text; + text-decoration: none; + &:hover { + color: colors.$primary; + } +}
\ No newline at end of file |