Merge branch 'main' into static

package.json

@@ -9,32 +9,33 @@
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "3.521.0",
+    "@aws-sdk/client-s3": "3.525.0",
-    "@aws-sdk/s3-request-presigner": "3.521.0",
+    "@aws-sdk/s3-request-presigner": "3.525.0",
-    "@next/bundle-analyzer": "14.1.0",
+    "@next/bundle-analyzer": "14.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.20",
+    "@types/node": "^20.11.24",
-    "@types/react": "18.2.58",
+    "@types/react": "18.2.61",
     "@types/react-dom": "18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@typescript-eslint/parser": "^7.1.0",
     "@vercel/analytics": "^1.2.2",
     "@vercel/blob": "^0.22.1",
     "@vercel/postgres": "0.7.2",
     "@vercel/speed-insights": "^1.0.10",
-    "autoprefixer": "10.4.17",
+    "autoprefixer": "10.4.18",
     "camelcase-keys": "^9.1.3",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.1",
     "date-fns": "^3.3.1",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.1.0",
+    "eslint-config-next": "14.1.1",
     "exifr": "^7.1.3",
-    "framer-motion": "^11.0.6",
+    "framer-motion": "^11.0.8",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "nanoid": "^5.0.6",
@@ -45,7 +46,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^5.0.1",
-    "sonner": "^1.4.1",
+    "sonner": "^1.4.3",
     "tailwindcss": "3.4.1",
     "ts-exif-parser": "^0.2.2",
     "typescript": "5.3.3",

src/components/CanvasBlurCapture.tsx

@@ -23,42 +23,50 @@ export default function CanvasBlurCapture({
   scale?: number
   quality?: number
 }) {
-  const refCanvas = useRef<HTMLCanvasElement>(null);
+  const refCanvas = useRef<HTMLCanvasElement | null>(null);
+  const refImage = useRef<HTMLImageElement | null>(null);
   const refTimeouts = useRef<NodeJS.Timeout[]>([]);
+  const refShouldCapture = useRef(true);
 
   useEffect(() => {
     const capture = () => {
-      console.log(`Attempting to capture blur data: ${imageUrl}`);
+      if (refShouldCapture.current) {
-      const canvas = refCanvas.current;
+        if (
-      if (canvas) {
+          refCanvas.current &&
-        canvas.width = width * scale;
+          refImage.current?.complete
-        canvas.height = height * scale;
+        ) {
-        canvas.style.width = `${width}px`;
+          const canvas = refCanvas.current;
-        canvas.style.height = `${height}px`;
+          canvas.width = width * scale;
-        const context = refCanvas.current?.getContext('2d');
+          canvas.height = height * scale;
-        if (context) {
+          canvas.style.width = `${width}px`;
-          context.scale(scale, scale);
+          canvas.style.height = `${height}px`;
-          context.filter =
+          const context = refCanvas.current?.getContext('2d');
-            'contrast(1.2) saturate(1.2)' +
+          if (context) {
-            `blur(${scale * 10}px)`;
+            context.scale(scale, scale);
-          context.drawImage(
+            context.filter =
-            image,
+              'contrast(1.2) saturate(1.2)' +
-            -edgeCompensation,
+              `blur(${scale * 10}px)`;
-            -edgeCompensation,
+            context.drawImage(
-            width + edgeCompensation * 2,
+              refImage.current,
-            width * image.height / image.width + edgeCompensation * 2,
+              -edgeCompensation,
-          );
+              -edgeCompensation,
-          refTimeouts.current.forEach(clearTimeout);
+              width + edgeCompensation * 2,
-          onCapture(canvas.toDataURL('image/jpeg', quality));
+              width * image.height / image.width + edgeCompensation * 2,
+            );
+            refTimeouts.current.forEach(clearTimeout);
+            onCapture(canvas.toDataURL('image/jpeg', quality));
+            refShouldCapture.current = false;
+          } else {
+            console.error('Cannot get 2d context');
+            // Retry capture in case canvas is not available
+            refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
+          }
         } else {
-          console.error('Cannot get 2d context');
+          // eslint-disable-next-line max-len
+          console.error('Cannot generate blur data: canvas/image not ready');
           // Retry capture in case canvas is not available
           refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
         }
-      } else {
-        console.error('Cannot generate blur data: canvas not found');
-        // Retry capture in case canvas is not available
-        refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
       }
     };
 
@@ -66,6 +74,7 @@ export default function CanvasBlurCapture({
     image.crossOrigin = 'anonymous';
     image.src = imageUrl;
     image.onload = capture;
+    refImage.current = image;
 
     // Attempt delayed capture in case image.onload never fires
     refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));

src/components/ImageBlurFallback.tsx

@@ -54,6 +54,7 @@ export default function ImageBlurFallback(props: ImageProps) {
     >
       {showPlaceholder &&
         <div className={clsx(
+          '@container',
           'absolute inset-0',
           'bg-main overflow-hidden',
           'transition-opacity duration-300 ease-in',
@@ -66,13 +67,13 @@ export default function ImageBlurFallback(props: ImageProps) {
               className: clsx(
                 imageClassName,
                 // Fix poorly blurred placeholder data generated by Safari
-                'blur-md scale-105',
+                'blur-sm @xs:blue-md scale-105',
               ),
             }} />
             :  <div className={clsx(
               'w-full h-full',
               'bg-gray-100/50 dark:bg-gray-900/50',
-            )}/>}
+            )} />}
         </div>}
       <Image {...{
         ...rest,

tailwind.config.js

@@ -42,5 +42,6 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+    require('@tailwindcss/container-queries'),
   ],
 };