13
13
target =" _blank"
14
14
class =" mr-3"
15
15
>
16
- <AppButton size =" small" appearance =" primary" outlined >Open</AppButton >
16
+ <AppButton size =" small" appearance =" primary" outlined >
17
+ Open
18
+ </AppButton >
17
19
</a >
18
- <AppButton v-else-if =" isRootUrl && showcase && showcase.hasVue && !showcase.isPublic && !savingError" @click.native =" saveShowcase" size =" small" appearance =" primary" class =" mr-3" >{{ saving ? 'Saving...' : 'Save' }}</AppButton >
20
+ <AppButton
21
+ v-else-if ="
22
+ isRootUrl &&
23
+ showcase &&
24
+ showcase.hasVue &&
25
+ !showcase.isPublic &&
26
+ !savingError
27
+ "
28
+ @click.native =" saveShowcase"
29
+ size =" small"
30
+ appearance =" primary"
31
+ class =" mr-3"
32
+ >
33
+ {{ saving ? 'Saving...' : 'Save' }}
34
+ </AppButton >
19
35
20
- <a href =" https://twitter.com/VueTelescope" target =" _blank" class =" mr-3" >
36
+ <a
37
+ href =" https://twitter.com/VueTelescope"
38
+ target =" _blank"
39
+ class =" mr-3"
40
+ >
21
41
<TwitterIcon class =" w-5 h-5 hover:text-primary-500" />
22
42
</a >
23
43
24
- <a href =" https://github.com/nuxt-company/vue-telescope-analyzer" target =" _blank" >
44
+ <a
45
+ href =" https://github.com/nuxt-company/vue-telescope-analyzer"
46
+ target =" _blank"
47
+ >
25
48
<GithubIcon class =" w-5 h-5 hover:text-primary-500" />
26
49
</a >
27
50
</div >
28
51
</div >
29
52
30
53
<!-- <div v-if="isLoading && (!showcase || !showcase.url)">Please refresh the page to detect.</div> -->
31
54
32
- <div v-if =" isLoading" class =" absolute top-0 left-0 flex items-center justify-center w-full h-full" >
55
+ <div
56
+ v-if =" isLoading"
57
+ class =" absolute top-0 left-0 flex items-center justify-center w-full h-full"
58
+ >
33
59
<div class =" font-bold-body-weight text-seven" >Loading...</div >
34
60
</div >
35
61
36
- <div v-else-if =" !showcase || !showcase.url" class =" absolute top-0 left-0 flex items-center justify-center w-full h-full" >
37
- <div class =" font-bold-body-weight text-eight" >Please enter an url in the address bar.</div >
62
+ <div
63
+ v-else-if =" !showcase || !showcase.url"
64
+ class =" absolute top-0 left-0 flex items-center justify-center w-full h-full"
65
+ >
66
+ <div class =" font-bold-body-weight text-eight" >
67
+ Please enter an url in the address bar.
68
+ </div >
38
69
</div >
39
70
40
71
<div v-else-if =" showcase" >
41
72
<div v-if =" showcase.hasVue" >
42
73
<div class =" mb-8" >
43
74
<div v-if =" savingError" class =" mb-4 text-orange" >
44
- Could not save website to Vue Telescope, please try again later or <
a class =
" underline" :href =
" `mailto:[email protected] ?subject=Could not save ${showcase.url}`" >contact us</
a >.
75
+ Could not save website to Vue Telescope, please try again later or
76
+ <a
77
+ class =" underline"
78
+ :href ="
79
+ `mailto:[email protected] ?subject=Could not save ${showcase.url}`
80
+ "
81
+ >contact us</a
82
+ >.
45
83
</div >
46
84
<div class =" mb-4" >
47
- <h3 class =" flex items-center pl-2 uppercase font-bold-body-weight text-primary-500" >
85
+ <h3
86
+ class =" flex items-center pl-2 uppercase font-bold-body-weight text-primary-500"
87
+ >
48
88
<InfoIcon class =" h-5 mr-2 opacity-50 text-primary-5700" />Info
49
89
</h3 >
50
90
</div >
53
93
<ExploreDataItem
54
94
label =" Vue Version"
55
95
tag =" a"
56
- href =" https://vuejs.org "
96
+ : href =" vueDocsURL "
57
97
target =" _blank"
58
98
rel =" noreferrer noopener"
59
99
>
60
- <img
61
- class =" w-6 h-6 mr-2"
62
- :src =" iconURL('/vue.svg')"
63
- alt
64
- />
100
+ <img class =" w-6 h-6 mr-2" :src =" iconURL('/vue.svg')" alt />
65
101
<div class =" text-base leading-base font-bold-body-weight" >
66
102
{{ showcase.vueVersion }}
67
103
</div >
112
148
</ExploreDataItem >
113
149
114
150
<ExploreDataItem
115
- v-if =" showcase.framework && showcase.framework.slug === 'nuxtjs'"
151
+ v-if ="
152
+ showcase.framework && showcase.framework.slug === 'nuxtjs'
153
+ "
116
154
label =" Deployment"
117
155
>
118
156
<div
126
164
127
165
<div v-if =" showcase.plugins.length" class =" mb-4" >
128
166
<div class =" mb-4" >
129
- <h3 class =" flex items-center pl-2 uppercase font-bold-body-weight text-primary-500" >
130
- <PluginsIcon class =" h-6 mr-2 opacity-50 text-primary-500" />Plugins
167
+ <h3
168
+ class =" flex items-center pl-2 uppercase font-bold-body-weight text-primary-500"
169
+ >
170
+ <PluginsIcon
171
+ class =" h-6 mr-2 opacity-50 text-primary-500"
172
+ />Plugins
131
173
</h3 >
132
174
</div >
133
175
139
181
target =" _blank"
140
182
class =" mb-4 mr-4 border bg-grey-50 hover:bg-grey-100 border-grey-200 rounded-xl"
141
183
>
142
- <span
143
- class =" block px-4 py-2 text-sm font-bold-body-weight"
144
- >
145
- {{ plugin.name }}
146
- </span >
184
+ <span class =" block px-4 py-2 text-sm font-bold-body-weight" >{{
185
+ plugin.name
186
+ }}</span >
147
187
</a >
148
188
</div >
149
189
</div >
150
190
151
191
<div v-if =" showcase.modules.length" >
152
192
<div class =" mb-4" >
153
- <h3 class =" flex items-center pl-2 uppercase font-bold-body-weight text-primary-500" >
154
- <ModulesIcon class =" h-6 mr-2 opacity-50 text-primary-500" />Nuxt Modules
193
+ <h3
194
+ class =" flex items-center pl-2 uppercase font-bold-body-weight text-primary-500"
195
+ >
196
+ <ModulesIcon class =" h-6 mr-2 opacity-50 text-primary-500" />Nuxt
197
+ Modules
155
198
</h3 >
156
199
</div >
157
200
163
206
target =" _blank"
164
207
class =" mb-4 mr-4 border bg-grey-50 hover:bg-grey-100 border-grey-200 rounded-xl"
165
208
>
166
- <span
167
- class =" block px-4 py-2 text-sm font-bold-body-weight"
168
- >
169
- {{ module.name }}
170
- </span >
209
+ <span class =" block px-4 py-2 text-sm font-bold-body-weight" >{{
210
+ module.name
211
+ }}</span >
171
212
</a >
172
213
</div >
173
214
</div >
174
215
</div >
175
216
176
- <div v-else-if =" !showcase.hasVue" class =" absolute top-0 left-0 flex items-center justify-center w-full h-full pointer-events-none " >
177
- <div class =" font-bold-body-weight text-eight" >Vue is not used on this website</div >
217
+ <div
218
+ v-else-if =" !showcase.hasVue"
219
+ class =" absolute top-0 left-0 flex items-center justify-center w-full h-full pointer-events-none"
220
+ >
221
+ <div class =" font-bold-body-weight text-eight" >
222
+ Vue is not used on this website
223
+ </div >
178
224
</div >
179
225
</div >
180
-
181
226
</div >
182
227
</div >
183
228
</template >
@@ -199,7 +244,7 @@ import AppButton from '../components/AppButton.vue'
199
244
200
245
export default {
201
246
components: {
202
- // // ExternalLinkIcon,
247
+ // // ExternalLinkIcon,
203
248
LogoIcon,
204
249
TwitterIcon,
205
250
GithubIcon,
@@ -225,11 +270,21 @@ export default {
225
270
return false
226
271
}
227
272
const { hostname } = new URL (this .showcase .url )
228
- if (this .showcase .url .endsWith (hostname) || this .showcase .url .endsWith (hostname + ' /' )) {
273
+ if (
274
+ this .showcase .url .endsWith (hostname) ||
275
+ this .showcase .url .endsWith (hostname + ' /' )
276
+ ) {
229
277
return true
230
278
} else {
231
279
return false
232
280
}
281
+ },
282
+ vueDocsURL () {
283
+ return (
284
+ (this .showcase .vueVersion .startsWith (' 1' ) && ' https://v1.vuejs.org' ) ||
285
+ (this .showcase .vueVersion .startsWith (' 2' ) && ' https://vuejs.org' ) ||
286
+ (this .showcase .vueVersion .startsWith (' 3' ) && ' https://v3.vuejs.org' )
287
+ )
233
288
}
234
289
},
235
290
mounted () {
@@ -263,20 +318,22 @@ export default {
263
318
this .isLoading = false
264
319
this .showcase = res .payload || null
265
320
266
- // this.sendToContent({
267
- // proxyTo: 'injected',
268
- // from: 'popup',
269
- // payload: 'test from popup'
270
- // })
321
+ // this.sendToContent({
322
+ // proxyTo: 'injected',
323
+ // from: 'popup',
324
+ // payload: 'test from popup'
325
+ // })
271
326
},
272
327
async getCurrentTab () {
273
- return await browser .tabs .query ({ currentWindow: true , active: true }).then ((tabsArray ) => {
274
- const { id , status , url } = tabsArray[0 ]
275
- if (status === ' complete' ) {
276
- return { id, url }
277
- }
278
- return null
279
- })
328
+ return await browser .tabs
329
+ .query ({ currentWindow: true , active: true })
330
+ .then (tabsArray => {
331
+ const { id , status , url } = tabsArray[0 ]
332
+ if (status === ' complete' ) {
333
+ return { id, url }
334
+ }
335
+ return null
336
+ })
280
337
},
281
338
sendToBackground (message ) {
282
339
return browser .runtime .sendMessage (message)
@@ -300,9 +357,9 @@ export default {
300
357
return
301
358
}
302
359
const sse = new EventSource (
303
- ` https://service.vuetelescope.com?url=${ this .showcase .url } &isPublic=true`
360
+ ` https://service.vuetelescope.com?url=${ this .showcase .url } &isPublic=true`
304
361
)
305
- sse .addEventListener (' message' , ( event ) => {
362
+ sse .addEventListener (' message' , event => {
306
363
try {
307
364
const res = JSON .parse (event .data )
308
365
if (! res .error && ! res .isAdultContent ) {
0 commit comments