Repository navigation
Expand file tree
/
Copy pathPackageCard.vue
More file actions
132 lines (130 loc) · 4.3 KB
/
Copy pathPackageCard.vue
File metadata and controls
132 lines (130 loc) · 4.3 KB
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
<script setup lang="ts">
import { PropType } from 'vue'
import { nFormatter } from './helpers'
import _formatDistance from 'date-fns/formatDistance/index.js'
import { PackageOutput } from './types'
const intlFormat = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})
const props = defineProps({
stats: {
type: Object as PropType<PackageOutput>,
required: true
},
isOld: {
type: Boolean,
default: false
}
})
const formatDistance = (date: Date, baseDate: Date) => {
try {
return _formatDistance(date, new Date())
} catch (err) {
return ''
}
}
const formatDate = (date: Date) => {
try {
return intlFormat.format(date)
} catch (err) {
return ''
}
}
</script>
<template>
<div class="feathers-package">
<div class="flex items-center flex-col sm:flex-row mb-1">
<a :href="`https://github.com/${stats.ownerName}`" target="_blank">
<img v-if="stats.ownerAvatar" :src="stats.ownerAvatar" class="w-10 h-10 rounded-full mr-2" />
</a>
<div class="flex-1">
<div class="flex justify-between flex-col sm:flex-row">
<a
:title="stats.hasNPM ? stats.name : stats.repository?.name"
:href="stats.hasNPM ? stats.npmLink : stats.ghLink"
target="_blank"
rel="noopener noreferrer"
class="text-lg flex flex-wrap justify-center md:justify-normal"
>
<template v-if="stats.name">{{ stats.name }}</template>
<template v-else>{{ stats.repository?.name }}</template>
</a>
<div v-if="stats.hasNPM" class="flex justify-center md:justify-normal ml-2">
<div>
<span class="text-gray-500 font-extralight">v</span>
<span class="font-semibold">{{ stats.version }}</span>
</div>
</div>
</div>
<div class="flex my-1 text-sm">
<div
v-if="stats.hasNPM"
:title="`${stats.downloads} monthly npm downloads`"
class="flex mx-2 items-center min-w-14"
>
<div class="i-carbon-download mr-1 w-3.5 h-3.5 text-gray-500" />
<div class="flex-1 flex justify-center">{{ stats.downloads && nFormatter(stats.downloads) }}</div>
</div>
<div :title="`${stats.stars} stars on github`" class="flex mx-2 items-center min-w-14">
<div class="i-carbon-star-filled mr-1 w-3.5 h-3.5 text-gray-500" />
<div class="flex-1 flex justify-center">{{ nFormatter(stats.stars) }}</div>
</div>
<div
v-if="stats.hasNPM"
:title="`published on ${formatDate(stats.lastPublish)}`"
class="flex mx-2 items-center min-w-16"
>
<div class="i-carbon-time mr-1 w-3.5 h-3.5 text-gray-500"></div>
{{ formatDistance(stats.lastPublish, new Date()) }}
</div>
</div>
</div>
</div>
<div class="flex text-sm mb-2 justify-center sm:justify-start">
<div v-if="stats.license" class="mx-2">{{ stats.license }}</div>
<a
v-if="stats.ghLink"
:href="stats.ghLink"
target="_blank"
rel="noopener noreferrer"
class="flex items-center mx-2"
>
<div class="i-carbon-arrow-up-right mr-1 w-3.5 h-3.5" />
Github
</a>
<a
v-if="stats.hasNPM"
:href="stats.npmLink"
target="_blank"
rel="noopener noreferrer"
class="flex items-center mx-2"
>
<div class="i-carbon-arrow-up-right mr-1 w-3.5 h-3.5" />
npm
</a>
</div>
<div class="text-gray-600 my-2 ml-2 text-sm md:text-base .dark:text-gray-300">
<div v-if="isOld" class="border-l-4 border-red-500 bg-red-500/20 p-2 mb-2 text-sm">
This package seems to be unmaintained. Please use with caution and consider taking over the
maintenance! Please contact us if you want to over discord! ❤️
</div>
{{ stats.description }}
</div>
<div>
<div
v-for="keyword in stats.keywords"
:key="keyword"
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-xs text-gray-700 mr-2 mb-1 .dark:bg-gray-700 .dark:text-gray-200"
>
{{ keyword }}
</div>
</div>
</div>
</template>
<style scoped>
.feathers-package {
margin-bottom: 30px;
}
</style>