Merge branch 'main' into update-reference-regex-not-breat-Beta

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 {
@@ -86,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
@@ -101,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" },
@@ -118,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
@@ -148,7 +146,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
         return;
       }
     })();
-  }, [props.jsCode]);
+  }, [props.jsCode, mounted]);
 
   return (
     <div
@@ -157,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

@@ -59,7 +59,7 @@ Head over to [this link](../contributor_guidelines/) where you will be guided on
 
 Most of the time we will stick with this workflow quite strictly and, especially if you have contributed to other projects before, it may feel like there are too many hoops to jump through for what may be a simple contribution. However, the steps above are aimed to make it easy for you as a contributor and for stewards/maintainers to contribute meaningfully, while also making sure that you won't be spending time working on things that may not be accepted for various reasons. The steps above will help ensure that any proposals or fixes are adequately discussed and considered before any work begin, and often this will actually save you (and the steward/maintainer) time because the PR that would need additional fixing after review, or outright not accepted, would happen less often as a result.
 
-**We see contributing to p5.js as a learning opportunity** and we don't measure sucess by only looking at the volume of contributions we received. There is no time limit on how long it takes you to complete a contribution, so take your time and work at your own pace (we may check in after a long period of inactivity). Ask for help from any of the stewards or maintainers if you need them and we'll try our best to support you. For information related to area stewards or general maintenance of p5.js GitHub repository, please check out the [steward guidelines](../steward_guidelines/).
+**We see contributing to p5.js as a learning opportunity** and we don't measure success by only looking at the volume of contributions we received. There is no time limit on how long it takes you to complete a contribution, so take your time and work at your own pace (we may check in after a long period of inactivity). Ask for help from any of the stewards or maintainers if you need them and we'll try our best to support you. For information related to area stewards or general maintenance of p5.js GitHub repository, please check out the [steward guidelines](../steward_guidelines/).
 
 ## Non-source code contribution
 

public/search-indices/hi.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