@yatoday/astro-ui 0.0.2

package/utils/images-optimization.ts

@@ -0,0 +1,356 @@
+import type { ImageMetadata } from 'astro';
+import type { HTMLAttributes } from 'astro/types';
+import { getImage } from 'astro:assets';
+import { parseUrl, transformUrl } from 'unpic';
+
+type Layout = 'fixed' | 'constrained' | 'fullWidth' | 'cover' | 'responsive' | 'contained';
+
+export interface ImageProps extends Omit<HTMLAttributes<'img'>, 'src'> {
+  src?: string | ImageMetadata | null;
+  width?: string | number | null;
+  height?: string | number | null;
+  alt?: string | null;
+  loading?: 'eager' | 'lazy' | null;
+  decoding?: 'sync' | 'async' | 'auto' | null;
+  style?: string;
+  srcset?: string | null;
+  sizes?: string | null;
+  fetchpriority?: 'high' | 'low' | 'auto' | null;
+
+  layout?: Layout;
+  widths?: number[] | null;
+  aspectRatio?: string | number | null;
+  objectPosition?: string;
+
+  format?: string;
+}
+
+export type ImagesOptimizer = (
+  image: ImageMetadata | string,
+  breakpoints: number[],
+  width?: number,
+  height?: number,
+  format?: string
+) => Promise<Array<{ src: string; width: number }>>;
+
+/* ******* */
+const config = {
+  // FIXME: Use this when image.width is minor than deviceSizes
+  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+
+  deviceSizes: [
+    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
+  ],
+
+  formats: ['image/webp'],
+};
+
+const computeHeight = (width: number, aspectRatio: number) => {
+  return Math.floor(width / aspectRatio);
+};
+
+const parseAspectRatio = (aspectRatio: number | string | null | undefined): number | undefined => {
+  if (typeof aspectRatio === 'number') {
+    return aspectRatio;
+  }
+
+  if (typeof aspectRatio === 'string') {
+    const match = aspectRatio.match(/(\d+)\s*[/:]\s*(\d+)/);
+
+    if (match) {
+      const [, num, den] = match.map(Number);
+      if (den && !isNaN(num)) {
+        return num / den;
+      }
+    } else {
+      const numericValue = parseFloat(aspectRatio);
+      if (!isNaN(numericValue)) {
+        return numericValue;
+      }
+    }
+  }
+
+  return undefined;
+};
+
+/**
+ * Gets the `sizes` attribute for an image, based on the layout and width
+ */
+export const getSizes = (width?: number, layout?: Layout): string | undefined => {
+  if (!width || !layout) {
+    return undefined;
+  }
+  switch (layout) {
+    // If screen is wider than the max size, image width is the max size,
+    // otherwise it's the width of the screen
+    case 'constrained':
+      return `(min-width: ${width}px) ${width}px, 100vw`;
+
+    // Image is always the same width, whatever the size of the screen
+    case 'fixed':
+      return `${width}px`;
+
+    // Image is always the width of the screen
+    case 'fullWidth':
+      return '100vw';
+
+    default:
+      return undefined;
+  }
+};
+
+const pixelate = (value?: number) => (value || value === 0 ? `${value}px` : undefined);
+
+const getStyle = ({
+  width,
+  height,
+  aspectRatio,
+  layout,
+  objectFit = 'cover',
+  objectPosition = 'center',
+  background,
+}: {
+  width?: number;
+  height?: number;
+  aspectRatio?: number;
+  objectFit?: string;
+  objectPosition?: string;
+  layout?: string;
+  background?: string;
+}) => {
+  const styleEntries: Array<[prop: string, value: string | undefined]> = [
+    ['object-fit', objectFit],
+    ['object-position', objectPosition],
+  ];
+
+  // If background is a URL, set it to cover the image and not repeat
+  if (background?.startsWith('https:') || background?.startsWith('http:') || background?.startsWith('data:')) {
+    styleEntries.push(['background-image', `url(${background})`]);
+    styleEntries.push(['background-size', 'cover']);
+    styleEntries.push(['background-repeat', 'no-repeat']);
+  } else {
+    styleEntries.push(['background', background]);
+  }
+  if (layout === 'fixed') {
+    styleEntries.push(['width', pixelate(width)]);
+    styleEntries.push(['height', pixelate(height)]);
+    styleEntries.push(['object-position', 'top left']);
+  }
+  if (layout === 'constrained') {
+    styleEntries.push(['max-width', pixelate(width)]);
+    styleEntries.push(['max-height', pixelate(height)]);
+    styleEntries.push(['aspect-ratio', aspectRatio ? `${aspectRatio}` : undefined]);
+    styleEntries.push(['width', '100%']);
+  }
+  if (layout === 'fullWidth') {
+    styleEntries.push(['width', '100%']);
+    styleEntries.push(['aspect-ratio', aspectRatio ? `${aspectRatio}` : undefined]);
+    styleEntries.push(['height', pixelate(height)]);
+  }
+  if (layout === 'responsive') {
+    styleEntries.push(['width', '100%']);
+    styleEntries.push(['height', 'auto']);
+    styleEntries.push(['aspect-ratio', aspectRatio ? `${aspectRatio}` : undefined]);
+  }
+  if (layout === 'contained') {
+    styleEntries.push(['max-width', '100%']);
+    styleEntries.push(['max-height', '100%']);
+    styleEntries.push(['object-fit', 'contain']);
+    styleEntries.push(['aspect-ratio', aspectRatio ? `${aspectRatio}` : undefined]);
+  }
+  if (layout === 'cover') {
+    styleEntries.push(['max-width', '100%']);
+    styleEntries.push(['max-height', '100%']);
+  }
+
+  const styles = Object.fromEntries(styleEntries.filter(([, value]) => value));
+
+  return Object.entries(styles)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join(' ');
+};
+
+const getBreakpoints = ({
+  width,
+  breakpoints,
+  layout,
+}: {
+  width?: number;
+  breakpoints?: number[];
+  layout: Layout;
+}): number[] => {
+  if (layout === 'fullWidth' || layout === 'cover' || layout === 'responsive' || layout === 'contained') {
+    return breakpoints || config.deviceSizes;
+  }
+  if (!width) {
+    return [];
+  }
+  const doubleWidth = width * 2;
+  if (layout === 'fixed') {
+    return [width, doubleWidth];
+  }
+  if (layout === 'constrained') {
+    return [
+      // Always include the image at 1x and 2x the specified width
+      width,
+      doubleWidth,
+      // Filter out any resolutions that are larger than the double-res image
+      ...(breakpoints || config.deviceSizes).filter((w) => w < doubleWidth),
+    ];
+  }
+
+  return [];
+};
+
+/* ** */
+export const astroAsseetsOptimizer: ImagesOptimizer = async (
+  image,
+  breakpoints,
+  _width,
+  _height,
+  format = undefined
+) => {
+  if (!image) {
+    return [];
+  }
+
+  return Promise.all(
+    breakpoints.map(async (w: number) => {
+      const result = await getImage({ src: image, width: w, inferSize: true, ...(format ? { format } : {}) });
+
+      return {
+        src: result?.src,
+        width: result?.attributes?.width ?? w,
+        height: result?.attributes?.height,
+      };
+    })
+  );
+};
+
+export const isUnpicCompatible = (image: string) => {
+  return typeof parseUrl(image) !== 'undefined';
+};
+
+/* ** */
+export const unpicOptimizer: ImagesOptimizer = async (image, breakpoints, width, height, format = undefined) => {
+  if (!image || typeof image !== 'string') {
+    return [];
+  }
+
+  const urlParsed = parseUrl(image);
+  if (!urlParsed) {
+    return [];
+  }
+
+  return Promise.all(
+    breakpoints.map(async (w: number) => {
+      const _height = width && height ? computeHeight(w, width / height) : height;
+      const url =
+        transformUrl({
+          url: image,
+          width: w,
+          height: _height,
+          cdn: urlParsed.cdn,
+          ...(format ? { format } : {}),
+        }) || image;
+      return {
+        src: String(url),
+        width: w,
+        height: _height,
+      };
+    })
+  );
+};
+
+/* ** */
+export async function getImagesOptimized(
+  image: ImageMetadata | string,
+  {
+    src: _,
+    width,
+    height,
+    sizes,
+    aspectRatio,
+    objectPosition,
+    widths,
+    layout = 'constrained',
+    style = '',
+    format,
+    ...rest
+  }: ImageProps,
+  transform: ImagesOptimizer = () => Promise.resolve([])
+): Promise<{ src: string; attributes: HTMLAttributes<'img'> }> {
+  if (typeof image !== 'string') {
+    width ||= Number(image.width) || undefined;
+    height ||= typeof width === 'number' ? computeHeight(width, image.width / image.height) : undefined;
+  }
+
+  width = (width && Number(width)) || undefined;
+  height = (height && Number(height)) || undefined;
+
+  widths ||= config.deviceSizes;
+  sizes ||= getSizes(Number(width) || undefined, layout);
+  aspectRatio = parseAspectRatio(aspectRatio);
+
+  // Calculate dimensions from aspect ratio
+  if (aspectRatio) {
+    if (width) {
+      if (height) {
+        /* empty */
+      } else {
+        height = width / aspectRatio;
+      }
+    } else if (height) {
+      width = Number(height * aspectRatio);
+    } else if (layout !== 'fullWidth') {
+      // Fullwidth images have 100% width, so aspectRatio is applicable
+      console.error('When aspectRatio is set, either width or height must also be set');
+      console.error('Image', image);
+    }
+  } else if (width && height) {
+    aspectRatio = width / height;
+  } else if (layout !== 'fullWidth') {
+    // Fullwidth images don't need dimensions
+    console.error('Either aspectRatio or both width and height must be set');
+    console.error('Image', image);
+  }
+
+  let breakpoints = getBreakpoints({ width, breakpoints: widths, layout });
+  breakpoints = [...new Set(breakpoints)].sort((a, b) => a - b);
+
+  const srcset = (await transform(image, breakpoints, Number(width) || undefined, Number(height) || undefined, format))
+    .map(({ src, width }) => `${src} ${width}w`)
+    .join(', ');
+
+  return {
+    src: typeof image === 'string' ? image : image.src,
+    attributes: {
+      width,
+      height,
+      srcset: srcset || undefined,
+      sizes,
+      style: `${getStyle({
+        width,
+        height,
+        aspectRatio,
+        objectPosition,
+        layout,
+      })}${style ?? ''}`,
+      ...rest,
+    },
+  };
+}

package/utils/images.ts

@@ -0,0 +1,138 @@
+import { astroAsseetsOptimizer, isUnpicCompatible, unpicOptimizer } from './images-optimization';
+
+import type { OpenGraph } from '@astrolib/seo';
+import type { ImageMetadata } from 'astro';
+
+const load = async function () {
+  let images: Record<string, () => Promise<unknown>> | undefined;
+  try {
+    images = import.meta.glob(
+      '/src/assets/images/**/*.{jpeg,jpg,png,tiff,webp,gif,svg,JPEG,JPG,PNG,TIFF,WEBP,GIF,SVG}'
+    );
+  } catch (error) {
+    // continue regardless of error
+    console.error(error);
+  }
+  return images;
+};
+
+let _images: Record<string, () => Promise<unknown>> | undefined;
+
+/** */
+export const fetchLocalImages = async () => {
+  _images = _images || (await load());
+  return _images;
+};
+
+/** */
+export const findImage = async (
+  imagePath?: string | ImageMetadata | null
+): Promise<string | ImageMetadata | undefined | null> => {
+  // Not string
+  if (typeof imagePath !== 'string') {
+    return imagePath;
+  }
+
+  // Absolute paths
+  if (imagePath.startsWith('http://') || imagePath.startsWith('https://') || imagePath.startsWith('/')) {
+    return imagePath;
+  }
+
+  // Relative paths or not "~/assets/"
+  if (!imagePath.startsWith('~/assets/images')) {
+    return imagePath;
+  }
+
+  const images = await fetchLocalImages();
+  const key = imagePath.replace('~/', '/src/');
+
+  return images && typeof images[key] === 'function'
+    ? ((await images[key]()) as { default: ImageMetadata }).default
+    : null;
+};
+
+/** */
+export const adaptOpenGraphImages = async (
+  openGraph: OpenGraph = {},
+  astroSite: URL | undefined = new URL('')
+): Promise<OpenGraph> => {
+  if (!openGraph?.images?.length) {
+    return openGraph;
+  }
+
+  const images = openGraph.images;
+  const defaultWidth = 1200;
+  const defaultHeight = 626;
+
+  const adaptedImages = await Promise.all(
+    images.map(async (image) => {
+      if (image?.url) {
+        const resolvedImage = (await findImage(image.url)) as ImageMetadata | string | undefined;
+        if (!resolvedImage) {
+          return {
+            url: '',
+          };
+        }
+
+        let _image;
+
+        if (
+          typeof resolvedImage === 'string' &&
+          (resolvedImage.startsWith('http://') || resolvedImage.startsWith('https://')) &&
+          isUnpicCompatible(resolvedImage)
+        ) {
+          _image = (await unpicOptimizer(resolvedImage, [defaultWidth], defaultWidth, defaultHeight, 'jpg'))[0];
+        } else if (resolvedImage) {
+          const dimensions =
+            typeof resolvedImage !== 'string' && resolvedImage?.width <= defaultWidth
+              ? [resolvedImage?.width, resolvedImage?.height]
+              : [defaultWidth, defaultHeight];
+          _image = (
+            await astroAsseetsOptimizer(resolvedImage, [dimensions[0]], dimensions[0], dimensions[1], 'jpg')
+          )[0];
+        }
+
+        if (typeof _image === 'object') {
+          return {
+            url: 'src' in _image && typeof _image.src === 'string' ? String(new URL(_image.src, astroSite)) : '',
+            width: 'width' in _image && typeof _image.width === 'number' ? _image.width : undefined,
+            height: 'height' in _image && typeof _image.height === 'number' ? _image.height : undefined,
+          };
+        }
+        return {
+          url: '',
+        };
+      }
+
+      return {
+        url: '',
+      };
+    })
+  );
+
+  return { ...openGraph, ...(adaptedImages ? { images: adaptedImages } : {}) };
+};
+
+export const createImageSrcBySize = (src: string, size: number, format: string = ''): string | undefined => {
+  if (!src) {
+    return;
+  }
+
+  const imageFilename = src.split('/').pop()!;
+  const imageBaseName = imageFilename.split('.').slice(0, -1).join('.');
+  const imageExt = format || imageFilename.split('.').pop()!;
+
+  return src.replace(imageFilename, `${imageBaseName}-${size}.${imageExt}`);
+};
+
+export const getImagePathBySize = (src: string, size: number, format: string = ''): string => {
+  if (!src) {
+    return '';
+  }
+
+  const imageFilename = src.split('/').pop()!;
+  const imageBaseName = imageFilename.split('.').slice(0, -1).join('.');
+  const imageExt = format || imageFilename.split('.').pop()!;
+
+  return `${src.replace(imageFilename, `${imageBaseName}-${size}.${imageExt}`)}?width=${size}`;
+};

package/utils/index.ts

@@ -0,0 +1,5 @@
+export * from './utils.ts';
+export * from './css.ts';
+export * from './images.ts';
+export * from './permalinks.ts';
+export * from './images-optimization.ts';

package/utils/permalinks.ts

@@ -0,0 +1,38 @@
+import slugify from 'limax';
+import {trim} from './utils';
+
+export const trimSlash = (s: string) => trim(trim(s, '/'));
+export const createPath = (...params: string[]) => {
+    const paths = params
+        .map((el) => trimSlash(el))
+        .filter((el) => !!el)
+        .join('/');
+    return '/' + paths + (paths ? '/' : '');
+};
+
+const BASE_PATHNAME = '/';
+
+export const cleanSlug = (text = '') =>
+    trimSlash(text)
+        .split('/')
+        .map((slug: string) => slugify(slug))
+        .join('/');
+
+export const getCanonical = (path = ''): string | URL => {
+    const url = String(new URL(path, 'https://example.com'));
+    if (path && url.endsWith('/')) {
+        return url.slice(0, -1);
+    }
+
+    return url;
+};
+
+export const getAsset = (path: string): string =>
+    '/' +
+    [BASE_PATHNAME, path]
+        .map((el) => trimSlash(el))
+        .filter((el) => !!el)
+        .join('/');
+
+const definitivePermalink = (permalink: string): string => createPath(BASE_PATHNAME, permalink);
+

package/utils/utils.ts

@@ -0,0 +1,58 @@
+import { I18N } from 'vendor:config';
+
+export const formatter: Intl.DateTimeFormat = new Intl.DateTimeFormat(I18N?.language, {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  timeZone: 'UTC',
+});
+
+export const getFormattedDate = (date: Date): string => (date ? formatter.format(date) : '');
+
+export const trim = (str = '', ch?: string) => {
+  let start = 0;
+  let end = str.length || 0;
+  while (start < end && str[start] === ch) {
+    ++start;
+  }
+  while (end > start && str[end - 1] === ch) {
+    --end;
+  }
+  return start > 0 || end < str.length ? str.substring(start, end) : str;
+};
+
+// Function to format a number in thousands (K) or millions (M) format depending on its value
+export const toUiAmount = (amount: number) => {
+  if (!amount) {
+    return 0;
+  }
+
+  let value: string;
+
+  if (amount >= 1000000000) {
+    const formattedNumber = (amount / 1000000000).toFixed(1);
+    if (Number(formattedNumber) === parseInt(formattedNumber)) {
+      value = `${parseInt(formattedNumber)}B`;
+    } else {
+      value = `${formattedNumber}B`;
+    }
+  } else if (amount >= 1000000) {
+    const formattedNumber = (amount / 1000000).toFixed(1);
+    if (Number(formattedNumber) === parseInt(formattedNumber)) {
+      value = `${parseInt(formattedNumber)}M`;
+    } else {
+      value = `${formattedNumber}M`;
+    }
+  } else if (amount >= 1000) {
+    const formattedNumber = (amount / 1000).toFixed(1);
+    if (Number(formattedNumber) === parseInt(formattedNumber)) {
+      value = `${parseInt(formattedNumber)}K`;
+    } else {
+      value = `${formattedNumber}K`;
+    }
+  } else {
+    value = Number(amount).toFixed(0);
+  }
+
+  return value;
+};