Merge branch 'main' into p5.loadingAnimation.js

Author: ksen0

src/api/OpenProcessing.ts

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

src/content/tutorials/en/get-started.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
 

src/content/tutorials/en/setting-up-your-environment.mdx

@@ -61,7 +61,7 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o
 - Open a desktop browser on your computer and go to [https://editor.p5js.org/](https://editor.p5js.org/).
 - Click the [“Sign up”](https://editor.p5js.org/signup) link on the top-right of the web page.
 
-![An arrow pointing to the “Sign Up” link in the top right corner of the p5.js Web Editor.](../images/introduction/web-editor-signup.png)
+![An arrow pointing to the “Sign Up” link in the top right corner of the p5.js Editor.](../images/introduction/p5_editor_sign_up.png)
 
 
 ### Step 2: Create an account with [p5.js Web Editor](https://editor.p5js.org/)
@@ -73,7 +73,7 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o
   - Create and confirm a password. 
   - Click the “Sign Up” button.
 
-![A user clicks the “Sign Up” button in the p5.js Web Editor,  enters a new username, email address, and password.](../images/introduction/editor-signup.gif)
+![An arrow pointing to the highlighted User Name, Emaill, Password, and Confirm Password fields on the Sign Up page.](../images/introduction/p5_editor_sign_up_page.png)
 
 - Using a Google account
   - Click on the button on the bottom of the page that says “Login with Google.” 
@@ -98,21 +98,29 @@ The [p5.js Web Editor](https://editor.p5js.org/) is an online environment where
 
 The following diagram labels and describes each element of the editor’s interface:
 
-![A labeled diagram of the p5.js Web Editor’s user interface.](../images/introduction/web-editor-diagram.png)
+![A labeled diagram of the p5.js Web Editor’s user interface.](../images/introduction/p5_editor_interface_breakdown.png)
+
+{/* ![Play and Stop buttons.](../images/introduction/p5_editor_play_start.png)
+![Settings button with a gear icon in the center.](../images/introduction/p5_editor_settings.png) */}
 
 
 ### Step 4: Name, save, and run your first sketch
 
 - Name your projects by clicking on the pencil icon above the text editor and typing in a name for your project.
+
+![An arrow points to a pencil icon to rename a sketch.](../images/introduction/p5_editor_naming_a_sketch.png)
+
 - Save projects by clicking on *File* in the top toolbar, and selecting *Save*. 
   - Make sure you are logged in to your account or you will not be able to save the sketch.
   - Saving projects frequently helps to ensure that code isn’t lost if something happens to your computer, browser, or internet connection while you are coding.
 
-![A user on the p5.js Web Editor names a new project “My First Sketch” and saves it. A notification box then appears for a moment with the text “Sketch saved.”](../images/introduction/renameSave.gif)
+![A user on the p5.js Web Editor names a new project and saves it.”](../images/introduction/p5_editor_saving_a_sketch.png)
+
+![An arrow pointing to a notification box with the text “Sketch saved.”](../images/introduction/p5_editor_saved_sketch_notification.png)
 
 To view the output of your code, click the *Play* button in the top left corner: 
 
-![A blank canvas appears in the preview window of the p5.js Web Editor when a user clicks on the “Play” button in the top right corner.](../images/introduction/play.gif)
+![A blank canvas appears in the preview window of the p5.js Web Editor when a user clicks on the “Play” button in the top right corner.](../images/introduction/p5_editor_running_a_sketch.png)
 
 A *p5.js sketch* is a text file with code written in the *JavaScript* programming language. *JavaScript* is a programming language used to make web pages interactive. p5.js is a library written in *JavaScript* – which is why it ends in “*.js*” for *JavaScript*. With p5.js, you can create programs that are colorful and animated, with features that users can interact with! To learn more about some of the things you can do with p5.js, watch the [p5.js Welcome Video!](https://hello.p5js.org/) To learn more about JavaScript, you can visit [this resource.](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 

src/content/tutorials/images/introduction/editor-signup.gif

@@ -21,76 +21,83 @@ interface Props {
 }
 
 const { sketchId, authorName } = Astro.props;
-const sketchInfo = await getSketch(sketchId);
+const { title, createdOn, instructions } = await getSketch(sketchId);
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
-const dateString = new Date(sketchInfo.createdOn).toLocaleDateString(
-  currentLocale,
-  {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  }
-);
+const dateString = new Date(createdOn).toLocaleDateString(currentLocale, {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
 
 setJumpToState(null);
 const moreSketches = await getRandomCurationSketches(4);
-const featuredImageURL = makeThumbnailUrl(sketchInfo.visualID);
+const featuredImageURL = makeThumbnailUrl(sketchId);
 
-let { width, height } = await getSketchSize(sketchInfo.visualID);
+let { width, height } = await getSketchSize(sketchId);
 let heightOverWidth = 1 / 1.5;
 if (width && height) {
   // Account for OP header bar
   height += 50;
   heightOverWidth = height / width;
 }
 
-const iframeTitle = `OpenProcessing Sketch: ${sketchInfo.title} by ${authorName}`;
+const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
 ---
 
 <Head
-  title={sketchInfo.title}
+  title={title}
   locale={currentLocale}
   featuredImageSrc={featuredImageURL}
-  description={sketchInfo.instructions}
+  description={instructions}
 />
 
 <BaseLayout
-  title={sketchInfo.title}
+  title={title}
   titleAuthor={authorName}
   subtitle={dateString}
   variant="item"
   topic={"community"}
 >
   <div class="max-w-[770px]">
-    <div style={{
-      position: 'relative',
-      width: '100%',
-      paddingBottom: `${(heightOverWidth * 100).toFixed(4)}%`,
-    }}>
-      {width ? (
-        <ScalingIframe
-          client:load
-          src={makeSketchEmbedUrl(sketchInfo.visualID)}
-          width={width}
-          height={height}
-          title={iframeTitle}
-        />
-      ) : (
-        <iframe
-          src={makeSketchEmbedUrl(sketchInfo.visualID)}
-          width="100%"
-          height="100%"
-          style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
-          title={iframeTitle}
-        />
-      )}
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        paddingBottom: `${(heightOverWidth * 100).toFixed(4)}%`,
+      }}
+    >
+      {
+        width ? (
+          <ScalingIframe
+            client:load
+            src={makeSketchEmbedUrl(sketchId)}
+            width={width}
+            height={height}
+            title={iframeTitle}
+          />
+        ) : (
+          <iframe
+            src={makeSketchEmbedUrl(sketchId)}
+            width="100%"
+            height="100%"
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+            }}
+            title={iframeTitle}
+          />
+        )
+      }
     </div>
     <div class="py-md grid gap-y-sm md:gap-y-md">
       <LinkButton
         variant="code"
-        url={`${makeSketchLinkUrl(sketchInfo.visualID)}/#code`}
+        url={`${makeSketchLinkUrl(sketchId)}/#code`}
         class="min-w-[184px] lg:min-w-[220px]">{t("Show Code")}</LinkButton
       >
       <LinkButton
@@ -100,16 +107,11 @@ const iframeTitle = `OpenProcessing Sketch: ${sketchInfo.title} by ${authorName}
       >
     </div>
 
-    {
-      sketchInfo.instructions && (
-        <p class="text-md my-sm md:my-lg">{sketchInfo.instructions}</p>
-      )
-    }
+    {instructions && <p class="text-md my-sm md:my-lg">{instructions}</p>}
 
     <p class="text-xs md:text-base mb-3xl">
-      This <a
-        class="text-type-magenta"
-        href={makeSketchLinkUrl(sketchInfo.visualID)}>sketch</a
+      This <a class="text-type-magenta" href={makeSketchLinkUrl(sketchId)}
+        >sketch</a
       > is ported from the <a
         class="text-type-magenta"
         href="https://openprocessing.org">OpenProcessing</a

src/content/tutorials/images/introduction/p5_editor_interactive_landscape_1.png

@@ -5,7 +5,8 @@ import CommunityLayout from "@layouts/CommunityLayout.astro";
 import { getCollectionInLocaleWithFallbacks } from "@pages/_utils";
 
 export const getStaticPaths = async () => {
-  const sketches = await getCurationSketches(10);
+  const allSketches = await getCurationSketches();
+  const sketches = allSketches.slice(0, 10);
   return await Promise.all(
     nonDefaultSupportedLocales.map(async (locale) => {
       const libraries = await getCollectionInLocaleWithFallbacks(

src/content/tutorials/images/introduction/p5_editor_interactive_landscape_2.png

@@ -3,7 +3,8 @@ import { getCurationSketches } from "../api/OpenProcessing";
 import CommunityLayout from "../layouts/CommunityLayout.astro";
 import { getCollectionInDefaultLocale } from "./_utils";
 
-const sketches = await getCurationSketches(10);
+const allSketches = await getCurationSketches(10);
+const sketches = allSketches.slice(0, 10);
 const libraries = await getCollectionInDefaultLocale("libraries");
 const pastEvents = await getCollectionInDefaultLocale("events");
 ---