processing/p5.js-website

New p5.js website in beta

[BETA] p5.js Website

Contributing

Content Changes

If you are here to edit or translate content, please do so inside the src/content/ folder.

Code Changes

For making code changes, check out the technical overview to get started.

Adding Libraries

Follow the steps in the Contributing Libraries doc if you would like to add your libary to the collection!

p5.js-website's Issues

Styling issues Tutorial

DESKTOP 1280x800

1. Tutorials main page: https://p5js-wip.online/tutorials/

• Add padding above and below in the header section - applies for all resolutions
• In the images preview for all sub sections: reduce the spacing between the image title and subtitle. For example: between Get Started and A tutorial that [..]
• Remove grey line at the bottom of the page above the footer. Applies for all resolutions

2. Tutorials sub pages: https://p5js-wip.online/tutorials/get-started/

• The language, accessibility and search buttons are pink and should be brownish/gray like the color in the header of the tutorial main page
• At the bottom, related examples should have a line above and below, same for related references.
• The image that is a preview on the tutorials main page for each tutorial should appear at the top of each sub page. Applies for all resolutions. IT doesn't happen for get-started for example.

TABLET 768x800

1. Tutorials main page: https://p5js-wip.online/tutorials/

• In the header: Subtitle should be 24px and it is 30 px

2. Tutorials sub pages: https://p5js-wip.online/tutorials/get-started/

• In the color-gradients tutorial the example code overflows the grey section to the right: https://p5js-wip.online/tutorials/color-gradients/ .
  . This happens also for mobile resolution.

MOBILE 428x800

1. Tutorials main page: https://p5js-wip.online/tutorials/

• the description below each image should be 10px (but might be too small? ) It is currently 12px.

Tutorials use an abbreviated category in frontmatter

I didn't realize this until this comment but there is a manually managed relationship between the category values in the frontmatter of the tutorials and the rendered names of the categories (categoryNames in content/tutorials/config maps them). This introduces issues with translating those category names. I am curious if there are alternative options but I am not sure what the original intention was. @davepagurek what do you think?

Remove redundant "/" from concatenated routes

Routes are being concatenated to form links throughout and often there are redundant "/"s in the URLs. This doesn't affect functionality but creates an ugly URL. All occurrences should be addressed.

About QA feedback

Link: https://p5js-wip.online/about/

DESKTOP AND TABLET

• Side menu with sections of about page is missing

MOBILE 428x800

• In the top of the page we should have a sub menu of jump to for About.
  

Reference localization

I'm not sure if this is in the process of being address but currently the localized version of the reference is not looking quite right with many entries missing, from a glance, looks like all the translated ones? Notable excepting rectMode().

Speaking of rectMode(), there's another issue that shows up in localization which is the one line description for Chinese.

Because Chinese uses a different character for a full stop (。), simply truncating the first sentence before the first regular full stop character will cause the entire description to be rendered.

Update reference mdx to p5.js latest release 1.9.2

The current reference mdx files in the src/content/reference/en folder in this repo were generated 3 weeks ago.

We just released p5.js 1.9.2, and we'd need to update the reference mdx files to ensure they are updated when reference translation starts. We are not sure how you'd like to run the script you've written on your end to update those files, so I'm just opening this issue here. In the future, we can probably automate the process of updating reference mdx when releases happen.

We are still in the process of updating some other reference pages, and hope to have them completed and translated before content freeze date.

CC @outofambit @stalgiag @limzykenneth @davepagurek

Styling issue in References main page and sub pages

This issue will track the styling issues in the staging site for REferences main page and sub pages. Please add any additional items you might find during testing to this issue.

DESKTOP 1280 x 800

• In the sub pages: https://p5js-wip.online/reference/p5.Image/get/ the grey boxes with the coding examples have a darker colour of grey than in the mockups.

TABLET 768 x 800

• In the sub pages, the code examples with the grey background have too much padding on the left: https://p5js-wip.online/reference/p5/describe/ Additionally the spacing in the Parameters section doesn't match the mockups in figma.

Mobile 428 x 800

• In the sub pages, the code examples with the grey background have on the right top a copy and refresh button. In the figma button the refresh is below the copy. On staging the the refresh is to the right of the copy. .
• The Sample box next to the play and stop button is not aligned with the grey box to the left of the screen.

Incorrect examples link in English locale

Just noticed that the English locale examples index page is doubling up the "examples/examples/example-name". This breaks the links

Contributor docs page entries

For the contributor docs, currently there are too many docs on the page as only content in the immediate folder should be used, the contents in archive and project_wrapups folders should not be used.

There are also a few files that should not be included such as navbar.mdx and sidebar.mdx. These are copied over from the main repo so I can delete them there to make sure they don't show up here, I can at the same time also delete the files here if you like.

Styling issue in Contribute main page and sub pages

This issue will track the styling issues in the staging site for Contribute pages and subpages. Please add any additional items you might find during testing to this issue.

DESKTOP 1280 x 800

1. Related to the main page: https://p5js-wip.online/contribute/

• The pale blue section of the main page: https://p5js-wip.online/contribute/ needs additional padding above and below the title.
• The subtitle is 40 px in staging but only 30 px in the figma. Note: there seems to be inconsistency across the site on the subtitles in their designs. The subtitle is: ' Get involved ... ' .
• The text at the right of the first image is 20 px in figma but only 16px on staging

2. Related to the Contributor docs details https://p5js-wip.online/contribute/contributor_guidelines/

• The sub title All About Issues should be 40px but is 56px.
• The sub sub title What are issues is 40 px but should be 30 px

3. Related to the donate page https://p5js-wip.online/donate/

• There shouldn't be a pink banner at the top. This applies for all resolutions.
• There is a duplicated Donate title and subtitle.

Tablet 768 x 800

1. Related to the main page: https://p5js-wip.online/contribute/

• There is missing padding below the sub title: Get involved with p5.js, Within the pale blue section.
• The first image below the heading: Contributor Docs should have the image take the whole row and have the text beliw. Currently the text is to the right of the image.
• There should be 2 items per row for the image previews but we currently have 4.

2. Related to the Contributor docs details https://p5js-wip.online/contribute/contributor_guidelines/

• Add padding above page title: Contributor Guidelines (i can't tell if this is true or not, I don't have a way of checking spacing)

Mobile 428x800

1. Related to the main page: https://p5js-wip.online/contribute/

• There is too much padding above the Contribute title in the pale blue section of the page.
• There is black line missing between the pale blue section and the rest of the page below. It's a separator line above and below the blue pale section.
• In the Donate section, there is missing padding at the bottom, above the footer.

Styling issue in Community main page and sub pages

This issue will track the styling issues in the staging site for Community pages and subpages. Please add any additional items you might find during testing to this issue.

DESKTOP 1280 x 800

• In the main page, the images are in squares but in the mockup they are rectangles.
• All Sketches button / All Libraries button / All Events button on the Community page https://p5js-wip.online/community/ the outline of the All Sketches button is darker or bolder than in the mockups. In the mockup it also has more spacing to the right after the text. This applies to desktop, tablet and mobile.
• The preview images for the library section in the main page of community are as wide as the text for each section. In the mockups the preview images are smaller. https://p5js-wip.online/community/
• In the main community page, in the events section, the date should be December 1, 2023 and not 12/012/2023. This applies to desktop, tablet and mobile.
• The image previews are in squares and not in rectangles like in the mockup.
• The subtitle text " Get inspired by sketches from the p5.js community " is 40 px in staging but 30 px on the mockup. This is for all sub pages across all resolutions.
• The title name of under each preview (ie leadfExperience or Synonyms) is 18px in staging but 20 px on figma.

2. In the sub sketches pages https://p5js-wip.online/sketches/876499/

• The name of the author should be underneath the name of title. Currently there are next to each other.
• The date should be display in letters and not in numbers. For example: January 4, 2024 and not 04/01/2024
• The Show Code and Open Processing buttons Should not have the bolding around the button and Should have space between them
• The text at the bottom: " This sketch is ported from the OpenProcessing sketch archive " should have the links in pinks for the words sketch and OpenProcessing . There should also be more spacing underneath that text before the footer.

3. In the events page: https://p5js-wip.online/past-events/contributors-conference-2015/ :

• We should have the date below the name of the event

4. In the librariries page https://p5js-wip.online/libraries/ :

• The preview image takes the whole page, it should be 4 preview per line. currently only 1 per line.
• The title of each preview and description should be in different line and use 20 and 14 px like in the mockups respectively.

TABLET 768 x 800

1. In the Community page https://p5js-wip.online/community/ Sketches section.

• In the mockup we should have one or 2 images per row. In staging we have up to 3 images per row.
• The title of each preview is 18px but it should be 20px. Example: LeafExperience.

2. In the Community page https://p5js-wip.online/community/ Librairies section.

• We should have 2 items per row, we have 4 in staging
• The image for each item should be less wide than the text section.
• The title of each preview is 18px but it should be 20px. Example: Matrix.JS. This happens in all pages and subpages of Community.

3. In the Community page https://p5js-wip.online/community/ Events section.

• We should have 1-2 items per row, we have 3 in staging

4. In the Sketches page: https://p5js-wip.online/sketches/

• We should have two items per row. We currently have 4.
• There is padding missing above the footer

5. In the libraries page: https://p5js-wip.online/libraries/

• We should have two items per row, we currently have 1

6. in the event page https://p5js-wip.online/past-events/

• We should have 2 items per row, we currently have 4

MOBILE

1. In the community page https://p5js-wip.online/community/:

• The subtitle is 32 px and it should be 20px: ' See what people arund the world.. ' CAN'T TEST IT
• In the sketches section the preview are squares instead of rectangles.
• In the libraries section the images should not be as wide as the text below

2. the Sketches page: https://p5js-wip.online/sketches/

• We should have 2 items per row, we currently have 4
• Subtitle should be 20px but is 32 px CAN'T TEST IT
• The shape of the image preview should be rectangles, not squares

3. In the libraries page: https://p5js-wip.online/libraries/

• we have 1 item per row, we should have 2 items

CI Build failing

The CI Build is failing after #29 was merged even though #29 was built successfully on CI. The error is due to Sharp again. Investigating ....

bug: need to escape html tags in reference documentation

The HTML elements in all references should be typed by escaping the HTML entities and not simply as a tag. This leads to them being rendered as a tag, not as text.

For example, consider the following line in the reference of createInput:
https://github.com/bocoup/p5.js-website/blob/ef00c00bcc953c3c32f4778d5d16949c9df9bb4b/src/content/reference/en/p5/createInput.mdx?plain=1#L7

This leads to the reference being incorrectly rendered (instead of <input></input> text with an input element):

Instead the same should be re-written as <p>Creates a text <code>&lt;input&gt;&lt;/input&gt;</code> element.</p> so that the same is correctly rendered as:

Tutorial page formatting QA

• Related references/examples showing up as [object object]:
  
• Related references/examples headers still showing up even if the section is empty
• Links appear the same as body text before hovering:
  
• Images are currently allowed to be much larger than the height of the screen, e.g. the first image in https://p5js-wip.online/tutorials/repeating-with-loops/ Is there an across-the-board way to get more reasonable image sizing for images embedded using the default markdown image syntax, or do we have to convert those to <Image> components to specify a size?
• The text width for tutorials is the full width of the screen when the screen is large, which gets rather hard to read. For the reference page, there is a margin added on the right when the screen gets wide. Would it make sense to match the reference page, or maybe use a reasonable max text width for both?

Performance metatask

Just making this metatask to track performance issues and notes.

• The HTML for the Reference page is quite large. The text compression on GH Pages server handles this for the most part but flagging here in case the platform is ever switched.
• CodeEmbeds appear to be loading their p5 scripts in parallel and in my browser the cache isn't catching
• As expected there is a significant loading state on the search results page. Layout placeholders should be used to mitigate dramatic shift

Format for referencing related content requires a locale

I've still been using the old schema in tutorials for relatedExamples/relatedReference rather than a related object. When starting to update to the new format, I noticed that entries like p5/map error out due to it requiring a locale:

Before switching everything to the new reference format, is there a way to not have to specify a locale?

Download QA

Tested: https://p5js-wip.online/download/

DESKTOP 1280x800

• Size of sub titles should be 30x, it's 32px now (Start Coding Online, Download Single Files..)
• Reduce spacing above footer
• The text should not fill the page from left to right, there should be white space tot he right of the text

TABLET 768x800

• The button of p5.min.js is not aligned with the right margin
• The code link that is available to copy paste in the " Use p5.js from CND" section overflows the screen to the right. It should be in two lines, not 1.
• The black line on the left of the screen is not visible when you scroll to the bottom of the screen.
  

MOBILE 428x800

• The button of the p5.min.js overflows to the right of the screen.
• The code link that is available to copy paste in the " Use p5.js from CND" section overflows the screen to the right. It should be in two lines, not 1.

Need Content for Privacy Policy and Terms of Use pages

Just a heads up that the following pages need text. I wasn't able to find something in previous sites or repos to fill in for these.

• Privacy Policy
• Terms of Use

I also wrote something very simple for the contact page, which might need to be revised.

cc @Qianqianye

Search links get prefixed with default locale

Default locale should not be present in search links. Should be a simple fix

Code editor buttons getting slightly cut off

Just a heads up! I didn't notice this at all until I tried putting a code editor in a <Callout> with a background, where it's more obvious.

Final people content needed

I just noticed that there is no content for people at the moment. There is only a placeholder example at the moment. Any idea when this content might be ready? @Qianqianye @limzykenneth @davepagurek

We are moving quite fast this week so we have limited options. Unless the content is ready but not merged, I propose that we move forward with placeholder content, develop the layout, and hide the links for the people content for release.

Search form submission redirects to the English route

Search form submission currently redirects to the English locale.

Reusable regex for filtering out locale

To be used in multiple utilities.

See conversation in #26

Potential 1.9.3 release this week

We updated the last round of reference to include one-line description and merged the last PR today. We'd like to do a patch release 1.9.3 on this Tuesday or Wednesday, but we want to double check with you first to see if it's feasible. Thanks! @stalgiag @outofambit

CC @limzykenneth @davepagurek

GitLocalize translations of examples don't build without extra files

@limzykenneth #56 currently is failing because it places only the .mdx file of the example into the es folder. The en folder has an mdx as well as a code.js file.

It doesn't look like GitLocalize supports translating .js files, in case we wanted to translate comments.

If we don't care about the js file, we can maybe adapt the script that fetches the code for an example so that it always fetches the en version: https://github.com/bocoup/p5.js-website/blob/6e32d9150fdd9b37240ddf8f69692fc87f5967a4/src/pages/examples/%5B...slug%5D.astro#L15

Do we support Mermaid diagrams and inline math?

In one of our contributor docs, we have a diagram rendered with Mermaid since GitHub is able to render those in its readmes. A writer currently working on the documentation for functions like applyMatrix also was wondering if we could use something like GitHub readme inline math in documentation.

We don't necessarily need to implement any of these right away, but do you have a sense of what it would take to integrate them in the future?

Not all pages set the jumpToLinks

Holding off until all pages are complete before doing a final sweep to ensure that all jumpTo links are set per page. As a result you may occasionally navigate to a page that has "Jump to" links from a previous page still in the sidebar. This is expected. Just adding an issue to track it.

Contributor docs content

The updated and translated contributor docs are currently in the p5.js repo here and I believe the idea is to pull the data from there on build or similar. Is this currently in the works and/or can the contributor docs content at least be updated before the content freeze on April 10 so we have the latest version?

Code editor + preview no longer side-by-side

Not sure if this was intentional or not so feel free to close this if this was, but I noticed that the preview used to be to the left of the code, and now is always on top.

CodeFrame does not cache p5 library in service worker or browser cache on Chromium

Chromium browsers do not cache the p5 library used for examples. This is a limitation on the use of iframes with a srcdoc attribute on Chromium as documented here. As a result, pages like the arc() reference download the p5 library for each example. This happens regardless of service worker scope, origin, etc as far as I can tell. This does not happen on Firefox or Safari.

Some solution using iframe and srcdoc may exist that I do not see but afaik there are two possible approaches from here:

1. Generate HTML files to serve for the src attribute of the iframe ala _arc_reference_example_1.html. This is similar to what happens on the current p5 sites's example pages.
2. Make the CodeFrame component use p5 instance mode to render the canvas directly into the body without an iframe/document wrapper. This is how the current p5.js site handles reference sketches.

I believe that 2 is cleaner but I am open to alternatives. I think that the equivalent code from the current p5 website is here.

Potentially useful links:

• This wiki which explains p5.js global versus instance mode
• Astro's client directives, to prevent library code from running during static build

In dark mode, pages briefly flash to white when navigating

I wonder if there's a way we can get a black background earlier in the loading process to avoid that?

Styling issues in Home / Navigation Bar / side bar / footer

This issue will track the styling issues in the staging site for Home / Navigation Bar / side bar. Please add any additional items you might find during testing to this issue.

DESKTOP 1280 x 800

1. Top image:

• The first image is supposed to cover all of the space from left to right. There is a small space of white to the right when you scroll.
• There should be a black line above and below the image

2. Home content:

• The buttons for each section (Reference, Example, etc) have a black border that is bold, the line for them should be thinner.
• The images are a square shape instead of rectangle
• The Donate text at the bottom of the page should be 56 px, it is currently 40px. Same for Download p5.js
• The Donate button should be widder.
• New: the images should should alternate left - right - left- right. They are currently all to the right.

3. Footer:

• The asterisk should start at the height of the donate text. It starts now below donate.
• The text should be 20px, it is 18px.

TABLET 768 x 800

1. Header section:

• Reduce spacing between top menu and the start of the text.
• Reduce spacing between the top text and the description of the first image ‘ Lauren Lee… ‘

2. Navigation:

• Search text is not well centered from top to bottom
• The symbols (magnifying glass, world, setting) for the navigation items in pink are not well centered from top to bottom.

3. Home content:

• The buttons for each section (Reference, Example, etc) have the text overflow the limits of the button
• The sections of Explore the p5.js library reference and Learn p5.ks with examples shouldn’t have image previews.
• The Donate text at the bottom of the page should be 56 px, it is currently 40px. Same for Download p5.js
• Images should be rectangles not squares
• The Donate button should be widder.
• New: the main image should be taller from top to bottom.

4. Footer

• - [ ] There should only be 3 columns in the footer. Socials should be below Information per figma

Mobile 428x800

1. Navigation:

• Search should be at the top, above English and Accessibility

2. Home content:

• Images should be rectangles not squares
• At the bottom, the Download Library button should be displayed in one line, not two.

UI and website copy for translation

While we are preparing for the UI and website copy for translation, we noticed that there are a few items missing or need updates in the ui/en.yaml. It seems like all the changes in this commit are not there.

Filter by keyword
We will need to add 'Filter by keyword'.

Page names:
In the 'briefPageDescriptions' section of ui/en.yaml, we will need to remove the word 'Archive'.

Community page:
We won't have 'Core Libraries' and 'Community Libraries' in the community page, we will just call it 'Libraries'.

Accessibility setting:
We understand that we might not implement 'Reduced Motion' in this round, but we'd like to add it in the UI list and have it translated since we'd like to include it for future implementation.

Please let us know how you'd like to proceed. I can open a PR if it's easier. Thanks!

@stalgiag @outofambit; cc @limzykenneth @davepagurek

Styling issues in Donate page

DESKTOP 1280x800

• The buttons at the top (accesibility, language, etc) should be baby blue. They are currently pink like homepage.
• Top image is too big, size in mockup is 480x321
• Text covers all screen from left to right, in mockups ups there is a big margin to the right of the screen.

TABLET 768x800 - same feedback for mobile

• Top image is too big, it shouldn't cover the full screen from left to right
• The images below the donate box that are 1 per row should be less wide, they shouldn't fill the full screen from left to right
• Reduce spacing below Donate title

Language code for Simplified Chinese

In some places the language code used for Simplified Chinese is coded as zh but it should be zh-Hans instead, also to preserve existing URLs where possible (current website uses zh-Hans). I tried to change some instances of it in the code base and build scripts but not sure if I got it all and possibly may have messed things up a bit.

I noticed that whenever I tried to run npm test locally, it will delete many translated contributor docs for some reason, not sure if it is related though. See below for the deleted files:

        deleted:    src/content/contributor-docs/es/README.mdx
	deleted:    src/content/contributor-docs/es/contributing_to_the_p5.js_reference.mdx
	deleted:    src/content/contributor-docs/es/contributor_guidelines.mdx
	deleted:    src/content/contributor-docs/es/steward_guidelines.mdx
	deleted:    src/content/contributor-docs/es/webgl_contribution_guide.mdx
	deleted:    src/content/contributor-docs/hi/README.mdx
	deleted:    src/content/contributor-docs/hi/access.mdx
	deleted:    src/content/contributor-docs/hi/contributing_documentation.mdx
	deleted:    src/content/contributor-docs/hi/contributing_to_the_p5.js_reference.mdx
	deleted:    src/content/contributor-docs/hi/steward_guidelines.mdx
	deleted:    src/content/contributor-docs/hi/unit_testing.mdx
	deleted:    src/content/contributor-docs/hi/webgl_contribution_guide.mdx
	deleted:    src/content/contributor-docs/ko/README.mdx
	deleted:    src/content/contributor-docs/ko/contributing_documentation.mdx
	deleted:    src/content/contributor-docs/ko/contributing_to_the_p5.js_reference.mdx
	deleted:    src/content/contributor-docs/ko/contributor_guidelines.mdx
	deleted:    src/content/contributor-docs/ko/creating_libraries.mdx
	deleted:    src/content/contributor-docs/ko/friendly_error_system.mdx
	deleted:    src/content/contributor-docs/ko/inline_documentation.mdx
	deleted:    src/content/contributor-docs/ko/method.example.js
	deleted:    src/content/contributor-docs/ko/release_process.mdx
	deleted:    src/content/contributor-docs/ko/sidebar.mdx
	deleted:    src/content/contributor-docs/ko/steward_guidelines.mdx
	deleted:    src/content/contributor-docs/ko/unit_testing.mdx
	deleted:    src/content/contributor-docs/ko/webgl_contribution_guide.mdx
	deleted:    src/content/contributor-docs/ko/webgl_mode_architecture.mdx
	deleted:    src/content/contributor-docs/zh-Hans/README.mdx
	deleted:    src/content/contributor-docs/zh-Hans/access.mdx
	deleted:    src/content/contributor-docs/zh-Hans/contributing_to_the_p5.js_reference.mdx
	deleted:    src/content/contributor-docs/zh-Hans/contributor_guidelines.mdx
	deleted:    src/content/contributor-docs/zh-Hans/creating_libraries.mdx
	deleted:    src/content/contributor-docs/zh-Hans/fes_reference_dev_notes.mdx
	deleted:    src/content/contributor-docs/zh-Hans/friendly_error_system.mdx
	deleted:    src/content/contributor-docs/zh-Hans/inline_documentation.mdx
	deleted:    src/content/contributor-docs/zh-Hans/release_process.mdx
	deleted:    src/content/contributor-docs/zh-Hans/steward_guidelines.mdx
	deleted:    src/content/contributor-docs/zh-Hans/unit_testing.mdx
	deleted:    src/content/contributor-docs/zh-Hans/web_accessibility.mdx
	deleted:    src/content/contributor-docs/zh-Hans/webgl_contribution_guide.mdx
	deleted:    src/content/contributor-docs/zh-Hans/webgl_mode_architecture.mdx

Styling issues for Examples

This issue will track the styling issues in the staging site for Examples page and subpages. Please add any additional items you might find during testing to this issue.

DESKTOP 1280 x 800

• Header: Add padding below the title
• Content:The images are too wide in the previews. They should be less wide than the text.

TABLET 768 x 800
Content:

• There should be 2 elements per row. There are currently 4.
• The images are too wide in the previews. They should be less wide than the text.

Mobile 428x800

• #272
• Header:The subtitle text in the header should be 20px and it is currently 32px.

Content:

• The featured section is missing
• The images are too wide in the previews. They should be less wide than the text.
  In the detail page: https://p5js-wip.online/examples/animation-and-variables-drawing-lines/
• The Title is not align with the rest of the text in the left margin

bug: incorrect language tag for JavaScript

In many of the .mdx files containing the documentation, the JavaScript code snippets have been marked with the language tag JavaScript as follows:

This tag is incorrect and should be replaced by javascript. These incorrect language tags lead the build by Shiki to not be rendered as JS, but rather plaintext:

A simple global search and replacing [triple backticks]JavaScript with [triple backticks]javascript should fix the same.

Detangle routing

There were some unexpected issues with how Astro.js handles default routes and relative linking. As a result, we have had to move to handling much of the locale prefixing ourselves. We added an html transform middleware to the build and dev steps that simplifies this significantly. We should make another pass on the strategies for static path generation and linking and see if there are opportunities for simplification.

People QA

https://p5js-wip.online/people/

DESKTOP 1280x800

• The button at the top (Language, accesibility, search) should be light pink, they are dark pink now.
• The subtitle [p5.js was created by Lauren Lee ...] should be 30px, it is currently 32px
• The subtitle [p5.js was created by Lauren Lee ...] should not fill the whole screen from left to right. It should have white space to the right

TABLET 768X800

• Images for the first 3 roles shouldn't fill the screen. There should be a margin to the right

Translation of categories in Examples

Some background, the "Examples" were originally created with the same folder structure as the examples for the current website. Categories are then derived from the folder name. As I was working on the jump to links for examples, I realized that this directory-derived category name is not translatable.

A few possible solutions

1. Add the example category names to the UI translation doc

• Most direct
• Not ideal to put more data (especially data specific to a content collection) in the UI translation

2. Add a category property to the "Example" config

• Better organization
• Requires a single-line edit in each translation for all examples.

All of this can happen after the content freeze but curious about preferences:

@Qianqianye @davepagurek @limzykenneth

Setting to run checks

Hi @stalgiag @outofambit,

I can't merge the translation PRs because most of the latest PRs won't run the check, like #78. Is there a setting you can update to allow the PRs from other contributors to run checks? Or can you update my permission to run the checks? Thanks!

CC @limzykenneth @davepagurek

Reference file name clash

It is an edge case that needs to be deal with but essentially the translators noticed that when trying to translate smooth() the file it is pointing to is actually the reference for the constant SMOOTH instead. The reference for smooth() is presumably overwritten.

The current website handles it with the capitalization difference but with file based routing here, is there some way to handle both smooth() and SMOOTH given some file system can't handle case sensitivity?

Need to run a one-time conversion of asset loading URLS in Reference

Just noticed that some of the reference examples use assets/ as the prefix for loading a sketch asset. This will be read as relative to the MDX file when we want it to read from the assets folder in public/assets/. This is simple to do with a change like this:

loadImage('assets/rockies.jpg');
becomes
loadImage('/assets/rockies.jpg');

But this will require a one-time modification to all of the relevant reference MDX files (including some translations). I will then modify the reference parsing script to ensure it always enforces this. Just wanted to give a heads-up since I know there is ongoing translation work.

cc @outofambit @limzykenneth @Qianqianye @davepagurek

Styling issues identified in translations

• In the dropdown menu for Languages, the languages that use the latin alphabet should start with a caps letter: for example Espanol instead of espanol.
• If you go to the homepage and select Korean in languages and then click on the menu and select Tutorials, the Tutorials page will be displayed in English, not in Korean. Expectation would be for the selected language to be maintained when navigating through the site.

Missing list formatting

Hi! Looks like tutorials that use lists currently don't show any indentation or bullets, e.g.: https://p5js-wip.online/tutorials/color-gradients/

Change content schemas to require alt text with an image

In our content schemas, it is possible to provide an featured image but no alt text for it. Our schemas hold them separately as in:

featuredImage: image().optional(),
featuredImageAlt: z.string().optional(),

a schema like this would prevent authors from adding an image without also including alt text:

featuredImage: z.object({
    src: image(),
    alt: z.string()
}).optional(),

which also makes it possible to provide a default with accurate alt text, as in:

featuredImage: z.object({
    src: image(),
    alt: z.string()
}).optional().default({
  src: PlaceholderImage
  alt: 'the p5 logo in a grey box'
}),

Some internal links written in Reference JSDoc comments are broken

Relative links written in JSDoc comments are broken with the new output structure. These links typically take this format #/p5/noFill, work was done to make them relative with "./" instead of "#/" but the new structure won't handle that properly. We should address this at the building script

OpenProcessing Thumbnails are Low Resolution

For the homepage, community, and sketches pages we use the sketch thumbnails generated by OpenProcessing. Unfortunately these images are 400 by 400px and I haven't been able to find anything higher res generated by them. Unfortunately these images don't look great on desktop screens with layout design and occasionally they break the layout. @limzykenneth @Qianqianye do you have any insight on how we might be able to get higher resolution images from them or if they can generate higher ones?

For reference, I'm using the following URL form to get a link to the image for a sketch:

https://openprocessing-usercontent.s3.amazonaws.com/thumbnails/visualThumbnail{SKETCHID}@2x.jpg, where {SKETCHID} is the id of the sketch returned by the API and in the sketch's url itself. I'm actually not sure if this is an official part of their API but its the only way we have to get thumbnails for sketches on OpenProcessing.

Tutorials page currently lists everything vertically

These probably should use the horizontal space a bit:

Links broken on search results

e.g. on a search for p5.Shader (https://p5js-wip.online/search/?term=p5.Shader), the link to the reference is https://p5js-wip.online/en//reference/p5/p5.Shader instead of https://p5js-wip.online/reference/p5/p5.Shader (without the en//)