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! :)

[ksen0]

Hi @computationalmama ! So sorry I missed this notification and delayed in answering. Yes, exactly that's the branch. Are you still available to work on this?

[computationalmama]

Hi @ksen0 - no problem about the delay. I'm moving countries soon, so I can perhaps take it up in July. Is that too late? If so, please feel free to reassign. :)

Some notes:

1. https://github.com/shepherdjerred/astro-opengraph-images?tab=readme-ov-file#custom-renderers - these custom renders seem like a good start. They employ Satori to make an SVG and then turn it to an image. This seems easier to manage in the long run than this: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
2. vercel-og won't work directly - obviously needs vercel deployment
3. wondering what is p5.js policy on libraries built by independent maintainers in terms of longevity etc

Let me know your thoughts!

[ksen0]

Unless something makes this a more urgent issue, I think July is no problem! (and if something does come up I can update here.)

Re: astro-opengraph-images custom renderers - exciting! Thanks for looking into is a bit more, I agree with your judgment here.

wondering what is p5.js policy on libraries built by independent maintainers in terms of longevity etc

It's been considered to sort the libraries directory by recency (most recently updated at the top), but this is not formally planned. A lot of p5.js code does tend to be pretty durable, so the intent is to keep libraries that are not actively maintained but could be still useful, either as code or even as archival reference. What are your thoughts about this?

[computationalmama]

I'll explore and test astro-opengraph-images and share some updates.

It's been considered to sort the libraries directory by recency (most recently updated at the top)...

I think I should have been more clear, I meant if we use astro-opengraph-images or similar library for the website, that might end up in no maintenance graveyard as Astro progresses (they are so fast with their updates!), should we be using a library like this for the website SEO/Social Preview tasks, would it matter?

[computationalmama]

Parking here for now: https://mvlanga.com/blog/generating-open-graph-images-in-astro/
@ksen0 we are in the same time zone now! 🌻