-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
GithubStars.vue
121 lines (98 loc) · 2.33 KB
/
GithubStars.vue
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
<script setup lang="ts">
import { useAppStore } from "~/stores/app";
const { gtag } = useGtag()
type Props = {
repository: string;
size: Enum<'sm' | 'md' | 'lg'>;
progress: boolean;
required: number;
};
const props = withDefaults(defineProps<Props>(), {
size: 'md',
required: 1000,
progress: false,
});
const stars = computed(() => {
const app = useAppStore();
return app?.github[props.repository]?.stars || 0;
});
const currentProgress = computed(() => {
return (stars.value / props.required) * 100;
});
const onOnOpenLink = () => {
gtag('event', 'open_github_stars', {
category: 'engagement',
label: 'github_stars',
size: props.size,
repository: props.repository,
});
};
</script>
<template>
<a class="stars-container"
:class="size"
:href="`https://github.com/buggregator/${repository}`"
target="_blank"
@click="onOnOpenLink"
>
<div class="text">
<img class="logo" src="~/assets/img/github.svg" alt="GitHub Logo"/> GitHub
</div>
<span v-if="stars > 0" class="stars">★ {{ stars }}</span>
<span v-else class="no-stars">Star it now!</span>
</a>
<div v-if="progress" class="progress-bar">
<div class="progress" :style="{ width: `${currentProgress}%` }"></div>
<div class="required">of {{ props.required }} stars</div>
</div>
</template>
<style scoped lang="scss">
.progress-bar {
@apply h-6 rounded-full w-full overflow-hidden relative mt-6 border bg-gray-800 w-full md:w-2/3 lg:w-1/2 mx-auto;
.progress {
@apply bg-blue-600 h-full rounded-full;
}
.required {
@apply text-white text-xs absolute bottom-0 right-0 px-2 h-full flex items-center;
}
}
.stars-container {
@apply bg-gray-800 text-white rounded-full flex items-center border bg-gray-800 hover:bg-blue-600 transition cursor-pointer;
&.lg {
@apply gap-6 p-4 text-xl pr-5;
.logo {
@apply w-8 h-8;
}
.text {
@apply gap-4;
}
}
&.md {
@apply gap-6 py-2 pl-2 pr-3;
.logo {
@apply w-6 h-6;
}
.text {
@apply gap-2;
}
}
&.sm {
@apply gap-4 p-1 text-sm;
.logo {
@apply w-5 h-5;
}
.text {
@apply gap-2;
}
}
.text {
@apply flex items-center;
}
.stars {
@apply break-keep text-nowrap;
}
.no-stars {
@apply text-xs text-right -my-1 mr-1 text-yellow-300;
}
}
</style>