-
-
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.
Image integration refactor and cleanup (#4482)
* WIP: simplifying the use of `fs` vs. the vite plugin * removing a few node deps (etag and node:path) * adding ts defs for sharp * using the same mime package as astro's core App * fixing file URL support in windows * using file URLs when loading local image metadata * fixing a bug in the etag helper * Windows compat * splitting out dev & build tests * why do these suites fail in parallel? * one last windows compat case * Adding tests for treating /public images the same as remote URLs * a couple fixes for Astro's `base` config * adding base path tests for SSR * fixing a bad merge, lost the kleur dependency * adding a test suite for images + MDX * chore: add changeset * simplifying the with-mdx tests * bugfix: don't duplicate the period when using existing file extensions * let Vite cache the image loader service * adding some docs for using /public images * fixing changeset * Update packages/integrations/image/README.md Co-authored-by: Sarah Rainsberger <[email protected]> * Update packages/integrations/image/README.md Co-authored-by: Sarah Rainsberger <[email protected]> * nit: minor README syntax tweaks Co-authored-by: Sarah Rainsberger <[email protected]>
- Loading branch information
1 parent
7429664
commit 00c605c
Showing
42 changed files
with
2,211 additions
and
763 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,12 @@ | ||
| --- | ||
| '@astrojs/image': minor | ||
| --- | ||
|
|
||
| `<Image />` and `<Picture />` now support using images in the `/public` directory :tada: | ||
|
|
||
| - Moving handling of local image files into the Vite plugin | ||
| - Optimized image files are now built to `/dist` with hashes provided by Vite, removing the need for a `/dist/_image` directory | ||
| - Removes three npm dependencies: `etag`, `slash`, and `tiny-glob` | ||
| - Replaces `mrmime` with the `mime` package already used by Astro's SSR server | ||
| - Simplifies the injected `_image` route to work for both `dev` and `build` | ||
| - Adds a new test suite for using images with `@astrojs/mdx` - including optimizing images straight from `/public` |
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 was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
44 changes: 26 additions & 18 deletions
44
.../integrations/image/src/endpoints/prod.ts → packages/integrations/image/src/endpoint.ts
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 |
|---|---|---|
| @@ -1,45 +1,53 @@ | ||
| import type { APIRoute } from 'astro'; | ||
| import etag from 'etag'; | ||
| import { lookup } from 'mrmime'; | ||
| import mime from 'mime'; | ||
| // @ts-ignore | ||
| import loader from 'virtual:image-loader'; | ||
| import { isRemoteImage, loadLocalImage, loadRemoteImage } from '../utils/images.js'; | ||
| import { etag } from './utils/etag.js'; | ||
| import { isRemoteImage } from './utils/paths.js'; | ||
|
|
||
| async function loadRemoteImage(src: URL) { | ||
| try { | ||
| const res = await fetch(src); | ||
|
|
||
| if (!res.ok) { | ||
| return undefined; | ||
| } | ||
|
|
||
| return Buffer.from(await res.arrayBuffer()); | ||
| } catch { | ||
| return undefined; | ||
| } | ||
| } | ||
|
|
||
| export const get: APIRoute = async ({ request }) => { | ||
| try { | ||
| const url = new URL(request.url); | ||
| const transform = loader.parseTransform(url.searchParams); | ||
|
|
||
| if (!transform) { | ||
| return new Response('Bad Request', { status: 400 }); | ||
| } | ||
|
|
||
| let inputBuffer: Buffer | undefined = undefined; | ||
|
|
||
| if (isRemoteImage(transform.src)) { | ||
| inputBuffer = await loadRemoteImage(transform.src); | ||
| } else { | ||
| const clientRoot = new URL('../client/', import.meta.url); | ||
| const localPath = new URL('.' + transform.src, clientRoot); | ||
| inputBuffer = await loadLocalImage(localPath); | ||
| } | ||
| // TODO: handle config subpaths? | ||
| const sourceUrl = isRemoteImage(transform.src) | ||
| ? new URL(transform.src) | ||
| : new URL(transform.src, url.origin); | ||
| inputBuffer = await loadRemoteImage(sourceUrl); | ||
|
|
||
| if (!inputBuffer) { | ||
| return new Response(`"${transform.src} not found`, { status: 404 }); | ||
| return new Response('Not Found', { status: 404 }); | ||
| } | ||
|
|
||
| const { data, format } = await loader.transform(inputBuffer, transform); | ||
|
|
||
| return new Response(data, { | ||
| status: 200, | ||
| headers: { | ||
| 'Content-Type': lookup(format) || '', | ||
| 'Content-Type': mime.getType(format) || '', | ||
| 'Cache-Control': 'public, max-age=31536000', | ||
| ETag: etag(inputBuffer), | ||
| ETag: etag(data.toString()), | ||
| Date: new Date().toUTCString(), | ||
| }, | ||
| }); | ||
| } catch (err: unknown) { | ||
| return new Response(`Server Error: ${err}`, { status: 500 }); | ||
| } | ||
| }; | ||
| } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.