[ci] release (#3789)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
parent
f4943e0fbc
commit
94143fcdba
46 changed files with 197 additions and 171 deletions
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Adds support for the new `astrojs/image` integration
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
'@astrojs/image': patch
|
||||
---
|
||||
|
||||
Initial release! 🎉
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/preact": "^0.3.1",
|
||||
"astro": "^1.0.0-beta.61",
|
||||
"astro": "^1.0.0-beta.62",
|
||||
"sass": "^1.52.2"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/preact": "^0.3.1",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"preact": "^10.7.3"
|
||||
|
|
|
@ -10,6 +10,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@example/my-component": "workspace:*",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,6 +8,6 @@
|
|||
"serve": "astro --root demo preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,6 +20,6 @@
|
|||
"devDependencies": {
|
||||
"@astrojs/preact": "^0.3.1",
|
||||
"@astrojs/react": "^0.2.0",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"alpinejs": "^3.10.2"
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/lit": "^0.3.0",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"@webcomponents/template-shadowroot": "^0.1.0",
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
"@astrojs/solid-js": "^0.2.0",
|
||||
"@astrojs/svelte": "^0.2.0",
|
||||
"@astrojs/vue": "^0.2.0",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"@webcomponents/template-shadowroot": "^0.1.0",
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/preact": "^0.3.1",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"preact": "^10.7.3"
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
"@astrojs/react": "^0.2.0",
|
||||
"@types/react": "^18.0.10",
|
||||
"@types/react-dom": "^18.0.5",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.1.0",
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/solid-js": "^0.2.0",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"solid-js": "^1.4.3"
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/svelte": "^0.2.0",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"svelte": "^3.48.0"
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/vue": "^0.2.0",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.2.37"
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
"@astrojs/solid-js": "0.2.0",
|
||||
"@astrojs/tailwind": "^0.2.2",
|
||||
"@astrojs/turbolinks": "^0.1.3",
|
||||
"astro": "^1.0.0-beta.61",
|
||||
"astro": "^1.0.0-beta.62",
|
||||
"solid-js": "^1.4.3"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/preact": "^0.3.1",
|
||||
"astro": "^1.0.0-beta.61",
|
||||
"astro": "^1.0.0-beta.62",
|
||||
"sass": "^1.52.2"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
"devDependencies": {
|
||||
"@astrojs/node": "^0.1.3",
|
||||
"@astrojs/svelte": "^0.2.0",
|
||||
"astro": "^1.0.0-beta.61",
|
||||
"astro": "^1.0.0-beta.62",
|
||||
"concurrently": "^7.2.1",
|
||||
"lightcookie": "^1.0.25",
|
||||
"unocss": "^0.15.6",
|
||||
|
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/react": "^0.2.0",
|
||||
"astro": "^1.0.0-beta.61",
|
||||
"astro": "^1.0.0-beta.62",
|
||||
"sass": "^1.52.2"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/markdown-remark": "^0.11.3",
|
||||
"astro": "^1.0.0-beta.61",
|
||||
"astro": "^1.0.0-beta.62",
|
||||
"hast-util-select": "5.0.1",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"rehype-slug": "^5.0.1",
|
||||
|
|
|
@ -10,6 +10,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/markdown-remark": "^0.11.3",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
"@astrojs/react": "^0.2.0",
|
||||
"@astrojs/svelte": "^0.2.0",
|
||||
"@astrojs/vue": "^0.2.0",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
},
|
||||
"dependencies": {
|
||||
"preact": "^10.7.3",
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
"devDependencies": {
|
||||
"@astrojs/mdx": "^0.0.2",
|
||||
"@astrojs/preact": "^0.3.1",
|
||||
"astro": "^1.0.0-beta.61",
|
||||
"astro": "^1.0.0-beta.62",
|
||||
"preact": "^10.6.5"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -25,6 +25,6 @@
|
|||
"@astrojs/solid-js": "^0.2.0",
|
||||
"@astrojs/svelte": "^0.2.0",
|
||||
"@astrojs/vue": "^0.2.0",
|
||||
"astro": "^1.0.0-beta.61"
|
||||
"astro": "^1.0.0-beta.62"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/tailwind": "^0.2.2",
|
||||
"astro": "^1.0.0-beta.61",
|
||||
"astro": "^1.0.0-beta.62",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"canvas-confetti": "^1.5.1",
|
||||
"postcss": "^8.4.14",
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^1.0.0-beta.61",
|
||||
"astro": "^1.0.0-beta.62",
|
||||
"vite-plugin-pwa": "0.11.11",
|
||||
"workbox-window": "^6.5.3"
|
||||
}
|
||||
|
|
|
@ -1,5 +1,11 @@
|
|||
# astro
|
||||
|
||||
## 1.0.0-beta.62
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3788](https://github.com/withastro/astro/pull/3788) [`f4943e0f`](https://github.com/withastro/astro/commit/f4943e0fbced044f0ba4435cb41d77b67c98e69f) Thanks [@tony-sull](https://github.com/tony-sull)! - Adds support for the new `astrojs/image` integration
|
||||
|
||||
## 1.0.0-beta.61
|
||||
|
||||
### Patch Changes
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "astro",
|
||||
"version": "1.0.0-beta.61",
|
||||
"version": "1.0.0-beta.62",
|
||||
"description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
|
||||
"type": "module",
|
||||
"author": "withastro",
|
||||
|
|
7
packages/integrations/image/CHANGELOG.md
Normal file
7
packages/integrations/image/CHANGELOG.md
Normal file
|
@ -0,0 +1,7 @@
|
|||
# @astrojs/image
|
||||
|
||||
## 0.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3788](https://github.com/withastro/astro/pull/3788) [`f4943e0f`](https://github.com/withastro/astro/commit/f4943e0fbced044f0ba4435cb41d77b67c98e69f) Thanks [@tony-sull](https://github.com/tony-sull)! - Initial release! 🎉
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@astrojs/image",
|
||||
"description": "Load and transform images in your Astro site.",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.2",
|
||||
"type": "module",
|
||||
"types": "./dist/types.d.ts",
|
||||
"author": "withastro",
|
||||
|
|
|
@ -24,10 +24,10 @@ export const get: APIRoute = async ({ request }) => {
|
|||
return new Response(data, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': lookup(format) || ''
|
||||
}
|
||||
'Content-Type': lookup(format) || '',
|
||||
},
|
||||
});
|
||||
} catch (err: unknown) {
|
||||
return new Response(`Server Error: ${err}`, { status: 500 });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -15,7 +15,9 @@ export const get: APIRoute = async ({ request }) => {
|
|||
}
|
||||
|
||||
// TODO: Can we lean on fs to load local images in SSR prod builds?
|
||||
const href = isRemoteImage(transform.src) ? new URL(transform.src) : new URL(transform.src, url.origin);
|
||||
const href = isRemoteImage(transform.src)
|
||||
? new URL(transform.src)
|
||||
: new URL(transform.src, url.origin);
|
||||
|
||||
const inputBuffer = await loadRemoteImage(href.toString());
|
||||
|
||||
|
@ -30,11 +32,11 @@ export const get: APIRoute = async ({ request }) => {
|
|||
headers: {
|
||||
'Content-Type': lookup(format) || '',
|
||||
'Cache-Control': 'public, max-age=31536000',
|
||||
'ETag': etag(inputBuffer),
|
||||
'Date': (new Date()).toUTCString(),
|
||||
}
|
||||
ETag: etag(inputBuffer),
|
||||
Date: new Date().toUTCString(),
|
||||
},
|
||||
});
|
||||
} catch (err: unknown) {
|
||||
return new Response(`Server Error: ${err}`, { status: 500 });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -2,10 +2,21 @@ import fs from 'fs/promises';
|
|||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import slash from 'slash';
|
||||
import { ensureDir, isRemoteImage, loadLocalImage, loadRemoteImage, propsToFilename } from './utils.js';
|
||||
import {
|
||||
ensureDir,
|
||||
isRemoteImage,
|
||||
loadLocalImage,
|
||||
loadRemoteImage,
|
||||
propsToFilename,
|
||||
} from './utils.js';
|
||||
import { createPlugin } from './vite-plugin-astro-image.js';
|
||||
import type { AstroConfig, AstroIntegration } from 'astro';
|
||||
import type { ImageAttributes, IntegrationOptions, SSRImageService, TransformOptions } from './types';
|
||||
import type {
|
||||
ImageAttributes,
|
||||
IntegrationOptions,
|
||||
SSRImageService,
|
||||
TransformOptions,
|
||||
} from './types';
|
||||
|
||||
const PKG_NAME = '@astrojs/image';
|
||||
const ROUTE_PATTERN = '/_image';
|
||||
|
@ -13,15 +24,18 @@ const OUTPUT_DIR = '/_image';
|
|||
|
||||
/**
|
||||
* Gets the HTML attributes required to build an `<img />` for the transformed image.
|
||||
*
|
||||
*
|
||||
* @param loader @type {ImageService} The image service used for transforming images.
|
||||
* @param transform @type {TransformOptions} The transformations requested for the optimized image.
|
||||
* @returns @type {ImageAttributes} The HTML attributes to be included on the built `<img />` element.
|
||||
*/
|
||||
export async function getImage(loader: SSRImageService, transform: TransformOptions): Promise<ImageAttributes> {
|
||||
export async function getImage(
|
||||
loader: SSRImageService,
|
||||
transform: TransformOptions
|
||||
): Promise<ImageAttributes> {
|
||||
(globalThis as any).loader = loader;
|
||||
|
||||
const attributes = await loader.getImageAttributes(transform);
|
||||
const attributes = await loader.getImageAttributes(transform);
|
||||
|
||||
// For SSR services, build URLs for the injected route
|
||||
if (typeof loader.transform === 'function') {
|
||||
|
@ -32,14 +46,15 @@ export async function getImage(loader: SSRImageService, transform: TransformOpti
|
|||
(globalThis as any)?.addStaticImage(transform);
|
||||
}
|
||||
|
||||
const src = globalThis && (globalThis as any).filenameFormat
|
||||
? (globalThis as any).filenameFormat(transform, searchParams)
|
||||
: `${ROUTE_PATTERN}?${searchParams.toString()}`;
|
||||
const src =
|
||||
globalThis && (globalThis as any).filenameFormat
|
||||
? (globalThis as any).filenameFormat(transform, searchParams)
|
||||
: `${ROUTE_PATTERN}?${searchParams.toString()}`;
|
||||
|
||||
return {
|
||||
...attributes,
|
||||
src: slash(src), // Windows compat
|
||||
}
|
||||
return {
|
||||
...attributes,
|
||||
src: slash(src), // Windows compat
|
||||
};
|
||||
}
|
||||
|
||||
// For hosted services, return the <img /> attributes as-is
|
||||
|
@ -49,7 +64,7 @@ export async function getImage(loader: SSRImageService, transform: TransformOpti
|
|||
const createIntegration = (options: IntegrationOptions = {}): AstroIntegration => {
|
||||
const resolvedOptions = {
|
||||
serviceEntryPoint: '@astrojs/image/sharp',
|
||||
...options
|
||||
...options,
|
||||
};
|
||||
|
||||
// During SSG builds, this is used to track all transformed images required.
|
||||
|
@ -59,10 +74,8 @@ const createIntegration = (options: IntegrationOptions = {}): AstroIntegration =
|
|||
|
||||
function getViteConfiguration() {
|
||||
return {
|
||||
plugins: [
|
||||
createPlugin(_config, resolvedOptions)
|
||||
]
|
||||
}
|
||||
plugins: [createPlugin(_config, resolvedOptions)],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
|
@ -80,23 +93,31 @@ const createIntegration = (options: IntegrationOptions = {}): AstroIntegration =
|
|||
// Added to globalThis to share the same map in Node and Vite
|
||||
(globalThis as any).addStaticImage = (transform: TransformOptions) => {
|
||||
staticImages.set(propsToFilename(transform), transform);
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: Add support for custom, user-provided filename format functions
|
||||
(globalThis as any).filenameFormat = (transform: TransformOptions, searchParams: URLSearchParams) => {
|
||||
(globalThis as any).filenameFormat = (
|
||||
transform: TransformOptions,
|
||||
searchParams: URLSearchParams
|
||||
) => {
|
||||
if (mode === 'ssg') {
|
||||
return isRemoteImage(transform.src)
|
||||
? path.join(OUTPUT_DIR, path.basename(propsToFilename(transform)))
|
||||
: path.join(OUTPUT_DIR, path.dirname(transform.src), path.basename(propsToFilename(transform)));
|
||||
: path.join(
|
||||
OUTPUT_DIR,
|
||||
path.dirname(transform.src),
|
||||
path.basename(propsToFilename(transform))
|
||||
);
|
||||
} else {
|
||||
return `${ROUTE_PATTERN}?${searchParams.toString()}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (mode === 'ssr') {
|
||||
injectRoute({
|
||||
pattern: ROUTE_PATTERN,
|
||||
entryPoint: command === 'dev' ? '@astrojs/image/endpoints/dev' : '@astrojs/image/endpoints/prod'
|
||||
entryPoint:
|
||||
command === 'dev' ? '@astrojs/image/endpoints/dev' : '@astrojs/image/endpoints/prod',
|
||||
});
|
||||
}
|
||||
},
|
||||
|
@ -111,7 +132,10 @@ const createIntegration = (options: IntegrationOptions = {}): AstroIntegration =
|
|||
// try to load the remote image
|
||||
inputBuffer = await loadRemoteImage(transform.src);
|
||||
|
||||
const outputFileURL = new URL(path.join('./', OUTPUT_DIR, path.basename(filename)), dir);
|
||||
const outputFileURL = new URL(
|
||||
path.join('./', OUTPUT_DIR, path.basename(filename)),
|
||||
dir
|
||||
);
|
||||
outputFile = fileURLToPath(outputFileURL);
|
||||
} else {
|
||||
const inputFileURL = new URL(`.${transform.src}`, _config.srcDir);
|
||||
|
@ -131,9 +155,9 @@ const createIntegration = (options: IntegrationOptions = {}): AstroIntegration =
|
|||
ensureDir(path.dirname(outputFile));
|
||||
await fs.writeFile(outputFile, data);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default createIntegration;
|
||||
|
|
|
@ -2,42 +2,42 @@ import sharp from 'sharp';
|
|||
import { isAspectRatioString, isOutputFormat } from '../utils.js';
|
||||
import type { TransformOptions, OutputFormat, SSRImageService } from '../types';
|
||||
|
||||
class SharpService implements SSRImageService {
|
||||
class SharpService implements SSRImageService {
|
||||
async getImageAttributes(transform: TransformOptions) {
|
||||
const { width, height, src, format, quality, aspectRatio, ...rest } = transform;
|
||||
|
||||
|
||||
return {
|
||||
...rest,
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
height: height,
|
||||
};
|
||||
}
|
||||
|
||||
serializeTransform(transform: TransformOptions) {
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
|
||||
if (transform.quality) {
|
||||
searchParams.append('q', transform.quality.toString());
|
||||
}
|
||||
|
||||
|
||||
if (transform.format) {
|
||||
searchParams.append('f', transform.format);
|
||||
}
|
||||
|
||||
|
||||
if (transform.width) {
|
||||
searchParams.append('w', transform.width.toString());
|
||||
}
|
||||
|
||||
|
||||
if (transform.height) {
|
||||
searchParams.append('h', transform.height.toString());
|
||||
}
|
||||
|
||||
|
||||
if (transform.aspectRatio) {
|
||||
searchParams.append('ar', transform.aspectRatio.toString());
|
||||
}
|
||||
|
||||
|
||||
searchParams.append('href', transform.src);
|
||||
|
||||
|
||||
return { searchParams };
|
||||
}
|
||||
|
||||
|
@ -45,54 +45,54 @@ class SharpService implements SSRImageService {
|
|||
if (!searchParams.has('href')) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
|
||||
let transform: TransformOptions = { src: searchParams.get('href')! };
|
||||
|
||||
if (searchParams.has('q')) {
|
||||
transform.quality = parseInt(searchParams.get('q')!);
|
||||
}
|
||||
|
||||
|
||||
if (searchParams.has('f')) {
|
||||
const format = searchParams.get('f')!;
|
||||
if (isOutputFormat(format)) {
|
||||
transform.format = format;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (searchParams.has('w')) {
|
||||
transform.width = parseInt(searchParams.get('w')!);
|
||||
}
|
||||
|
||||
|
||||
if (searchParams.has('h')) {
|
||||
transform.height = parseInt(searchParams.get('h')!);
|
||||
}
|
||||
|
||||
|
||||
if (searchParams.has('ar')) {
|
||||
const ratio = searchParams.get('ar')!;
|
||||
|
||||
|
||||
if (isAspectRatioString(ratio)) {
|
||||
transform.aspectRatio = ratio;
|
||||
} else {
|
||||
transform.aspectRatio = parseFloat(ratio);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return transform;
|
||||
}
|
||||
|
||||
async transform(inputBuffer: Buffer, transform: TransformOptions) {
|
||||
const sharpImage = sharp(inputBuffer, { failOnError: false });
|
||||
|
||||
|
||||
if (transform.width || transform.height) {
|
||||
sharpImage.resize(transform.width, transform.height);
|
||||
}
|
||||
|
||||
|
||||
if (transform.format) {
|
||||
sharpImage.toFormat(transform.format, { quality: transform.quality });
|
||||
}
|
||||
|
||||
|
||||
const { data, info } = await sharpImage.toBuffer({ resolveWithObject: true });
|
||||
|
||||
|
||||
return {
|
||||
data,
|
||||
format: info.format as OutputFormat,
|
||||
|
|
|
@ -15,6 +15,6 @@ export async function metadata(src: string): Promise<ImageMetadata | undefined>
|
|||
src,
|
||||
width,
|
||||
height,
|
||||
format: type as InputFormat
|
||||
}
|
||||
format: type as InputFormat,
|
||||
};
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
export * from './index';
|
||||
|
||||
export type InputFormat =
|
||||
| 'heic'
|
||||
| 'heic'
|
||||
| 'heif'
|
||||
| 'avif'
|
||||
| 'jpeg'
|
||||
|
@ -11,15 +11,11 @@ export type InputFormat =
|
|||
| 'webp'
|
||||
| 'gif';
|
||||
|
||||
export type OutputFormat =
|
||||
| 'avif'
|
||||
| 'jpeg'
|
||||
| 'png'
|
||||
| 'webp';
|
||||
export type OutputFormat = 'avif' | 'jpeg' | 'png' | 'webp';
|
||||
|
||||
/**
|
||||
* Converts a set of image transforms to the filename to use when building for static.
|
||||
*
|
||||
*
|
||||
* This is only used for static production builds and ignored when an SSR adapter is used,
|
||||
* or in `astro dev` for static builds.
|
||||
*/
|
||||
|
@ -38,20 +34,20 @@ export interface IntegrationOptions {
|
|||
export interface TransformOptions {
|
||||
/**
|
||||
* Source for the original image file.
|
||||
*
|
||||
*
|
||||
* For images in your project's repository, use the `src` relative to the `public` directory.
|
||||
* For remote images, provide the full URL.
|
||||
*/
|
||||
src: string;
|
||||
/**
|
||||
* The output format to be used in the optimized image.
|
||||
*
|
||||
*
|
||||
* @default undefined The original image format will be used.
|
||||
*/
|
||||
*/
|
||||
format?: OutputFormat;
|
||||
/**
|
||||
* The compression quality used during optimization.
|
||||
*
|
||||
*
|
||||
* @default undefined Allows the image service to determine defaults.
|
||||
*/
|
||||
quality?: number;
|
||||
|
@ -68,7 +64,7 @@ export interface TransformOptions {
|
|||
/**
|
||||
* The desired aspect ratio of the output image. Combine with either `width` or `height`
|
||||
* to automatically calculate and crop the other dimension.
|
||||
*
|
||||
*
|
||||
* @example 1.777 - numbers can be used for computed ratios, useful for doing `{width/height}`
|
||||
* @example "16:9" - strings can be used in the format of `{ratioWidth}:{ratioHeight}`.
|
||||
*/
|
||||
|
@ -84,21 +80,22 @@ export interface HostedImageService<T extends TransformOptions = TransformOption
|
|||
getImageAttributes(transform: T): Promise<ImageAttributes>;
|
||||
}
|
||||
|
||||
export interface SSRImageService<T extends TransformOptions = TransformOptions> extends HostedImageService<T> {
|
||||
export interface SSRImageService<T extends TransformOptions = TransformOptions>
|
||||
extends HostedImageService<T> {
|
||||
/**
|
||||
* Gets the HTML attributes needed for the server rendered `<img />` element.
|
||||
*/
|
||||
getImageAttributes(transform: T): Promise<Exclude<ImageAttributes, 'src'>>;
|
||||
getImageAttributes(transform: T): Promise<Exclude<ImageAttributes, 'src'>>;
|
||||
/**
|
||||
* Serializes image transformation properties to URLSearchParams, used to build
|
||||
* the final `src` that points to the self-hosted SSR endpoint.
|
||||
*
|
||||
*
|
||||
* @param transform @type {TransformOptions} defining the requested image transformation.
|
||||
*/
|
||||
serializeTransform(transform: T): { searchParams: URLSearchParams };
|
||||
/**
|
||||
* The reverse of `serializeTransform(transform)`, this parsed the @type {TransformOptions} back out of a given URL.
|
||||
*
|
||||
*
|
||||
* @param searchParams @type {URLSearchParams}
|
||||
* @returns @type {TransformOptions} used to generate the URL, or undefined if the URL isn't valid.
|
||||
*/
|
||||
|
@ -106,14 +103,16 @@ export interface SSRImageService<T extends TransformOptions = TransformOptions>
|
|||
/**
|
||||
* Performs the image transformations on the input image and returns both the binary data and
|
||||
* final image format of the optimized image.
|
||||
*
|
||||
*
|
||||
* @param inputBuffer Binary buffer containing the original image.
|
||||
* @param transform @type {TransformOptions} defining the requested transformations.
|
||||
*/
|
||||
transform(inputBuffer: Buffer, transform: T): Promise<{ data: Buffer, format: OutputFormat }>;
|
||||
transform(inputBuffer: Buffer, transform: T): Promise<{ data: Buffer; format: OutputFormat }>;
|
||||
}
|
||||
|
||||
export type ImageService<T extends TransformOptions = TransformOptions> = HostedImageService<T> | SSRImageService<T>;
|
||||
export type ImageService<T extends TransformOptions = TransformOptions> =
|
||||
| HostedImageService<T>
|
||||
| SSRImageService<T>;
|
||||
|
||||
export interface ImageMetadata {
|
||||
src: string;
|
||||
|
|
|
@ -2,7 +2,7 @@ import fs from 'fs';
|
|||
import path from 'path';
|
||||
import type { OutputFormat, TransformOptions } from './types';
|
||||
|
||||
export function isOutputFormat(value: string): value is OutputFormat {
|
||||
export function isOutputFormat(value: string): value is OutputFormat {
|
||||
return ['avif', 'jpeg', 'png', 'webp'].includes(value);
|
||||
}
|
||||
|
||||
|
@ -41,9 +41,7 @@ export async function loadRemoteImage(src: string) {
|
|||
}
|
||||
|
||||
export async function loadImage(src: string) {
|
||||
return isRemoteImage(src)
|
||||
? await loadRemoteImage(src)
|
||||
: await loadLocalImage(src);
|
||||
return isRemoteImage(src) ? await loadRemoteImage(src) : await loadLocalImage(src);
|
||||
}
|
||||
|
||||
export function propsToFilename({ src, width, height, format }: TransformOptions) {
|
||||
|
|
|
@ -8,7 +8,8 @@ import type { AstroConfig } from 'astro';
|
|||
import type { IntegrationOptions } from './types';
|
||||
|
||||
export function createPlugin(config: AstroConfig, options: Required<IntegrationOptions>): Plugin {
|
||||
const filter = (id: string) => /^(?!\/_image?).*.(heic|heif|avif|jpeg|jpg|png|tiff|webp|gif)$/.test(id);
|
||||
const filter = (id: string) =>
|
||||
/^(?!\/_image?).*.(heic|heif|avif|jpeg|jpg|png|tiff|webp|gif)$/.test(id);
|
||||
|
||||
const virtualModuleId = 'virtual:image-loader';
|
||||
|
||||
|
@ -43,10 +44,12 @@ export function createPlugin(config: AstroConfig, options: Required<IntegrationO
|
|||
},
|
||||
async load(id) {
|
||||
// only claim image ESM imports
|
||||
if (!filter(id)) { return null; }
|
||||
if (!filter(id)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const meta = await metadata(id);
|
||||
|
||||
|
||||
const fileUrl = pathToFileURL(id);
|
||||
const src = resolvedConfig.isProduction
|
||||
? fileUrl.pathname.replace(config.srcDir.pathname, '/')
|
||||
|
@ -66,6 +69,6 @@ export function createPlugin(config: AstroConfig, options: Required<IntegrationO
|
|||
}
|
||||
|
||||
return `export default ${JSON.stringify(output)}`;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
@ -56,7 +56,11 @@ describe('SSG images', function () {
|
|||
});
|
||||
|
||||
it('built the optimized image', () => {
|
||||
verifyImage('_image/googlelogo_color_272x92dp_544x184.webp', { width: 544, height: 184, type: 'webp' });
|
||||
verifyImage('_image/googlelogo_color_272x92dp_544x184.webp', {
|
||||
width: 544,
|
||||
height: 184,
|
||||
type: 'webp',
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -95,9 +99,9 @@ describe('SSG images', function () {
|
|||
|
||||
it('returns the optimized image', async () => {
|
||||
const image = $('#social-jpg');
|
||||
|
||||
|
||||
const res = await fixture.fetch(image.attr('src'));
|
||||
|
||||
|
||||
expect(res.status).to.equal(200);
|
||||
expect(res.headers.get('Content-Type')).to.equal('image/jpeg');
|
||||
|
||||
|
@ -119,7 +123,9 @@ describe('SSG images', function () {
|
|||
expect(searchParams.get('f')).to.equal('webp');
|
||||
expect(searchParams.get('w')).to.equal('544');
|
||||
expect(searchParams.get('h')).to.equal('184');
|
||||
expect(searchParams.get('href')).to.equal('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
|
||||
expect(searchParams.get('href')).to.equal(
|
||||
'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -13,7 +13,7 @@ describe('Sharp service', () => {
|
|||
['height', { src, height: 414 }],
|
||||
['width & height', { src, height: 400, width: 200 }],
|
||||
['aspect ratio string', { src, aspectRatio: '16:9' }],
|
||||
['aspect ratio float', { src, aspectRatio: 1.7 }]
|
||||
['aspect ratio float', { src, aspectRatio: 1.7 }],
|
||||
].forEach(([description, props]) => {
|
||||
it(description, async () => {
|
||||
const { searchParams } = await sharp.serializeTransform(props);
|
||||
|
@ -48,7 +48,7 @@ describe('Sharp service', () => {
|
|||
['height', `h=414&href=${href}`, { src, height: 414 }],
|
||||
['width & height', `w=200&h=400&href=${href}`, { src, height: 400, width: 200 }],
|
||||
['aspect ratio string', `ar=16:9&href=${href}`, { src, aspectRatio: '16:9' }],
|
||||
['aspect ratio float', `ar=1.7&href=${href}`, { src, aspectRatio: 1.7 }]
|
||||
['aspect ratio float', `ar=1.7&href=${href}`, { src, aspectRatio: 1.7 }],
|
||||
].forEach(([description, params, expected]) => {
|
||||
it(description, async () => {
|
||||
const searchParams = new URLSearchParams(params);
|
||||
|
|
|
@ -49,14 +49,14 @@ importers:
|
|||
|
||||
examples/basics:
|
||||
specifiers:
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
devDependencies:
|
||||
astro: link:../../packages/astro
|
||||
|
||||
examples/blog:
|
||||
specifiers:
|
||||
'@astrojs/preact': ^0.3.1
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
preact: ^10.7.3
|
||||
dependencies:
|
||||
preact: 10.8.2
|
||||
|
@ -67,7 +67,7 @@ importers:
|
|||
examples/blog-multiple-authors:
|
||||
specifiers:
|
||||
'@astrojs/preact': ^0.3.1
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
preact: ^10.7.3
|
||||
sass: ^1.52.2
|
||||
dependencies:
|
||||
|
@ -79,14 +79,14 @@ importers:
|
|||
|
||||
examples/component:
|
||||
specifiers:
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
devDependencies:
|
||||
astro: link:../../packages/astro
|
||||
|
||||
examples/component/demo:
|
||||
specifiers:
|
||||
'@example/my-component': workspace:*
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
devDependencies:
|
||||
'@example/my-component': link:../packages/my-component
|
||||
astro: link:../../../packages/astro
|
||||
|
@ -102,7 +102,7 @@ importers:
|
|||
'@docsearch/css': ^3.1.0
|
||||
'@docsearch/react': ^3.1.0
|
||||
'@types/react': ^17.0.45
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
preact: ^10.7.3
|
||||
react: ^18.1.0
|
||||
react-dom: ^18.1.0
|
||||
|
@ -121,14 +121,14 @@ importers:
|
|||
|
||||
examples/env-vars:
|
||||
specifiers:
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
devDependencies:
|
||||
astro: link:../../packages/astro
|
||||
|
||||
examples/framework-alpine:
|
||||
specifiers:
|
||||
alpinejs: ^3.10.2
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
dependencies:
|
||||
alpinejs: 3.10.2
|
||||
devDependencies:
|
||||
|
@ -138,7 +138,7 @@ importers:
|
|||
specifiers:
|
||||
'@astrojs/lit': ^0.3.0
|
||||
'@webcomponents/template-shadowroot': ^0.1.0
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
lit: ^2.2.5
|
||||
dependencies:
|
||||
'@webcomponents/template-shadowroot': 0.1.0
|
||||
|
@ -156,7 +156,7 @@ importers:
|
|||
'@astrojs/svelte': ^0.2.0
|
||||
'@astrojs/vue': ^0.2.0
|
||||
'@webcomponents/template-shadowroot': ^0.1.0
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
lit: ^2.2.5
|
||||
preact: ^10.7.3
|
||||
react: ^18.1.0
|
||||
|
@ -185,7 +185,7 @@ importers:
|
|||
examples/framework-preact:
|
||||
specifiers:
|
||||
'@astrojs/preact': ^0.3.1
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
preact: ^10.7.3
|
||||
dependencies:
|
||||
preact: 10.8.2
|
||||
|
@ -198,7 +198,7 @@ importers:
|
|||
'@astrojs/react': ^0.2.0
|
||||
'@types/react': ^18.0.10
|
||||
'@types/react-dom': ^18.0.5
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
react: ^18.1.0
|
||||
react-dom: ^18.1.0
|
||||
dependencies:
|
||||
|
@ -213,7 +213,7 @@ importers:
|
|||
examples/framework-solid:
|
||||
specifiers:
|
||||
'@astrojs/solid-js': ^0.2.0
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
solid-js: ^1.4.3
|
||||
dependencies:
|
||||
solid-js: 1.4.5
|
||||
|
@ -224,7 +224,7 @@ importers:
|
|||
examples/framework-svelte:
|
||||
specifiers:
|
||||
'@astrojs/svelte': ^0.2.0
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
svelte: ^3.48.0
|
||||
dependencies:
|
||||
svelte: 3.48.0
|
||||
|
@ -235,7 +235,7 @@ importers:
|
|||
examples/framework-vue:
|
||||
specifiers:
|
||||
'@astrojs/vue': ^0.2.0
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
vue: ^3.2.37
|
||||
dependencies:
|
||||
vue: 3.2.37
|
||||
|
@ -253,7 +253,7 @@ importers:
|
|||
'@astrojs/tailwind': ^0.2.2
|
||||
'@astrojs/turbolinks': ^0.1.3
|
||||
'@webcomponents/template-shadowroot': ^0.1.0
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
lit: ^2.2.5
|
||||
preact: ^10.7.3
|
||||
react: ^18.1.0
|
||||
|
@ -282,20 +282,20 @@ importers:
|
|||
|
||||
examples/minimal:
|
||||
specifiers:
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
devDependencies:
|
||||
astro: link:../../packages/astro
|
||||
|
||||
examples/non-html-pages:
|
||||
specifiers:
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
devDependencies:
|
||||
astro: link:../../packages/astro
|
||||
|
||||
examples/portfolio:
|
||||
specifiers:
|
||||
'@astrojs/preact': ^0.3.1
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
preact: ^10.7.3
|
||||
sass: ^1.52.2
|
||||
dependencies:
|
||||
|
@ -309,7 +309,7 @@ importers:
|
|||
specifiers:
|
||||
'@astrojs/node': ^0.1.3
|
||||
'@astrojs/svelte': ^0.2.0
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
concurrently: ^7.2.1
|
||||
lightcookie: ^1.0.25
|
||||
svelte: ^3.48.0
|
||||
|
@ -328,14 +328,14 @@ importers:
|
|||
|
||||
examples/starter:
|
||||
specifiers:
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
devDependencies:
|
||||
astro: link:../../packages/astro
|
||||
|
||||
examples/subpath:
|
||||
specifiers:
|
||||
'@astrojs/react': ^0.2.0
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
react: ^18.1.0
|
||||
react-dom: ^18.1.0
|
||||
sass: ^1.52.2
|
||||
|
@ -354,7 +354,7 @@ importers:
|
|||
'@astrojs/react': ^0.2.0
|
||||
'@astrojs/svelte': ^0.2.0
|
||||
'@astrojs/vue': ^0.2.0
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
preact: ^10.7.3
|
||||
react: ^18.1.0
|
||||
react-dom: ^18.1.0
|
||||
|
@ -377,7 +377,7 @@ importers:
|
|||
examples/with-markdown-plugins:
|
||||
specifiers:
|
||||
'@astrojs/markdown-remark': ^0.11.3
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
hast-util-select: 5.0.1
|
||||
rehype-autolink-headings: ^6.1.1
|
||||
rehype-slug: ^5.0.1
|
||||
|
@ -395,7 +395,7 @@ importers:
|
|||
examples/with-markdown-shiki:
|
||||
specifiers:
|
||||
'@astrojs/markdown-remark': ^0.11.3
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
devDependencies:
|
||||
'@astrojs/markdown-remark': link:../../packages/markdown/remark
|
||||
astro: link:../../packages/astro
|
||||
|
@ -404,7 +404,7 @@ importers:
|
|||
specifiers:
|
||||
'@astrojs/mdx': ^0.0.2
|
||||
'@astrojs/preact': ^0.3.1
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
preact: ^10.6.5
|
||||
devDependencies:
|
||||
'@astrojs/mdx': link:../../packages/integrations/mdx
|
||||
|
@ -422,7 +422,7 @@ importers:
|
|||
'@nanostores/preact': ^0.1.3
|
||||
'@nanostores/react': ^0.1.5
|
||||
'@nanostores/vue': ^0.4.1
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
nanostores: ^0.5.12
|
||||
preact: ^10.7.3
|
||||
react: ^18.1.0
|
||||
|
@ -450,7 +450,7 @@ importers:
|
|||
examples/with-tailwindcss:
|
||||
specifiers:
|
||||
'@astrojs/tailwind': ^0.2.2
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
autoprefixer: ^10.4.7
|
||||
canvas-confetti: ^1.5.1
|
||||
postcss: ^8.4.14
|
||||
|
@ -465,7 +465,7 @@ importers:
|
|||
|
||||
examples/with-vite-plugin-pwa:
|
||||
specifiers:
|
||||
astro: ^1.0.0-beta.61
|
||||
astro: ^1.0.0-beta.62
|
||||
vite-plugin-pwa: 0.11.11
|
||||
workbox-window: ^6.5.3
|
||||
devDependencies:
|
||||
|
@ -8960,11 +8960,6 @@ packages:
|
|||
|
||||
/debug/3.2.7:
|
||||
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
|
||||
peerDependencies:
|
||||
supports-color: '*'
|
||||
peerDependenciesMeta:
|
||||
supports-color:
|
||||
optional: true
|
||||
dependencies:
|
||||
ms: 2.1.3
|
||||
dev: false
|
||||
|
@ -12033,8 +12028,6 @@ packages:
|
|||
debug: 3.2.7
|
||||
iconv-lite: 0.4.24
|
||||
sax: 1.2.4
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: false
|
||||
|
||||
/netmask/2.0.2:
|
||||
|
@ -12116,8 +12109,6 @@ packages:
|
|||
rimraf: 2.7.1
|
||||
semver: 5.7.1
|
||||
tar: 4.4.19
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: false
|
||||
|
||||
/node-releases/2.0.5:
|
||||
|
|
Loading…
Reference in a new issue