Merge branch 'canary' into adds-temporary-eslint-v8-error

Author: ijjk

docs/api-reference/next/image.md

@@ -152,6 +152,7 @@ Try it out:
 
 - [Demo the `blur` placeholder](https://image-component.nextjs.gallery/placeholder)
 - [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
 
 ## Advanced Props
 
@@ -208,6 +209,7 @@ Try it out:
 
 - [Demo the default `blurDataURL` prop](https://image-component.nextjs.gallery/placeholder)
 - [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
 
 You can also [generate a solid color Data URL](https://png-pixel.com) to match the image.
 

errors/page-data-collection-timeout.md

@@ -11,7 +11,7 @@ When restarted it will retry all uncompleted jobs, but if a job was unsuccessful
 - Make sure that there is no infinite loop during execution.
 - Make sure all Promises in `getStaticPaths` `resolve` or `reject` correctly.
 - Avoid very long timeouts for network requests.
-- Increase the timeout by changing the `experimental.pageDataCollectionTimeout` configuration option (default `60` in seconds).
+- Increase the timeout by changing the `config.staticPageGenerationTimeout` configuration option (default `60` in seconds).
 
 ### Useful Links
 

errors/static-page-generation-timeout.md

@@ -11,7 +11,7 @@ When restarted it will retry all uncompleted jobs, but if a job was unsuccessful
 - Make sure that there is no infinite loop during execution.
 - Make sure all Promises in `getStaticPaths`/`getStaticProps` `resolve` or `reject` correctly.
 - Avoid very long timeouts for network requests.
-- Increase the timeout by changing the `experimental.staticPageGenerationTimeout` configuration option (default `60` in seconds).
+- Increase the timeout by changing the `staticPageGenerationTimeout` configuration option (default `60` in seconds).
 
 ### Useful Links
 

examples/image-component/pages/color.js

@@ -0,0 +1,42 @@
+import Image from 'next/image'
+import ViewSource from '../components/view-source'
+
+// Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
+const keyStr =
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+
+const triplet = (e1, e2, e3) =>
+  keyStr.charAt(e1 >> 2) +
+  keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
+  keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
+  keyStr.charAt(e3 & 63)
+
+const rgbDataURL = (r, g, b) =>
+  `data:image/gif;base64,R0lGODlhAQABAPAA${
+    triplet(0, r, g) + triplet(b, 255, 255)
+  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
+
+const Color = () => (
+  <div>
+    <ViewSource pathname="pages/color.js" />
+    <h1>Image Component With Color Data URL</h1>
+    <Image
+      alt="Dog"
+      src="/dog.jpg"
+      placeholder="blur"
+      blurDataURL={rgbDataURL(237, 181, 6)}
+      width={750}
+      height={1000}
+    />
+    <Image
+      alt="Cat"
+      src="/cat.jpg"
+      placeholder="blur"
+      blurDataURL={rgbDataURL(2, 129, 210)}
+      width={750}
+      height={1000}
+    />
+  </div>
+)
+
+export default Color

examples/image-component/pages/index.js

@@ -84,7 +84,12 @@ const Index = () => (
         </li>
         <li>
           <Link href="/shimmer">
-            <a>placeholder="blur" with custom blurDataURL</a>
+            <a>placeholder="blur" with animated shimmer blurDataURL</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/color">
+            <a>placeholder="blur" with solid color blurDataURL</a>
           </Link>
         </li>
       </ul>

examples/image-component/public/cat.jpg

@@ -21,7 +21,7 @@ It only takes a few steps to create and deploy your own version of this example
 
 You can deploy a copy of this project directly to [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example).
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-sentry&project-name=nextjs-sentry-example&repository-name=nextjs-sentry-example&env=NEXT_PUBLIC_SENTRY_DSN&envDescription=DSN%20Key%20required%20by%20Sentry&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-sentry%23step-1-enable-error-tracking)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-sentry&project-name=nextjs-sentry-example&repository-name=nextjs-sentry-example&integration-ids=oac_5lUsiANun1DEzgLg0NZx5Es3)
 
 This will clone this example to your GitHub org, create a linked project in Vercel, and prompt you to install the Vercel Sentry Integration. (You can read more about the integration [on Vercel](https://vercel.com/integrations/sentry) and in [the Sentry docs](https://docs.sentry.io/product/integrations/deployment/vercel/).)
 

examples/image-component/public/dog.jpg

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "11.1.3-canary.87"
+  "version": "11.1.3-canary.89"
 }

examples/with-sentry/README.md

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "11.1.3-canary.87",
+  "version": "11.1.3-canary.89",
   "keywords": [
     "react",
     "next",