@yoot/imgix
Imgix adapter for yoot
Generate Imgix image URLs with a unified, chainable API focused on core transformations.
## Installation
### Node / NPM
```bash
npm install @yoot/imgix
```
> The core library (`@yoot/yoot`) is automatically installed.
### Deno / JSR
```ts
import {yoot} from 'jsr:@yoot/yoot';
import imgix from 'jsr:@yoot/imgix';
```
### Browser (importmap)
```html
```
## Quick start
### Step 1. Register the adapter
```ts
import {registerAdapters} from '@yoot/yoot';
import imgix from '@yoot/imgix';
registerAdapters(imgix);
```
### Step 2. Transform images
#### Initialize
Use the `yoot` function to build transformations:
```ts
import {yoot} from '@yoot/yoot';
// Without arguments
const preset = yoot();
// With image URL
const preset = yoot('https://assets.imgix.net/...');
// With an object
const preset = yoot({
src: 'https://assets.imgix.net/...',
alt: 'Alt text',
width: 1024, // Optional: intrinsic width
height: 1024, // Optional: intrinsic height
});
```
#### Get the transformed URL
```ts
const preset = yoot('https://assets.imgix.net/...').width(1024).format('webp');
const transformedUrl = preset.url;
```
#### Get responsive image attributes
Supports both JSX and HTML rendering via `@yoot/yoot/jsx` or `@yoot/yoot/html`.
```tsx
import {yoot} from '@yoot/yoot';
import {defineSrcSetBuilder, getImgAttrs, getSourceAttrs} from '@yoot/yoot/jsx'; // Or '@yoot/yoot/html'
// Define transformation directives
const preset = yoot({
src: 'https://assets.imgix.net/...',
alt: 'Thumbnail',
})
.width(200)
.aspectRatio(1)
.fit('cover');
// Derive 
