@yoot/sanity
Sanity adapter for yoot
Generate Sanity image URLs with a unified, chainable API focused on core transformations.
Installation
Node / NPM
npm install @yoot/sanity
The core library (@yoot/yoot) is automatically installed.
Deno / JSR
import {yoot} from 'jsr:@yoot/yoot';
import sanity from 'jsr:@yoot/sanity';
Browser (importmap)
<script type="importmap">
{
"imports": {
"@yoot/yoot": "https://cdn.jsdelivr.net/npm/@yoot/yoot/+esm",
"@yoot/sanity": "https://cdn.jsdelivr.net/npm/@yoot/sanity/+esm"
}
}
</script>
<script type="module">
import {yoot} from '@yoot/yoot';
import sanity from '@yoot/sanity';
</script>
Quick start
Step 1. Register the adapter
import {registerAdapters} from '@yoot/yoot';
import sanity from '@yoot/sanity';
registerAdapters(sanity);
Step 2. Transform images
Initialize
Use the yoot function to build transformations:
import {yoot} from '@yoot/yoot';
// Without arguments
const preset = yoot();
// With image URL
const preset = yoot('https://cdn.sanity.io/...');
// With an object
const preset = yoot({
src: 'https://cdn.sanity.io/...',
alt: 'Alt text',
width: 1024, // Optional: intrinsic width
height: 1024, // Optional: intrinsic height
});
Get the transformed URL
const preset = yoot('https://cdn.sanity.io/...').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.
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://cdn.sanity.io/...',
alt: 'Thumbnail',
})
.width(200)
.aspectRatio(1)
.fit('cover');
// Derive <img> attributes
const imgAttrs = getImgAttrs(preset, {loading: 'lazy'});
// Derive <source> attributes
const sourceAttrs = getSourceAttrs(preset, {
type: 'image/webp', // this helper modifies the format to webp
sizes: '200px',
srcSetBuilder: defineSrcSetBuilder({widths: [200, 300, 400]}),
});
return (
<picture>
<source {...sourceAttrs} />
<img {...imgAttrs} />
</picture>
);
Define presets (DRY)
// -- presets.ts --
import {yoot} from '@yoot/yoot';
import {defineSrcSetBuilder, withImgAttrs, withSourceAttrs} from '@yoot/yoot/jsx'; // Or '@yoot/yoot/html'
export const thumbnailPreset = yoot().width(200).aspectRatio(1).fit('cover');
// Define the base <source> attributes
export const getThumbnailSourceAttrs = withSourceAttrs({
sizes: '200px',
srcSetBuilder: defineSrcSetBuilder({widths: [200, 300, 400]}),
});
// Define the base <img> attributes
export const getImgAttrs = withImgAttrs({loading: 'lazy'});
// -- Usage --
import {thumbnailPreset, getImgAttrs, getThumbnailSourceAttrs} from '@/presets';
const thumbnail = thumbnailPreset({
src: 'https://cdn.sanity.io/...',
alt: 'Thumbnail',
});
// Or thumbnailPreset.src('https://cdn.sanity.io/...').alt('Thumbnail');
const imgAttrs = getImgAttrs(thumbnail);
const webpSourceAttrs = getThumbnailSourceAttrs(thumbnail, {
type: 'image/webp', // this helper modifies the format to webp
});
const jpegSourceAttrs = getThumbnailSourceAttrs(thumbnail, {
type: 'image/jpeg', // this helper modifies the format to jpeg
});
return (
<picture>
<source {...webpSourceAttrs} />
<source {...jpegSourceAttrs} />
<img {...imgAttrs} />
</picture>
);
Resources
Demo
Try it live — zero setup:
Contributing
Found a bug or wish to contribute? Open an issue or send a PR.
License
Licensed under the ISC License.
