From 9e3f4bee88ec9666039daaf11ffe8d579b86082d Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sun, 1 Oct 2023 10:50:49 +0800 Subject: init ghrepos and more images, thanks to @2kabhishek --- src/css/ghrepo.css | 296 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/css/index.css | 20 +--- src/css/style.css | 7 +- src/html/headers.html | 13 +++ src/js/getrepo.js | 193 ++++++++++++++++++++++++++++++++ src/js/includehtml.js | 28 +++++ 6 files changed, 538 insertions(+), 19 deletions(-) create mode 100644 src/css/ghrepo.css create mode 100644 src/html/headers.html create mode 100644 src/js/getrepo.js create mode 100644 src/js/includehtml.js (limited to 'src') diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css new file mode 100644 index 00000000..fb038036 --- /dev/null +++ b/src/css/ghrepo.css @@ -0,0 +1,296 @@ +@media (prefers-color-scheme: light) { + :root { + --text: #151515; + --accent: #1688f0; + --bg-main: #fff; + --bg-repo: #f0f0f0; + --bg-user: #f5f5f5; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #e5e5e5; + --accent: #1688f0; + --bg-main: #000; + --bg-repo: #0f0f1a; + --bg-user: #0a0a0f; + } +} + +* { + box-sizing: border-box; + /* background-image: url(/images/backgroundNightCity.jpg); */ + background: transparent; +} + +body { + display: flex; + align-items: center; + justify-content: center; + margin: 0; + margin-top: (3em); + font-family: 'Open Sans', sans-serif; + background-image: url(/images/heigh-grass.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + font-size: 16px; +} + +main { + margin-top: 3em +} + +.container { + display: flex; + justify-content: center; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + width: 90%; + max-width: 1280px; + background: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.container small, h1 { + background: transparent; +} + +.hide { + /* '!important' is to make sure that when we add the class using JS, it takes precendence */ + display: none !important; +} + +h1 { + color: var(--accent); + margin-bottom: 4px; +} + +small { + width: 100%; + text-align: center; + display: block; + margin-bottom: 20px; +} + +h2 { + width: 100%; + text-align: center; + color: var(--text); + margin: 0; +} + +img { + border: 2px solid var(--accent); + box-shadow: 0 0px 6px var(--accent), 0 0px 6px var(--accent); + max-width: 100%; + height: auto; +} + +a { + background: transparent; + color: var(--accent); + text-decoration: none; +} + +a:hover { + /* color: var(--text); */ + background: rgba(0, 0, 0, 0.1); +} + +.github-img { + width: 45px; + margin-right: 8px; +} + +ul { + list-style: none; + padding: 0; +} + +.user-info { + display: flex; + flex-wrap: wrap; + justify-content: center; + /* background-image: url(/images/backgroundNightCity.jpg); */ + background: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + color: var(--text); + font-size: 18px; + padding: 2em; + border-radius: 16px; +} + +.user-info figure { + width: 90%; + max-width: 250px; + background: transparent; +} + +.user-info img { + border-radius: 100%; +} + +.user-info div { + display: flex; + text-align: center; + flex-wrap: wrap; + align-items: center; + width: 100%; + padding-left: 5%; +} + +.user-info div p { + width: 100%; + margin: 0; + padding: 0; + border-bottom: 1px solid var(--text); + padding-bottom: 18px; + background: transparent; +} + +.filter-repos, +input { + background: rgba(10, 10, 15, 0.3); + width: 50%; + border-radius: 20px; + min-width: 300px; + margin-top: 1em; + padding: 1em; + margin-bottom: 1em; + border: 2px solid var(--accent); + text-align: center; +} + +.filter-repos:hover { + background: rgba(10, 10, 15, 0.5); +} + +.repos { + display: flex; + flex-wrap: wrap; + justify-content: center; + background: rgba(128, 128, 128, 0.2); + margin-top: 0; + padding: 2em; + /* border-bottom-left-radius: 20px; */ + /* border-bottom-right-radius: 20px; */ + border-radius: 16px; + margin-bottom: 4em; +} + +h3 { + margin: 4px; + width: 100%; + text-align: center; + color: var(--accent); +} + +.repo-list { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + background: transparent; + /* background: rgba(128, 128, 128, 0.2); */ + +} + +.repo-list li { + width: 100%; + min-height: 180px; + border-radius: 10px; + margin: 1em 0; + border: 1px solid var(--accent); + padding: 1em; + text-align: center; + background: transparent; + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + /* background: rgba(128, 128, 128, 0.3); */ +} + +.repo-list h3, span{ + background: transparent; +} + +.repo-list li:hover { + box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); + background: rgba(0, 0, 0, 0.5); +} + +.link-btn { + padding: 10px 20px; + /* background: var(--bg-main); */ + /* background: rgba(0, 0, 0, 0.5); */ + background: rgba(128, 128, 128, 0.1); + border-radius: 30px; + border: 2px solid var(--accent); + color: var(--text); +} + +.link-btn:hover { + background: rgba(22, 136, 240, 0.5); + border: 2px solid var(--text); + transform: scale(1.1); +} + +.repo-list p { + padding: 0em 0.5em; + margin: 0.5em 0; + background: transparent; +} + +.user-info { + background: transparent; + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + +} + +@media (min-width: 700px) { + .user-info div { + width: 45%; + text-align: left; + /* background: rgba(10, 10, 15, 0.1); */ + background: transparent; + } + + .repo-list { + justify-content: space-between; + } + + .repo-list li { + width: 48%; + } +} + +.repo { + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + +} + +.user-info * { + background: transparent; +} + +@media (max-width: 700px) { + .user-info div p { + margin: 10px; + + } +} + +@media (min-width: 1200px) { + .repo-list li { + width: 30%; + } +} diff --git a/src/css/index.css b/src/css/index.css index ea48c8ff..29262abf 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -33,8 +33,8 @@ height: 100%; border: 1px solid rgba(255,255,255, .5); border-radius: 0.7em; - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(16px); + backdrop-filter: blur(16px); box-shadow: 0 0 10mm rgba(0,0,0,.7); display: flex; justify-content: center; @@ -50,7 +50,7 @@ .window .placeholder .text .title { font-family: smooth; - font-size: 15vw; + font-size: 12.5vw; } .window .placeholder .text .br { @@ -59,17 +59,3 @@ width: 0; margin-bottom: 5vh; } - - -/* programs =============================================== */ - -.programs { - text-align: center; - background-color: #F4E8C1; - color: #331E38; -} - -.programs .programsList { - padding: 10vw; - line-height: 40px; -} \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index 3966446b..410e9646 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -43,7 +43,7 @@ header { height: 3em; justify-content: space-between; align-items:center; - background: color(0, 0, 0, .1); + /* background: color(0, 0, 0, .1); */ z-index: 1000; background-color: #331E38; } @@ -82,6 +82,9 @@ header { transform: scaleX(1); } +.navBar a:hover { + background: rgba(255, 255, 255, 0.3); +} .navBar a.active::after { content: ''; @@ -106,4 +109,4 @@ header { section { position: relative; -} \ No newline at end of file +} diff --git a/src/html/headers.html b/src/html/headers.html new file mode 100644 index 00000000..b212099b --- /dev/null +++ b/src/html/headers.html @@ -0,0 +1,13 @@ + + diff --git a/src/js/getrepo.js b/src/js/getrepo.js new file mode 100644 index 00000000..4c92b9c3 --- /dev/null +++ b/src/js/getrepo.js @@ -0,0 +1,193 @@ +const username = 'littleblack111'; +const clientId = '8aa6ec904eca5e0bc1e3' +const clientSecret = 'b9ac8092b0b95f86871f5d1da81f666146d71200'; +const hideForks = true; +const repoList = document.querySelector('.repo-list'); +const reposSection = document.querySelector('.repos'); +const filterInput = document.querySelector('.filter-repos'); + +// get information from github profile +const getProfile = async () => { + const res = await fetch( + `https://api.github.com/users/${username}`, + { + headers: { + Accept: 'application/vnd.github+json', + Authorization: //'token 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' + `Basic ${btoa(`${clientId}:${clientSecret}`)}` + } + } + ); + const profile = await res.json(); + displayProfile(profile); +}; +getProfile(); + +// display infomation from github profile +const displayProfile = (profile) => { + const userInfo = document.querySelector('.user-info'); + userInfo.innerHTML = ` +
+ user avatar +
+
+

${profile.name}

+

${profile.bio}

+

+ Mail: ${profile.email} +

+

+ Location: ${profile.location} +

+

+ @${profile.login} + Repos: ${profile.public_repos} + Gists: ${profile.public_gists} +

+
+ `; +}; + +// get list of user's public repos +const getRepos = async () => { + let repos = []; + let res; + res = await fetch( + `https://api.github.com/users/${username}/repos?&sort=pushed`, + { + headers: { + Accept: 'application/vnd.github+json', + Authorization: + `Basic ${btoa(`${clientId}:${clientSecret}`)}` + // 'token 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' + } + } + ); + let data = await res.json(); + repos = repos.concat(data); + repos.sort((a, b) => b.forks_count - a.forks_count); + repos.sort((a, b) => b.stargazers_count - a.stargazers_count); + displayRepos(repos); +}; +getRepos(); + +// display list of all user's public repos +const displayRepos = (repos) => { + const userHome = `https://github.com/${username}` + filterInput.classList.remove('hide'); + for (const repo of repos) { + if (repo.fork && hideForks) { + continue; + } + + const langUrl = `${userHome}?tab=repositories&q=&language=${repo.language}` + const starsUrl = `${userHome}/${repo.name}/stargazers` + const forksUrl = `${userHome}/${repo.name}/network/members` + + let listItem = document.createElement('li'); + listItem.classList.add('repo'); + listItem.innerHTML = ` +

${repo.name}

+ ${repo.description ? `${repo.description}` : ''}

` + + if (repo.stargazers_count > 0) { + listItem.innerHTML += ` + ⭐ ${repo.stargazers_count}` + } + + if (repo.language) { + listItem.innerHTML += ` + ${devicons[repo.language]}` + } + + if (repo.forks_count > 0) { + listItem.innerHTML += ` + ${devicons["Git"]} ${repo.forks_count}` + } + + if (repo.homepage && repo.homepage !== "") { + listItem.innerHTML += `

+ Code ${devicons["Github"]} + Live ${devicons["Chrome"]}
`; + } else { + listItem.innerHTML += `

+ View Project ${devicons["Github"]}
`; + } + + repoList.append(listItem); + } +}; + +// dynamic search +filterInput.addEventListener('input', (e) => { + const search = e.target.value; + const repos = document.querySelectorAll('.repo'); + const searchLowerText = search.toLowerCase(); + + for (const repo of repos) { + const lowerText = repo.innerText.toLowerCase(); + if (lowerText.includes(searchLowerText)) { + repo.classList.remove('hide'); + } else { + repo.classList.add('hide'); + } + } +}); + +// for programming language icons +const devicons = { + Git: '', + Github: '', + Chrome: '', + Assembly: ' Assembly', + 'C#': ' C#', + 'C++': ' C++', + C: ' C', + Clojure: ' C', + CoffeeScript: + ' CoffeeScript', + Crystal: ' Crystal', + CSS: ' CSS', + Dart: ' Dart', + Dockerfile: ' Docker', + Elixir: ' Elixir', + Elm: ' Elm', + Erlang: ' Erlang', + 'F#': ' F#', + Go: ' Go', + Groovy: ' Groovy', + HTML: ' HTML', + Haskell: ' Haskell', + Java: ' Java', + JavaScript: ' JavaScript', + Julia: ' Julia', + 'Jupyter Notebook': ' Jupyter', + Kotlin: ' Kotlin', + Latex: ' Latex', + Lua: ' Lua', + Matlab: ' Matlab', + Nim: ' Nim', + Nix: ' Nix', + ObjectiveC: ' ObjectiveC', + OCaml: ' OCaml', + Perl: ' Perl', + PHP: ' PHP', + PLSQL: ' PLSQL', + Processing: + ' Processing', + Python: ' Python', + R: ' R', + Ruby: ' Ruby', + Rust: ' Rust', + Sass: ' Sass', + Scala: ' Scala', + Shell: ' Shell', + Solidity: ' Solidity', + Stylus: ' Stylus', + Svelte: ' Svelte', + Swift: ' Swift', + Terraform: ' Terraform', + TypeScript: ' TypeScript', + 'Vim Script': ' Vim Script', + Vue: ' Vue', +}; diff --git a/src/js/includehtml.js b/src/js/includehtml.js new file mode 100644 index 00000000..7b00285f --- /dev/null +++ b/src/js/includehtml.js @@ -0,0 +1,28 @@ +function includeHTML() { + var z, i, elmnt, file, xhttp; + /*loop through a collection of all HTML elements:*/ + z = document.getElementsByTagName("*"); + for (i = 0; i < z.length; i++) { + elmnt = z[i]; + /*search for elements with a certain atrribute:*/ + file = elmnt.getAttribute("include-html"); + if (file) { + /*make an HTTP request using the attribute value as the file name:*/ + xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4) { + if (this.status == 200) {elmnt.innerHTML = this.responseText;} + if (this.status == 404) {elmnt.innerHTML = "Page not found.";} + /*remove the attribute, and call this function once more:*/ + elmnt.removeAttribute("include-html"); + includeHTML(); + } + } + xhttp.open("GET", file, true); + xhttp.send(); + /*exit the function:*/ + return; + } + } +}; + -- cgit v1.2.3