Add official p5.js examples to 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.)