├── README.md ├── css └── main.css ├── images ├── github-timeline.gif └── github-timeline.png ├── index.html └── js └── main.js /README.md: -------------------------------------------------------------------------------- 1 | # Stalk your boss timeline or events on Github 2 | 3 | ## Want to see the GitHub timeline or events of other users? 4 | 5 | The application allows you to see other users' GitHub streams. In this way, you can see the activities of the people followed by your bosses and friends. 6 | 7 | You do not need to log in to use the application. Just type the user name you want and click "Get Timeline" button. 8 | 9 | ![](/images/github-timeline.gif) 10 | 11 | 12 | events: [https://able8.github.io/github-events](https://able8.github.io/github-events) 13 | 14 | timeline: [https://githubtimeline.xyz/](https://githubtimeline.xyz) 15 | 16 | ![](/images/github-timeline.png "GitHub Timeline") -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | border: 5px solid #f3f3f3; /* Light grey */ 3 | border-top: 5px solid #3498db; /* Blue */ 4 | border-radius: 50%; 5 | width: 3em; 6 | height: 3em; 7 | animation: spin 3s linear infinite; 8 | display: none; 9 | } 10 | 11 | @keyframes spin { 12 | 0% { transform: rotate(0deg); } 13 | 100% { transform: rotate(360deg); } 14 | } 15 | 16 | .timeline { 17 | /* display: none; */ 18 | } 19 | 20 | .link { 21 | color: #000; 22 | font-weight: bold; 23 | } 24 | 25 | .time { 26 | color: #888; 27 | } 28 | 29 | footer { 30 | bottom: 0; 31 | position: fixed; 32 | width: 100%; 33 | margin-top: 30px; 34 | background-color: #fff; 35 | padding: 5px; 36 | } 37 | 38 | img { 39 | width: 50px; 40 | height: 50px; 41 | margin-right: 10px; 42 | border-radius: 5px; 43 | } 44 | 45 | .item-row { 46 | border-bottom: 1px solid #ccc; 47 | padding: 10px 0px; 48 | width:100% 49 | } 50 | 51 | .title { 52 | width: 100%; 53 | text-align: center; 54 | } 55 | 56 | .container { 57 | padding-left: 30px !important; 58 | } 59 | -------------------------------------------------------------------------------- /images/github-timeline.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/able8/github-events/36bc5e728fc59f4657f74de7419a7316e3c76b3e/images/github-timeline.gif -------------------------------------------------------------------------------- /images/github-timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/able8/github-events/36bc5e728fc59f4657f74de7419a7316e3c76b3e/images/github-timeline.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Get Github User's Public Events! 12 | 13 | 14 | 15 | 19 | 20 |
21 |
22 |

Want to see Github User's Public Events?

23 |

You can see the whole Public Events, just by typing in the user name!

24 |
25 | 26 |
27 |
28 | View on GitHub 29 |
30 |
31 |
32 |
33 | 34 |
35 | 36 |
37 | 38 |
39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 | 47 |
48 | 49 |
50 | 51 |
52 |
53 | 54 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | dayjs.extend(dayjs_plugin_relativeTime) 2 | let page = 1 3 | 4 | function getItems (username) { 5 | fetchAsync(username, page) 6 | .then(filterUselessEvents) 7 | .then(data => { 8 | $('.loader').css('display', 'none') 9 | $('.timeline').css('display', 'block') 10 | 11 | data.forEach(element => { 12 | $('.items').append(` 13 |
14 |
15 | 16 | 17 | 18 | ${element.actor.display_login} 19 | ${getEventType(element.type, element.payload)} 20 | ${element.repo.name} 21 | 22 |
23 | 24 |
25 | ${dayjs(element.created_at).fromNow()} 26 |
27 |
28 | `) 29 | }) 30 | 31 | page = page + 1 32 | 33 | }) 34 | .catch(reason => console.log(reason.message)) 35 | } 36 | 37 | function getEventType (type, payload) { 38 | let event = '' 39 | 40 | switch(type) { 41 | case 'WatchEvent': 42 | event = 'starred' 43 | break 44 | case 'ForkEvent': 45 | event = `forked ${payload.forkee.full_name} from ` 46 | break 47 | case 'PublicEvent': 48 | event = 'made public' 49 | break 50 | case 'CreateEvent': 51 | event = 'created a repository' 52 | break 53 | case 'PullRequestEvent': 54 | event = 'opened a pull request in' 55 | break 56 | case 'PushEvent': 57 | event = 'pushed a commit' 58 | break 59 | case 'IssueCommentEvent': 60 | event = 'commented an issue' 61 | break 62 | case 'CommitCommentEvent': 63 | event = 'commented a commit' 64 | break 65 | case 'IssuesEvent': 66 | event = 'closed an issue' 67 | break 68 | default: 69 | event = '' 70 | } 71 | return event 72 | } 73 | 74 | function filterUselessEvents(events) { 75 | return events.filter(element => element.type !== 'MemberEvent') 76 | } 77 | 78 | function addUsernameToSearchParams(username) { 79 | const url = new URL(document.location.href) 80 | const params = new URLSearchParams(url.search) 81 | params.set('username', username) 82 | window.history.pushState({}, "", decodeURIComponent(`${location.pathname}?${params}`)) 83 | } 84 | 85 | function getTimeline(username) { 86 | page = 1 87 | 88 | addUsernameToSearchParams(username) 89 | 90 | $('.items').html(`

@${username}'s 91 | Events

`) 92 | $('.load-more').removeClass('d-none') 93 | getItems(username) 94 | } 95 | 96 | $('#get-timeline').click(e => { 97 | e.preventDefault() 98 | 99 | let username = $('#username').val().trim() 100 | 101 | getTimeline(username) 102 | }) 103 | 104 | $('#load-more').click((e) => { 105 | e.preventDefault() 106 | let username = $('#username').val().trim() 107 | 108 | getItems(username) 109 | }) 110 | 111 | async function fetchAsync (username, page = 1) { 112 | $('.loader').css('display', 'block') 113 | 114 | // let response = await fetch(`https://api.github.com/users/${username}/received_events?page=${page}`) 115 | let response = await fetch(`https://api.github.com/users/${username}/events?page=${page}`) 116 | // let response = await fetch(`https://api.github.com/events?page=${page}`) 117 | let data = await response.json() 118 | return data 119 | } 120 | 121 | function main() { 122 | const params = new URLSearchParams(location.search) 123 | const username = params.get('username') 124 | 125 | if (username) { 126 | $('#username').val(username) 127 | getTimeline(username) 128 | } 129 | } 130 | 131 | main() 132 | --------------------------------------------------------------------------------