Created
May 15, 2023 16:58
-
-
Save theJohnnyBrown/a5073ab3e2870a39be16b5f7d19e2bcc to your computer and use it in GitHub Desktop.
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> | |
| <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> | |
| <meta charset="UTF-8"> | |
| <title>BranchRank component</title> | |
| </head> | |
| <script type="text/babel"> | |
| const GITHUB_USER_LINUS_MOCK = {"login":"torvalds","id":1024025,"node_id":"MDQ6VXNlcjEwMjQwMjU=","avatar_url":"https://avatars.githubusercontent.com/u/1024025?v=4","gravatar_id":"","url":"https://api.github.com/users/torvalds","html_url":"https://github.com/torvalds","followers_url":"https://api.github.com/users/torvalds/followers","following_url":"https://api.github.com/users/torvalds/following{/other_user}","gists_url":"https://api.github.com/users/torvalds/gists{/gist_id}","starred_url":"https://api.github.com/users/torvalds/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/torvalds/subscriptions","organizations_url":"https://api.github.com/users/torvalds/orgs","repos_url":"https://api.github.com/users/torvalds/repos","events_url":"https://api.github.com/users/torvalds/events{/privacy}","received_events_url":"https://api.github.com/users/torvalds/received_events","type":"User","site_admin":false,"name":"Linus Torvalds","company":"Linux Foundation","blog":"","location":"Portland, OR","email":null,"hireable":null,"bio":null,"twitter_username":null,"public_repos":7,"public_gists":0,"followers":182201,"following":0,"created_at":"2011-09-03T15:26:22Z","updated_at":"2023-01-02T22:41:59Z"} | |
| const GITHUB_USER_MATZ_MOCK = {"login":"matz","id":30733,"node_id":"MDQ6VXNlcjMwNzMz","avatar_url":"https://avatars.githubusercontent.com/u/30733?v=4","gravatar_id":"","url":"https://api.github.com/users/matz","html_url":"https://github.com/matz","followers_url":"https://api.github.com/users/matz/followers","following_url":"https://api.github.com/users/matz/following{/other_user}","gists_url":"https://api.github.com/users/matz/gists{/gist_id}","starred_url":"https://api.github.com/users/matz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matz/subscriptions","organizations_url":"https://api.github.com/users/matz/orgs","repos_url":"https://api.github.com/users/matz/repos","events_url":"https://api.github.com/users/matz/events{/privacy}","received_events_url":"https://api.github.com/users/matz/received_events","type":"User","site_admin":false,"name":"Yukihiro \"Matz\" Matsumoto","company":"Ruby Association,NaCl","blog":"","location":"Matsue, Japan","email":null,"hireable":null,"bio":null,"twitter_username":null,"public_repos":10,"public_gists":6,"followers":9259,"following":1,"created_at":"2008-10-23T23:14:57Z","updated_at":"2023-05-14T00:39:26Z"} | |
| const cloutScore = (user) => { | |
| return Math.log((user.followers + 1) / (user.following + 1)); | |
| } | |
| const normalizedCloutScore = (user) => { | |
| const MAX_CLOUT = cloutScore(GITHUB_USER_LINUS_MOCK); | |
| const clout_percent = (cloutScore(user) / MAX_CLOUT) * 99; // number 0-99 | |
| return Math.floor(clout_percent) | |
| } | |
| const main = async () => { | |
| const GITHUB_API_BASE_URL = "https://api.github.com" | |
| const getGithubUser = async (username) => { | |
| // FIXME: remove this early return to fetch instead of mock | |
| // return GITHUB_USER_LINUS_MOCK | |
| const resp = await fetch(`${GITHUB_API_BASE_URL}/users/${username}`) | |
| const respJson = await resp.json() | |
| return respJson | |
| } | |
| const BranchRankComponent = ({user}) => { | |
| return ( | |
| <div> | |
| <img src={user.avatar_url} alt="Profile picture for user" /> | |
| <h1>{user.login}</h1> | |
| <p>Clout score: {normalizedCloutScore(user)}</p> | |
| </div> | |
| ); | |
| } | |
| const linusUser = await getGithubUser("matz") | |
| console.log(linusUser) | |
| const domContainer = document.querySelector('#branchrank_container'); | |
| ReactDOM.render(<BranchRankComponent user={linusUser}/>, domContainer); | |
| } | |
| main() | |
| </script> | |
| <body> | |
| <div id="branchrank_container"></div> | |
| </body> | |
| </html> | |
| <!-- | |
| clout score: log(followers + 1 / following + 1) | |
| normalized clout: clout score / max(user clout (Linus)) | |
| --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment