Merge branch 'main' into 415-attrib

Author: ksen0

public/reference/data.json

@@ -23,6 +23,9 @@ export type OpenProcessingCurationResponse = Array<{
   title: string;
   /** Description of sketch */
   description: string;
+  instructions: string;
+  mode: string;
+  createdOn: string;
   userID: string;
   submittedOn: string;
   /** Author's name */
@@ -36,16 +39,19 @@ export type OpenProcessingCurationResponse = Array<{
  * @param limit max number of sketches to return
  * @returns sketches
  */
-export const getCurationSketches = async (
+export const getCurationSketches = memoize(async (
   limit?: number,
 ): Promise<OpenProcessingCurationResponse> => {
   const limitParam = limit ? `limit=${limit}` : "";
   const response = await fetch(
     `${openProcessingEndpoint}curation/${curationId}/sketches?${limitParam}`,
   );
+  if(!response.ok){ //log error instead of throwing error to not cache result in memoize
+    console.error('getCurationSketches', response.status, response.statusText)
+  }
   const payload = await response.json();
   return payload as OpenProcessingCurationResponse;
-};
+});
 
 /**
  * API Response from a call to the Sketch endpoint
@@ -69,26 +75,50 @@ export type OpenProcessingSketchResponse = {
 
 /**
  * Get info about a specific sketch from the OpenProcessing API
+ * First checks if the sketch is in the memoized curated sketches and returns the data if so,
+ * Otherwise calls OpenProcessing API for this specific sketch
  *
  * https://documenter.getpostman.com/view/16936458/2s9YC1Xa6X#7cd344f6-6e87-426a-969b-2b4a79701dd1
  * @param id
  * @returns
  */
-export const getSketch = memoize(async (
-  id: string,
-): Promise<OpenProcessingSketchResponse> => {
+export const getSketch = memoize(
+  async (id: string): Promise<OpenProcessingSketchResponse> => {
+    // check for memoized sketch in curation sketches
+    const curationSketches = await getCurationSketches();
+    const memoizedSketch = curationSketches.find((el) => el.visualID === id);
+    if (memoizedSketch) {
+      return {
+        ...memoizedSketch,
+        license: "",
+      } as OpenProcessingSketchResponse;
+    }
+
+    // check for sketch data in Open Processing API
   const response = await fetch(`${openProcessingEndpoint}sketch/${id}`);
+    if (!response.ok) {
+      //log error instead of throwing error to not cache result in memoize
+      console.error("getSketch", id, response.status, response.statusText);
+  }
   const payload = await response.json();
   return payload as OpenProcessingSketchResponse;
 });
 
+/**
+ * Note: this currently calls `/api/sketch/:id/code`
+ * But only uses the width and height properties from this call
+ * Width and height should instead be added to properties for `/api/sketch/:id` or `api/curation/:curationId/sketches` instead
+ */
 export const getSketchSize = memoize(async (id: string) => {
   const sketch = await getSketch(id)
   if (sketch.mode !== 'p5js') {
     return { width: undefined, height: undefined };
   }
 
   const response = await fetch(`${openProcessingEndpoint}sketch/${id}/code`);
+  if(!response.ok){ //log error instead of throwing error to not cache result in memoize
+    console.error('getSketchSize', id, response.status, response.statusText)
+  }
   const payload = await response.json();
 
   for (const tab of payload) {

public/search-indices/en.json

@@ -1,4 +1,4 @@
-import { useRef, useLayoutEffect, useEffect } from "preact/hooks";
+import { useRef, useLayoutEffect, useEffect, useState } from "preact/hooks";
 import { cdnLibraryUrl } from "@/src/globals/globals";
 
 interface CodeBundle {
@@ -42,7 +42,9 @@ canvas {
 }
 ${code.css || ""}
 </style>
-${(code.scripts ? [cdnLibraryUrl, ...code.scripts] : []).map((src) => `<script type="text/javascript" src="${src}"></script>`).join('\n')}
+<!-- If we need an addon script, load p5 the usual way with no caching to make sure
+the import order doesn't get messed up. -->
+${((code.scripts?.length ?? 0) > 0 ? [cdnLibraryUrl, ...(code.scripts ?? [])] : []).map((src) => `<script type="text/javascript" src="${src}"></script>`).join('\n')}
 <body>${code.htmlBody || ""}</body>
 <script id="code" type="text/javascript">${wrapSketch(code.js) || ""}</script>
 ${(code.scripts?.length ?? 0) > 0 ? '' : `
@@ -84,6 +86,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
   const p5ScriptTag = document.getElementById(
     "p5ScriptTag",
   ) as HTMLScriptElement;
+  const [mounted, setMounted] = useState(false);
 
   // For performance, set the iframe to display:none when
   // not visible on the page. This will stop the browser
@@ -99,11 +102,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
       (entries) => {
         entries.forEach((entry) => {
           if (!iframeRef.current) return;
-          if (entry.isIntersecting) {
-            iframeRef.current.style.removeProperty("display");
-          } else {
-            iframeRef.current.style.display = "none";
-          }
+          setMounted(entry.isIntersecting);
         });
       },
       { rootMargin: "20px" },
@@ -116,6 +115,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
   useEffect(() => {
     (async () => {
       if (!p5ScriptTag || !iframeRef.current) return;
+      if (!mounted) return;
 
       /*
        * Uses postMessage to receive the text content of p5.min.js, to be included
@@ -146,7 +146,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
         return;
       }
     })();
-  }, [props.jsCode]);
+  }, [props.jsCode, mounted]);
 
   return (
     <div
@@ -155,13 +155,13 @@ export const CodeFrame = (props: CodeFrameProps) => {
     >
       <iframe
         ref={iframeRef}
-        srcDoc={wrapInMarkup({
+        srcDoc={mounted ? wrapInMarkup({
           js: props.jsCode,
           css: props.cssCode,
           htmlBody: props.htmlBodyCode,
           base: props.base,
           scripts: props.scripts,
-        })}
+        }) : undefined}
         sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
         aria-label="Code Preview"
         title="Code Preview"

public/search-indices/es.json

@@ -67,10 +67,12 @@ export const CodeEmbed = (props) => {
     setRendered(true);
 
     // Includes p5.min.js script to be used by `CodeFrame` iframe(s)
-    const p5ScriptElement = document.createElement("script");
-    p5ScriptElement.id = "p5ScriptTag";
-    p5ScriptElement.src = cdnLibraryUrl;
-    document.head.appendChild(p5ScriptElement);
+    if (!document.getElementById("p5ScriptTag")) {
+      const p5ScriptElement = document.createElement("script");
+      p5ScriptElement.id = "p5ScriptTag";
+      p5ScriptElement.src = cdnLibraryUrl;
+      document.head.appendChild(p5ScriptElement);
+    }
   }, []);
 
   if (!rendered) return <div className="code-placeholder" />;

public/search-indices/hi.json

@@ -72,18 +72,25 @@ export const ReferenceDirectoryWithFilter = ({
 
     return categoryData.reduce((acc: FilteredCategoryData[], category) => {
       const filteredSubcats = category.subcats.reduce(
-        (subAcc, subcat) => {
+        (subAcc: typeof category.subcats, subcat) => {
           const filteredEntries = subcat.entries.filter((entry) =>
             entry.data.title
               .toLowerCase()
               .includes(searchKeyword.toLowerCase()),
           );
+          if (
+            subcat.entry &&
+            subcat.entry.data.title.toLowerCase().includes(searchKeyword.toLowerCase())
+          ) {
+            filteredEntries.push(subcat.entry);
+          }
+          
           if (filteredEntries.length > 0) {
             subAcc.push({ ...subcat, entries: filteredEntries });
           }
           return subAcc;
         },
-        [] as typeof category.subcats,
+        [],
       );
 
       if (filteredSubcats.length > 0) {

public/search-indices/ko.json

@@ -120,7 +120,7 @@ If the parameter is optional, add square brackets around the name:
 
 ### Additional info: Constants
 
-If the parameter takes one or more values defined in [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) , then the type should be specified as `{Constant}` and the valid values should be enumerated in the comment following the `either` keyword, e.g.:
+If the parameter takes one or more values defined in [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), then the type should be specified as `{Constant}` and the valid values should be enumerated in the comment following the `either` keyword, e.g.:
 
 ```
 @param {Constant} horizAlign horizontal alignment, either LEFT, CENTER, or RIGHT
@@ -225,7 +225,7 @@ The relevant `@example` tag to create the above is as follows:
 
 After the `@example` tag, you should start an HTML `<div>` tag followed by a `<code>` tag. In between the opening and closing `<code>`  tag, you will insert the relevant example code. The basic principle of writing good example code for the reference is to keep things simple and minimal. The example should be meaningful and explain how the feature works without being too complicated. The example’s canvas should be 100x100 pixels and if the `setup()` function is not included, such as in the example above, the code will be automatically wrapped in a `setup()` function with a default 100x100 pixels gray background canvas created. We won’t go through the details about best practices and code style for the example code here; please see the reference style guide instead.
 
-You can have multiple examples for one feature.To do so, add an additional `<div>` and `<code>` HTML block right after the first closed, separated by a blank line.
+You can have multiple examples for one feature. To do so, add an additional `<div>` and `<code>` HTML block right after the first closed, separated by a blank line.
 
 ```
 * @example

public/search-indices/zh-Hans.json

@@ -386,7 +386,7 @@ p5.js' code standard or code style is enforced by [ESLlint](https://eslint.org/)
 
 While working on any features of p5.js, it is important to keep in mind the design principles of p5.js. Our priorities may differ from the priorities of other projects, so if you are coming from a different project, we recommend that you familiarize yourself with p5.js' design principles.
 
-* **Access** We prioritize accessibility first and foremost, and decisions we make must take into account how it increases access to historically marginalized groups. Read more about this in our access statement.
+* **Access** We prioritize accessibility first and foremost, and decisions we make must take into account how they increase access to historically marginalized groups. Read more about this in our access statement.
 * **Beginner Friendly** The p5.js API aims to be friendly to beginner coders, offering a low barrier to creating interactive and visual web content with cutting-edge HTML5/Canvas/DOM APIs.
 * **Educational** p5.js is focused on an API and curriculum that supports educational use, including a complete reference to the API with supporting examples, as well as tutorials and sample class curricula that introduce core creative coding principles in a clear and engaging order.
 * **JavaScript and its community** p5.js aims to make web development practices more accessible to beginners by modeling proper JavaScript design patterns and usage while abstracting them where necessary. As an open-source library, p5.js also includes the wider JavaScript community in its creation, documentation, and dissemination.

src/api/OpenProcessing.ts

@@ -278,7 +278,7 @@ Your addon library may not extend p5 or p5 classes at all, but instead just offe
 
 **p5.js has two modes, global mode and instance mode.** In global mode, all p5 properties and methods are bound to the `window` object, allowing users to call methods like `background()` without having to prefix them with anything. However, this means you need to be careful not to overwrite native JavaScript functionality. For example “`Math`” and “`console`” are both native Javascript functionalities so you shouldn’t have methods named “`Math`” or “`console`”.
 
-**Class names should use** `PascalCase`**, while methods and properties should use** `camelCase`**.** Classes in p5 are prefixed with p5. We would like to keep this namespace for p5 core classes only, so when you create your own namespace, **do not include the** `p5.` **prefix for class names**. You are welcomed to create your own prefix, or just give them non-prefixed names.
+**Class names should use** `PascalCase`**, while methods and properties should use** `camelCase`**.** Classes in p5 are prefixed with p5. We would like to keep this namespace for p5 core classes only, so when you create your own namespace, **do not include the** `p5.` **prefix for class names**. You are welcome to create your own prefix, or just give them non-prefixed names.
 
 ```js
 // Do not do this
@@ -306,4 +306,4 @@ p5.prototype.myMethod = function(){
 
 **Examples are great, too!** They show people what your library can do. Because this is all JavaScript, people can see them running online before they download anything.[ ](http://jsfiddle.net/) You can create a collection of examples on the p5.js web editor to showcase how your library works.
 
-**Submit your library!** Once your library is ready for distribution and you’d like it included on the [p5js.org/libraries](https://p5js.org/libraries/) page, please submit a pull request on the p5.js website GitHub repository following [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!
+**Submit your library!** Once your library is ready for distribution and you’d like it included on the [p5js.org/libraries](https://p5js.org/libraries/) page, please submit a pull request on the p5.js website GitHub repository following [this instruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!

src/components/CodeEmbed/frame.tsx

@@ -149,7 +149,7 @@ Always use `let` to declare variables.
 
 **Accessibility terminology**
 
-The following terminiology is adapted from the WordPress documentation guidelines for [Writing inclusive documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). For more background on people-first language, see the CDC's guide on [Communicating With and About People with Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html).
+The following terminology is adapted from the WordPress documentation guidelines for [Writing inclusive documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). For more background on people-first language, see the CDC's guide on [Communicating With and About People with Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html).
 
 | Recommended                                                     | Not Recommended                                                    |
 | --------------------------------------------------------------- | ------------------------------------------------------------------ |
@@ -722,7 +722,7 @@ if (
 
 ## Iteration
 
-* Don’t use a `while` or `do-while` loops unless it's necessary. Use `for` loops to iterate a fixed number of times.
+* Don’t use `while` or `do-while` loops unless it's necessary. Use `for` loops to iterate a fixed number of times.
 
 ```javascript
 let numPetals = 7;
@@ -905,7 +905,7 @@ for (let i = 0; i < numbers.length; i += 1) {
 let numbersCopy = numbers.slice();
 ```
 
-* Write arrays on multiple lines when it improves readibility. Use line breaks after the opening bracket and before the closing bracket. Add a trailing comma.
+* Write arrays on multiple lines when it improves readability. Use line breaks after the opening bracket and before the closing bracket. Add a trailing comma.
 
 ```javascript
 // Bad.

src/components/CodeEmbed/index.jsx

@@ -90,7 +90,7 @@ The basic format of a translation file's item has a key and a value (message) in
 { "key": "value" }
 ```
 
-For example, we have a ASCII logo saved in this format:
+For example, we have an ASCII logo saved in this format:
 
 ```json
 "logo": "    _ \n /\\| |/\\ \n \\ ` ' /  \n / , . \\  \n \\/|_|\\/ \n\n"

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -162,7 +162,7 @@ Next, you will file an issue ticket to discuss creating a new case or confirm yo
 
 Go to the [issue board](https://github.com/processing/p5.js/issues/), press the "New Issue" button, and then choose the "Issue: 💡 Existing Feature Enhancement" option. An empty form should appear.
 
-Add a title along the lines of “Adding a new case to `fileLoadErrrorCases`: \[a high-level description of your file load error case].” For the “Increasing access” section, enter a short paragraph on the typical scenario you prepared at the beginning of this step.
+Add a title along the lines of “Adding a new case to `fileLoadErrorCases`: \[a high-level description of your file load error case].” For the “Increasing access” section, enter a short paragraph on the typical scenario you prepared at the beginning of this step.
 
 Then, check the “Friendly Errors” box for the “Most appropriate sub-area of p5.js?” question. Lastly, for the “Feature enhancement details” section, enter your paragraph detailing your error handling and what file types it loads.
 

src/content/contributor-docs/en/contributing_to_the_p5js_reference.mdx

@@ -2,7 +2,7 @@
  * "This is a template for inline documentation of a method. Remove all text
  * between double quotes for using this template. Some description about the
  * method goes here. Explain in simple words, what the function does and what
- * would be good/bad use cases for it. If there are any corners cases or warnings,
+ * would be good/bad use cases for it. If there are any corner cases or warnings,
  * do explain them over here."
  *
  * By default, the background is transparent.
@@ -32,8 +32,8 @@
  * "A single line precisely describing the second example"
  */
 
-// "If your method has more than one signatures, they can be documentated each
-// in their own block with description about their parameters as follows."
+// "If your method has more than one signature, they can be documented each
+// in their own block with description of their parameters as follows."
 /**
  * @method "methodName"
  * @param {"dataType"} "paramName" "Description of the param"

src/content/contributor-docs/en/contributor_guidelines.mdx

@@ -53,7 +53,7 @@ CDNs will take a bit more time (a day or two) to update but they will automatica
 
 ## What's actually happening
 
-The GitHub Action ["New p5.js release"](../.github/workflows/release-workflow.yml) is triggered on a tag that matches the pattern `v*.*.*` which is created by the `npm version ___` command.
+The GitHub Action ["New p5.js release"](../.github/workflows/release.yml) is triggered on a tag that matches the pattern `v*.*.*` which is created by the `npm version ___` command.
 
 Once triggered, it will run the following steps:
 
@@ -76,7 +76,7 @@ In principle, we try to concentrate as many steps as possible to be run in one p
 
 ## Testing
 
-As the release steps are run in CI, testing them can be difficult. Using [act](https://github.com/nektos/act/) to test running of the steps locally is possible (and was how they were tested while being developed) but require some temporary modifications to the workflow definition, we'll roughly document here as the precise steps will likely change over time.
+As the release steps are run in CI, testing them can be difficult. Using [act](https://github.com/nektos/act/) to test running of the steps locally is possible (and was how they were tested while being developed) but requires some temporary modifications to the workflow definition, we'll roughly document here as the precise steps will likely change over time.
 
 The test steps will not run because not all system requirements are present to run the mocha Chrome tests. Some system dependencies will likely be needed to be installed with `apt` before setting up the rest of the environment. Keep an eye on the error messages which should give some information on what packages are missing.