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/js/getrepo.js | 193 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/js/includehtml.js | 28 ++++++++ 2 files changed, 221 insertions(+) create mode 100644 src/js/getrepo.js create mode 100644 src/js/includehtml.js (limited to 'src/js') 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