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! 🌻

[ksen0]

Hi @computationalmama ! Thanks for bumping it. I'd love to open this discussion back up, if you're still interested in working on this one!

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?

Thanks so much for clarifying, I'm not that familiar. If there's a more durable external option, that would be great; if it's something that is done on our side but without adding too much maintenance need, even better. (Also, even if the astro one isn't maintained, do you think it would become quickly unsupported?)

[computationalmama]

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

Hi @ksen0 this should work as its using two well maintained repos:

• https://github.com/vercel/satori
• https://github.com/lovell/sharp

I have to check how it'll all come together. Will keep you posted.

[computationalmama]

Hi @ksen0 and others

UPDATE:

I tried this library https://github.com/delucis/astro-og-canvas - this was the easiest to implement. And the OG Image can look like this (ofc its editable to whatever we need design wise):

It will also do a folder search to make them for all the other languages. Non-latin support with the National Park typeface seems to be a block on that. Korean sample here:

--

Currently, I'm not able to run this on all the content collections - do you know if there is some way to get multiple collections via getCollection

This is the script that needs to be run, it generates the OG images, and then can just be added to <Head> component.

// src/pages/open-graph/[...route].ts
import { getCollection } from "astro:content";
import { OGImageRoute } from "astro-og-canvas";

export const prerender = true;

const blogs = await getCollection("contributor-docs");
const pages = Object.fromEntries(
  blogs.map(({ id, slug, data }) => [id, { data, slug }]),
);

export const { getStaticPaths, GET } = OGImageRoute({
  param: "route",
  pages,
  getImageOptions: (path: string, { data }: (typeof pages)[string]) => ({
    title: data.title,
    description: data.description ? data.description : "",
    // You can use custom fonts if you want
    fonts: [
      "./public/fonts/NationalPark-Bold.woff2",
      "./public/fonts/NationalPark-Regular.woff2",
    ],
    font: {
      title: {
        size: 60,
        lineHeight: 1.3,
        color: [241, 103, 142],
        families: ["NationalPark"],
        weight: "Bold",
      },
      description: {
        size: 30,
        lineHeight: 1.3,
        color: [115, 115, 115],
        families: ["NationalPark"],
        weight: "Normal",
      },
    },
    bgGradient: [[255, 255, 255]],
    padding: 80,
    logo: {
      path: "./public/images/p5logo.png",
      size: [50, 50],
    },
    quality: 200,
  }),
});

Lastly, if we build it for ALL of the pages, then thats a lot of OG images to host/build. Is that something we are okay with? Maybe we just want for every section + homepage? Maybe you @ksen0 @stalgiag @limzykenneth have some opinions on this.

[ksen0]

Thanks so much for your continuing research @computationalmama !

Would a sans serif fallback be possible for non-latin fonts? Is it possible some glyph data is missing from the woff2 files, or not read correctly by og-canvas? Can ttf or otf be tried to resolve the issue?

This is the script that needs to be run, it generates the OG images, and then can just be added to <Head> component.

Sounds reasonable to me, if it can be added to the autogenerated script/builders scripts and the build workflow, it would be great!

Maybe we just want for every section + homepage?

Let's start with that, homepage + Reference + Tutorials + Examples + Contribute + Community+ About, plus Education Resources as a separate page, because "Tutorials" doesn't quite cover it. Each section already has a different color and its own short description, already, which could be incorporated into the OG images.

Next up after that would be individual images for https://beta.p5js.org/tutorials/ - while this is still a lot of images, each tutorial is pretty extensive.

Minor question: Additional to the logo can images be incorporated? Specifically, 1 image per card using photos where applicable - e.g., Contributor Docs

[computationalmama]

Cool. Let try to action your points:

• [ ] test non-latin fallback
• [ ] script to work out of script/builders
• [ ] start with homepage + Reference + Tutorials + Examples + Contribute + Community+ About (with its color theme)

For later

• [ ] Individual images for /tutorials/

Minor question: Additional to the logo can images be incorporated? Specifically, 1 image per card using photos where applicable - e.g., Contributor Docs

Yes images can be added. Something like this but more "readable" for the text.

[ksen0]

@computationalmama Fantastic! Thanks for the action points breakdown (sounds great!) and checking about the images.

For the initial PR, maybe a minimal text-only layout is best? With images, I can imagine there will be some visual feedback and iteration, so this could also be added to "later" steps, depending on your preference. But it is great to see it can definitely be done.

[computationalmama]

hi @ksen0 and others - sorry, got a bit crazy last two months with a move! I'm happy to pick it up after the 15th of October if that still works! Let me know. Thanks

[ksen0]

Hi @computationalmama - thanks for following up, yes that still works!