Last active
May 13, 2020 09:04
-
-
Save Animesh-Ghosh/f27e66500e9e036d58763da8aa609689 to your computer and use it in GitHub Desktop.
Facelift
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta name="author" content="Animesh Ghosh"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="theme-color" content="#24292e"> | |
| <title>GitHub API Wrapper</title> | |
| <style type="text/css"> | |
| /* designing for mobile first */ | |
| /* borrowed colour scheme from GitHub */ | |
| /* reset styling */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --body-bg-color: #f6f8fa; | |
| } | |
| /* default styling for body */ | |
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 14px; | |
| background-color: var(--body-bg-color); | |
| color: #24292e; | |
| line-height: 1.5; | |
| } | |
| /* body grid layout */ | |
| .body { | |
| display: grid; | |
| grid-template-rows: 50px 50px auto 50px; | |
| grid-template-areas: | |
| 'header' | |
| 'nav' | |
| 'main' | |
| 'footer'; | |
| } | |
| @media only screen and (min-width: 568px) { | |
| .body { | |
| height: 100vh; | |
| grid-template-rows: 2fr 1fr auto 1fr; | |
| } | |
| } | |
| header { | |
| display: flex; | |
| justify-content: center; | |
| align-items: flex-end; | |
| } | |
| @media only screen and (min-width: 568px) { | |
| header { | |
| align-items: center; | |
| } | |
| } | |
| /* header */ | |
| header { | |
| grid-area: header; | |
| } | |
| header h1 { | |
| color: #fff; | |
| } | |
| /* nav */ | |
| nav { | |
| grid-area: nav; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| nav ul { | |
| list-style-type: none; | |
| } | |
| nav ul li { | |
| display: inline; | |
| } | |
| nav ul li a { | |
| text-decoration: none; | |
| padding: 20px; | |
| text-transform: uppercase; | |
| } | |
| nav ul li a:link, nav ul li a:visited { | |
| color: #fff; | |
| } | |
| nav ul li a:hover, nav ul li a:active { | |
| color: #aaa; | |
| } | |
| header, nav, footer { | |
| background-color: #24292e; | |
| } | |
| /* main section grid layout */ | |
| main { | |
| height: 850px; | |
| grid-area: main; | |
| display: grid; | |
| grid-template-rows: 1fr 5fr 10fr; | |
| grid-template-areas: | |
| 'hits' | |
| 'inputs' | |
| 'output'; | |
| } | |
| @media only screen and (min-width: 568px) { | |
| main { | |
| height: 80vh; | |
| } | |
| } | |
| /* hits, inputs and output flex-boxes */ | |
| #hits, #inputs, #output { | |
| display: flex; | |
| } | |
| /* hits section */ | |
| #hits { | |
| grid-area: hits; | |
| flex-direction: row; | |
| justify-content: flex-end; | |
| align-items: center; | |
| } | |
| #hits p { | |
| margin-right: 5px; | |
| } | |
| /* inputs section */ | |
| #inputs { | |
| grid-area: inputs; | |
| flex-direction: column; | |
| justify-content: space-evenly; | |
| align-items: center; | |
| padding: 5px 0; | |
| } | |
| /* input boxes */ | |
| .input { | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 5px 0px | |
| } | |
| @media only screen and (min-width: 568px) { | |
| .input { | |
| display: flex; | |
| flex-direction: row; | |
| /* justify-content: space-evenly; */ | |
| } | |
| } | |
| .input label { | |
| font-size: 16px; | |
| } | |
| @media only screen and (min-width: 568px) { | |
| .input label { | |
| margin-right: 5px; | |
| } | |
| } | |
| /* select box, input box styling */ | |
| select, input { | |
| width: 50%; | |
| border-radius: 4px; | |
| padding: 5px; | |
| border: 1px solid #ccc; | |
| outline: none; | |
| } | |
| @media only screen and (min-width: 568px) { | |
| select, input { | |
| width: auto; | |
| } | |
| } | |
| select:focus, input:focus { | |
| border: 1px solid #2188ff; | |
| box-shadow: 0px 0px 2px #2188ff; | |
| } | |
| /* button styling */ | |
| .input-button { | |
| padding: 5px; | |
| border-radius: 3px; | |
| border: 1px solid rgba(27,31,35,.35); | |
| margin-top: 5px; | |
| background-color: #eff3f6; | |
| width: 25%; | |
| } | |
| .input-button:hover { | |
| background-color: #e6ebf1; | |
| } | |
| .input-button:active { | |
| background-color: #e9ecef; | |
| box-shadow: inset 0 .15em .3em rgba(27,31,35,.15); | |
| } | |
| @media only screen and (min-width: 568px) { | |
| .input-button { | |
| margin: unset; | |
| width: 50px; | |
| margin-left: 5px; | |
| } | |
| } | |
| /* output section */ | |
| #output { | |
| grid-area: output; | |
| flex-direction: column; | |
| align-items: center; | |
| /* overflow-x: auto; */ | |
| overflow-y: auto; | |
| font-size: 15px; | |
| } | |
| /* styling for output message */ | |
| #output p:first-child { | |
| position: sticky; | |
| top: 0; | |
| background-color: var(--body-bg-color); | |
| width: 100%; | |
| text-align: center; | |
| } | |
| #output a { | |
| color: #0366d6; | |
| text-decoration: none; | |
| } | |
| #output a:hover { | |
| text-decoration: underline; | |
| } | |
| .repositories, .contributors { | |
| width: 80%; | |
| list-style-type: decimal; | |
| } | |
| .contributors .card img { | |
| width: 100%; | |
| } | |
| @media only screen and (min-width: 568px) { | |
| .repositories { | |
| width: auto; | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media only screen and (min-width: 768px) { | |
| .repositories { | |
| width: auto; | |
| display: grid; | |
| list-style-type: none; | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media only screen and (min-width: 968px) { | |
| .repositories { | |
| width: auto; | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| @media only screen and (min-width: 568px) { | |
| .contributors { | |
| display: flex; | |
| list-style-type: none; | |
| width: 90%; | |
| overflow-y: auto; | |
| justify-content: flex-start; | |
| align-items: center; | |
| } | |
| .contributors .card img { | |
| display: block; | |
| width: 30vh; | |
| } | |
| } | |
| @media only screen and (min-width: 1068px) { | |
| .contributors { | |
| width: auto; | |
| } | |
| } | |
| .card { | |
| background-color: #fafbfc; | |
| text-align: center; | |
| margin: 10px 10px 10px 0px; | |
| padding: 10px; | |
| border: 1px solid #d1d5da; | |
| border-radius: 3px; | |
| word-break: break-word; | |
| } | |
| @media only screen and (min-width: 568px) { | |
| .card { | |
| margin: 10px; | |
| } | |
| } | |
| .octicon { | |
| display: inline-block; | |
| vertical-align: text-bottom; | |
| fill: #586069; | |
| margin-right: 4px; | |
| } | |
| /* footer */ | |
| footer { | |
| grid-area: footer; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="body"> | |
| <header> | |
| <h1>GitHub API Wrapper</h1> | |
| </header> | |
| <nav> | |
| <ul> | |
| <li><a href="index.html">Home</a></li> | |
| <li><a href="#">API</a></li> | |
| </ul> | |
| </nav> | |
| <main> | |
| <section id="hits"> | |
| <p>Number of hits: <b>{{ hitsRemaining }}</b></p> | |
| </section> | |
| <section id="inputs"> | |
| <div class="input"> | |
| <label for="filter"> | |
| Popular repos based on number of: | |
| </label> | |
| <select id="filter" name="filter" v-model="selectedFilter"> | |
| <option value="contributors">Contributors</option> | |
| <option value="stars">Stars</option> | |
| <option value="prs">Open Pull Requests</option> | |
| </select> | |
| <button class="input-button" v-on:click="getReposBy('filter')">GET</button> | |
| </div> | |
| <div class="input"> | |
| <label for="language"> | |
| Popular repos based on language: | |
| </label> | |
| <input id="language" type="text" name="language" placeholder="Enter language..." v-model.lazy="language" v-on:keyup.enter="getReposBy('language')" required="required"> | |
| <button class="input-button" v-on:click="getReposBy('language')">GET</button> | |
| </div> | |
| <div class="input"> | |
| <label for="repo"> | |
| Top 5 contributors for repo: | |
| </label> | |
| <input id="repo" type="url" name="repo" placeholder="https://github.com/" v-model.lazy="repoURL" v-on:keyup.enter="getRepoContribs" required="required"> | |
| <button class="input-button" v-on:click="getRepoContribs">GET</button> | |
| </div> | |
| </section> | |
| <section id="output"> | |
| <p v-if="!filterFlag" v-html="outputMessage"></p> | |
| <p v-else>{{ computedOutputMessage }}</p> | |
| <repository-by-filter-list v-if="filterFlag" v-bind:repositories="computedRepositories"> | |
| </repository-by-filter-list> | |
| <repository-by-language-list v-else-if="languageFlag" v-bind:repositories="repositoriesByLanguage"></repository-by-language-list> | |
| <repository-top-contributors-list v-else-if="repoFlag" v-bind:contributors="computedContributors"></repository-top-contributors-list> | |
| <ol v-else> | |
| <li v-for="number in repositories.length" v-bind:key="number"> | |
| <div class="card">{{ numbers[number - 1] }}</div> | |
| </li> | |
| </ol> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>Made with tears 😢</p> | |
| <p>LMAO 😅</p> | |
| <!-- I am not good with CSS. Laying out grids and flex-boxes is tough. --> | |
| </footer> | |
| </div> | |
| <script type="text/javascript"> | |
| document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>') | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
| <!-- Vue component templates --> | |
| <script id="repository-by-filter-list-template" type="text/x-template"> | |
| <ol class="repositories"> | |
| <li v-for="repository of repositories"> | |
| <div class="card"> | |
| <a v-bind:href="repository['html_url']" target="_blank"> | |
| {{ repository['full_name'] }} | |
| </a> | |
| <p><i><svg aria-label="star" class="octicon octicon-star" viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg></i>Stars: {{ repository['stargazers_count'] }}</p> | |
| <p>Language: <span style="border-radius: 50%; width: 10px; height: 10px; display: inline-block; margin-right: 3px;" v-bind:style="{ backgroundColor : colors[repository['language']] }"></span>{{ repository['language'] }}</p> | |
| <p><i><svg class="octicon octicon-organization" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M16 12.999c0 .439-.45 1-1 1H7.995c-.539 0-.994-.447-.995-.999H1c-.54 0-1-.561-1-1 0-2.634 3-4 3-4s.229-.409 0-1c-.841-.621-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.442.58 2.5 3c.058 2.41-.159 2.379-1 3-.229.59 0 1 0 1s1.549.711 2.42 2.088C9.196 9.369 10 8.999 10 8.999s.229-.409 0-1c-.841-.62-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.437.581 2.495 3c.059 2.41-.158 2.38-1 3-.229.59 0 1 0 1s3.005 1.366 3.005 4z"></path></svg></i>Contributors: {{ repository['contributors_count'] }}</p> | |
| <p><i><svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0010 15a1.993 1.993 0 001-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 00-1 3.72v6.56A1.993 1.993 0 002 15a1.993 1.993 0 001-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg></i>Open Pull Requests: {{ repository['open_pull_requests_count'] }}</p> | |
| <p><i><svg class="octicon octicon-git-commit" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"></path></svg></i>Commits: {{ repository['commits_count'] }}</p> | |
| </div> | |
| </li> | |
| </ol> | |
| </script> | |
| <script id="repository-by-language-list-template" type="text/x-template"> | |
| <ol class="repositories"> | |
| <li v-for="repository of repositories"> | |
| <div class="card"> | |
| <a v-bind:href="repository['html_url']"> | |
| {{ repository['full_name'] }} | |
| </a> | |
| <p><i><svg aria-label="star" class="octicon octicon-star" viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg></i>Stars: {{ repository['stargazers_count'] }}</p> | |
| </div> | |
| </li> | |
| </ol> | |
| </script> | |
| <script id="repository-top-contributors-list-template" type="text/x-template"> | |
| <ol class="contributors"> | |
| <li v-for="contributor of contributors"> | |
| <div class="card"> | |
| <a v-bind:href="contributor['html_url']" target="_blank"> | |
| {{ contributor['login'] }} | |
| </a> | |
| <img v-bind:src="contributor['avatar_url']"> | |
| <p>Contributions: {{ contributor['contributions'] }}</p> | |
| </div> | |
| </li> | |
| </ol> | |
| </script> | |
| <!-- View logic --> | |
| <script type="text/javascript"> | |
| // helper function | |
| const capitalize = string => ''.concat(string.slice(0, 1).toUpperCase(), string.slice(1)); | |
| // components | |
| const RepositoryByFilterList = { | |
| template : '#repository-by-filter-list-template', | |
| props : ['repositories'], | |
| data: function() { | |
| return { | |
| colors : { | |
| 'C++' : '#f34b7d', | |
| 'Python' : '#3572A5', | |
| 'HTML' : 'orange', | |
| 'JavaScript' : '#f1e05a', | |
| 'Jupyter Notebook' : '#DA5B0B', | |
| 'CSS' : '#563d7c', | |
| 'HTML' : '#e34c26', | |
| 'Java' : '#b07219', | |
| } | |
| }; | |
| } | |
| }; | |
| const RepositoryByLanguageList = { | |
| template : '#repository-by-language-list-template', | |
| props : ['repositories'], | |
| }; | |
| const RepositoryTopContributorsList = { | |
| template : '#repository-top-contributors-list-template', | |
| props : ['contributors'] | |
| }; | |
| // Vue instance | |
| const app = new Vue({ | |
| el : 'main', | |
| data : { | |
| hitsRemaining: Math.round(Math.random() * 1000), | |
| selectedFilter : 'contributors', | |
| filterFlag : false, | |
| language : '', | |
| languageFlag : false, | |
| repoURL : '', | |
| repoFlag : false, | |
| outputMessage : 'Some output will be here:', | |
| numbers : [ | |
| 'ONE', 'TWO', 'THREE', 'FOUR', 'FIVE', 'SIX', 'SEVEN', 'EIGHT', 'NINE', 'TEN', 'ELEVEN', 'TWELVE', 'THIRTEEN', 'FOURTEEN', 'FIFTEEN', 'SIXTEEN', 'SEVENTEEN', 'EIGHTEEN', 'NINETEEN', 'TWENTY', 'TWENTY ONE', 'TWENTY TWO', 'TWENTY THREE', 'TWENTY FOUR', 'TWENTY FIVE', 'TWENTY SIX', 'TWENTY SEVEN', 'TWENTY EIGHT', 'TWENTY NINE', 'THIRTY', | |
| ], | |
| repositories : [ | |
| { html_url : 'https://github.com/Animesh-Ghosh/Crypt', full_name : 'Animesh-Ghosh/Crypt', stargazers_count : Math.round(Math.random() * 100), language : 'C++', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Animesh-Ghosh/Hangman', full_name : 'Animesh-Ghosh/Hangman', stargazers_count : Math.round(Math.random() * 100), language : 'C++', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Animesh-Ghosh/YouTube-WebScraping', full_name : 'Animesh-Ghosh/YouTube-WebScraping', stargazers_count : Math.round(Math.random() * 100), language : 'Jupyter Notebook', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Animesh-Ghosh/SDL2-Tutorial', full_name : 'Animesh-Ghosh/SDL2-Tutorial', stargazers_count : Math.round(Math.random() * 100), language : 'Jupyter Notebook', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Animesh-Ghosh/GitHub-API-Wrapper', full_name : 'Animesh-Ghosh/GitHub-API-Wrapper', stargazers_count : Math.round(Math.random() * 100), language : 'Python', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Bhupesh-V/30-seconds-of-cpp', full_name : 'Bhupesh-V/30-seconds-of-cpp', stargazers_count : Math.round(Math.random() * 100), language : 'C++', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Bhupesh-V/tutorialdb', full_name : 'Bhupesh-V/tutorialdb', stargazers_count : Math.round(Math.random() * 100), language : 'Python', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Bhupesh-V/defe', full_name : 'Bhupesh-V/defe', stargazers_count : Math.round(Math.random() * 100), language : 'HTML', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Bhupesh-V/memer-action', full_name : 'Bhupesh-V/memer-action', stargazers_count : Math.round(Math.random() * 100), language : 'Python', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Prajeshpuri/prajeshpuri.github.io', full_name : 'Prajeshpuri/prajeshpuri.github.io', stargazers_count : Math.round(Math.random() * 100), language : 'CSS', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Prajeshpuri/Neuroimaging', full_name : 'Prajeshpuri/Neuroimaging', stargazers_count : Math.round(Math.random() * 100), language : 'Jupyter Notebook', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Prajeshpuri/House_Price_Prediction', full_name : 'Prajeshpuri/House_Price_Prediction', stargazers_count : Math.round(Math.random() * 100), language : 'CSS', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Prajeshpuri/CASUALTY-SERVERITY-PREDICTION', full_name : 'Prajeshpuri/CASUALTY-SERVERITY-PREDICTION', stargazers_count : Math.round(Math.random() * 100), language : 'CSS', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Prajeshpuri/crazy-quiz', full_name : 'Prajeshpuri/crazy-quiz', stargazers_count : Math.round(Math.random() * 100), language : 'JavaScript', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Prajeshpuri/Poll-app', full_name : 'Prajeshpuri/Poll-app', stargazers_count : Math.round(Math.random() * 100), language : 'Python', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Pranav-Khurana/Competitive-Coding', full_name : 'Pranav-Khurana/Competitive-Coding', stargazers_count : Math.round(Math.random() * 100), language : 'Python', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Pranav-Khurana/TIL', full_name : 'Pranav-Khurana/TIL', stargazers_count : Math.round(Math.random() * 100), language : 'Jupyter Notebook', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Pranav-Khurana/FiveStar', full_name : 'Pranav-Khurana/FiveStar', stargazers_count : Math.round(Math.random() * 100), language : 'HTML', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Pranav-Khurana/C-adventure', full_name : 'Pranav-Khurana/C-adventure', stargazers_count : Math.round(Math.random() * 100), language : 'C++', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Alie-Boy/BattleTanks', full_name : 'Alie-Boy/BattleTanks', stargazers_count : Math.round(Math.random() * 100), language : 'C++', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Alie-Boy/BuildingEscape', full_name : 'Alie-Boy/BuildingEscape', stargazers_count : Math.round(Math.random() * 100), language : 'C++', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/tarnpreetSINGH/PickUpLine', full_name : 'tarnpreetSINGH/PickUpLine', stargazers_count : Math.round(Math.random() * 100), language : 'Java', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Nagendra0/Nagendra0.github.io', full_name : 'Nagendra0/Nagendra0.github.io', stargazers_count : Math.round(Math.random() * 100), language : 'HTML', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| { html_url : 'https://github.com/Nagendra0/Nagendra0.github.io', full_name : 'Nagendra0/Nagendra0.github.io', stargazers_count : Math.round(Math.random() * 100), language : 'HTML', contributors_count : Math.round(Math.random() * 100), open_pull_requests_count : Math.round(Math.random() * 100), commits_count : Math.round(Math.random() * 100), }, | |
| ], | |
| repositoriesByLanguage: [], | |
| contributors : [ | |
| { html_url : 'https://github.com/Animesh-Ghosh', login : 'Animesh-Ghosh', avatar_url : 'https://avatars3.githubusercontent.com/u/34956994?s=400&u=ef74c309d6a0dd4d678b99ed74cc149043836047&v=4', contributions : Math.round(Math.random() * 100) }, | |
| { html_url : 'https://github.com/Prajeshpuri', login : 'Prajeshpuri', avatar_url : 'https://avatars0.githubusercontent.com/u/34602781?s=400&u=d616540687e7487c6852ef53916519c0d100a7dd&v=4', contributions : Math.round(Math.random() * 100) }, | |
| { html_url : 'https://github.com/Bhupesh-V', login : 'Bhupesh-V', avatar_url : 'https://avatars0.githubusercontent.com/u/34342551?s=460&u=3bc833168d714bbaa23ebe8123ddb456cdd33d12&v=4', contributions : Math.round(Math.random() * 100) }, | |
| { html_url : 'https://github.com/Pranav-Khurana', login : 'Pranav-Khurana', avatar_url : 'https://avatars3.githubusercontent.com/u/31890034?s=460&u=a6d97a85806ebd889d4ff6f0ee85094eb18359ae&v=4', contributions : Math.round(Math.random() * 100) }, | |
| { html_url : 'https://github.com/Alie-Boy', login : 'Alie-Boy', avatar_url : 'https://avatars2.githubusercontent.com/u/36096180?s=400&v=4', contributions : Math.round(Math.random() * 100) }, | |
| ], | |
| }, | |
| methods : { | |
| getReposBy : function(by) { | |
| if (by === 'filter') { | |
| this.filterFlag = true; | |
| this.languageFlag = this.repoFlag = false; | |
| console.log(`Getting popular repositories filtered by ${this.selectedFilter}.`); | |
| // outputMessage is set via computed property for filters only | |
| } else if (by === 'language') { | |
| if (!this.language) { | |
| return; | |
| } | |
| this.languageFlag = true; | |
| this.filterFlag = this.repoFlag = false; | |
| console.log(`Getting popular repositories using ${this.language}.`); | |
| this.outputMessage = `Popular repositories using ${this.language}:` | |
| this.repositoriesByLanguage = this.repositories.filter(x => x.language.toLowerCase() === this.language.toLowerCase()).sort((x, y) => y.stargazers_count - x.stargazers_count); | |
| } | |
| }, | |
| getRepoContribs : function() { | |
| const repoFullName = this.repoURL.split('https://github.com/')[1]; | |
| if (!repoFullName) { | |
| return; | |
| } | |
| this.repoFlag = true; | |
| this.filterFlag = this.languageFlag = false; | |
| console.log(`Getting top 5 contributors of ${this.repoURL}!`); | |
| this.outputMessage = `Top five contributors of <a href="${this.repoURL}" target="_blank">${this.repoURL.split('https://github.com/')[1]}</a>:`; | |
| } | |
| }, | |
| computed : { | |
| computedOutputMessage : function() { | |
| return this.selectedFilter !== 'prs' ? `Popular repositories filtered by ${capitalize(this.selectedFilter)}:` : 'Popular repositories filtered by Open PRs:'; | |
| }, | |
| computedRepositories : function() { | |
| if (this.selectedFilter === 'contributors') { | |
| return this.repositories.slice(0).sort((x, y) => y.contributors_count - x.contributors_count); | |
| } else if (this.selectedFilter === 'stars') { | |
| return this.repositories.slice(0).sort((x, y) => y.stargazers_count - x.stargazers_count); | |
| } else if (this.selectedFilter === 'prs') { | |
| return this.repositories.slice(0).sort((x, y) => y.open_pull_requests_count - x.open_pull_requests_count); | |
| } | |
| }, | |
| computedContributors : function() { | |
| return this.contributors.slice(0).sort((x, y) => y.contributions - x.contributions) | |
| } | |
| }, | |
| components : { | |
| 'repository-by-filter-list' : RepositoryByFilterList, | |
| 'repository-by-language-list' : RepositoryByLanguageList, | |
| 'repository-top-contributors-list' : RepositoryTopContributorsList, | |
| }, | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment