Fix the assets in the official p5.js examples in the PDE

[SableRaf]

Currently, the new p5.js mode only includes two example sketches: FileSystem and `TypeScript.

Suggestion:
Integrate the official examples from the p5.js examples (cc @ksen0) so users can explore and learn directly from the PDE, similar to the built-in examples for Java mode.

Expected behavior:
The Examples panel in p5.js mode should display categorized examples (Shapes And Color, Animation And Variables, etc.) from the official repository.

Screenshot:

[ksen0]

Would be fantastic to add sketches to this! The preferred thing would be to add examples from the 2.0 version https://beta.p5js.org/examples/ (they do require p5.js version <= 2.0.0), since the focus will be on 2.x moving forward.

To fulfill the expected behavior automatically, quite a bit of work might be needed. I'll try to be as thorough as I can below but please don't hesitate to reply (or reach out on Discord) - I would be very happy to support this effort.

The existing script

Here is the script loading examples into p5.js Editor. This uses the old archive site, which would be best not to use for the p5.js mode. If a full solution is out of scope, I would rather recommend manually copying a couple of examples from the live beta site.

Maybe it would be simplest to create a new script, using the above as a reference than directly taking code form it. In any case, the above script uses public gh api. Here are the endpoints to traverse the relevant parts of the 2.x version of the site:

• list of categories: https://api.github.com/repos/processing/p5.js-website/contents/src/content/examples/en?ref=2.0 lists directories
• list of examples in category: then url in each of the above: https://api.github.com/repos/processing/p5.js-website/contents/src/content/examples/en/01_Shapes_And_Color?ref=2.0
• example files include code.js and description.mdx: then url again into the directory with the example https://api.github.com/repos/processing/p5.js-website/contents/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives?ref=2.0
• example metadata: then in url for that file and in download_url, there is https://raw.githubusercontent.com/processing/p5.js-website/2.0/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx

New metadata is coming

There is a new metadata section that is being added to these files that relates to attribution. You can view mdx syntax and its documentation in this PR, and below is an example of how it will look on the website:

It would be best if the script includes the attribution information, because this is essential for us to be able to add new examples that remix compatible open source content.

However, as you can see, there is some logic in composing that citation; do you think it's more sensible to duplicate the logic in the script? Or scrape (at build of course) from the website? Or are there other solutions possible?

I am very open to ideas on approaching this robustly! (Anything you do here in the PDE I would also be happy to use - if reasonable/possible - to update the p5.js Editor script, too.)

[SableRaf]

Hi @ksen0,

We're running into an blocker integrating the examples in the PDE. The issue is that the assets for the examples are all in one place in the assets folder in the website repo rather than attached to their respective example (see screenshot below).

Is there a place the individual examples exist together their assets in the same folder? If not, what would be a good way to ensure that self-contained versions of the examples can be fetched and used locally?

[Stefterv]

https://github.com/processing/p5.js-web-editor/blob/5f4840cf5cc5bc6fdd567afd53fe568ed55ec450/server/scripts/examples.js#L33
Context, not sure how this works on the web editor

EDIT: nvm this is grabbing the legacy examples

[ksen0]

Hi @SableRaf @Stefterv,

We're running into an blocker integrating the examples in the PDE. The issue is that the assets for the examples are all in one place in the assets folder in the website repo rather than attached to their respective example (see screenshot below).

Part of the reason they're in assets/ is to keep the example code legible. For this reason, I think it doesn't make sense to make a very long path (like assets/examples/14_Loading_And_Saving_Data-00_Local_Storage) but I am open to assets/example/. Would that unblock you?

Alternatively, what do you think about adding asset paths into example .mdx fix the problem?

I'm happy to do either next week, or you're welcome to make a PR if one of those works.

[Stefterv]

Thanks for the quick response, @ksen0!

The second option works for me. I also wanted to suggest an alternative: if the assets were moved directly into the examples and the website had a build step that collects them and copies them into the public folder, then the examples could work standalone in any context. That would avoid having to parse the .mdx files and wouldn’t require modifying the examples themselves.
Would that be a viable option as well?