Skip to content

Commit df637e9

Browse files
authored
Merge pull request #959 from junseok44/fix-openprocessing-visualId-type-mismatch
Fix OpenProcessing visualID type mismatch causing rate limiting
2 parents da0dfb5 + cb042ed commit df637e9

File tree

5 files changed

+29
-18
lines changed

5 files changed

+29
-18
lines changed

src/api/OpenProcessing.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const newCurationId = "89576";
1919
*/
2020
export type OpenProcessingCurationResponse = Array<{
2121
/** Sketch ID used for constructing URLs */
22-
visualID: string;
22+
visualID: number;
2323
/** Title of sketch */
2424
title: string;
2525
/** Description of sketch */
@@ -85,7 +85,7 @@ export const getCurationSketches = memoize(async (
8585
*/
8686
export type OpenProcessingSketchResponse = {
8787
/** Sketch ID used for constructing URLs */
88-
visualID: string;
88+
visualID: number;
8989
/** Title of sketch */
9090
title: string;
9191
/** Description of sketch */
@@ -108,7 +108,7 @@ export type OpenProcessingSketchResponse = {
108108
* @returns
109109
*/
110110
export const getSketch = memoize(
111-
async (id: string): Promise<OpenProcessingSketchResponse> => {
111+
async (id: number): Promise<OpenProcessingSketchResponse> => {
112112
// check for memoized sketch in curation sketches
113113
const curationSketches = await getCurationSketches();
114114
const memoizedSketch = curationSketches.find((el) => el.visualID === id);
@@ -134,7 +134,7 @@ export const getSketch = memoize(
134134
* But only uses the width and height properties from this call
135135
* Width and height should instead be added to properties for `/api/sketch/:id` or `api/curation/:curationId/sketches` instead
136136
*/
137-
export const getSketchSize = memoize(async (id: string) => {
137+
export const getSketchSize = memoize(async (id: number) => {
138138
const sketch = await getSketch(id)
139139
if (sketch.mode !== 'p5js') {
140140
return { width: undefined, height: undefined };
@@ -164,16 +164,16 @@ export const getSketchSize = memoize(async (id: string) => {
164164
return { width: undefined, height: undefined };
165165
});
166166

167-
export const makeSketchLinkUrl = (id: string) =>
167+
export const makeSketchLinkUrl = (id: number) =>
168168
`https://openprocessing.org/sketch/${id}`;
169169

170-
export const makeSketchEmbedUrl = (id: string) =>
170+
export const makeSketchEmbedUrl = (id: number) =>
171171
`https://openprocessing.org/sketch/${id}/embed/?plusEmbedFullscreen=true&plusEmbedInstructions=false`;
172172

173-
export const makeThumbnailUrl = (id: string) =>
173+
export const makeThumbnailUrl = (id: number) =>
174174
`https://openprocessing-usercontent.s3.amazonaws.com/thumbnails/visualThumbnail${id}@2x.jpg`;
175175

176-
export const getSketchThumbnailSource = async (id: string) => {
176+
export const getSketchThumbnailSource = async (id: number) => {
177177
const manualThumbs = import.meta.glob<ImageMetadata>('./images/*', { import: 'default' })
178178
const key = `./images/${id}.png`;
179179
if (manualThumbs[key]) {

src/layouts/HomepageLayout.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const t = await getUiTranslator(currentLocale);
2222
const curationSketches = await getCurationSketches();
2323
const sketches = data.sketchIds.map(
2424
(id, i) =>
25-
curationSketches.find((sk) => id.toString() === sk.visualID) ??
25+
curationSketches.find((sk) => id === sk.visualID) ??
2626
curationSketches[i]
2727
);
2828

src/layouts/SketchLayout.astro

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,14 @@ interface Props {
2121
}
2222
2323
const { sketchId, authorName } = Astro.props;
24-
const { title, createdOn, instructions } = await getSketch(sketchId);
24+
25+
const sketchIdNumber = Number(sketchId);
26+
27+
if (isNaN(sketchIdNumber)) {
28+
console.error(`Invalid sketch ID: ${sketchId}`);
29+
}
30+
31+
const { title, createdOn, instructions } = await getSketch(sketchIdNumber);
2532
2633
const currentLocale = getCurrentLocale(Astro.url.pathname);
2734
const t = await getUiTranslator(currentLocale);
@@ -33,9 +40,9 @@ const dateString = new Date(createdOn).toLocaleDateString(currentLocale, {
3340
3441
setJumpToState(null);
3542
const moreSketches = await getRandomCurationSketches(4);
36-
const featuredImageURL = makeThumbnailUrl(sketchId);
43+
const featuredImageURL = makeThumbnailUrl(sketchIdNumber);
3744
38-
let { width, height } = await getSketchSize(sketchId);
45+
let { width, height } = await getSketchSize(sketchIdNumber);
3946
let heightOverWidth = 1 / 1.5;
4047
if (width && height) {
4148
// Account for OP header bar
@@ -72,14 +79,14 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
7279
width ? (
7380
<ScalingIframe
7481
client:load
75-
src={makeSketchEmbedUrl(sketchId)}
82+
src={makeSketchEmbedUrl(sketchIdNumber)}
7683
width={width}
7784
height={height}
7885
title={iframeTitle}
7986
/>
8087
) : (
8188
<iframe
82-
src={makeSketchEmbedUrl(sketchId)}
89+
src={makeSketchEmbedUrl(sketchIdNumber)}
8390
width="100%"
8491
height="100%"
8592
style={{
@@ -97,7 +104,7 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
97104
<div class="py-md grid gap-y-sm md:gap-y-md">
98105
<LinkButton
99106
variant="code"
100-
url={`${makeSketchLinkUrl(sketchId)}/#code`}
107+
url={`${makeSketchLinkUrl(sketchIdNumber)}/#code`}
101108
class="min-w-[184px] lg:min-w-[220px]">{t("Show Code")}</LinkButton
102109
>
103110
<LinkButton
@@ -110,7 +117,7 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
110117
{instructions && <p class="text-md my-sm md:my-lg">{instructions}</p>}
111118

112119
<p class="text-xs md:text-base mb-3xl">
113-
This <a class="text-type-magenta" href={makeSketchLinkUrl(sketchId)}
120+
This <a class="text-type-magenta" href={makeSketchLinkUrl(sketchIdNumber)}
114121
>sketch</a
115122
> is ported from the <a
116123
class="text-type-magenta"

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ export async function getStaticPaths() {
88
const entries = await Promise.all(
99
nonDefaultSupportedLocales.map(async (locale) => {
1010
return sketches.map((sketch) => ({
11-
params: { locale, slug: sketch.visualID },
11+
// Even though slug gets converted to string at runtime,
12+
// TypeScript infers it as number from sketch.visualID, so we explicitly convert to string.
13+
params: { locale, slug: String(sketch.visualID) },
1214
props: { authorName: sketch.fullname },
1315
}));
1416
})

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import { getCurationSketches } from "@src/api/OpenProcessing";
55
export async function getStaticPaths() {
66
const sketches = await getCurationSketches();
77
return sketches.map((sketch) => ({
8-
params: { slug: sketch.visualID },
8+
// Even though slug gets converted to string at runtime,
9+
// TypeScript infers it as number from sketch.visualID, so we explicitly convert to string.
10+
params: { slug: String(sketch.visualID) },
911
props: { authorName: sketch.fullname },
1012
}));
1113
}

0 commit comments

Comments
 (0)