chore: badge - consts, smaller, get host name

Author: eladroz

e2e-report/app/badge/route.js

@@ -1,5 +1,6 @@
 import { ImageResponse } from 'next/og'
 import testData from '@/utils/data'
+import { badgeSettings, badgeSize } from '@/utils/consts'
 
 export const dynamic = 'force-static'
 
@@ -21,21 +22,20 @@ export async function GET(request) {
 
   const badge = (
     <Badge
-      label="Next.js runtime v5"
+      label={badgeSettings.label}
       labelStyle={labelStyle}
       value={testData.nextVersion}
       valueStyle={valueStyle}
     />
   )
   return new ImageResponse(badge, {
-    width: 400,
-    height: 60,
+    ...badgeSettings.imageSize,
   })
 }
 
 function Badge({ label, labelStyle, value, valueStyle }) {
   return (
-    <div tw="flex items-center w-full h-full text-[28px] rounded-md overflow-hidden bg-transparent">
+    <div tw="flex items-center w-full h-full text-[26px] rounded-md overflow-hidden bg-transparent">
       <span tw="items-center h-full p-3.5" style={labelStyle}>
         {label}
       </span>

e2e-report/app/page.js

@@ -6,6 +6,7 @@ import StatsRow from '@/components/stats'
 import testData from '@/utils/data'
 import { CopyIcon } from '@/components/icons'
 import CopyBadgeButton from '@/components/copy-badge'
+import { badgeSettings } from '@/utils/consts'
 
 export default function Home() {
   // User can switch between two test suite tables: one with all non-empty suites,
@@ -41,7 +42,12 @@ function Header() {
       </span>
       <span className="hidden md:flex gap-2 items-center">
         <a href="/" target="_blank">
-          <img src="/badge" width="200" height="30" alt="Netlify Next.js runtime v5 test status" />
+          <img
+            src="/badge"
+            width={badgeSettings.displaySize.width}
+            height={badgeSettings.displaySize.height}
+            alt={badgeSettings.alt}
+          />
         </a>
         <CopyBadgeButton />
       </span>

e2e-report/components/copy-badge.js

@@ -1,10 +1,24 @@
 'use client'
+import { useEffect, useState } from 'react'
 import { CopyIcon } from './icons'
-
-const host = 'https://runtime-e2e-report.netlify.app' // fixed
-const badgeLink = `<a href="${host}/" target="_blank"><img src="${host}/badge" width="200" height="30" alt="Netlify Next.js runtime v5 test status" /></a>`
+import { badgeDisplaySize, badgeSettings } from '@/utils/consts'
 
 export default function CopyBadgeButton() {
+  const [host, setHost] = useState('')
+  useEffect(() => {
+    setHost(window?.location.origin || '')
+  }, [])
+
+  const badgeLink = `
+<a href="${host}/" target="_blank">
+  <img 
+    src="${host}/badge"
+    width="${badgeSettings.displaySize.width}" 
+    height="${badgeSettings.displaySize.height}"
+    alt="${badgeSettings.alt}"
+  />
+</a>`
+
   return (
     <button
       className="btn btn-xs btn-outline text-white rounded px-0.5"

e2e-report/utils/consts.js

@@ -0,0 +1,7 @@
+export const badgeSettings = {
+  // Badge image resolution should be 2x display size for hi-res displays
+  imageSize: { width: 370, height: 50 },
+  displaySize: { width: 185, height: 25 },
+  label: 'Next.js runtime v5',
+  alt: 'Netlify Next.js runtime v5 test status',
+}