strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into static

Browse Source
This commit is contained in:
Sam Becker 2024-03-01 13:43:22 -06:00
commit 4e5c8dabbb
5 changed files with 1044 additions and 1019 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
package.json
View File

@ -9,32 +9,33 @@
"analyze": "ANALYZE=true next build"
},
"dependencies": {
"@aws-sdk/client-s3": "3.521.0",
"@aws-sdk/s3-request-presigner": "3.521.0",
"@next/bundle-analyzer": "14.1.0",
"@aws-sdk/client-s3": "3.525.0",
"@aws-sdk/s3-request-presigner": "3.525.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/react": "18.2.58",
"@types/node": "^20.11.24",
"@types/react": "18.2.61",
"@types/react-dom": "18.2.19",
"@typescript-eslint/eslint-plugin": "^7.0.2",
"@typescript-eslint/parser": "^7.0.2",
"@typescript-eslint/eslint-plugin": "^7.1.0",
"@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",

1969
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

65
src/components/CanvasBlurCapture.tsx
View File

@ -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}`);
const canvas = refCanvas.current;
if (canvas) {
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const context = refCanvas.current?.getContext('2d');
if (context) {
context.scale(scale, scale);
context.filter =
'contrast(1.2) saturate(1.2)' +
`blur(${scale * 10}px)`;
context.drawImage(
image,
-edgeCompensation,
-edgeCompensation,
width + edgeCompensation * 2,
width * image.height / image.width + edgeCompensation * 2,
);
refTimeouts.current.forEach(clearTimeout);
onCapture(canvas.toDataURL('image/jpeg', quality));
if (refShouldCapture.current) {
if (
refCanvas.current &&
refImage.current?.complete
) {
const canvas = refCanvas.current;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const context = refCanvas.current?.getContext('2d');
if (context) {
context.scale(scale, scale);
context.filter =
'contrast(1.2) saturate(1.2)' +
`blur(${scale * 10}px)`;
context.drawImage(
refImage.current,
-edgeCompensation,
-edgeCompensation,
width + edgeCompensation * 2,
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));

5
src/components/ImageBlurFallback.tsx
View File

@ -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,

1
tailwind.config.js
View File

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