diff options
Diffstat (limited to 'packages/integrations/image/components')
-rw-r--r-- | packages/integrations/image/components/Image.astro | 18 | ||||
-rw-r--r-- | packages/integrations/image/components/Picture.astro | 46 | ||||
-rw-r--r-- | packages/integrations/image/components/index.ts | 74 |
3 files changed, 0 insertions, 138 deletions
diff --git a/packages/integrations/image/components/Image.astro b/packages/integrations/image/components/Image.astro deleted file mode 100644 index dea492de0..000000000 --- a/packages/integrations/image/components/Image.astro +++ /dev/null @@ -1,18 +0,0 @@ ---- -// @ts-ignore -import { getImage } from '../dist/index.js'; -import { warnForMissingAlt } from './index.js'; -import type { ImageComponentLocalImageProps, ImageComponentRemoteImageProps } from './index.js'; - -export type Props = ImageComponentLocalImageProps | ImageComponentRemoteImageProps; - -const { loading = 'lazy', decoding = 'async', ...props } = Astro.props; - -if (props.alt === undefined || props.alt === null) { - warnForMissingAlt(); -} - -const attrs = await getImage(props); ---- - -<img {...attrs} {loading} {decoding} /> diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro deleted file mode 100644 index bdaaceae0..000000000 --- a/packages/integrations/image/components/Picture.astro +++ /dev/null @@ -1,46 +0,0 @@ ---- -import { getPicture } from '../dist/index.js'; -import { warnForMissingAlt } from './index.js'; -import type { PictureComponentLocalImageProps, PictureComponentRemoteImageProps } from './index.js'; -import type { GetPictureResult } from '../src/lib/get-picture.js'; - -export type Props = PictureComponentLocalImageProps | PictureComponentRemoteImageProps; - -const { - src, - alt, - sizes, - widths, - aspectRatio, - fit, - background, - position, - formats = ['avif', 'webp'], - loading = 'lazy', - decoding = 'async', - ...attrs -} = Astro.props; - -if (alt === undefined || alt === null) { - warnForMissingAlt(); -} - -const { image, sources }: GetPictureResult = await getPicture({ - src, - widths, - formats, - aspectRatio, - fit, - background, - position, - alt, -}); - -delete image.width; -delete image.height; ---- - -<picture> - {sources.map((attrs) => <source {...attrs} {sizes} />)} - <img {...image} {loading} {decoding} {...attrs} /> -</picture> diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts deleted file mode 100644 index 6c6d6910a..000000000 --- a/packages/integrations/image/components/index.ts +++ /dev/null @@ -1,74 +0,0 @@ -/// <reference types="astro/astro-jsx" /> -export { default as Image } from './Image.astro'; -export { default as Picture } from './Picture.astro'; -import type { HTMLAttributes } from 'astro/types'; - -import type { TransformOptions, OutputFormat } from '../dist/loaders/index.js'; -import type { ImageMetadata } from '../dist/vite-plugin-astro-image.js'; -import type { AstroBuiltinAttributes } from 'astro'; - -export interface ImageComponentLocalImageProps - extends Omit<TransformOptions, 'src'>, - Omit<ImgHTMLAttributes, 'src' | 'width' | 'height'> { - src: ImageMetadata | Promise<{ default: ImageMetadata }>; - /** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */ - alt: string; -} - -export interface ImageComponentRemoteImageProps extends TransformOptions, ImgHTMLAttributes { - src: string; - /** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */ - alt: string; - format?: OutputFormat; - width: number; - height: number; -} - -export interface PictureComponentLocalImageProps - extends GlobalHTMLAttributes, - Omit<TransformOptions, 'src'>, - Pick<ImgHTMLAttributes, 'loading' | 'decoding' | 'fetchpriority'> { - src: ImageMetadata | Promise<{ default: ImageMetadata }>; - /** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */ - alt: string; - widths: number[]; - sizes?: HTMLImageElement['sizes']; - formats?: OutputFormat[]; -} - -export interface PictureComponentRemoteImageProps - extends GlobalHTMLAttributes, - TransformOptions, - Pick<ImgHTMLAttributes, 'loading' | 'decoding' | 'fetchpriority'> { - src: string; - /** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */ - alt: string; - widths: number[]; - aspectRatio: TransformOptions['aspectRatio']; - sizes?: HTMLImageElement['sizes']; - formats?: OutputFormat[]; - background?: TransformOptions['background']; -} - -export type ImgHTMLAttributes = HTMLAttributes<'img'>; - -export type GlobalHTMLAttributes = Omit< - astroHTML.JSX.HTMLAttributes, - keyof Omit<AstroBuiltinAttributes, 'class:list'> ->; - -let altWarningShown = false; - -export function warnForMissingAlt() { - if (altWarningShown === true) { - return; - } - - altWarningShown = true; - - console.warn(`\n[@astrojs/image] "alt" text was not provided for an <Image> or <Picture> component. - -A future release of @astrojs/image may throw a build error when "alt" text is missing. - -The "alt" attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel).\n`); -} |