astro
Version:
Astro is a modern site builder with web best practices, performance, and DX front-of-mind.
104 lines (103 loc) • 1.83 kB
JavaScript
const DEFAULT_RESOLUTIONS = [
640,
// older and lower-end phones
750,
// iPhone 6-8
828,
// iPhone XR/11
960,
// older horizontal phones
1080,
// iPhone 6-8 Plus
1280,
// 720p
1668,
// Various iPads
1920,
// 1080p
2048,
// QXGA
2560,
// WQXGA
3200,
// QHD+
3840,
// 4K
4480,
// 4.5K
5120,
// 5K
6016
// 6K
];
const LIMITED_RESOLUTIONS = [
640,
// older and lower-end phones
750,
// iPhone 6-8
828,
// iPhone XR/11
1080,
// iPhone 6-8 Plus
1280,
// 720p
1668,
// Various iPads
2048,
// QXGA
2560
// WQXGA
];
const getWidths = ({
width,
layout,
breakpoints = DEFAULT_RESOLUTIONS,
originalWidth
}) => {
const smallerThanOriginal = (w) => !originalWidth || w <= originalWidth;
if (layout === "full-width") {
return breakpoints.filter(smallerThanOriginal);
}
if (!width) {
return [];
}
const doubleWidth = width * 2;
const maxSize = originalWidth ? Math.min(doubleWidth, originalWidth) : doubleWidth;
if (layout === "fixed") {
return originalWidth && width > originalWidth ? [originalWidth] : [width, maxSize];
}
if (layout === "responsive") {
return [
// Always include the image at 1x and 2x the specified width
width,
doubleWidth,
...breakpoints
].filter((w) => w <= maxSize).sort((a, b) => a - b);
}
return [];
};
const getSizesAttribute = ({
width,
layout
}) => {
if (!width || !layout) {
return void 0;
}
switch (layout) {
case `responsive`:
return `(min-width: ${width}px) ${width}px, 100vw`;
case `fixed`:
return `${width}px`;
case `full-width`:
return `100vw`;
case "none":
default:
return void 0;
}
};
export {
DEFAULT_RESOLUTIONS,
LIMITED_RESOLUTIONS,
getSizesAttribute,
getWidths
};