From 099c233c9a8db898d995d9a56beb48a2c78e31d4 Mon Sep 17 00:00:00 2001 From: Manu Chaudhary Date: Sun, 3 May 2026 15:38:15 +0530 Subject: [PATCH 01/12] refactor: remove unused fixtures and tests, update image handling - Deleted the fixtures.ts file as it was no longer needed. - Updated images.spec.ts to remove redundant tests and simplify image loading checks. - Removed edge case tests for video components and unnecessary attributes in videos.spec.ts. - Updated package.json to include @imagekit/javascript dependency. - Modified upload-auth.ts to use the correct public key environment variable. - Changed images.astro to use astro:assets for image handling and removed outdated examples. - Updated upload.astro to use the new upload method from @imagekit/javascript. --- README.md | 501 +------------- imagekit-astro/helpers/package.json | 5 - imagekit-astro/index.ts | 25 +- imagekit-astro/package.json | 1 + imagekit-astro/src/components/Image.astro | 23 - imagekit-astro/src/components/index.ts | 1 - imagekit-astro/src/env.d.ts | 1 - imagekit-astro/src/integration.ts | 40 ++ .../src/services/imagekit-service.ts | 368 ++++------ imagekit-astro/src/types/index.ts | 24 - pnpm-lock.yaml | 6 + scripts/test-all-versions.sh | 5 + test-app/.env.example | 5 + .../Image-page-renders-correctly-1.txt | 2 +- .../Image-page-renders-correctly-1.txt | 2 +- .../Image-page-renders-correctly-1.txt | 2 +- .../Image-page-renders-correctly-1.txt | 2 +- test-app/e2e/fixtures.ts | 57 -- test-app/e2e/images.spec.ts | 642 +----------------- test-app/e2e/videos.spec.ts | 125 +--- test-app/package.json | 1 + test-app/playwright.config.ts | 1 - test-app/src/pages/api/upload-auth.ts | 4 +- test-app/src/pages/images.astro | 218 +----- test-app/src/pages/upload.astro | 4 +- 25 files changed, 246 insertions(+), 1819 deletions(-) delete mode 100644 imagekit-astro/helpers/package.json delete mode 100644 imagekit-astro/src/components/Image.astro delete mode 100644 imagekit-astro/src/env.d.ts create mode 100644 test-app/.env.example delete mode 100644 test-app/e2e/fixtures.ts diff --git a/README.md b/README.md index 1975bfa..184a5d6 100644 --- a/README.md +++ b/README.md @@ -1,499 +1,40 @@ -# @imagekit/astro +[ImageKit.io](https://imagekit.io) -Astro SDK for [ImageKit.io](https://imagekit.io) — optimized image & video delivery with real-time transformations, responsive images, and automatic format optimization. +# ImageKit.io Astro SDK [![npm version](https://img.shields.io/npm/v/@imagekit/astro)](https://www.npmjs.com/package/@imagekit/astro) -[![license](https://img.shields.io/npm/l/@imagekit/astro)](./LICENSE) +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +[![Twitter Follow](https://img.shields.io/twitter/follow/imagekitio?label=Follow&style=social)](https://twitter.com/ImagekitIo) -## Quick Start +## Introduction -### 1. Install +ImageKit Astro SDK plugs ImageKit.io into Astro's built-in image pipeline as an [external image service](https://docs.astro.build/en/reference/image-service-reference/). It allows you to: -```bash -npm install @imagekit/astro -# or -pnpm add @imagekit/astro -# or -yarn add @imagekit/astro -``` - -### 2. Configure - -Add your ImageKit URL endpoint to your `.env` file: - -```env -# Preferred when endpoint may be used in client-side code -PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id - -# Server-only fallback -IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id -``` - -> Get your URL endpoint from the [ImageKit dashboard](https://imagekit.io/dashboard/url-endpoints). - -Add the ImageKit integration to your Astro config: - -```js -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import imagekit from '@imagekit/astro/integration'; - -export default defineConfig({ - integrations: [imagekit()], -}); -``` - -By default, the integration automatically configures: - -- `image.service` with `@imagekit/astro/image-service` -- `image.domains` allowlisting for ImageKit hosts -- `image.remotePatterns` with secure (`https`) ImageKit patterns - -You can also pass options when needed: - -```js -export default defineConfig({ - integrations: [ - imagekit({ - urlEndpoint: import.meta.env.PUBLIC_IMAGEKIT_URL_ENDPOINT, - transformationPosition: 'query', - domains: ['assets.example.com'], - remotePatterns: [{ protocol: 'https', hostname: 'assets.example.com', pathname: '/**' }], - }), - ], -}); -``` - -### Standalone image service - -If you want to control Astro's image config yourself, you can use the ImageKit image service directly. This is useful when you already manage `image.domains`, `image.remotePatterns`, or have a custom setup. - -```js -// astro.config.mjs -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - image: { - service: { - entrypoint: '@imagekit/astro/image-service', - config: { - urlEndpoint: import.meta.env.PUBLIC_IMAGEKIT_URL_ENDPOINT, - transformationPosition: 'query', - }, - }, - domains: ['ik.imagekit.io'], - remotePatterns: [{ protocol: 'https', hostname: 'ik.imagekit.io', pathname: '/**' }], - }, -}); -``` - -Notes: - -- If you omit `urlEndpoint`, the service falls back to `PUBLIC_IMAGEKIT_URL_ENDPOINT` or `IMAGEKIT_URL_ENDPOINT`. -- You are responsible for keeping `domains` and `remotePatterns` in sync with your ImageKit URL endpoint. - -### 3. Use - -```astro ---- -import { Image } from '@imagekit/astro'; ---- - -A beautiful image -``` - ---- - -## Components - -### `` -Uses Astro's built-in `` component with ImageKit transformations. This provides Astro's native image optimization features while leveraging ImageKit's URL-based transformations. - -```astro ---- -import { Image } from '@imagekit/astro'; ---- - - -Hero image - - -Cropped hero - - -Optimized hero -``` - -#### Props - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `src` | `string` | *required* | Relative path or absolute ImageKit URL | -| `alt` | `string` | *required* | Alt text for accessibility | -| `urlEndpoint` | `string` | env var | Overrides `PUBLIC_IMAGEKIT_URL_ENDPOINT` / `IMAGEKIT_URL_ENDPOINT` | -| `transformation` | `Transformation[]` | `[]` | Array of ImageKit transformations | -| `queryParameters` | `Record` | — | Additional URL query parameters | -| `transformationPosition` | `'path' \| 'query'` | `'query'` | Where to place transformations in the URL | -| `responsive` | `boolean` | `true` | Generate responsive `srcSet` and `sizes` | -| `sizes` | `string` | — | HTML `sizes` attribute for responsive images | -| `deviceBreakpoints` | `number[]` | `[640,750,828,1080,1200,1920,2048,3840]` | Custom device-width breakpoints | -| `imageBreakpoints` | `number[]` | `[16,32,48,64,96,128,256,384]` | Custom image-specific breakpoints | -| `width` | `number \| string` | — | Image width | -| `height` | `number \| string` | — | Image height | -| `format` | `string` | — | Image format (webp, avif, jpg, png, etc.) | -| `quality` | `number` | — | Image quality (1-100) | -| `loading` | `'lazy' \| 'eager'` | `'lazy'` | Image loading strategy | -| `class` | `string` | — | CSS class(es) to add | - -All standard Astro `` props are also supported. - ---- - -### `