diff --git a/.changeset/proud-gifts-explain.md b/.changeset/proud-gifts-explain.md new file mode 100644 index 000000000000..0c75aab9a5f4 --- /dev/null +++ b/.changeset/proud-gifts-explain.md @@ -0,0 +1,5 @@ +--- +'@astrojs/image': patch +--- + +Updates the integration to build all optimized images to `dist/assets` during SSG builds diff --git a/packages/integrations/image/src/build/ssg.ts b/packages/integrations/image/src/build/ssg.ts index 4cf418ad0805..9219b9afd30c 100644 --- a/packages/integrations/image/src/build/ssg.ts +++ b/packages/integrations/image/src/build/ssg.ts @@ -83,10 +83,10 @@ export async function ssgBuild({ loader, staticImages, config, outDir, logLevel let outputFile: string; if (isRemoteImage(src)) { - const outputFileURL = new URL(path.join('./', path.basename(filename)), outDir); + const outputFileURL = new URL(path.join('./assets', path.basename(filename)), outDir); outputFile = fileURLToPath(outputFileURL); } else { - const outputFileURL = new URL(path.join('./', filename), outDir); + const outputFileURL = new URL(path.join('./assets', filename), outDir); outputFile = fileURLToPath(outputFileURL); } diff --git a/packages/integrations/image/src/index.ts b/packages/integrations/image/src/index.ts index 01948c025677..38c6543541cd 100644 --- a/packages/integrations/image/src/index.ts +++ b/packages/integrations/image/src/index.ts @@ -85,7 +85,7 @@ export default function integration(options: IntegrationOptions = {}): AstroInte // Doing this here makes sure that base is ignored when building // staticImages to /dist, but the rendered HTML will include the // base prefix for `src`. - return prependForwardSlash(joinPaths(_config.base, filename)); + return prependForwardSlash(joinPaths(_config.base, 'assets', filename)); } // Helpers for building static images should only be available for SSG diff --git a/packages/integrations/image/src/loaders/sharp.ts b/packages/integrations/image/src/loaders/sharp.ts index dbb082dba147..09a653375d6a 100644 --- a/packages/integrations/image/src/loaders/sharp.ts +++ b/packages/integrations/image/src/loaders/sharp.ts @@ -116,6 +116,6 @@ class SharpService implements SSRImageService { } } -const service = new SharpService(); +const service: SSRImageService = new SharpService(); export default service; diff --git a/packages/integrations/image/test/image-ssg.test.js b/packages/integrations/image/test/image-ssg.test.js index 0daf066d3707..aa6cf586f8c9 100644 --- a/packages/integrations/image/test/image-ssg.test.js +++ b/packages/integrations/image/test/image-ssg.test.js @@ -213,43 +213,43 @@ describe('SSG images - build', function () { { title: 'Local images', id: '#social-jpg', - regex: /^\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, }, { title: 'Filename with spaces', id: '#spaces', - regex: /^\/introducing astro.\w{8}_\w{4,10}.webp/, + regex: /^\/assets\/introducing astro.\w{8}_\w{4,10}.webp/, size: { width: 768, height: 414, type: 'webp' }, }, { title: 'Inline imports', id: '#inline', - regex: /^\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, }, { title: 'Remote images', id: '#google', - regex: /^\/googlelogo_color_272x92dp_\w{4,10}.webp/, + regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.webp/, size: { width: 544, height: 184, type: 'webp' }, }, { title: 'Remote without file extension', id: '#ipsum', - regex: /^\/300_\w{4,10}/, + regex: /^\/assets\/300_\w{4,10}/, size: { width: 200, height: 300, type: 'jpg' }, }, { title: 'Public images', id: '#hero', - regex: /^\/hero_\w{4,10}.webp/, + regex: /^\/assets\/hero_\w{4,10}.webp/, size: { width: 768, height: 414, type: 'webp' }, }, { title: 'Remote images', id: '#bg-color', - regex: /^\/googlelogo_color_272x92dp_\w{4,10}.jpeg/, + regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.jpeg/, size: { width: 544, height: 184, type: 'jpg' }, }, ].forEach(({ title, id, regex, size }) => { @@ -289,43 +289,43 @@ describe('SSG images with subpath - build', function () { { title: 'Local images', id: '#social-jpg', - regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, }, { title: 'Filename with spaces', id: '#spaces', - regex: /^\/docs\/introducing astro.\w{8}_\w{4,10}.webp/, + regex: /^\/docs\/assets\/introducing astro.\w{8}_\w{4,10}.webp/, size: { width: 768, height: 414, type: 'webp' }, }, { title: 'Inline imports', id: '#inline', - regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, }, { title: 'Remote images', id: '#google', - regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.webp/, + regex: /^\/docs\/assets\/googlelogo_color_272x92dp_\w{4,10}.webp/, size: { width: 544, height: 184, type: 'webp' }, }, { title: 'Remote without file extension', id: '#ipsum', - regex: /^\/docs\/300_\w{4,10}/, + regex: /^\/docs\/assets\/300_\w{4,10}/, size: { width: 200, height: 300, type: 'jpg' }, }, { title: 'Public images', id: '#hero', - regex: /^\/docs\/hero_\w{4,10}.webp/, + regex: /^\/docs\/assets\/hero_\w{4,10}.webp/, size: { width: 768, height: 414, type: 'webp' }, }, { title: 'Remote images', id: '#bg-color', - regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.jpeg/, + regex: /^\/docs\/assets\/googlelogo_color_272x92dp_\w{4,10}.jpeg/, size: { width: 544, height: 184, type: 'jpg' }, }, ].forEach(({ title, id, regex, size }) => { diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js index 96876b57ab52..6345f8deed7d 100644 --- a/packages/integrations/image/test/picture-ssg.test.js +++ b/packages/integrations/image/test/picture-ssg.test.js @@ -195,35 +195,35 @@ describe('SSG pictures - build', function () { { title: 'Local images', id: '#social-jpg', - regex: /^\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, alt: 'Social image', }, { title: 'Inline images', id: '#inline', - regex: /^\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, alt: 'Inline social image', }, { title: 'Remote images', id: '#google', - regex: /^\/googlelogo_color_272x92dp_\w{4,10}.png/, + regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.png/, size: { width: 544, height: 184, type: 'png' }, alt: 'Google logo', }, { title: 'Remote without file extension', id: '#ipsum', - regex: /^\/300_\w{4,10}/, + regex: /^\/assets\/300_\w{4,10}/, size: { width: 200, height: 300, type: 'jpg' }, alt: 'ipsum', }, { title: 'Public images', id: '#hero', - regex: /^\/hero_\w{4,10}.jpg/, + regex: /^\/assets\/hero_\w{4,10}.jpg/, size: { width: 768, height: 414, type: 'jpg' }, alt: 'Hero image', }, @@ -290,35 +290,35 @@ describe('SSG pictures with subpath - build', function () { { title: 'Local images', id: '#social-jpg', - regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, alt: 'Social image', }, { title: 'Inline images', id: '#inline', - regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, alt: 'Inline social image', }, { title: 'Remote images', id: '#google', - regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.png/, + regex: /^\/docs\/assets\/googlelogo_color_272x92dp_\w{4,10}.png/, size: { width: 544, height: 184, type: 'png' }, alt: 'Google logo', }, { title: 'Remote without file extension', id: '#ipsum', - regex: /^\/docs\/300_\w{4,10}/, + regex: /^\/docs\/assets\/300_\w{4,10}/, size: { width: 200, height: 300, type: 'jpg' }, alt: 'ipsum', }, { title: 'Public images', id: '#hero', - regex: /^\/docs\/hero_\w{4,10}.jpg/, + regex: /^\/docs\/assets\/hero_\w{4,10}.jpg/, size: { width: 768, height: 414, type: 'jpg' }, alt: 'Hero image', }, diff --git a/packages/integrations/image/test/rotation.test.js b/packages/integrations/image/test/rotation.test.js index 06f74d1c2ab0..49fe198b1f56 100644 --- a/packages/integrations/image/test/rotation.test.js +++ b/packages/integrations/image/test/rotation.test.js @@ -32,7 +32,7 @@ describe('Image rotation', function () { it('Landscape images', () => { for (let i = 0; i < 9; i++) { const image = $(`#landscape-${i}`); - const regex = new RegExp(`\^/Landscape_${i}.\\w{8}_\\w{4,10}.jpg`); + const regex = new RegExp(`\^/assets\/Landscape_${i}.\\w{8}_\\w{4,10}.jpg`); expect(image.attr('src')).to.match(regex); expect(image.attr('width')).to.equal('1800'); @@ -49,7 +49,7 @@ describe('Image rotation', function () { it('Portait images', () => { for (let i = 0; i < 9; i++) { const image = $(`#portrait-${i}`); - const regex = new RegExp(`\^/Portrait_${i}.\\w{8}_\\w{4,10}.jpg`); + const regex = new RegExp(`\^/assets\/Portrait_${i}.\\w{8}_\\w{4,10}.jpg`); expect(image.attr('src')).to.match(regex); expect(image.attr('width')).to.equal('1200'); diff --git a/packages/integrations/image/test/with-mdx.test.js b/packages/integrations/image/test/with-mdx.test.js index eb1a572029d2..963cd9b970bb 100644 --- a/packages/integrations/image/test/with-mdx.test.js +++ b/packages/integrations/image/test/with-mdx.test.js @@ -28,31 +28,31 @@ describe('Images in MDX - build', function () { { title: 'Local images', id: '#social-jpg', - regex: /^\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, }, { title: 'Inline imports', id: '#inline', - regex: /^\/social.\w{8}_\w{4,10}.jpg/, + regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/, size: { width: 506, height: 253, type: 'jpg' }, }, { title: 'Remote images', id: '#google', - regex: /^\/googlelogo_color_272x92dp_\w{4,10}.webp/, + regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.webp/, size: { width: 544, height: 184, type: 'webp' }, }, { title: 'Public images', id: '#hero', - regex: /^\/hero_\w{4,10}.webp/, + regex: /^\/assets\/hero_\w{4,10}.webp/, size: { width: 768, height: 414, type: 'webp' }, }, { title: 'Background color', id: '#bg-color', - regex: /^\/googlelogo_color_272x92dp_\w{4,10}.jpeg/, + regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.jpeg/, size: { width: 544, height: 184, type: 'jpg' }, }, ].forEach(({ title, id, regex, size }) => {