fix: show preview for the last example in createCapture() docs

[aashu2006]

Fixes #1366

The preview for the last example on the createCapture() reference page was missing. This happened because the example had a norender class assigned to it.

This PR simply removes the norender class from the createCapture.mdx files across all languages, which enables the live webcam preview to show up correctly on the website.

[aashu2006]

sry for the delay @doradocodes , I've now fixed the last example as well, it only required to remove the norender class from createCapture.mdx files. Thanks!

[doradocodes]

@aashu2006 I don't think this is the right file to make this fix, because examples are generated by a script with the content taken from the p5.js repo. So your current changes would get overridden the next time the script runs.

@limzykenneth I have a question about this issue: currently @aashu2006 is trying to fix an issue in the createCapture() docs where the last example has the sketch working on 2.0 but not on main. Comparing the src/content/reference/en/p5/createCapture.mdx from main branch and 2.0 branch, they are generated differently. Would you happen to know why? This could help @aashu2006 implement the appropriate solution.

[aashu2006]

@doradocodes Good catch. 2.0 works because p5.js 2.0 dropped YUIDoc, so the old <div class="notest norender"> wrappers aren't in the source code anymore. main still pulls from 1.x, which has them.

I can just add a regex replace in src/scripts/builders/reference.ts to strip norender from createCapture during the build. Does that work for you?

[limzykenneth]

The reference examples are built from the inline reference of the source code on the p5.js repo and for the main and 2.0 website branches, they are pulled from the main and dev-2.0 branches respectively. The difference between the two is not so much main uses YUIDoc and dev-2.0 doesn't, dev-2.0 parses the JSDoc output into the equivalent YUIDoc structure.

Removing the HTML in the example is only implemented for dev-2.0 and is done by me, simply because I don't want to make significant changes to 1.x. The changes in the inline reference for dev-2.0 in question here is that the HTML class norender is replaced with JS comment // META:norender at the top, this META tag is then parsed in the 2.0 branch version of the website build to not render the example sketch while the main branch of the website don't need this change.

Depending on what the desired fix is, 1.x branches uses HTML tags and 2.x branches uses the META tag comment. The build should not change (do not change src/scripts/builders/reference.ts in this instance). I'm not sure if the two sketches previously marked as norender per 1.x should have been rendered in the first place. They are not the usual size of the canvas and mess up the layout of the page. They may either need to be reworked or set to no render on 2.x.

To update the reference, they can be updated inline here but as @doradocodes mentioned, they will get replaced the next time there is a p5.js release, which means that in addition to making the inline change here, the relevant change should also be done in the relevant branch in the p5.js repo.

[aashu2006]

@limzykenneth Thanks for the explanation! I think reworking the last example to use a standard canvas size (e.g. 100, 100) and removing norender would be the cleanest fix, since it would allow the preview to render without affecting the page layout.

I can make the change in the .mdx file and open a corresponding PR against the p5.js 1.x branch as well ?

[limzykenneth]

@aashu2006 I don't think that would be an effective fix. Both the first example and the last example have layout problems when rendered, the first example doesn't have a canvas and the last example the canvas is not really doing anything. The problem from the layout stems from the element created by createCapture. But that also does not necessarily mean we should hide the capture element or resize it since those are already covered by the second and third example respectively.