@@ -7,6 +7,14 @@ interface StyleConfig {
7
7
rect : string
8
8
}
9
9
10
+ const lighthouseMetrics = new Set ( [
11
+ 'performance' ,
12
+ 'accessibility' ,
13
+ 'best-practices' ,
14
+ 'bestPractices' ,
15
+ 'seo' ,
16
+ ] )
17
+
10
18
export default defineCachedEventHandler ( async ( event ) => {
11
19
// Get and validate the domain from the URL parameter
12
20
const domain = await validateDomain ( getRouterParam ( event , 'domain' ) )
@@ -16,55 +24,44 @@ export default defineCachedEventHandler(async (event) => {
16
24
const style = String ( query . style || 'default' ) // default, flat, flat-square, plastic
17
25
const metric = String ( query . metric || 'cwv' ) // cwv, lcp, cls, inp, performance
18
26
27
+ setResponseHeader ( event , 'Content-Type' , 'image/svg+xml' )
28
+
19
29
try {
30
+ if ( ! lighthouseMetrics . has ( metric ) ) {
20
31
// Fetch the CrUX data using the existing API
21
- const cruxData = await $fetch ( `/api/crux/${ domain } ` )
22
-
23
- setResponseHeader ( event , 'Content-Type' , 'image/svg+xml' )
32
+ const cruxData = await $fetch ( `/api/crux/${ domain } ` )
24
33
25
- // Generate the badge with Core Web Vitals based on requested metric
26
- let svgBadge : string
34
+ if ( metric === 'cwv' ) {
35
+ return generateCWVBadge ( domain , cruxData , style )
36
+ }
37
+ if ( [ 'lcp' , 'cls' , 'inp' ] . includes ( metric ) ) {
38
+ return generateMetricBadge ( domain , cruxData , metric , style )
39
+ }
27
40
28
- if ( metric === 'cwv' ) {
29
- svgBadge = generateCWVBadge ( domain , cruxData , style )
30
- }
31
- else if ( [ 'lcp' , 'cls' , 'inp' ] . includes ( metric ) ) {
32
- svgBadge = generateMetricBadge ( domain , cruxData , metric , style )
33
- }
34
- else {
35
41
// Default to CWV badge if invalid metric specified
36
- svgBadge = generateCWVBadge ( domain , cruxData , style )
42
+ return generateCWVBadge ( domain , cruxData , style )
37
43
}
38
-
39
- return svgBadge
40
44
}
41
45
catch {
42
46
// If CrUX data is not available, try to fetch Lighthouse data
43
- try {
44
- const lighthouseData = await $fetch ( `/api/run/${ domain } ` )
45
-
46
- // Set content type header for SVG
47
- setResponseHeader ( event , 'Content-Type' , 'image/svg+xml' )
48
-
49
- let svgBadge : string
47
+ }
50
48
51
- // Check if user requested a Lighthouse metric specifically
52
- if ( metric === 'performance' || ! [ 'cwv' , 'lcp' , 'cls' , 'inp' ] . includes ( metric ) ) {
53
- svgBadge = generateLighthouseBadge ( domain , lighthouseData , metric , style )
54
- }
55
- else {
56
- // Generate default Lighthouse badge if CrUX data not available but CWV metric requested
57
- svgBadge = generateLighthouseBadge ( domain , lighthouseData , 'performance' , style )
58
- }
49
+ try {
50
+ const lighthouseData = await $fetch ( `/api/run/${ domain } ` )
59
51
60
- return svgBadge
61
- }
62
- catch {
63
- throw createError ( {
64
- statusCode : 404 ,
65
- message : 'No performance data available for this domain.' ,
66
- } )
52
+ // Check if user requested a Lighthouse metric specifically
53
+ if ( metric === 'performance' || ! [ 'cwv' , 'lcp' , 'cls' , 'inp' ] . includes ( metric ) ) {
54
+ return generateLighthouseBadge ( domain , lighthouseData , metric , style )
67
55
}
56
+
57
+ // Generate default Lighthouse badge if CrUX data not available but CWV metric requested
58
+ return generateLighthouseBadge ( domain , lighthouseData , 'performance' , style )
59
+ }
60
+ catch {
61
+ throw createError ( {
62
+ statusCode : 404 ,
63
+ message : 'No performance data available for this domain.' ,
64
+ } )
68
65
}
69
66
} , {
70
67
base : 'pagespeed' ,
@@ -75,7 +72,7 @@ export default defineCachedEventHandler(async (event) => {
75
72
staleMaxAge : 24 * 60 * 60 ,
76
73
} )
77
74
78
- function generateCWVBadge ( domain : string , data : CruxData , style : string = 'default' ) : string {
75
+ function generateCWVBadge ( domain : string , data : CruxData , style = 'default' ) : string {
79
76
// Color mappings for Core Web Vitals
80
77
const getStatusColor = ( pass : boolean ) => pass ? '#23c55e' : '#ef4444'
81
78
const overallStatus = data . cwv
@@ -107,7 +104,7 @@ function generateCWVBadge(domain: string, data: CruxData, style: string = 'defau
107
104
</svg>`
108
105
}
109
106
110
- function generateMetricBadge ( domain : string , data : CruxData , metric : string , style : string = 'default' ) : string {
107
+ function generateMetricBadge ( domain : string , data : CruxData , metric : string , style = 'default' ) : string {
111
108
let metricLabel = ''
112
109
let metricValue : string | number = ''
113
110
let metricThresholds = { good : 0 , needsImprovement : 0 , unit : '' }
@@ -165,7 +162,7 @@ function generateMetricBadge(domain: string, data: CruxData, metric: string, sty
165
162
</svg>`
166
163
}
167
164
168
- function generateLighthouseBadge ( domain : string , data : LighthouseData , metric : string = 'performance' , style : string = 'default' ) : string {
165
+ function generateLighthouseBadge ( domain : string , data : LighthouseData , metric = 'performance' , style = 'default' ) : string {
169
166
// Get performance score and determine color
170
167
let metricLabel = ''
171
168
let score = 0
0 commit comments