drflamios.github.io/script.js at main · DRflamios/drflamios.github.io · 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import { marked } from './marked.esm.js';

$(document).ready(function () {

    const username = 'DRflamios';
    const rawdata_url = `https://raw.githubusercontent.com/${username}`;

    $('#loading-state').show();

    $.ajax({
        url: `https://api.github.com/users/${username}`,
        success: function (user) {
            $('#loading-state').hide();

            $('#user-avatar').attr('src', user.avatar_url);
            $('#user-name').text(user.name);
            $('#user-login').text('@' + user.login);
            $('#user-bio').text(user.bio);

            if (rawdata_url) {
                const readme_data = `${rawdata_url}/${username}/main/README.md`;
                $.ajax({
                    url: readme_data,
                    success: function (data) {
                        $('#user-readme').html(marked.parse(data));
                        $('#readme-state').hide();
                    },
                    error: function () {
                        $('#readme-state').text('Failed to load README. Please check the URL or try again later.');
                        $('#readme-state').show();
                    }
                });
            }

            if (user.location) {
                $('#user-location').show();
                $('#location-text').text(user.location);
            }

            $('#user-repos').text(user.public_repos);
            $('#user-followers').text(user.followers);
            $('#user-following').text(user.following);
            $('#user-created-at').text(new Date(user.created_at).toLocaleDateString());

            $.ajax({
                url: `https://api.github.com/users/${username}/repos`,
                success: function (repos) {
                    const topRepos = repos.sort((a, b) => b.stargazers_count - a.stargazers_count).slice(0, 6);

                    $.each(topRepos, function (index, repo) {
                        const repoHTML = `
                            <div class="p-6 rounded-lg border border-gray-500">
                                <h3 class="text-xl font-bold text-white">
                                    <a href="${repo.html_url}" target="_blank" class="hover:text-blue-400">${repo.name}</a>
                                </h3>
                                <p class="mt-2 text-gray-400">${repo.description}</p>
                                <div class="mt-4 flex items-center gap-4 text-white">
                                    <div>
                                        <span class="flex items-center gap-1">
                                            <span class="w-3 h-3 rounded-full bg-red-700"></span>
                                            <span>${repo.language}</span>
                                        </span>
                                    </div>
                                    <span class="flex items-center gap-1">
                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                        </svg>
                                        <span>${repo.stargazers_count}</span>
                                    </span>
                                    <span class="flex items-center gap-1">
                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"/>
                                        </svg>
                                        <span>${repo.forks_count}</span>
                                    </span>
                                </div>
                            </div>
                        `;
                        $('#top-repos').append(repoHTML);
                    });

                    $('#content').show();
                },
                error: function (xhr, status, error) {
                    $('#error-state').text('Failed to load GitHub data. Please try again later.');
                    $('#error-state').show();
                }
            });
        },
        error: function (xhr, status, error) {
            $('#error-state').text('Failed to load GitHub data. Please try again later.');
            $('#error-state').show();
        }
    });
});