-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(vercel): Add support for image optimization API (#6845)
* feat(vercel): Add support for image optimization API * chore: changeset * feat: implement image service * feat: dev service * feat: full local service * fix: move assets check to astro:config:done * feat: update with new settings * fix: remove unused param * test: add tsets * fix: rename to imageService * docs: add docs * Apply suggestions from code review Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * docs(vercel): Add Added In mentions --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
- Loading branch information
1 parent
980246f
commit 6063f56
Showing
16 changed files
with
484 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@astrojs/vercel': minor | ||
| --- | ||
|
|
||
| Add support for using the Vercel Image Optimization API through `astro:assets` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import type { ExternalImageService } from 'astro'; | ||
| import { isESMImportedImage, sharedValidateOptions } from './shared'; | ||
|
|
||
| const service: ExternalImageService = { | ||
| validateOptions: (options, serviceOptions) => | ||
| sharedValidateOptions(options, serviceOptions, 'production'), | ||
| getHTMLAttributes(options, serviceOptions) { | ||
| const { inputtedWidth, ...props } = options; | ||
|
|
||
| // If `validateOptions` returned a different width than the one of the image, use it for attributes | ||
| if (inputtedWidth) { | ||
| props.width = inputtedWidth; | ||
| } | ||
|
|
||
| let targetWidth = props.width; | ||
| let targetHeight = props.height; | ||
| if (isESMImportedImage(props.src)) { | ||
| const aspectRatio = props.src.width / props.src.height; | ||
| if (targetHeight && !targetWidth) { | ||
| // If we have a height but no width, use height to calculate the width | ||
| targetWidth = Math.round(targetHeight * aspectRatio); | ||
| } else if (targetWidth && !targetHeight) { | ||
| // If we have a width but no height, use width to calculate the height | ||
| targetHeight = Math.round(targetWidth / aspectRatio); | ||
| } else if (!targetWidth && !targetHeight) { | ||
| // If we have neither width or height, use the original image's dimensions | ||
| targetWidth = props.src.width; | ||
| targetHeight = props.src.height; | ||
| } | ||
| } | ||
|
|
||
| const { src, width, height, format, quality, ...attributes } = props; | ||
|
|
||
| return { | ||
| ...attributes, | ||
| width: targetWidth, | ||
| height: targetHeight, | ||
| loading: attributes.loading ?? 'lazy', | ||
| decoding: attributes.decoding ?? 'async', | ||
| }; | ||
| }, | ||
| getURL(options, serviceOptions) { | ||
| const fileSrc = | ||
| typeof options.src === 'string' ? options.src : removeLeadingForwardSlash(options.src.src); | ||
|
|
||
| const searchParams = new URLSearchParams(); | ||
| searchParams.append('url', fileSrc); | ||
|
|
||
| options.width && searchParams.append('w', options.width.toString()); | ||
| options.quality && searchParams.append('q', options.quality.toString()); | ||
|
|
||
| return '/_vercel/image?' + searchParams; | ||
| }, | ||
| }; | ||
|
|
||
| function removeLeadingForwardSlash(path: string) { | ||
| return path.startsWith('/') ? path.substring(1) : path; | ||
| } | ||
|
|
||
| export default service; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import type { LocalImageService } from 'astro'; | ||
| // @ts-expect-error | ||
| import squooshService from 'astro/assets/services/squoosh'; | ||
| import { sharedValidateOptions } from './shared'; | ||
|
|
||
| const service: LocalImageService = { | ||
| validateOptions: (options, serviceOptions) => | ||
| sharedValidateOptions(options, serviceOptions, 'development'), | ||
| getHTMLAttributes(options, serviceOptions) { | ||
| const { inputtedWidth, ...props } = options; | ||
|
|
||
| // If `validateOptions` returned a different width than the one of the image, use it for attributes | ||
| if (inputtedWidth) { | ||
| props.width = inputtedWidth; | ||
| } | ||
|
|
||
| return squooshService.getHTMLAttributes(props, serviceOptions); | ||
| }, | ||
| getURL(options) { | ||
| const fileSrc = typeof options.src === 'string' ? options.src : options.src.src; | ||
|
|
||
| const searchParams = new URLSearchParams(); | ||
| searchParams.append('href', fileSrc); | ||
|
|
||
| options.width && searchParams.append('w', options.width.toString()); | ||
| options.quality && searchParams.append('q', options.quality.toString()); | ||
|
|
||
| return '/_image?' + searchParams; | ||
| }, | ||
| parseURL(url) { | ||
| const params = url.searchParams; | ||
|
|
||
| if (!params.has('href')) { | ||
| return undefined; | ||
| } | ||
|
|
||
| const transform = { | ||
| src: params.get('href')!, | ||
| width: params.has('w') ? parseInt(params.get('w')!) : undefined, | ||
| quality: params.get('q'), | ||
| }; | ||
|
|
||
| return transform; | ||
| }, | ||
| transform(inputBuffer, transform, serviceOptions) { | ||
| // NOTE: Hardcoding webp here isn't accurate to how the Vercel Image Optimization API works, normally what we should | ||
| // do is setup a custom endpoint that sniff the user's accept-content header and serve the proper format based on the | ||
| // user's Vercel config. However, that's: a lot of work for: not much. The dev service is inaccurate to the prod service | ||
| // in many more ways, this is one of the less offending cases and is, imo, okay, erika - 2023-04-27 | ||
| transform.format = 'webp'; | ||
|
|
||
| // The base Squoosh service works the same way as the Vercel Image Optimization API, so it's a safe fallback in local | ||
| return squooshService.transform(inputBuffer, transform, serviceOptions); | ||
| }, | ||
| }; | ||
|
|
||
| export default service; |
Oops, something went wrong.