Feature: feedback - repo page charts should be embeddable

[jpmcb]

Suggested solution

• Feature: Create a component that can create an image from it's children #3974
• Feature: Copy paste utility to copy an HTML element as an image to the clipboard #3962
• Feature: Copy contributor confidence to clipboard as an image #3960
• Feature: Copy OpenSSF score card to clipboard as an image #3961

Lots of feedback we've gotten in the past is that charts should be embeddable. Our main use case for this we'll look at are contributors in the ublue-os org. There are 2 main scenarios we should target with this:

• embed directly in markdown: lots of projects love to have these visualizations right in their GitHub readmes. Ideally, these should be able to be dropped into markdown somehow and render (even if they're static images that update once a day or so, that'd still be ideal)

  • Use case: https://github.com/ublue-os/bazzite - they embed star charts and contributor metrics directly in their readme. They'd love to use OpenSauced graphs from https://app.opensauced.pizza/s/ublue-os/bazzite (like the OpenSSF score, contributor confidence, etc.) - https://bazzite.gg/:
    

• embed directly in sites: we've gotten feedback that people want to be able to drop these charts directly in their project websites.

  • Use case: Bazzite also has a project site that we've gotten signal would use our graphs directly in the site to show potential users or contributors that the project is "alive, well, and maintained"

---

• Big stretch goal: render in Slack or other third party electron based applications. There's lots of sharing and screen-shotting that happens on Slack: that's hard to capture on our end and we'd love the ability to render in these third party applications and redirect the user experience back to OpenSauced.

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please comment on this issue.

For full info on how to contribute, please check out our contributors guide.

[nickytonline]

I had a chat with @brandonroberts about this yesterday. We're going to pair on it most likely.

The TLDR; of the POC

• Create a Netlify function that uses Playwright
• Navigate via playwright to the page in question and use a selector that we'll add to find the graph.
• Wait until the data is rendered client-side
• Take a snapshot of that graph via Playwright
• Persist to Netlify Blob for quicker access on subsequent requests for sharing the image but cache for x amount of time

The function with the given parameters, e.g. /snapshot/denoland/deno?graph=lottery will be the share URL.

[nickytonline]

I think I tried some of the dependencies @colbyfayock mentions in his latest video, https://www.youtube.com/watch?v=kOdIzhPfLuo, when I did a similar POC last year, but just popping it here as a reference.