github-cards/script.js at main · jediddev/github-cards · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const font_awesome_script = document.createElement('script');
font_awesome_script.src ='https://cdn.jsdelivr.net/gh/ViolaterZ/fontawesome/pro.js';
font_awesome_script.crossOrigin = 'anonymous';
document.body.append(font_awesome_script);

// Variables
const formatter = Intl.NumberFormat('en', { notation: 'compact' })
const card = document.querySelector('.github-card');
const user = card.getAttribute('data-user');
const stylesheet = document.createElement('link')

// #################################### //
// Stylesheet injector
if (card.getAttribute('data-style') === 'simple') {
    stylesheet.rel = 'stylesheet'
    stylesheet.href = 'https://cdn.jsdelivr.net/gh/ViolaterZ/github-cards/style-simple.css';
    document.head.insertAdjacentElement('beforeend', stylesheet)
}
if (card.getAttribute('data-style') === 'default') {
    stylesheet.rel = 'stylesheet'
    stylesheet.href = 'https://cdn.jsdelivr.net/gh/ViolaterZ/github-cards/style.css';
    document.head.append(stylesheet)
}
// #################################### //

// Get Data
(async () => {
    const data = await fetch(`https://api.github.com/users/${user}`).then(response => response.json())

    // Insert card HTML
    card.insertAdjacentHTML('beforeend', `
    <img src="${data.avatar_url}" alt="" class="github-card-img">
    <div class="github-card-data">
        <p class="github-card-data-name">${data.name}</p>
        <p class="github-card-data-user">@${data.login} <i class="fa-brands fa-github github-logo"></i></p>
        <div class="github-card-data-row">
            <p class="github-card-data-text"><span class="github-card-data-followers github-card-data-data">${formatter.format(data.followers)}</span> Followers</p>
            <p class="github-card-data-text"><span class="github-card-data-repos github-card-data-data">${formatter.format(data.public_repos)}</span> Repos</p>
            <p class="github-card-data-text"><span class="github-card-data-gists github-card-data-data">${formatter.format(data.public_gists)}</span> Gists</p>
        </div>
        <p class="github-card-data-bio" onclick="${window.open(`https://github.com/${user}`)}">${data.bio}</p>
        <button class="github-card-follow-btn">Follow</button>
    </div>
    `)

    // Evenet Listeners
    const card_btn = document.querySelector('.github-card-follow-btn');
    const card_user = document.querySelector('.github-card-data-user');

    card_user.onclick = () => window.open(`https://github.com/${user}`)
    card_btn.onclick = () => window.open(`https://github.com/${user}`)
})()