4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import Image from "next/legacy/image";
|
|
import ViewSource from "../components/view-source";
|
|
|
|
// Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
|
|
const keyStr =
|
|
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
|
|
|
const triplet = (e1: number, e2: number, e3: number) =>
|
|
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: number, g: number, b: number) =>
|
|
`data:image/gif;base64,R0lGODlhAQABAPAA${
|
|
triplet(0, r, g) + triplet(b, 255, 255)
|
|
}/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;
|
|
|
|
const Color = () => (
|
|
<div>
|
|
<ViewSource pathname="pages/color.tsx" />
|
|
<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;
|