Last active
June 28, 2017 08:17
-
-
Save Schlipak/7a9089d30786c25448c46fd3e2e92202 to your computer and use it in GitHub Desktop.
Add stagazers count to Awesome repositories
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
| // Add stargazers count to Awesome Github repositories | |
| const AWESOME_STAR_STYLES = ` | |
| a.awesome-link { | |
| display: inline-flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| } | |
| a.awesome-link, | |
| a.awesome-link:hover, | |
| a.awesome-link:focus, | |
| a.awesome-link:active { | |
| text-decoration: none !important; | |
| } | |
| a.awesome-link:hover > span.awesome-link-content, | |
| a.awesome-link:focus > span.awesome-link-content, | |
| a.awesome-link:active > span.awesome-link-content { | |
| text-decoration: underline; | |
| } | |
| span.awesome-star { | |
| display: inline-flex; | |
| position: relative; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-left: .5em; | |
| padding: .15em .5em; | |
| color: #2f2f04; | |
| font-size: 0.7em; | |
| background: linear-gradient(to bottom right, #FDEB71 0%, #F8D800 100%); | |
| border-radius: 0.4em; | |
| box-sizing: border-box; | |
| } | |
| span.awesome-star:before { | |
| content: ''; | |
| display: inline-block; | |
| position: relative; | |
| width: 1em; | |
| height: 1em; | |
| margin-right: .25em; | |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABB0lEQVQ4T7WSsVHEQAxFvxw4hgqgg4MO3AFDBWzg3fioAKgAYsnBUsENHVwJRwdQAcQbWIw8yw2eW5/NMCiTrf9W+hLhj0HH9N77C/svIrupuqOAEEI0ITO7XwOccyd1XX+YMKV0GmP8LEEmOwgh3AO4y6IHZrb8IIoAm52INgDOs+JNVa9LXgwA7/0TgBURNUuWoqpbAK8ish4AeV77uFoCMHFKqTFfRiNk129mIM8/t3LgwQxkJLaHSoA1gMeJLm6Z2fzax790YGc7mKmqL0ObRFc534nI5VwHqqrvquq6rrPNoG3bhogiEZ0x86jrUWKFVVU1U1dn19n3/fYbXDRx4R3sy74AW4VsEavYJzkAAAAASUVORK5CYII='); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| } | |
| `; | |
| const addStargarzers = function addStargarzers() { | |
| let starStyles = document.createElement('style'); | |
| starStyles.textContent = AWESOME_STAR_STYLES; | |
| document.head.appendChild(starStyles); | |
| document.querySelectorAll('.markdown-body ul>li').forEach(el => { | |
| let link = el.querySelector('a'); | |
| let stars = el.querySelector('.awesome-star'); | |
| if (link) { | |
| if ( | |
| /https?:\/\/github\.com\/.+/.test(link.href) && | |
| link.pathname != window.location.pathname | |
| ) { | |
| link.classList.add('awesome-link'); | |
| let linkContent = document.createElement('span'); | |
| linkContent.classList.add('awesome-link-content'); | |
| linkContent.textContent = link.textContent; | |
| link.textContent = ''; | |
| link.appendChild(linkContent); | |
| fetch(`https://api.github.com/repos${link.pathname}`) | |
| .then(data => data.json()) | |
| .then(data => { | |
| if (!stars) { | |
| stars = document.createElement('span'); | |
| stars.classList.add('awesome-star'); | |
| stars.textContent = '?'; | |
| link.appendChild(stars); | |
| } | |
| if (data.stargazers_count) { | |
| stars.textContent = data.stargazers_count; | |
| } | |
| }); | |
| } | |
| } | |
| }); | |
| }; | |
| !(function() { | |
| addStargarzers(); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment