diff options
| author | littleblack111 <littleblack11111@gmail.com> | 2023-10-29 01:30:19 +0800 |
|---|---|---|
| committer | littleblack111 <littleblack11111@gmail.com> | 2023-10-29 01:30:19 +0800 |
| commit | 1298abd3377cc79d8883bb6e38b65bca46f0c8d7 (patch) | |
| tree | 5422ebd5fb2e4ccff0c6ce16834907521b62e467 /src/js | |
| parent | 4e0cde2e9e7cb2482b6d16dd2109c514fd98eeff (diff) | |
all space -> tab
Diffstat (limited to 'src/js')
| -rw-r--r-- | src/js/getrepo.js | 310 | ||||
| -rw-r--r-- | src/js/hacktype.js | 66 | ||||
| -rw-r--r-- | src/js/header.js | 18 | ||||
| -rw-r--r-- | src/js/rbg.js | 52 |
4 files changed, 223 insertions, 223 deletions
diff --git a/src/js/getrepo.js b/src/js/getrepo.js index 2912427c..d34104a2 100644 --- a/src/js/getrepo.js +++ b/src/js/getrepo.js @@ -8,190 +8,190 @@ 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); + 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 = ` - <figure> - <a href=${profile.html_url}><img alt="user avatar" src=${profile.avatar_url}></a> - </figure> - <div> - <!-- <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2> --> - <h2><a href=/><strong class="usertitle">${profile.name}</strong></a></h2> - <!-- <h2><a href=${profile.html_url}><strong>${profile.name}</strong></a></h2> --> - <p>${profile.bio}</p> - <p> - <strong>Mail:</strong> ${profile.email} - </p> - <p> - <strong>Location:</strong> ${profile.location} - </p> - <p> - <strong>@${profile.login} </strong> - Repos: ${profile.public_repos} - Gists: ${profile.public_gists} - </p> - </div> - `; + const userInfo = document.querySelector('.user-info'); + userInfo.innerHTML = ` + <figure> + <a href=${profile.html_url}><img alt="user avatar" src=${profile.avatar_url}></a> + </figure> + <div> + <!-- <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2> --> + <h2><a href=/><strong class="usertitle">${profile.name}</strong></a></h2> + <!-- <h2><a href=${profile.html_url}><strong>${profile.name}</strong></a></h2> --> + <p>${profile.bio}</p> + <p> + <strong>Mail:</strong> ${profile.email} + </p> + <p> + <strong>Location:</strong> ${profile.location} + </p> + <p> + <strong>@${profile.login} </strong> + Repos: ${profile.public_repos} + Gists: ${profile.public_gists} + </p> + </div> + `; }; // 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); + 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 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` + 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 = ` - <h2 class="repo-title">${repo.name}</h2> - <span class="rdescription">${repo.description ? `<span class="rdescriptiontext">${repo.description}</span>` : ''}<br/><br/>` + let listItem = document.createElement('li'); + listItem.classList.add('repo'); + listItem.innerHTML = ` + <h2 class="repo-title">${repo.name}</h2> + <span class="rdescription">${repo.description ? `<span class="rdescriptiontext">${repo.description}</span>` : ''}<br/><br/>` - if (repo.stargazers_count > 0) { - listItem.innerHTML += `<a href="${starsUrl}"> - <span>⭐ ${repo.stargazers_count}</span></a>` - } + if (repo.stargazers_count > 0) { + listItem.innerHTML += `<a href="${starsUrl}"> + <span>⭐ ${repo.stargazers_count}</span></a>` + } - if (repo.language) { - listItem.innerHTML += `<a href="${langUrl}"> - <span>${devicons[repo.language]}</span></a>` - } + if (repo.language) { + listItem.innerHTML += `<a href="${langUrl}"> + <span>${devicons[repo.language]}</span></a>` + } - if (repo.forks_count > 0) { - listItem.innerHTML += `<a href="${starsUrl}"> - <span>${devicons["Git"]} ${repo.forks_count}</span></a>` - } + if (repo.forks_count > 0) { + listItem.innerHTML += `<a href="${starsUrl}"> + <span>${devicons["Git"]} ${repo.forks_count}</span></a>` + } - if (repo.homepage && repo.homepage !== "") { - listItem.innerHTML += `<br /> <br /> - <a class="link-btn" href=${repo.html_url}>Code ${devicons["Github"]}</a> - <a class="link-btn" href=${repo.homepage}>Live ${devicons["Chrome"]}</a> <br />`; - } else { - listItem.innerHTML += `<br /> <br /> - <a class="link-btn" href=${repo.html_url}>View Project ${devicons["Github"]}</a><br />`; - } + if (repo.homepage && repo.homepage !== "") { + listItem.innerHTML += `<br /> <br /> + <a class="link-btn" href=${repo.html_url}>Code ${devicons["Github"]}</a> + <a class="link-btn" href=${repo.homepage}>Live ${devicons["Chrome"]}</a> <br />`; + } else { + listItem.innerHTML += `<br /> <br /> + <a class="link-btn" href=${repo.html_url}>View Project ${devicons["Github"]}</a><br />`; + } - repoList.append(listItem); - } + repoList.append(listItem); + } }; // dynamic search filterInput.addEventListener('input', (e) => { - const search = e.target.value; - const repos = document.querySelectorAll('.repo'); - const searchLowerText = search.toLowerCase(); + 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 (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: '<i class="devicon-git-plain" style="color: #555"></i>', - Github: '<i class="devicon-github-plain" style="color: #1688f0"></i>', - Chrome: '<i class="devicon-chrome-plain" style="color: #1688f0"></i>', - Assembly: '<i class="devicon-labview-plain colored"></i> Assembly', - 'C#': '<i class="devicon-csharp-plain colored"></i> C#', - 'C++': '<i class="devicon-cplusplus-plain colored"></i> C++', - C: '<i class="devicon-c-plain colored"></i> C', - Clojure: '<i class="devicon-clojure-plain colored"></i> C', - CoffeeScript: - '<i class="devicon-coffeescript-plain colored"></i> CoffeeScript', - Crystal: '<i class="devicon-crystal-plain colored"></i> Crystal', - CSS: '<i class="devicon-css3-plain colored"></i> CSS', - Dart: '<i class="devicon-dart-plain colored"></i> Dart', - Dockerfile: '<i class="devicon-docker-plain colored"></i> Docker', - Elixir: '<i class="devicon-elixir-plain colored"></i> Elixir', - Elm: '<i class="devicon-elm-plain colored"></i> Elm', - Erlang: '<i class="devicon-erlang-plain colored"></i> Erlang', - 'F#': '<i class="devicon-fsharp-plain colored"></i> F#', - Go: '<i class="devicon-go-plain colored"></i> Go', - Groovy: '<i class="devicon-groovy-plain colored"></i> Groovy', - HTML: '<i class="devicon-html5-plain colored"></i> HTML', - Haskell: '<i class="devicon-haskell-plain colored"></i> Haskell', - Java: '<i class="devicon-java-plain colored" style="color: #ffca2c"></i> Java', - JavaScript: '<i class="devicon-javascript-plain colored"></i> JavaScript', - Julia: '<i class="devicon-julia-plain colored"></i> Julia', - 'Jupyter Notebook': '<i class="devicon-jupyter-plain colored"></i> Jupyter', - Kotlin: '<i class="devicon-kotlin-plain colored" style="color: #796bdc"></i> Kotlin', - Latex: '<i class="devicon-latex-plain colored"></i> Latex', - Lua: '<i class="devicon-lua-plain-wordmark colored" style="color: #0000d0"></i> Lua', - Matlab: '<i class="devicon-matlab-plain colored"></i> Matlab', - Nim: '<i class="devicon-nixos-plain colored" style="color: #FFC200"></i> Nim', - Nix: '<i class="devicon-nixos-plain colored"></i> Nix', - ObjectiveC: '<i class="devicon-objectivec-plain colored"></i> ObjectiveC', - OCaml: '<i class="devicon-ocaml-plain colored"></i> OCaml', - Perl: '<i class="devicon-perl-plain colored"></i> Perl', - PHP: '<i class="devicon-php-plain colored"></i> PHP', - PLSQL: '<i class="devicon-sqlite-plain colored"></i> PLSQL', - Processing: - '<i class="devicon-processing-plain colored" style="color: #0096D8"></i> Processing', - Python: '<i class="devicon-python-plain colored" style="color: #3472a6"></i> Python', - R: '<i class="devicon-r-plain colored"></i> R', - Ruby: '<i class="devicon-ruby-plain colored"></i> Ruby', - Rust: '<i class="devicon-rust-plain colored" style="color: #DEA584"></i> Rust', - Sass: '<i class="devicon-sass-original colored"></i> Sass', - Scala: '<i class="devicon-scala-plain colored"></i> Scala', - Shell: '<i class="devicon-bash-plain colored" style="color: #89E051"></i> Shell', - Solidity: '<i class="devicon-solidity-plain colored"></i> Solidity', - Stylus: '<i class="devicon-stylus-plain colored"></i> Stylus', - Svelte: '<i class="devicon-svelte-plain colored"></i> Svelte', - Swift: '<i class="devicon-swift-plain colored"></i> Swift', - Terraform: '<i class="devicon-terraform-plain colored"></i> Terraform', - TypeScript: '<i class="devicon-typescript-plain colored"></i> TypeScript', - 'Vim Script': '<i class="devicon-vim-plain colored"></i> Vim Script', - Vue: '<i class="devicon-vuejs-plain colored"></i> Vue', - Mail: '<i class="nf nf-cod-mail"></i>', + Git: '<i class="devicon-git-plain" style="color: #555"></i>', + Github: '<i class="devicon-github-plain" style="color: #1688f0"></i>', + Chrome: '<i class="devicon-chrome-plain" style="color: #1688f0"></i>', + Assembly: '<i class="devicon-labview-plain colored"></i> Assembly', + 'C#': '<i class="devicon-csharp-plain colored"></i> C#', + 'C++': '<i class="devicon-cplusplus-plain colored"></i> C++', + C: '<i class="devicon-c-plain colored"></i> C', + Clojure: '<i class="devicon-clojure-plain colored"></i> C', + CoffeeScript: + '<i class="devicon-coffeescript-plain colored"></i> CoffeeScript', + Crystal: '<i class="devicon-crystal-plain colored"></i> Crystal', + CSS: '<i class="devicon-css3-plain colored"></i> CSS', + Dart: '<i class="devicon-dart-plain colored"></i> Dart', + Dockerfile: '<i class="devicon-docker-plain colored"></i> Docker', + Elixir: '<i class="devicon-elixir-plain colored"></i> Elixir', + Elm: '<i class="devicon-elm-plain colored"></i> Elm', + Erlang: '<i class="devicon-erlang-plain colored"></i> Erlang', + 'F#': '<i class="devicon-fsharp-plain colored"></i> F#', + Go: '<i class="devicon-go-plain colored"></i> Go', + Groovy: '<i class="devicon-groovy-plain colored"></i> Groovy', + HTML: '<i class="devicon-html5-plain colored"></i> HTML', + Haskell: '<i class="devicon-haskell-plain colored"></i> Haskell', + Java: '<i class="devicon-java-plain colored" style="color: #ffca2c"></i> Java', + JavaScript: '<i class="devicon-javascript-plain colored"></i> JavaScript', + Julia: '<i class="devicon-julia-plain colored"></i> Julia', + 'Jupyter Notebook': '<i class="devicon-jupyter-plain colored"></i> Jupyter', + Kotlin: '<i class="devicon-kotlin-plain colored" style="color: #796bdc"></i> Kotlin', + Latex: '<i class="devicon-latex-plain colored"></i> Latex', + Lua: '<i class="devicon-lua-plain-wordmark colored" style="color: #0000d0"></i> Lua', + Matlab: '<i class="devicon-matlab-plain colored"></i> Matlab', + Nim: '<i class="devicon-nixos-plain colored" style="color: #FFC200"></i> Nim', + Nix: '<i class="devicon-nixos-plain colored"></i> Nix', + ObjectiveC: '<i class="devicon-objectivec-plain colored"></i> ObjectiveC', + OCaml: '<i class="devicon-ocaml-plain colored"></i> OCaml', + Perl: '<i class="devicon-perl-plain colored"></i> Perl', + PHP: '<i class="devicon-php-plain colored"></i> PHP', + PLSQL: '<i class="devicon-sqlite-plain colored"></i> PLSQL', + Processing: + '<i class="devicon-processing-plain colored" style="color: #0096D8"></i> Processing', + Python: '<i class="devicon-python-plain colored" style="color: #3472a6"></i> Python', + R: '<i class="devicon-r-plain colored"></i> R', + Ruby: '<i class="devicon-ruby-plain colored"></i> Ruby', + Rust: '<i class="devicon-rust-plain colored" style="color: #DEA584"></i> Rust', + Sass: '<i class="devicon-sass-original colored"></i> Sass', + Scala: '<i class="devicon-scala-plain colored"></i> Scala', + Shell: '<i class="devicon-bash-plain colored" style="color: #89E051"></i> Shell', + Solidity: '<i class="devicon-solidity-plain colored"></i> Solidity', + Stylus: '<i class="devicon-stylus-plain colored"></i> Stylus', + Svelte: '<i class="devicon-svelte-plain colored"></i> Svelte', + Swift: '<i class="devicon-swift-plain colored"></i> Swift', + Terraform: '<i class="devicon-terraform-plain colored"></i> Terraform', + TypeScript: '<i class="devicon-typescript-plain colored"></i> TypeScript', + 'Vim Script': '<i class="devicon-vim-plain colored"></i> Vim Script', + Vue: '<i class="devicon-vuejs-plain colored"></i> Vue', + Mail: '<i class="nf nf-cod-mail"></i>', }; diff --git a/src/js/hacktype.js b/src/js/hacktype.js index b5542377..eb5595c0 100644 --- a/src/js/hacktype.js +++ b/src/js/hacktype.js @@ -5,46 +5,46 @@ const special = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~"; let interval = null; function hackType() { - const elements = document.querySelectorAll(".hacktype"); - let intervals = []; - - elements.forEach((element) => { - let iteration = 0; - - intervals.push( - setInterval(() => { - element.innerText = element.innerText - .split("") - .map((letter, index) => { - if (index < iteration) { - return element.dataset.value[index]; - } - - return letters[Math.floor(Math.random() * 26)]; - }) - .join(""); - - if (iteration >= element.dataset.value.length) { - clearInterval(intervals.shift()); - } - - iteration += 1 / 5; - }, 20) - ); - }); +const elements = document.querySelectorAll(".hacktype"); +let intervals = []; + +elements.forEach((element) => { + let iteration = 0; + + intervals.push( + setInterval(() => { + element.innerText = element.innerText + .split("") + .map((letter, index) => { + if (index < iteration) { + return element.dataset.value[index]; + } + + return letters[Math.floor(Math.random() * 26)]; + }) + .join(""); + + if (iteration >= element.dataset.value.length) { + clearInterval(intervals.shift()); + } + + iteration += 1 / 5; + }, 20) + ); +}); } hackType(); // Call hackType initially setInterval(() => { - const intervals = document.querySelectorAll(".hacktype-interval"); - intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals - hackType(); // Call hackType again +const intervals = document.querySelectorAll(".hacktype-interval"); +intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals +hackType(); // Call hackType again }, 10000); // Repeat every 5 seconds // Check if the document becomes visible again document.addEventListener("visibilitychange", () => { - if (!document.hidden) { - hackType(); // Call hackType when the user comes back from being away - } +if (!document.hidden) { + hackType(); // Call hackType when the user comes back from being away +} }); diff --git a/src/js/header.js b/src/js/header.js index f8e53d5a..6189bc1c 100644 --- a/src/js/header.js +++ b/src/js/header.js @@ -6,15 +6,15 @@ let page = header.getAttribute('page'); newElement.innerHTML = ` <!-- header --> <header id="navBarHeader"> - <nav class="navBar"> - <div class="hleft"> - <a id="btnHome" style="text-decoration: unset" href="/">Home<span></span></span></a> - </div> - <div class="hright"> - <a href="/pages/repo/github/repos.html" id="btnGhRepo" style="text-decoration: unset">Github Repos</a> - <a href="/pages/info/about.html" id="btnAbout" style="text-decoration: unset">About</a> - </div> - </nav> + <nav class="navBar"> + <div class="hleft"> + <a id="btnHome" style="text-decoration: unset" href="/">Home<span></span></span></a> + </div> + <div class="hright"> + <a href="/pages/repo/github/repos.html" id="btnGhRepo" style="text-decoration: unset">Github Repos</a> + <a href="/pages/info/about.html" id="btnAbout" style="text-decoration: unset">About</a> + </div> + </nav> </header> `; diff --git a/src/js/rbg.js b/src/js/rbg.js index 40f0dadd..fa6b11a6 100644 --- a/src/js/rbg.js +++ b/src/js/rbg.js @@ -1,38 +1,38 @@ document.body.style.transition = "background 1s ease-in-out"; function getRandomColor() { - const letters = "0123456789ABCDEF"; - let color = "#"; - for (let i = 0; i < 6; i++) { - color += letters[Math.floor(Math.random() * 16)]; - } - return color; +const letters = "0123456789ABCDEF"; +let color = "#"; +for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; +} +return color; } function setRandomGradient() { - const rand3 = Math.floor(Math.random() * 3) + 1; - if (rand3 === 1) { - document.body.style.background = `linear-gradient(${Math.floor( - Math.random() * 180 - )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`; - } else if (rand3 === 2) { - document.body.style.background = `linear-gradient(${Math.floor( - Math.random() * 180 - )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}), +const rand3 = Math.floor(Math.random() * 3) + 1; +if (rand3 === 1) { + document.body.style.background = `linear-gradient(${Math.floor( + Math.random() * 180 + )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`; +} else if (rand3 === 2) { + document.body.style.background = `linear-gradient(${Math.floor( + Math.random() * 180 + )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}), linear-gradient(${Math.floor( - Math.random() * 180 - )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`; - } else { - document.body.style.background = `linear-gradient(${Math.floor( - Math.random() * 180 - )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}), + Math.random() * 180 + )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`; +} else { + document.body.style.background = `linear-gradient(${Math.floor( + Math.random() * 180 + )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}), linear-gradient(${Math.floor( - Math.random() * 180 - )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}), + Math.random() * 180 + )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}), linear-gradient(${Math.floor( - Math.random() * 180 - )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`; - } + Math.random() * 180 + )}deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`; +} } setRandomGradient(); |
