Building an external site for the showcase

[connieliu0]

Hi all! My name is Connie and I'm currently working with p5.js as part of Google Summer of Code!

Context: The reason for this PR is that after examining the YAML structure and writing the documentation for currently adding to the showcase, it was determined that it would be tedious for contributors in future years to continue adding and growing to the showcase. This is because the YAML structure consisted of unique key value pairs without the ability to organize it further into arrays (which was determined after consulting many people involved with developing the website), which makes rewriting the handlebars code each time tedious. Because the showcase is constantly growing, an easier way to develop these pages would be needed.

Issue: The current static generation and translation of showcase pages through handlebars and YAML files would need to change because of the fact the showcase page will be added to every year.

Approach: I plan to code an external site in Reactjs, and append it to the original website by calling it showcase.p5js.org. The details and relevant links to implement i18next into the website and the currently UI drafts for it can be seen in the link below.
https://www.notion.so/External-Site-Plan-and-Components-9c2a87a690474108ba1f0fd99422d4db
https://www.figma.com/file/Ym32EUY2S3z9DCTahMgpRc/Figma-Showcase?node-id=127%3A0

Pros and Cons:
Pros: Will increase the scope of the p5.js showcase by the ability to save space through lazy loading of translations with i18next and the way to add entries by adding json entries instead of having to generate unique keys and new handlebars files every time.
Cons: Cannot be added to the current handlebars+yaml+grunt set up, will need a new name such as showcase.p5js.org.
see current progress here!
https://github.com/connieliu0/p5.js-showcase

@yining1023 @joeyklee

[lmccart]

hi @connieliu0 thanks for this! I worry about the work of maintaining two different websites and codebases. I think it could make sense to make a separate site as a special exhibition, but I'm not sure how this integrates into things long-term. maybe this issue really points to a need to update the website infrastructure in general, and this can serve as a good first test of some different tools.

[connieliu0]

Hi @lmccart, totally understand and I'll make sure to document my work so it can help with decision making! After looking over the YAML and speaking to a couple people I think the current format works well for references since it won't change that much, but since the showcase has large translation files and is hopefully going to continue to update yearly, doing jsons + react might be easier in the long run but we'll see how it goes when I try to incorporate i18next and I'll make sure to note the maintainability/complexity of the codebase

[connieliu0]

Hello all,
As an update to this project, you can see the current test version of the external showcase here: https://connieliu0.github.io/p5.js-showcase/#/, as it is in continuous deployment.
I have opened two new issues -
https://github.com/processing/p5.js-website/issues/843: is about what the entrypoint is for the showcase from the main p5.js website
https://github.com/processing/p5.js-website/issues/844: is about adding translations to the showcase
I am hoping to have everything by the end of August!