Responsive Images

library/foundations/scripts/save-assets.ts

@@ -40,6 +40,13 @@ const findAssetSizeAndDimensions = async (url: string) => {
     .then((response) => {
       console.info('downloaded. converting to webp');
       return sharp(Buffer.from(response.data))
+        .resize({
+          // max width for now
+          width: 800,
+          height: 800,
+          fit: 'inside',
+          withoutEnlargement: true,
+        })
         .webp()
         .toBuffer({ resolveWithObject: true })
         .catch((e) => {
@@ -64,6 +71,12 @@ const filterUnique =
     return acc;
   };
 
+// Promise to delay items in batches, e.g. to avoid upstream rate-limiting
+const batchDelay = (requestIndex: number, batchSize = 20) =>
+  new Promise<void>((resolve) => {
+    setTimeout(() => resolve(), Math.floor(requestIndex / batchSize) * 20);
+  });
+
 loadLayersFile(snapshotFileName)
   .then(({ layers, order }) => {
     return order
@@ -85,11 +98,13 @@ loadLayersFile(snapshotFileName)
   .then((assets) =>
     // for every asset, download it and convert it to webp
     Promise.all(
-      assets.map(({ value, ...rest }) =>
-        findAssetSizeAndDimensions(value).then((metadata) => ({
-          ...rest,
-          ...metadata,
-        }))
+      assets.map(({ value, ...rest }, i) =>
+        batchDelay(i)
+          .then(() => findAssetSizeAndDimensions(value))
+          .then((metadata) => ({
+            ...rest,
+            ...metadata,
+          }))
       )
     )
   )