Embeddable SVG status badges 📛

[JamieSlome]

Suggested improvements 🔨

As page-speed.dev serves as a performance and usability metric for websites, web developers and site owners should be able to transparently share their scores via an embeddable HTML element or Markdown badge.

Requirements 📏

1. The badge should be able to present real-time (or close to real-time via cache) scores for Lighthouse and Core Web Vitals
2. The status badge should be embeddable as an HTML element or Markdown image
3. Customisability over the contents of the badge, i.e. choose to display Lighthouse or Core Web Vitals, or both

Considerations 💭

This is fairly similar to the OpenGraph code and infrastructure in place; perhaps we could re-use to support the implementation of status badges and embeddable elements.

[JamieSlome]

@danielroe - am I on the right track?

api/
crux/
run/
badge/
├─ [domain].get.ts

---

badge/[domain].get.ts

export default defineCachedEventHandler(async event => {
  .
  .
  const image = ...
  return image.toString()
})

[danielroe]

Yep! But I think we can directly return an SVG string rather than a binary image.