Fix OpenProcessing visualID type mismatch causing rate limiting

src/api/OpenProcessing.ts

@@ -19,7 +19,7 @@ const newCurationId = "89576";
  */
 export type OpenProcessingCurationResponse = Array<{
   /** Sketch ID used for constructing URLs */
-  visualID: string;
+  visualID: number;
   /** Title of sketch */
   title: string;
   /** Description of sketch */
@@ -85,7 +85,7 @@ export const getCurationSketches = memoize(async (
  */
 export type OpenProcessingSketchResponse = {
   /** Sketch ID used for constructing URLs */
-  visualID: string;
+  visualID: number;
   /** Title of sketch */
   title: string;
   /** Description of sketch */
@@ -108,7 +108,7 @@ export type OpenProcessingSketchResponse = {
  * @returns
  */
 export const getSketch = memoize(
-  async (id: string): Promise<OpenProcessingSketchResponse> => {
+  async (id: number): Promise<OpenProcessingSketchResponse> => {
     // check for memoized sketch in curation sketches
     const curationSketches = await getCurationSketches();
     const memoizedSketch = curationSketches.find((el) => el.visualID === id);
@@ -134,7 +134,7 @@ export const getSketch = memoize(
  * 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) => {
+export const getSketchSize = memoize(async (id: number) => {
   const sketch = await getSketch(id)
   if (sketch.mode !== 'p5js') {
     return { width: undefined, height: undefined };
@@ -164,16 +164,16 @@ export const getSketchSize = memoize(async (id: string) => {
   return { width: undefined, height: undefined };
 });
 
-export const makeSketchLinkUrl = (id: string) =>
+export const makeSketchLinkUrl = (id: number) =>
   `https://openprocessing.org/sketch/${id}`;
 
-export const makeSketchEmbedUrl = (id: string) =>
+export const makeSketchEmbedUrl = (id: number) =>
   `https://openprocessing.org/sketch/${id}/embed/?plusEmbedFullscreen=true&plusEmbedInstructions=false`;
 
-export const makeThumbnailUrl = (id: string) =>
+export const makeThumbnailUrl = (id: number) =>
   `https://openprocessing-usercontent.s3.amazonaws.com/thumbnails/visualThumbnail${id}@2x.jpg`;
 
-export const getSketchThumbnailSource = async (id: string) => {
+export const getSketchThumbnailSource = async (id: number) => {
   const manualThumbs = import.meta.glob<ImageMetadata>('./images/*', { import: 'default' })
   const key = `./images/${id}.png`;
   if (manualThumbs[key]) {

src/layouts/HomepageLayout.astro

@@ -22,7 +22,7 @@ const t = await getUiTranslator(currentLocale);
 const curationSketches = await getCurationSketches();
 const sketches = data.sketchIds.map(
   (id, i) =>
-    curationSketches.find((sk) => id.toString() === sk.visualID) ??
+    curationSketches.find((sk) => id === sk.visualID) ??
     curationSketches[i]
 );
 

src/layouts/SketchLayout.astro

@@ -21,7 +21,14 @@ interface Props {
 }
 
 const { sketchId, authorName } = Astro.props;
-const { title, createdOn, instructions } = await getSketch(sketchId);
+
+const sketchIdNumber = Number(sketchId);
+
+if (isNaN(sketchIdNumber)) {
+  console.error(`Invalid sketch ID: ${sketchId}`);
+}
+
+const { title, createdOn, instructions } = await getSketch(sketchIdNumber);
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
@@ -33,9 +40,9 @@ const dateString = new Date(createdOn).toLocaleDateString(currentLocale, {
 
 setJumpToState(null);
 const moreSketches = await getRandomCurationSketches(4);
-const featuredImageURL = makeThumbnailUrl(sketchId);
+const featuredImageURL = makeThumbnailUrl(sketchIdNumber);
 
-let { width, height } = await getSketchSize(sketchId);
+let { width, height } = await getSketchSize(sketchIdNumber);
 let heightOverWidth = 1 / 1.5;
 if (width && height) {
   // Account for OP header bar
@@ -72,14 +79,14 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
         width ? (
           <ScalingIframe
             client:load
-            src={makeSketchEmbedUrl(sketchId)}
+            src={makeSketchEmbedUrl(sketchIdNumber)}
             width={width}
             height={height}
             title={iframeTitle}
           />
         ) : (
           <iframe
-            src={makeSketchEmbedUrl(sketchId)}
+            src={makeSketchEmbedUrl(sketchIdNumber)}
             width="100%"
             height="100%"
             style={{
@@ -97,7 +104,7 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
     <div class="py-md grid gap-y-sm md:gap-y-md">
       <LinkButton
         variant="code"
-        url={`${makeSketchLinkUrl(sketchId)}/#code`}
+        url={`${makeSketchLinkUrl(sketchIdNumber)}/#code`}
         class="min-w-[184px] lg:min-w-[220px]">{t("Show Code")}</LinkButton
       >
       <LinkButton
@@ -110,7 +117,7 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
     {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(sketchId)}
+      This <a class="text-type-magenta" href={makeSketchLinkUrl(sketchIdNumber)}
         >sketch</a
       > is ported from the <a
         class="text-type-magenta"

src/pages/[locale]/sketches/[...slug].astro

@@ -8,7 +8,9 @@ export async function getStaticPaths() {
   const entries = await Promise.all(
     nonDefaultSupportedLocales.map(async (locale) => {
       return sketches.map((sketch) => ({
-        params: { locale, slug: sketch.visualID },
+        // Even though slug gets converted to string at runtime,
+        // TypeScript infers it as number from sketch.visualID, so we explicitly convert to string.
+        params: { locale, slug: String(sketch.visualID) },
         props: { authorName: sketch.fullname },
       }));
     })

src/pages/sketches/[...slug].astro

@@ -5,7 +5,9 @@ import { getCurationSketches } from "@src/api/OpenProcessing";
 export async function getStaticPaths() {
   const sketches = await getCurationSketches();
   return sketches.map((sketch) => ({
-    params: { slug: sketch.visualID },
+    // Even though slug gets converted to string at runtime,
+    // TypeScript infers it as number from sketch.visualID, so we explicitly convert to string.
+    params: { slug: String(sketch.visualID) },
     props: { authorName: sketch.fullname },
   }));
 }