Merge branch 'main' into issue-817

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

@@ -146,7 +146,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
         return;
       }
     })();
-  }, [props.jsCode, mounted]);
+  }, [props.jsCode, mounted,p5ScriptTag]);
 
   return (
     <div
@@ -161,7 +161,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
           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

@@ -30,30 +30,7 @@ const SearchProvider = ({
   const [results, setResults] = useState<SearchResult[]>([]);
 
   // Flattens the search index data
-  const flattenData = (data: FuseResult<SearchResult>) => {
-    const flatData: SearchResult[] = [];
-    let flatId = 0;
-    Object.entries(data).forEach(([category, entries]) => {
-      Object.entries(entries).forEach(([title, docDetails]) => {
-        // Since we are generating these links with Javascript and the
-        // middleware doesn't prefix the locale automatically, we need to
-        // do it manually here.
-        const relativeUrl =
-          currentLocale === defaultLocale
-            ? docDetails.relativeUrl
-            : `/${currentLocale}${docDetails.relativeUrl}`;
-        docDetails.relativeUrl = relativeUrl;
-        flatData.push({
-          id: flatId++,
-          category: category.replace("-fallback", ""),
-          title,
-          ...docDetails,
-        });
-      });
-    });
-
-    return flatData;
-  };
+  
 
   // Read the search term from query params on first load
   useEffect(() => {
@@ -80,6 +57,30 @@ const SearchProvider = ({
     }
 
     if (!searchTerm) return;
+    const flattenData = (data: FuseResult<SearchResult>) => {
+      const flatData: SearchResult[] = [];
+      let flatId = 0;
+      Object.entries(data).forEach(([category, entries]) => {
+        Object.entries(entries).forEach(([title, docDetails]) => {
+          // Since we are generating these links with Javascript and the
+          // middleware doesn't prefix the locale automatically, we need to
+          // do it manually here.
+          const relativeUrl =
+            currentLocale === defaultLocale
+              ? docDetails.relativeUrl
+              : `/${currentLocale}${docDetails.relativeUrl}`;
+          docDetails.relativeUrl = relativeUrl;
+          flatData.push({
+            id: flatId++,
+            category: category.replace("-fallback", ""),
+            title,
+            ...docDetails,
+          });
+        });
+      });
+  
+      return flatData;
+    };
 
     let flatData;
 

public/search-indices/hi.json

@@ -1,9 +1,9 @@
 name: p5.asciify
-description: Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly.
+description: Apply real-time ASCII conversion to your favorite WEBGL p5.js sketches instantly.
 category: shaders
-sourceUrl: https://github.com/humanbydefinition/p5.asciify
+sourceUrl: https://p5.textmode.art
 featuredImage: ../images/p5.asciify.png
-featuredImageAlt: A grid of ASCII characters representing perlin noise, with a centered logo reading "p5.asciify".
+featuredImageAlt: A grid of ASCII characters representing perlin noise with a centered logo reading "p5.asciify".
 author:
   name: humanbydefinition
   url: https://github.com/humanbydefinition

public/search-indices/ko.json

@@ -0,0 +1,9 @@
+name: svg-shapes-p5js
+description: A SVG drawing library for p5.js.
+category: drawing
+sourceUrl: https://github.com/irenelfeng/svg-shapes-p5js
+featuredImage: ../images/svg-shapes-p5js.png
+featuredImageAlt: The image for the SVG shapes library made of scaled svg of the p5.js star logo
+author:
+  name: Irene Feng
+  url: https://irenefeng.com

public/search-indices/zh-Hans.json

@@ -398,6 +398,22 @@ Thank you to Tuan Huang, Yu Lee, and Janis Sepúlveda for initiating the educati
     </Fragment>
   </EducationResource>  
 
+  <EducationResource
+    name="The Animation Codebook"
+    featuredImage={await import("../images/education-resources/Screenshot (508).png")}
+    featuredImageAlt="Screenshot of the Animation Codebook Website"
+  >
+    <Fragment slot="author">
+      Aishwarya Rajkumar
+    </Fragment>
+    <Fragment slot="description">
+      A project designed to enhance the technical skills for those with a background in animation.
+    </Fragment>
+    <Fragment slot="materials">
+      [Website](https://aijun19.github.io/TheAnimationCodeBook/)
+    </Fragment>
+  </EducationResource>  
+
 </ul>
 
 

src/api/OpenProcessing.ts

@@ -0,0 +1,3 @@
+name: HughJacks
+url: https://github.com/HughJacks
+category: contributor

src/components/CodeEmbed/frame.tsx

@@ -0,0 +1,3 @@
+name: Jack L
+url: http://jackeddielove.github.io
+category: contributor

src/components/SearchProvider/index.tsx

@@ -51,9 +51,7 @@ description: >
   parameter,
 
   <code>direction</code> sets the light’s direction using a
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object. For example,
-
+   <a href="/reference/p5/p5.Vector">p5.Vector</a> object. For example,
   <code>directionalLight(255, 0, 0, lightDir)</code> creates a red <code>(255,
   0, 0)</code> light
 

src/content/libraries/en/p5.ascify.yaml renamed to src/content/libraries/en/p5.asciify.yaml

@@ -18,7 +18,7 @@ description: >
   which takes time to process. Disabling the FES can significantly improve
 
   performance by turning off these checks.</p>
-line: 877
+line: 872
 isConstructor: false
 itemtype: property
 example:

src/content/libraries/en/svg-shapes-p5js.yaml

@@ -67,7 +67,7 @@ description: >
   pressing a mouse button. To prevent any default behavior for this event,
 
   add <code>return false;</code> to the end of the function.</p>
-line: 1585
+line: 1589
 isConstructor: false
 itemtype: method
 example:

src/content/libraries/images/svg-shapes-p5js.png

@@ -33,7 +33,7 @@ description: >
 
   has run is stored in the system variable
 
-  <a href="/reference/p5/frameCount/">frameCount()</a>.</p>
+  <a href="/reference/p5/frameCount/">frameCount</a>.</p>
 
   <p>Code placed within <code>draw()</code> begins looping after
 

src/content/pages/en/education-resources.mdx

@@ -26,7 +26,7 @@ description: >
 
   an event function such as <a
   href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
-line: 1932
+line: 1936
 isConstructor: false
 itemtype: method
 example:

src/content/pages/images/education-resources/Screenshot (508).png

@@ -30,7 +30,7 @@ description: >
   <code>keyIsDown(LEFT_ARROW)</code>. Key codes can be found on websites such as
 
   <a href="https://keycode.info" target="_blank">keycode.info</a>.</p>
-line: 809
+line: 811
 isConstructor: false
 itemtype: method
 example:

src/content/people/en/hughjacks.yaml

@@ -57,7 +57,7 @@ description: >
   the end
 
   of the function.</p>
-line: 472
+line: 474
 isConstructor: false
 itemtype: method
 example:

src/content/people/en/jack-l.yaml

@@ -73,7 +73,7 @@ description: >
   the end
 
   of the function.</p>
-line: 653
+line: 655
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5/directionalLight.mdx

@@ -91,7 +91,7 @@ description: >
 
   immediately after <a
   href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
-line: 1429
+line: 1433
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5/disableFriendlyErrors.mdx

@@ -72,7 +72,7 @@ description: >
   pressing a mouse button. To prevent any default behavior for this event,
 
   add <code>return false;</code> to the end of the function.</p>
-line: 968
+line: 972
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5/doubleClicked.mdx

@@ -60,7 +60,7 @@ description: >
   pressing a mouse button. To prevent any default behavior for this event,
 
   add <code>return false;</code> to the end of the function.</p>
-line: 882
+line: 886
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5/draw.mdx

@@ -87,7 +87,7 @@ description: >
 
   runs immediately after <a
   href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
-line: 1084
+line: 1088
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5/exitPointerLock.mdx

@@ -89,7 +89,7 @@ description: >
   mouse click. <a href="/reference/p5/mouseClicked/">mouseClicked()</a> runs
 
   immediately after <code>mouseReleased()</code>.</p>
-line: 1256
+line: 1260
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5/keyIsDown.mdx

@@ -75,7 +75,7 @@ description: >
   <p>Note: On Safari, <code>mouseWheel()</code> may only work as expected if
 
   <code>return false;</code> is added at the end of the function.</p>
-line: 1732
+line: 1736
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5/keyReleased.mdx

@@ -14,7 +14,7 @@ description: >
   created by using the <a href="/reference/p5/p5/">p5()</a> constructor, as in
 
   <code>new p5()</code>.</p>
-line: 560
+line: 559
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5/keyTyped.mdx

@@ -36,7 +36,7 @@ description: >
 
   an event function such as <a
   href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
-line: 1866
+line: 1870
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5/mouseClicked.mdx

@@ -53,12 +53,18 @@ Using the [p5.js Web Editor](https://editor.p5js.org/):
 
 - Log in to the [p5.js Web Editor](https://editor.p5js.org/).
 - Name your project “Interactive Landscape” by clicking the *pencil icon* and typing “Interactive Landscape” into the text box that appears.
+
+![A user on the p5.js Web Editor names a new project “Interactive Landscape”.](../images/introduction/p5_editor_interactive_landscape_1.png)
+
 - Click on *File* and select *Save*.
+
+![A user on the p5.js Web Editor saves their new project "Interactive Landscape".](../images/introduction/p5_editor_interactive_landscape_2.png)
+
 - Confirm your project is saved by navigating to your gallery of saved sketches:
   - Click on *File* and select *Open*.
   - Your most recent sketches will appear at the top of the list of projects saved on your account.
 
-![A user on the p5.js Web Editor names a new project “Interactive Landscape”, saves it, finds it in their gallery of saved sketches, and clicks the project's name to open it.](../images/introduction/rename-sketch.gif)
+![A user on the p5.js Web Editor finds their project "Interactive Landscape" in their gallery of saved sketches.](../images/introduction/p5_editor_interactive_landscape_3.png)
 
 #### Default Code