fix: multiple small documentation issues across tutorials and reference

[skyash-dev]

resolves #1057

fixes several small documentation issues found while going through the p5.js docs and tutorials.

changes

• fix incorrect height value in conditionals-and-interactivity tutorial.

• fix "Filter by keyword" input overlapping text.

• replace loop length with segments and declare move in repeating-with-loops tutorial.

• all changes are documentation-only and independent.

• the Google Color Picker link is not fixed yet, it’ll be replaced based on maintainers preference.

[davepagurek]

Could you share a screenshot of the filter CSS fixes on different sizes of window? Arguably the problem is that the top pane doesn't expand to fit the content, as the content will overflow at some sizes, not the placement of the filter.

Also the contributor docs changes need to be created in the p5.js repo instead of here, as the reference content and contributor doc content on this repo get overwritten with changes from the p5.js repo every time we run npm run build:reference and npm run build:contributor-docs.

[skyash-dev]

yes, you’re right. i found the root cause, in RootPage layout the explicit h-[50vh] on the parent div makes the container behave like it has a fixed height, so the content overflows at certain sizes.

re: contributor docs, i didn’t know they get overwritten from the p5.js repo. i’ve removed the broken link commit from here.
ps: looks like building contributor-docs breaks the discord link since in the p5.js repo the link is https://discord.gg/SHQ8dH25r9 after building it becomes https://discord.gg/SHQ8dH25r9/ which breaks it.

[davepagurek]

Great, those screenshots look good! Thanks for testing out the build process too. This likely means that we need to edit the script that converts those contributor docs pages to mdx files in https://github.com/processing/p5.js-website/blob/main/src/scripts/builders/contribute.ts to make it not add a trailing slash on that link. I havent looked deeply into how it works currently, so it would be great to investigate what its logic currently is so we can see how to change it (should the trailing slash only apply to p5 site links, and be omitted everywhere else?)

[skyash-dev]

@davepagurek i looked into the contributor-docs build and found where the trailing slash is being added. it comes from rewriteRelativeLink in src/pages/_utils-node.ts, which appends a / to any link without an extension, and that currently runs for external URLs as well (e.g. the Discord invite).

the right behavior would be to apply the trailing-slash normalization only to internal p5 site links, and skip rewriting entirely for external URLs (http(s), mailto, protocol-relative).

[davepagurek]

Looks good, thanks! Mind making a PR with these changes into the 2.0 branch too?