From 8b95cad68658e70ed8ad7b461d8bd30c4fd56bab Mon Sep 17 00:00:00 2001 From: Swarnim Doegar Date: Thu, 9 Apr 2026 14:48:01 +0530 Subject: [PATCH 01/44] Astro SDK for Imagekit.io --- .github/workflows/nodejs.yml | 54 + .github/workflows/npmpublish.yml | 97 + .gitignore | 28 + .npmrc | 1 + LICENSE | 21 + README.md | 370 ++ imagekit-astro/helpers/package.json | 5 + imagekit-astro/index.ts | 30 + imagekit-astro/package.json | 50 + .../src/components/IKAstroImage.astro | 169 + imagekit-astro/src/components/IKImage.astro | 89 + imagekit-astro/src/components/IKOgImage.astro | 66 + imagekit-astro/src/components/IKVideo.astro | 41 + imagekit-astro/src/components/index.ts | 3 + imagekit-astro/src/constants/sizes.ts | 5 + imagekit-astro/src/env.d.ts | 1 + imagekit-astro/src/helpers/getImagekitUrl.ts | 46 + imagekit-astro/src/helpers/index.ts | 5 + imagekit-astro/src/lib/imagekit.ts | 42 + imagekit-astro/src/types/index.ts | 125 + imagekit-astro/tsconfig.json | 8 + imagekit-astro/tsup.config.ts | 16 + package.json | 23 + pnpm-lock.yaml | 4368 +++++++++++++++++ pnpm-workspace.yaml | 3 + test-app/.gitignore | 19 + test-app/README.md | 63 + test-app/astro.config.mjs | 7 + .../IKAstroImage-page-renders-correctly-1.txt | 1 + .../Images-page-renders-correctly-1.txt | 1 + .../Videos-page-renders-correctly-1.txt | 1 + test-app/e2e/astro-images.spec.ts | 291 ++ test-app/e2e/images.spec.ts | 21 + test-app/e2e/videos.spec.ts | 21 + test-app/package.json | 23 + test-app/playwright.config.ts | 56 + test-app/src/env.d.ts | 1 + test-app/src/pages/astro-images.astro | 485 ++ test-app/src/pages/images.astro | 270 + test-app/src/pages/index.astro | 54 + test-app/src/pages/videos.astro | 190 + test-app/tsconfig.json | 7 + 42 files changed, 7177 insertions(+) create mode 100644 .github/workflows/nodejs.yml create mode 100644 .github/workflows/npmpublish.yml create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 LICENSE create mode 100644 README.md create mode 100644 imagekit-astro/helpers/package.json create mode 100644 imagekit-astro/index.ts create mode 100644 imagekit-astro/package.json create mode 100644 imagekit-astro/src/components/IKAstroImage.astro create mode 100644 imagekit-astro/src/components/IKImage.astro create mode 100644 imagekit-astro/src/components/IKOgImage.astro create mode 100644 imagekit-astro/src/components/IKVideo.astro create mode 100644 imagekit-astro/src/components/index.ts create mode 100644 imagekit-astro/src/constants/sizes.ts create mode 100644 imagekit-astro/src/env.d.ts create mode 100644 imagekit-astro/src/helpers/getImagekitUrl.ts create mode 100644 imagekit-astro/src/helpers/index.ts create mode 100644 imagekit-astro/src/lib/imagekit.ts create mode 100644 imagekit-astro/src/types/index.ts create mode 100644 imagekit-astro/tsconfig.json create mode 100644 imagekit-astro/tsup.config.ts create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 pnpm-workspace.yaml create mode 100644 test-app/.gitignore create mode 100644 test-app/README.md create mode 100644 test-app/astro.config.mjs create mode 100644 test-app/e2e/__snapshot__/astro-images.spec.ts/IKAstroImage-page-renders-correctly-1.txt create mode 100644 test-app/e2e/__snapshot__/images.spec.ts/Images-page-renders-correctly-1.txt create mode 100644 test-app/e2e/__snapshot__/videos.spec.ts/Videos-page-renders-correctly-1.txt create mode 100644 test-app/e2e/astro-images.spec.ts create mode 100644 test-app/e2e/images.spec.ts create mode 100644 test-app/e2e/videos.spec.ts create mode 100644 test-app/package.json create mode 100644 test-app/playwright.config.ts create mode 100644 test-app/src/env.d.ts create mode 100644 test-app/src/pages/astro-images.astro create mode 100644 test-app/src/pages/images.astro create mode 100644 test-app/src/pages/index.astro create mode 100644 test-app/src/pages/videos.astro create mode 100644 test-app/tsconfig.json diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml new file mode 100644 index 0000000..d3023cc --- /dev/null +++ b/.github/workflows/nodejs.yml @@ -0,0 +1,54 @@ +name: Node CI + +on: [push, pull_request] + +jobs: + build: + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v4 + + - name: Install pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 + + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install + + - name: Build + run: pnpm build + + - name: Pack the package + run: | + cd imagekit-astro + pnpm pack + + - name: Setup test-app with packed package + run: | + cd test-app + pnpm remove @imagekit/astro || true + pnpm add ../imagekit-astro/imagekit-astro-*.tgz + + - name: Install Playwright + run: | + cd test-app + pnpm exec playwright install --with-deps + + - name: Run E2E tests + run: | + cd test-app + pnpm test:e2e + env: + CI: true diff --git a/.github/workflows/npmpublish.yml b/.github/workflows/npmpublish.yml new file mode 100644 index 0000000..b1e59bc --- /dev/null +++ b/.github/workflows/npmpublish.yml @@ -0,0 +1,97 @@ +name: Publish + +on: + release: + types: [published] + +jobs: + build: + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v4 + + - name: Install pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 + + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install + + - name: Build + run: pnpm build + + - name: Pack the package + run: | + cd imagekit-astro + pnpm pack + + - name: Setup test-app with packed package + run: | + cd test-app + pnpm remove @imagekit/astro || true + pnpm add ../imagekit-astro/imagekit-astro-*.tgz + + - name: Install Playwright + run: | + cd test-app + npx playwright install --with-deps + + - name: Run E2E tests + run: | + cd test-app + pnpm test:e2e + env: + CI: true + + publish: + needs: build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Install pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 + + - uses: actions/setup-node@v4 + with: + node-version: 20 + registry-url: https://registry.npmjs.org/ + cache: 'pnpm' + + - name: Install and Build + run: | + pnpm install + pnpm build + + - name: NPM Publish + run: | + cd imagekit-astro + npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN + # print the NPM user name for validation + npm whoami + VERSION=$(node -p "require('./package.json').version") + # Only publish stable versions to the latest tag + if [[ "$VERSION" =~ ^[^-]+$ ]]; then + NPM_TAG="latest" + else + NPM_TAG="beta" + fi + echo "Publishing $VERSION with $NPM_TAG tag." + npm publish --tag $NPM_TAG --access public + env: + NODE_AUTH_TOKEN: ${{secrets.npm_token}} + CI: true diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5bf8a18 --- /dev/null +++ b/.gitignore @@ -0,0 +1,28 @@ +# Dependencies +node_modules/ + +# Build output +dist/ + +# IDE +.vscode/ +.idea/ +*.swp +*.swo + +# OS +.DS_Store +Thumbs.db + +# Environment +.env +.env.local +.env.*.local + +# Astro +.astro/ + +# Test artifacts +test-results/ +playwright-report/ +coverage/ diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..bf2e764 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +shamefully-hoist=true diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..84235de --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 ImageKit + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..ca5816f --- /dev/null +++ b/README.md @@ -0,0 +1,370 @@ +# @imagekit/astro + +Astro SDK for [ImageKit.io](https://imagekit.io) — optimized image & video delivery with real-time transformations, responsive images, and automatic format optimization. + +[![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) + +## Quick Start + +### 1. Install + +```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 +PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id +``` + +> Get your URL endpoint from the [ImageKit dashboard](https://imagekit.io/dashboard/url-endpoints). + +### 3. Use + +```astro +--- +import { IKImage } from '@imagekit/astro'; +--- + + +``` + +--- + +## Components + +### `` + +Renders an optimized `` element with automatic responsive `srcSet` generation. + +```astro +--- +import { IKImage } from '@imagekit/astro'; +--- + + + + + + + + + + + + +``` + +#### Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `src` | `string` | *required* | Relative path (e.g., `/image.jpg`) or absolute ImageKit URL | +| `alt` | `string` | *required* | Alt text for accessibility | +| `urlEndpoint` | `string` | env var | Overrides `PUBLIC_IMAGEKIT_URL_ENDPOINT` | +| `transformation` | `Transformation[]` | `[]` | Array of [ImageKit transformations](https://imagekit.io/docs/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 | +| `loading` | `'lazy' | 'eager'` | `'lazy'` | Image loading strategy | +| `class` | `string` | — | CSS class(es) to add | + +All standard HTML `` attributes are also supported and passed through. + +--- + +### `` + +Renders a `