Merge pull request #358 from processing/fix/sketches

Add fixes for sketch thumbnails and layouts

Author: davepagurek

docs/community_sketches.md

@@ -0,0 +1,11 @@
+# Community Sketches
+
+Community sketches [from our curation](https://openprocessing.org/curation/87649) are fetched dynamically from OpenProcessing's API. The thumbnails generated from OpenProcessing are 400x400, but we display a few featured sketches at a larger size on the homepage and community page, so we also manually provide thumbnails at a larger resolution.
+
+## Adding a new sketch
+
+1. Add it to the curation on OpenProcessing
+2. Take a screenshot of the sketch at a resolution of 1500x1000 as a `.png`
+3. Add it to `src/api/images`, naming it after the ID of the sketch (the numeric part of the OpenProcessing URL.)
+
+   For example, the sketch https://openprocessing.org/sketch/2211029 would be saved as `2211029.png` in the folder.

src/api/OpenProcessing.ts

@@ -64,6 +64,7 @@ export type OpenProcessingSketchResponse = {
   userID: string;
   submittedOn: string;
   createdOn: string;
+  mode: string;
 };
 
 /**
@@ -81,6 +82,33 @@ export const getSketch = memoize(async (
   return payload as OpenProcessingSketchResponse;
 });
 
+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`);
+  const payload = await response.json();
+
+  for (const tab of payload) {
+    if (!tab.code) continue;
+    const match = /createCanvas\(\s*(\w+),\s*(\w+)\s*(?:,\s*(?:P2D|WEBGL)\s*)?\)/m.exec(tab.code);
+    if (match) {
+      if (match[1] === 'windowWidth' && match[2] === 'windowHeight') {
+        return { width: undefined, height: undefined };
+      }
+
+      const width = parseFloat(match[1]);
+      const height = parseFloat(match[2]);
+      if (width && height) {
+        return { width, height };
+      }
+    }
+  }
+  return { width: undefined, height: undefined };
+});
+
 export const makeSketchLinkUrl = (id: string) =>
   `https://openprocessing.org/sketch/${id}`;
 
@@ -90,6 +118,17 @@ export const makeSketchEmbedUrl = (id: string) =>
 export const makeThumbnailUrl = (id: string) =>
   `https://openprocessing-usercontent.s3.amazonaws.com/thumbnails/visualThumbnail${id}@2x.jpg`;
 
+export const getSketchThumbnailSource = async (id: string) => {
+  const manualThumbs = import.meta.glob<ImageMetadata>('./images/*', { import: 'default' })
+  const key = `./images/${id}.png`;
+  if (manualThumbs[key]) {
+    const img = await manualThumbs[key]()
+    return img;
+  }
+
+  return makeThumbnailUrl(id)
+}
+
 /**
  * The size of the thumbnails generated by OpenProcessing in px
  */
@@ -98,7 +137,7 @@ export const thumbnailDimensions = 400;
 export function isCurationResponse<C extends keyof AnyEntryMap>(
   item: OpenProcessingCurationResponse[number] | CollectionEntry<C>,
 ): item is OpenProcessingCurationResponse[number] {
-  return "visualID" in item;
+  return "visualID" in (item as any);
 }
 
 export const getRandomCurationSketches = memoize(async (num = 4) => {