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) {