This repository has been archived by the owner on Jul 1, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
show.html.twig
150 lines (136 loc) · 7.64 KB
/
show.html.twig
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
{% extends 'base.html.twig' %}
{% block title %}{{ user.username }}{% endblock %}
{% block description %}Check out {{ user.username }}'s GitHub stats and see how they rank in stargazers count.{% endblock %}
{% block metaImage %}{{ url('share_meta', {'username': user.username}) }}{% endblock %}
{% block metaSummary %}summary_large_image{% endblock %}
{% block metaOgImageWidth %}<meta property="og:image:width" content="1200" /><meta property="og:image:height" content="600" />{% endblock %}
{% block breadcrumb %}
{% include 'partials/breadcrumbs.html.twig' with {
'links' : [
{
'title': 'Users',
'link': path('user_index')
},
{
'title': user.username,
'link': null
}
]
} %}
{% endblock %}
{% block body %}
<div id="user-page">
<div class="container pb-4 pt-4">
<div class="card">
<div class="card-body">
<div class="d-flex flex-column align-items-center text-center">
<div class="col-12 d-flex justify-content-end align-content-center">
<p class="fs-6">
Share :
</p>
<p class="fs-6 ml-10">
<a title="Share on Twitter" rel="noopener noreferrer" href="https://twitter.com/intent/tweet?text=Check%20out%20{% if user.twitterHandle is not null %}@{{ user.twitterHandle }}{% else %}{{ user.name }}{% endif %}%27s%20GitHub%20ranking%20on%20Git%20Stars!&url=https%3A%2F%2Fgit-stars.com/user/{{ user.username }}&hashtags=GitHub" target="_blank">
<i class="fab fa-twitter text-primary fs-3"></i>
</a>
</p>
<p class="fs-6 ml-10">
<span title="Embedded" rel="noopener noreferrer" class="link-embed" style="cursor:pointer" data-bs-toggle="modal" data-bs-target="#embedModal">
<i class="fab fa-github fs-3 color-black"></i>
</span>
</p>
</div>
<img src="https://avatars.githubusercontent.com/u/{{ user.githubId }}?v=4&s=150" alt="{{ user.username }}" class="{% if user.organization == false %}rounded-circle{% endif %} user-picture-main">
<div class="mt-3">
{% if user.name != null %}
<h2>{{ user.name }}{% if user.organization %} <i class="fas fa-building"></i>{% endif %}</h2>
{% else %}
<h2>{{ user.username }}{% if user.organization %} <i class="fas fa-building"></i>{% endif %}</h2>
{% endif %}
<a href="https://github.com/{{ user.username }}" target="_blank" class="link-primary mb-1 font-monospace" rel="noopener noreferrer">@{{ user.username }}</a>
<p class="text-secondary mb-1">{{ user.location }} {% if user.country %}{{ get_flag(user.country.isoCode) }}{% endif %}</p>
{% if user.status == 'idle' %}
<a href="{{ path('user_update', {'username': user.username}) }}" class="btn-git mt-2">Refresh user</a>
{% else %}
<p class="font-monospace mt-2">User is updating. Please wait.</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-git" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
{% endif %}
<p class="text-muted font-size-sm mt-3">Last updated : {{ user.updated|date('h:iA')}} UTC, {{ user.updated|date('M jS Y')}}</p>
{% if worldRank.stars is defined %}
<p class="h3 fw-bold">{{ worldRank.stars|number_format(0, '.', ' ')|raw }} <i class="fas fa-star text-warning"></i> - Rank {{ worldRank.id|number_format(0, '.', ' ')|raw }} 🌍</p>
{% endif %}
</div>
</div>
</div>
</div>
<div class="row pt-4">
{% if userLanguages | length > 0 %}
{% for userLanguage in userLanguages %}
{% include 'partials/user-language-card.html.twig' with {
'city': user.city,
'country': user.country,
'language' : userLanguage,
'stars': userLanguage.stars,
'user': user
} %}
{% endfor %}
{% elseif user.status == 'idle' %}
<div class="alert alert-info text-center">
{% if user.organization %}Organization{% else %}User{% endif %} has no star yet.
</div>
{% endif %}
</div>
</div>
</div>
<!-- modal-backdrop fade show -->
<div class="modal fade" id="embedModal" tabindex="-1" aria-labelledby="embedModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="embedModalLabel">Embed Git Stars statistics on you Github profile</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body pt-5">
<img src="{{ url('share_embed', {'username' : user.username}) }}" class="w-100"/>
<textarea style="resize:none;cursor:pointer;" onclick="this.select()" readonly="readonly" rows="2" class="w-100 mt-3 embed-textarea">[![Git Stars]({{ url('share_embed', {'username' : user.username}) }})]({{ url('user_show', {'username' : user.username}) }})</textarea>
<p class="text-center mt-2 mb-0 embed-copied">Copied to clipboard ✅</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
function copy() {
let copyText = document.querySelector('.embed-textarea')
copyText.select()
document.execCommand('copy')
document.querySelector('.embed-copied').style.opacity = 1
setTimeout(() => {
document.querySelector('.embed-copied').style.opacity = 0
}, 2000)
}
document.querySelector('.embed-textarea').addEventListener('click', copy)
</script>
{% if user.status == 'running' %}
<script type="text/javascript">
function getStatus() {
fetch('{{ path('user_status', {'username': user.username}) }}')
.then(function (response) {
return response.json()
.then(function (json) {
if (json.status === 'idle') {
window.location.reload()
}
})
})
}
setInterval(getStatus, 5000)
</script>
{% endif %}
{% endblock %}