jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 16:05:33 -04:00
Code Issues Activity

set default statically imported image widths to max layout width

Browse Source
This commit is contained in:
Jake Jarvis
2022-09-08 13:24:25 -04:00
parent 9ea970482d
commit b7fc44c27b
4 changed files with 171 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/Image/Image.tsx
View File

@@ -4,6 +4,9 @@ import { styled, theme } from "../../lib/styles/stitches.config";
import type { ComponentProps } from "react";
import type { ImageProps as NextImageProps, StaticImageData } from "next/future/image";
const DEFAULT_QUALITY = 60;
const DEFAULT_WIDTH = Number.parseInt(theme.sizes.maxLayoutWidth.value, 10); // see lib/styles/stitches.config.ts
const Block = styled("div", {
display: "block",
lineHeight: 0,
@@ -24,7 +27,7 @@ export type ImageProps = ComponentProps<typeof StyledImage> & {
inline?: boolean; // don't wrap everything in a `<div>` block
};
const Image = ({ src, width, height, quality = 60, placeholder, href, inline, ...rest }: ImageProps) => {
const Image = ({ src, width, height, quality = DEFAULT_QUALITY, placeholder, href, inline, ...rest }: ImageProps) => {
const imageProps: NextImageProps = {
// strip "px" from dimensions: https://stackoverflow.com/a/4860249/1438024
width: typeof width === "string" ? Number.parseInt(width, 10) : width,
@@ -40,6 +43,9 @@ const Image = ({ src, width, height, quality = 60, placeholder, href, inline, ..
// all data for statically imported images is extracted from the object itself.
imageProps.src = staticImg;
// set image width to max layout width; height is calculated automatically via aspect ratio:
// https://github.com/vercel/next.js/pull/40278
imageProps.width = staticImg.width > DEFAULT_WIDTH ? DEFAULT_WIDTH : imageProps.width;
// default to blur placeholder while loading if it's been generated for us.
imageProps.placeholder = placeholder || (staticImg.blurDataURL !== undefined ? "blur" : "empty");
} else if (typeof src === "string") {