Add fixes for sketch thumbnails and layouts

Author: davepagurek

src/api/OpenProcessing.ts

@@ -81,6 +81,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 +117,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>('../content/sketches/images/*', { import: 'default' })
+  const key = `../content/sketches/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
  */

src/components/GridItem/Sketch.astro

@@ -1,17 +1,24 @@
 ---
 import Image from "@components/Image/index.astro";
 import {
-  makeThumbnailUrl,
+  getSketchThumbnailSource,
   thumbnailDimensions,
   type OpenProcessingCurationResponse,
 } from "@/src/api/OpenProcessing";
 
 interface Props {
   item: OpenProcessingCurationResponse[number];
+  scale?: number;
   lazyLoad?: boolean;
 }
 
-const { item, lazyLoad } = Astro.props;
+const { item, lazyLoad, scale = 1 } = Astro.props;
+const imgSrc = await getSketchThumbnailSource(item.visualID)
+const width = Math.min(thumbnailDimensions * scale, 1500);
+const height = Math.min(
+  (imgSrc.width && imgSrc.height ? imgSrc.height / imgSrc.width : 1) * thumbnailDimensions * scale,
+  1000,
+);
 ---
 
 <a
@@ -24,10 +31,10 @@ const { item, lazyLoad } = Astro.props;
     // doesn't include that information
   }
   <Image
-    src={makeThumbnailUrl(item.visualID)}
+    src={imgSrc}
     alt="Screenshot of sketch"
-    width={thumbnailDimensions}
-    height={thumbnailDimensions}
+    width={width}
+    height={scale}
     loading={lazyLoad ? "lazy" : "eager"}
   />
   <p

src/components/PageHeader/ItemPage.astro

@@ -3,14 +3,20 @@ import { Icon } from "../Icon";
 
 interface Props {
   title: string;
+  titleAuthor?: string
   subtitle?: string;
   topic: {
     name: string;
     url: string;
   };
 }
 
-const { title, topic, subtitle } = Astro.props;
+const { title, topic, subtitle, titleAuthor } = Astro.props;
+let fullTitle = title;
+if (titleAuthor) {
+  fullTitle += '\n';
+  fullTitle += titleAuthor;
+}
 ---
 
 <div class="px-5 md:px-lg pt-5xl lg:pt-3xl pb-sm">
@@ -24,6 +30,6 @@ const { title, topic, subtitle } = Astro.props;
     >
     <span>{title}</span>
   </div>
-  <h1 class="whitespace-pre-line my-sm">{title}</h1>
+  <h1 class="whitespace-pre-line my-sm">{fullTitle}</h1>
   {subtitle && <p class="text-h3">{subtitle}</p>}
 </div>

src/components/ScalingIframe/index.tsx

@@ -0,0 +1,35 @@
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+
+export const ScalingIframe = ({
+  width,
+  ...props
+}: {
+  width: number;
+  [key: string]: any;
+}) => {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [scale, setScale] = useState(1);
+  useLayoutEffect(() => {
+    const fitToParent = () => {
+      const iframe = iframeRef.current;
+      // Two parents up to get out of the astro island
+      const parent = iframe?.parentElement?.parentElement;
+      if (!iframe || !parent) return;
+
+      const parentWidth = parent.getBoundingClientRect().width;
+      setScale(parentWidth / width);
+    };
+    fitToParent();
+    window.addEventListener("resize", fitToParent);
+    return () => window.removeEventListener("resize", fitToParent);
+  }, [width]);
+
+  return (
+    <iframe
+      width={width}
+      {...props}
+      style={{ transform: `scale(${scale.toFixed(4)})`, transformOrigin: 'top left' }}
+      ref={iframeRef}
+    />
+  );
+};