stack-deploy-docs/.vitepress/theme/components/StackTable.vue at master · cssnr/stack-deploy-docs · 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
96
97
98
99
100
101
102
103
104
105
106
107
<script setup>
const props = defineProps({
  repos: { type: Array, required: true },
  style: { type: String, default: 'flat' },
})

function getLink(type, repo) {
  return {
    stars: `https://img.shields.io/github/stars/${repo}?style=${props.style}&label=%20&color=forestgreen`,
    forks: `https://img.shields.io/github/forks/${repo}?style=${props.style}&label=%20&color=blue`,
    last: `https://img.shields.io/github/last-commit/${repo}?display_timestamp=committer&style=${props.style}&label=%20`,
    language: `https://img.shields.io/github/languages/top/${repo}?style=${props.style}`,
  }[type]
}

function getType(type) {
  return (
    {
      0: '❌',
      1: '📋',
      2: '🐳',
      3: '✅',
    }[Number(type)] ?? '❔'
  )
}
</script>

<template>
  <table class="stack-table">
    <thead>
      <tr>
        <th>Repositories - {{ props.repos.length }}</th>
        <th class="center" style="padding: 0">▶️</th>
        <th class="center" style="padding: 0">⭐🍴</th>
        <th class="center">Updated</th>
        <th>Language</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="[repo, type] in props.repos" :key="repo">
        <td class="repository">
          <a :href="`https://github.com/${repo}`" :title="repo" target="_blank" rel="noopener">{{ repo }}</a>
        </td>
        <td class="center">{{ getType(type) }}</td>
        <td class="center">
          <a :href="`https://github.com/${repo}/stargazers`" target="_blank" rel="noopener">
            <img alt="S" :src="getLink('stars', repo)" style="margin-right: 4px"
          /></a>
          <a :href="`https://github.com/${repo}/forks`" target="_blank" rel="noopener">
            <img alt="F" :src="getLink('forks', repo)"
          /></a>
        </td>
        <td class="center">
          <a :href="`https://github.com/${repo}/pulse`" target="_blank" rel="noopener">
            <img alt="Updated" :src="getLink('last', repo)"
          /></a>
        </td>
        <td>
          <a :href="`https://github.com/${repo}/network/dependents`" target="_blank" rel="noopener">
            <img alt="Language" :src="getLink('language', repo)" />
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
.stack-table td.repository {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
@media (min-width: 540px) {
  .stack-table td.repository {
    max-width: 200px;
  }
}
@media (min-width: 721px) {
  .stack-table td.repository {
    max-width: 260px;
  }
}
@media (min-width: 1066px) {
  .stack-table td.repository {
    max-width: 310px;
  }
}

.stack-table td {
  padding: 4px;
}
.stack-table img {
  display: inline-block;
  height: auto;
  width: auto;
  max-width: none;
  max-height: none;
  margin-right: 0;
  vertical-align: middle;
}
.stack-table .center {
  text-align: center;
  text-wrap: nowrap;
}
</style>