layout.ts — astro Source File

Architecture documentation for layout.ts, a typescript file in the astro codebase. 1 imports, 0 dependents.

File typescript CoreAstro RenderingEngine 1 imports 2 functions

Entity Profile

CoreAstro→ RenderingEngine→ layout.ts — astro Source File

Dependency Diagram

graph LR
  2f6ec35e_f910_f4f1_2246_f872e6b9468b["layout.ts"]
  416eda3d_47e6_c298_102b_b7a37d86a44e["../../assets/types.js"]
  2f6ec35e_f910_f4f1_2246_f872e6b9468b --> 416eda3d_47e6_c298_102b_b7a37d86a44e
  style 2f6ec35e_f910_f4f1_2246_f872e6b9468b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import type { ImageLayout } from './types.js';

// Common screen widths. These will be filtered according to the image size and layout
export 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
];

// A more limited set of screen widths, for statically generated images
export 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
];

/**
 * Gets the breakpoints for an image, based on the layout and width
 *
 * The rules are as follows:
 *
 * - For full-width layout we return all breakpoints smaller than the original image width
 * - For fixed layout we return 1x and 2x the requested width, unless the original image is smaller than that.
 * - For responsive layout we return all breakpoints smaller than 2x the requested width, unless the original image is smaller than that.
 */
export const getWidths = ({
	width,
	layout,
	breakpoints = DEFAULT_RESOLUTIONS,
	originalWidth,
}: {
	width?: number;
	layout: ImageLayout;
	breakpoints?: Array<number>;
	originalWidth?: number;
}): Array<number> => {
	const smallerThanOriginal = (w: number) => !originalWidth || w <= originalWidth;

	// For full-width layout we return all breakpoints smaller than the original image width
	if (layout === 'full-width') {
		return breakpoints.filter(smallerThanOriginal);
	}
	// For other layouts we need a width to generate breakpoints. If no width is provided, we return an empty array
// ... (62 more lines)