p5.js 2.0 reference website preview

[ksen0]

Increasing Access

N/A, this is a nice-to-have that support discoverability and sharing

Most appropriate sub-area of p5.js?

Reference

Feature request details

Would be nice for the preview to look nicer.
Maybe look into meta tags https://ogp.me/

[computationalmama]

Hi @ksen0, i'd love to take this on.

Current Scenario

You see a simple image for the home page for OGP like so (i just tested them on a dummy Discord server):

My recommendation

I maintain this gitbook based project for an org, and the new default OGP from gitbook looks like this:

This has a title, subtitle, a simple grid background.

• title and subtitle can be pulled from the page data
• the feature image can be featuredImageSrc={data.heroImages[0].image.src} or we can even consider pulling the openprocessing API which is already in the astro bundle at import { getCurationSketches } from "../api/OpenProcessing";
  We can consider using the existing astro integration: https://github.com/shepherdjerred/astro-opengraph-images?tab=readme-ov-file or https://github.com/delucis/astro-og-canvas#readme

[ksen0]

Hi @computationalmama thank you for this idea and for volunteering! I'll assign this to you. Maybe as an initial partial improvement you can focus on beta.p5js.org page? Feel free to try out different ideas that create better previews.

[computationalmama]

Thanks @ksen0 - sounds great! I haven't checked the beta branch - is it this one: https://github.com/processing/p5.js-website/tree/2.0. Let me know and I will plan accordingly. I'm travelling this week and next, but i think this is not an urgent one - so I'll get into it as soon as I return! :)