|
11 | 11 | v-if="state === 'data'"
|
12 | 12 | :href="`https://vuetelemetry.com/explore/${website.slug}`"
|
13 | 13 | target="_blank"
|
14 |
| - class="mr-2" |
| 14 | + class="mr-3" |
15 | 15 | >
|
16 |
| - <ExternalLinkIcon class="w-8 h-8" /> |
| 16 | + <ExternalLinkIcon class="w-6 h-6 hover:text-primary-500" /> |
| 17 | + </a> |
| 18 | + |
| 19 | + <a href="https://twitter.com/VueTelemetry" target="_blank" class="mr-3"> |
| 20 | + <TwitterIcon class="w-6 h-6 hover:text-primary-500" /> |
17 | 21 | </a>
|
18 | 22 |
|
19 | 23 | <a href="https://github.com/nuxt-company/vue-telemetry-analyzer" target="_blank">
|
20 |
| - <GithubIcon class="w-8 h-8" /> |
| 24 | + <GithubIcon class="w-6 h-6 hover:text-primary-500" /> |
21 | 25 | </a>
|
22 | 26 | </div>
|
23 | 27 | </div>
|
24 | 28 |
|
25 | 29 | <div v-if="isLoading">Loading...</div>
|
26 | 30 | <div v-else>
|
27 | 31 | <div v-if="state === 'data'">
|
28 |
| - <div> |
| 32 | + <div class="mb-8"> |
29 | 33 | <div class="mb-4">
|
30 |
| - <h3 class="flex items-center font-bold pl-2 text-primary-700 uppercase"> |
31 |
| - <ConfigIcon class="h-5 mr-2 text-primary-700 opacity-50" />Info |
| 34 | + <h3 class="flex items-center font-bold pl-2 text-primary-500 uppercase"> |
| 35 | + <InfoIcon class="h-5 mr-2 text-primary-5700 opacity-50" />Info |
32 | 36 | </h3>
|
33 | 37 | </div>
|
34 | 38 |
|
35 |
| - <div class="flex flex-wrap"> |
36 |
| - <ListBlock> |
37 |
| - <VueIcon class="w-5 h-5 mr-2" /> |
| 39 | + <div class="grid grid-cols-3 gap-4"> |
| 40 | + <ListBlock label="Vue version" href="https://vuejs.org/"> |
| 41 | + <img :src="getURL('/vue.svg')" alt class="w-6 h-6 mr-2" /> |
38 | 42 | <div class="font-semibold">{{ website.vueVersion }}</div>
|
39 | 43 | </ListBlock>
|
40 | 44 |
|
41 |
| - <ListBlock> |
42 |
| - <div class="font-semibold mr-2">SSR</div> |
43 |
| - <CheckmarkCircleFillIcon v-if="website.hasSSR" class="w-5 h-5 text-primary-700" /> |
44 |
| - <XmarkCircleFillIcon v-else class="w-5 h-5 text-grey-400" /> |
| 45 | + <ListBlock v-if="website.framework" label="Framework" :href="website.framework.url"> |
| 46 | + <img :src="getURL(website.framework.imgPath)" alt class="w-6 h-6 mr-2" /> |
| 47 | + <div class="font-semibold">{{ website.framework.name }}</div> |
45 | 48 | </ListBlock>
|
46 | 49 |
|
47 |
| - <ListBlock> |
48 |
| - <div class="font-semibold mr-2">Static</div> |
49 |
| - <CheckmarkCircleFillIcon v-if="website.isStatic" class="w-5 h-5 text-primary-700" /> |
50 |
| - <XmarkCircleFillIcon v-else class="w-5 h-5 text-grey-400" /> |
| 50 | + <ListBlock v-if="website.ui" label="UI Framework" :href="website.ui.url"> |
| 51 | + <img :src="getURL(website.ui.imgPath)" alt class="w-6 h-6 mr-2" /> |
| 52 | + <div class="font-semibold">{{ website.ui.name }}</div> |
51 | 53 | </ListBlock>
|
52 | 54 |
|
53 |
| - <ListBlock v-if="website.framework"> |
54 |
| - <div class="font-semibold mr-2">Framework</div> |
55 |
| - <a :href="website.framework.url" target="_blank" class> |
56 |
| - <img :src="getURL(website.framework.imgPath)" alt class="w-6 h-6" /> |
57 |
| - </a> |
| 55 | + <ListBlock label="Rendering"> |
| 56 | + <div class="font-semibold">{{ website.hasSSR ? 'Server-side' : 'Client-side' }}</div> |
58 | 57 | </ListBlock>
|
59 | 58 |
|
60 |
| - <ListBlock v-if="website.ui"> |
61 |
| - <div class="font-semibold mr-2">UI Framework</div> |
62 |
| - <a :href="website.ui.url" target="_blank" class> |
63 |
| - <img :src="getURL(website.ui.imgPath)" alt class="w-6 h-6" /> |
64 |
| - </a> |
| 59 | + <ListBlock label="Deployment"> |
| 60 | + <div class="font-semibold">{{ website.isStatic ? 'Static' : 'Server' }}</div> |
65 | 61 | </ListBlock>
|
66 | 62 | </div>
|
67 | 63 | </div>
|
68 | 64 |
|
69 |
| - <div v-if="website.plugins.length"> |
| 65 | + <div v-if="website.plugins.length" class="mb-4"> |
70 | 66 | <div class="mb-4">
|
71 |
| - <h3 class="flex items-center font-bold pl-2 text-primary-700 uppercase"> |
72 |
| - <PluginsIcon class="h-6 mr-2 text-primary-700 opacity-50" />Plugins |
| 67 | + <h3 class="flex items-center font-bold pl-2 text-primary-500 uppercase"> |
| 68 | + <PluginsIcon class="h-6 mr-2 text-primary-500 opacity-50" />Plugins |
73 | 69 | </h3>
|
74 | 70 | </div>
|
75 | 71 |
|
|
82 | 78 | class="mr-4 mb-4"
|
83 | 79 | >
|
84 | 80 | <span
|
85 |
| - class="block bg-grey-100 font-semibold px-4 py-2 text-sm rounded-full" |
| 81 | + class="block bg-grey-50 border border-grey-200 font-semibold text-sm px-4 py-2 rounded-xl" |
86 | 82 | >{{ plugin.name }}</span>
|
87 | 83 | </a>
|
88 | 84 | </div>
|
89 | 85 | </div>
|
90 | 86 |
|
91 | 87 | <div v-if="website.modules.length">
|
92 | 88 | <div class="mb-4">
|
93 |
| - <h3 class="flex items-center font-bold pl-2 text-primary-700 uppercase"> |
94 |
| - <ModulesIcon class="h-6 mr-2 text-primary-700 opacity-50" />Nuxt Modules |
| 89 | + <h3 class="flex items-center font-bold pl-2 text-primary-500 uppercase"> |
| 90 | + <ModulesIcon class="h-6 mr-2 text-primary-500 opacity-50" />Nuxt Modules |
95 | 91 | </h3>
|
96 | 92 | </div>
|
97 | 93 |
|
|
104 | 100 | class="mr-4 mb-4"
|
105 | 101 | >
|
106 | 102 | <span
|
107 |
| - class="block bg-grey-100 font-semibold px-4 py-2 text-sm rounded-full" |
| 103 | + class="block bg-grey-50 border border-grey-200 font-semibold text-sm px-4 py-2 rounded-xl" |
108 | 104 | >{{ module.name }}</span>
|
109 | 105 | </a>
|
110 | 106 | </div>
|
|
121 | 117 | import { mapState } from 'vuex'
|
122 | 118 |
|
123 | 119 | import LogoIcon from '../images/logo.svg?inline'
|
124 |
| -import XmarkCircleFillIcon from '../images/icons/xmark-circle-fill.svg?inline' |
125 |
| -import CheckmarkCircleFillIcon from '../images/icons/checkmark-circle-fill.svg?inline' |
126 |
| -import VueIcon from '../images/icons/vue.svg?inline' |
127 |
| -import GithubIcon from '../images/icons/github.svg?inline' |
128 |
| -import ExternalLinkIcon from '../images/icons/external-link.svg?inline' |
129 |
| -import ModulesIcon from '../images/icons/modules.svg?inline' |
130 |
| -import PluginsIcon from '../images/icons/plugins.svg?inline' |
131 |
| -import ConfigIcon from '../images/icons/config.svg?inline' |
| 120 | +import ExternalLinkIcon from '../images/external-link.svg?inline' |
| 121 | +import TwitterIcon from '../images/twitter.svg?inline' |
| 122 | +import GithubIcon from '../images/github.svg?inline' |
| 123 | +import InfoIcon from '../images/info.svg?inline' |
| 124 | +import PluginsIcon from '../images/plugins.svg?inline' |
| 125 | +import ModulesIcon from '../images/modules.svg?inline' |
132 | 126 |
|
133 | 127 | import ListBlock from '../components/ListBlock.vue'
|
134 | 128 |
|
135 | 129 | export default {
|
136 | 130 | components: {
|
137 | 131 | LogoIcon,
|
138 |
| - XmarkCircleFillIcon, |
139 |
| - CheckmarkCircleFillIcon, |
| 132 | + ExternalLinkIcon, |
| 133 | + TwitterIcon, |
140 | 134 | GithubIcon,
|
141 |
| - VueIcon, |
142 |
| - ModulesIcon, |
| 135 | + InfoIcon, |
143 | 136 | PluginsIcon,
|
144 |
| - ConfigIcon, |
145 |
| - ExternalLinkIcon, |
| 137 | + ModulesIcon, |
146 | 138 | ListBlock
|
147 | 139 | },
|
148 | 140 | computed: {
|
|
0 commit comments