@teamnovu/nuxt-image 0.5.5 → 1.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +229 -24
- package/dist/module.d.mts +70 -0
- package/dist/module.json +12 -0
- package/dist/module.mjs +67 -0
- package/dist/runtime/components/NovuBunnyImage.d.vue.ts +11 -0
- package/dist/runtime/components/NovuBunnyImage.vue +67 -0
- package/dist/runtime/components/NovuBunnyImage.vue.d.ts +11 -0
- package/dist/runtime/components/NovuCloudinaryImage.d.vue.ts +19 -0
- package/dist/runtime/components/NovuCloudinaryImage.vue +79 -0
- package/dist/runtime/components/NovuCloudinaryImage.vue.d.ts +19 -0
- package/dist/runtime/components/NovuImage.d.vue.ts +28 -0
- package/dist/runtime/components/NovuImage.vue +90 -0
- package/dist/runtime/components/NovuImage.vue.d.ts +28 -0
- package/dist/runtime/components/NovuImgproxyImage.d.vue.ts +12 -0
- package/dist/runtime/components/NovuImgproxyImage.vue +68 -0
- package/dist/runtime/components/NovuImgproxyImage.vue.d.ts +12 -0
- package/dist/runtime/components/NovuStatamicImage.d.vue.ts +17 -0
- package/dist/runtime/components/NovuStatamicImage.vue +87 -0
- package/dist/runtime/components/NovuStatamicImage.vue.d.ts +17 -0
- package/dist/runtime/composables/useResponsiveImage.d.ts +42 -0
- package/dist/runtime/composables/useResponsiveImage.js +115 -0
- package/dist/runtime/providers/imgproxy.d.ts +68 -0
- package/dist/runtime/providers/imgproxy.js +160 -0
- package/dist/runtime/types.d.ts +56 -0
- package/dist/runtime/types.js +0 -0
- package/dist/runtime/utils/focal.d.ts +11 -0
- package/dist/runtime/utils/focal.js +33 -0
- package/dist/runtime/utils/i18n.d.ts +1 -0
- package/dist/runtime/utils/i18n.js +10 -0
- package/dist/runtime/utils/numbers.d.ts +1 -0
- package/dist/runtime/utils/numbers.js +6 -0
- package/dist/runtime/utils/providerModifiers.d.ts +4 -0
- package/dist/runtime/utils/providerModifiers.js +36 -0
- package/dist/runtime/utils/screens.d.ts +5 -0
- package/dist/runtime/utils/screens.js +19 -0
- package/dist/runtime/utils/statamic.d.ts +3 -0
- package/dist/runtime/utils/statamic.js +143 -0
- package/dist/types.d.mts +3 -0
- package/package.json +65 -68
- package/CHANGELOG.md +0 -373
- package/LICENSE +0 -21
- package/dist/module.js +0 -482
- package/dist/runtime/components/image.mixin.d.ts +0 -46
- package/dist/runtime/components/image.mixin.js +0 -58
- package/dist/runtime/components/nuxt-img.vue +0 -49
- package/dist/runtime/components/nuxt-img.vue.d.ts +0 -12
- package/dist/runtime/components/nuxt-picture.vue +0 -86
- package/dist/runtime/components/nuxt-picture.vue.d.ts +0 -15
- package/dist/runtime/image.d.ts +0 -2
- package/dist/runtime/image.js +0 -194
- package/dist/runtime/index.d.ts +0 -2
- package/dist/runtime/index.js +0 -2
- package/dist/runtime/ipx.d.ts +0 -3
- package/dist/runtime/ipx.js +0 -3
- package/dist/runtime/plugin.d.ts +0 -1
- package/dist/runtime/plugin.js +0 -31
- package/dist/runtime/providers/cloudinary.d.ts +0 -2
- package/dist/runtime/providers/cloudinary.js +0 -96
- package/dist/runtime/providers/fastly.d.ts +0 -2
- package/dist/runtime/providers/fastly.js +0 -21
- package/dist/runtime/providers/glide.d.ts +0 -2
- package/dist/runtime/providers/glide.js +0 -49
- package/dist/runtime/providers/imagekit.d.ts +0 -2
- package/dist/runtime/providers/imagekit.js +0 -172
- package/dist/runtime/providers/imgix.d.ts +0 -3
- package/dist/runtime/providers/imgix.js +0 -153
- package/dist/runtime/providers/ipx.d.ts +0 -4
- package/dist/runtime/providers/ipx.js +0 -28
- package/dist/runtime/providers/netlify.d.ts +0 -3
- package/dist/runtime/providers/netlify.js +0 -40
- package/dist/runtime/providers/prismic.d.ts +0 -2
- package/dist/runtime/providers/prismic.js +0 -10
- package/dist/runtime/providers/sanity.d.ts +0 -2
- package/dist/runtime/providers/sanity.js +0 -87
- package/dist/runtime/providers/static.d.ts +0 -3
- package/dist/runtime/providers/static.js +0 -6
- package/dist/runtime/providers/storyblok.d.ts +0 -2
- package/dist/runtime/providers/storyblok.js +0 -27
- package/dist/runtime/providers/twicpics.d.ts +0 -2
- package/dist/runtime/providers/twicpics.js +0 -58
- package/dist/runtime/providers/vercel.d.ts +0 -3
- package/dist/runtime/providers/vercel.js +0 -28
- package/dist/runtime/utils/index.d.ts +0 -17
- package/dist/runtime/utils/index.js +0 -72
- package/dist/runtime/utils/meta.d.ts +0 -2
- package/dist/runtime/utils/meta.js +0 -67
- package/dist/runtime/utils/static-map.d.ts +0 -2
- package/dist/runtime/utils/static-map.js +0 -20
- package/dist/types.d.ts +0 -172
- package/vetur/attributes.json +0 -32
- package/vetur/tags.json +0 -32
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
import {joinURL} from "ufo";
|
|
2
|
-
import {createOperationsGenerator} from "~image";
|
|
3
|
-
const operationsGenerator = createOperationsGenerator({
|
|
4
|
-
keyMap: {
|
|
5
|
-
fit: "c",
|
|
6
|
-
width: "w",
|
|
7
|
-
height: "h",
|
|
8
|
-
format: "f",
|
|
9
|
-
quality: "q",
|
|
10
|
-
bg: "bg",
|
|
11
|
-
background: "bg",
|
|
12
|
-
crop: "c",
|
|
13
|
-
cropMode: "cm",
|
|
14
|
-
aspectRatio: "ar",
|
|
15
|
-
x: "x",
|
|
16
|
-
y: "y",
|
|
17
|
-
xc: "xc",
|
|
18
|
-
yc: "yc",
|
|
19
|
-
oix: "oix",
|
|
20
|
-
oiy: "oiy",
|
|
21
|
-
oixc: "oixc",
|
|
22
|
-
oiyc: "oiyc",
|
|
23
|
-
focus: "fo",
|
|
24
|
-
radius: "r",
|
|
25
|
-
border: "b",
|
|
26
|
-
rotate: "rt",
|
|
27
|
-
blur: "bl",
|
|
28
|
-
named: "n",
|
|
29
|
-
overlayX: "ox",
|
|
30
|
-
overlayY: "oy",
|
|
31
|
-
overlayFocus: "ofo",
|
|
32
|
-
overlayHeight: "oh",
|
|
33
|
-
overlayWidth: "ow",
|
|
34
|
-
overlayImage: "oi",
|
|
35
|
-
overlayImageTrim: "oit",
|
|
36
|
-
overlayImageAspectRatio: "oiar",
|
|
37
|
-
overlayImageBackground: "oibg",
|
|
38
|
-
overlayImageBorder: "oib",
|
|
39
|
-
overlayImageDPR: "oidpr",
|
|
40
|
-
overlayImageQuality: "oiq",
|
|
41
|
-
overlayImageCropping: "oic",
|
|
42
|
-
overlayImageCropMode: "oicm",
|
|
43
|
-
overlayText: "ot",
|
|
44
|
-
overlayTextFontSize: "ots",
|
|
45
|
-
overlayTextFontFamily: "otf",
|
|
46
|
-
overlayTextColor: "otc",
|
|
47
|
-
overlayTextTransparency: "oa",
|
|
48
|
-
overlayTextTypography: "ott",
|
|
49
|
-
overlayBackground: "obg",
|
|
50
|
-
overlayTextEncoded: "ote",
|
|
51
|
-
overlayTextWidth: "otw",
|
|
52
|
-
overlayTextBackground: "otbg",
|
|
53
|
-
overlayTextPadding: "otp",
|
|
54
|
-
overlayTextInnerAlignment: "otia",
|
|
55
|
-
overlayRadius: "or",
|
|
56
|
-
progressive: "pr",
|
|
57
|
-
lossless: "lo",
|
|
58
|
-
trim: "t",
|
|
59
|
-
metadata: "md",
|
|
60
|
-
colorProfile: "cp",
|
|
61
|
-
defaultImage: "di",
|
|
62
|
-
dpr: "dpr",
|
|
63
|
-
effectSharpen: "e-sharpen",
|
|
64
|
-
effectUSM: "e-usm",
|
|
65
|
-
effectContrast: "e-contrast",
|
|
66
|
-
effectGray: "e-grayscale",
|
|
67
|
-
original: "orig"
|
|
68
|
-
},
|
|
69
|
-
valueMap: {
|
|
70
|
-
fit: {
|
|
71
|
-
cover: "maintain_ratio",
|
|
72
|
-
contain: "pad_resize",
|
|
73
|
-
fill: "force",
|
|
74
|
-
inside: "at_max",
|
|
75
|
-
outside: "at_least",
|
|
76
|
-
extract: "extract",
|
|
77
|
-
pad_extract: "pad_extract"
|
|
78
|
-
},
|
|
79
|
-
background(value) {
|
|
80
|
-
if (value.startsWith("#")) {
|
|
81
|
-
return value.replace("#", "");
|
|
82
|
-
}
|
|
83
|
-
return value;
|
|
84
|
-
},
|
|
85
|
-
crop: {
|
|
86
|
-
maintain_ratio: "maintain_ratio",
|
|
87
|
-
force: "force",
|
|
88
|
-
at_max: "at_max",
|
|
89
|
-
at_least: "at_least"
|
|
90
|
-
},
|
|
91
|
-
cropMode: {
|
|
92
|
-
pad_resize: "pad_resize",
|
|
93
|
-
pad_extract: "pad_extract",
|
|
94
|
-
extract: "extract"
|
|
95
|
-
},
|
|
96
|
-
format: {
|
|
97
|
-
auto: "auto",
|
|
98
|
-
jpg: "jpg",
|
|
99
|
-
jpeg: "jpeg",
|
|
100
|
-
webp: "webp",
|
|
101
|
-
avif: "avif",
|
|
102
|
-
png: "png"
|
|
103
|
-
},
|
|
104
|
-
focus: {
|
|
105
|
-
left: "left",
|
|
106
|
-
right: "right",
|
|
107
|
-
top: "top",
|
|
108
|
-
bottom: "bottom",
|
|
109
|
-
custom: "custom",
|
|
110
|
-
center: "center",
|
|
111
|
-
top_left: "top_left",
|
|
112
|
-
top_right: "top_right",
|
|
113
|
-
bottom_left: "bottom_left",
|
|
114
|
-
bottom_right: "bottom_right",
|
|
115
|
-
auto: "auto",
|
|
116
|
-
face: "face"
|
|
117
|
-
},
|
|
118
|
-
rotate: {
|
|
119
|
-
auto: "auto",
|
|
120
|
-
0: "0",
|
|
121
|
-
90: "90",
|
|
122
|
-
180: "180",
|
|
123
|
-
270: "270",
|
|
124
|
-
360: "360"
|
|
125
|
-
},
|
|
126
|
-
overlayFocus: {
|
|
127
|
-
left: "left",
|
|
128
|
-
right: "right",
|
|
129
|
-
top: "top",
|
|
130
|
-
bottom: "bottom",
|
|
131
|
-
custom: "custom",
|
|
132
|
-
center: "center",
|
|
133
|
-
top_left: "top_left",
|
|
134
|
-
top_right: "top_right",
|
|
135
|
-
bottom_left: "bottom_left",
|
|
136
|
-
bottom_right: "bottom_right",
|
|
137
|
-
auto: "auto",
|
|
138
|
-
face: "face"
|
|
139
|
-
},
|
|
140
|
-
overlayImageCropping: {
|
|
141
|
-
maintain_ratio: "maintain_ratio",
|
|
142
|
-
force: "force",
|
|
143
|
-
at_max: "at_max",
|
|
144
|
-
at_least: "at_least"
|
|
145
|
-
},
|
|
146
|
-
overlayImageCropMode: {
|
|
147
|
-
pad_resize: "pad_resize",
|
|
148
|
-
pad_extract: "pad_extract",
|
|
149
|
-
extract: "extract"
|
|
150
|
-
},
|
|
151
|
-
overlayTextTypography: {
|
|
152
|
-
b: "b",
|
|
153
|
-
i: "i"
|
|
154
|
-
},
|
|
155
|
-
overlayTextInnerAlignment: {
|
|
156
|
-
left: "left",
|
|
157
|
-
right: "right",
|
|
158
|
-
center: "center"
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
joinWith: ",",
|
|
162
|
-
formatter: (key, value) => `${key}-${value}`
|
|
163
|
-
});
|
|
164
|
-
export const getImage = (src, {modifiers = {}, baseURL = "/"} = {}) => {
|
|
165
|
-
let operations = operationsGenerator(modifiers);
|
|
166
|
-
operations = operations.replace("c-pad_resize", "cm-pad_resize");
|
|
167
|
-
operations = operations.replace("c-pad_extract", "cm-pad_extract");
|
|
168
|
-
operations = operations.replace("c-extract", "cm-extract");
|
|
169
|
-
return {
|
|
170
|
-
url: joinURL(baseURL, src + (operations ? `?tr=${operations}` : ""))
|
|
171
|
-
};
|
|
172
|
-
};
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
import {joinURL} from "ufo";
|
|
2
|
-
import {createOperationsGenerator} from "~image";
|
|
3
|
-
export const operationsGenerator = createOperationsGenerator({
|
|
4
|
-
keyMap: {
|
|
5
|
-
width: "w",
|
|
6
|
-
height: "h",
|
|
7
|
-
format: "fm",
|
|
8
|
-
quality: "q",
|
|
9
|
-
backgroundColor: "bg",
|
|
10
|
-
rotate: "rot",
|
|
11
|
-
mask: "mask",
|
|
12
|
-
auto: "auto",
|
|
13
|
-
crop: "crop",
|
|
14
|
-
brightness: "bri",
|
|
15
|
-
contrast: "con",
|
|
16
|
-
exposure: "exp",
|
|
17
|
-
gamma: "gam",
|
|
18
|
-
highlight: "high",
|
|
19
|
-
hueShift: "hue",
|
|
20
|
-
invert: "invert",
|
|
21
|
-
saturation: "sat",
|
|
22
|
-
shadow: "shad",
|
|
23
|
-
sharpen: "sharp",
|
|
24
|
-
unsharpMask: "usm",
|
|
25
|
-
unsharpMaskRadius: "usmrad",
|
|
26
|
-
vibrance: "vib",
|
|
27
|
-
blend: "blend",
|
|
28
|
-
blendAlign: "blend-align",
|
|
29
|
-
blendAlpha: "blend-alpha",
|
|
30
|
-
blendColor: "blend-color",
|
|
31
|
-
blendCrop: "blend-crop",
|
|
32
|
-
blendFit: "blend-fit",
|
|
33
|
-
blendHeight: "blend-h",
|
|
34
|
-
blendMode: "blend-mode",
|
|
35
|
-
blendPadding: "blend-pad",
|
|
36
|
-
blendSize: "blend-size",
|
|
37
|
-
blendWidth: "blend-w",
|
|
38
|
-
blendXPosition: "blend-x",
|
|
39
|
-
blendYPosition: "blend-y",
|
|
40
|
-
padding: "pad",
|
|
41
|
-
borderBottom: "border-bottom",
|
|
42
|
-
borderLeft: "border-left",
|
|
43
|
-
innerBorderRadius: "border-radius-inner",
|
|
44
|
-
outerBorderRadius: "border-radius",
|
|
45
|
-
borderRight: "border-right",
|
|
46
|
-
borderTop: "border-top",
|
|
47
|
-
borderSizeColor: "border",
|
|
48
|
-
paddingBottom: "pad-bottom",
|
|
49
|
-
paddingLeft: "pad-left",
|
|
50
|
-
paddingRight: "pad-right",
|
|
51
|
-
paddingTop: "pad-top",
|
|
52
|
-
paletteColorCount: "colors",
|
|
53
|
-
colorPaletteExtraction: "palette",
|
|
54
|
-
cssPrefix: "prefix",
|
|
55
|
-
expirationTimestamp: "expires",
|
|
56
|
-
faceIndex: "faceindex",
|
|
57
|
-
facePadding: "facepad",
|
|
58
|
-
jsonFaceData: "faces",
|
|
59
|
-
fillMode: "fill",
|
|
60
|
-
fillColor: "fill-color",
|
|
61
|
-
gridColors: "grid-colors",
|
|
62
|
-
gridSize: "grid-size",
|
|
63
|
-
transparency: "transparency",
|
|
64
|
-
focalPointDebug: "fp-debug",
|
|
65
|
-
focalPointXPosition: "fp-x",
|
|
66
|
-
focalPointYPosition: "fp-y",
|
|
67
|
-
focalPointZoom: "fp-z",
|
|
68
|
-
clientHints: "ch",
|
|
69
|
-
chromaSubsampling: "chromasub",
|
|
70
|
-
colorQuantization: "colorquant",
|
|
71
|
-
colorSpace: "cs",
|
|
72
|
-
download: "dl",
|
|
73
|
-
dotsPerInch: "dpi",
|
|
74
|
-
losslessCompression: "lossless",
|
|
75
|
-
maskBackgroundColor: "mask-bg",
|
|
76
|
-
maskCornerRadius: "corner-radius",
|
|
77
|
-
noiseReductionSharp: "nrs",
|
|
78
|
-
noiseReductionBound: "nr",
|
|
79
|
-
pdfPageNumber: "page",
|
|
80
|
-
pdfAnnotation: "pdf-annotation",
|
|
81
|
-
pixelDensity: "dpr",
|
|
82
|
-
orientation: "orient",
|
|
83
|
-
flipAxis: "flip",
|
|
84
|
-
aspectRatio: "ar",
|
|
85
|
-
maximumHeight: "max-h",
|
|
86
|
-
maximumWidth: "max-w",
|
|
87
|
-
minimumHeight: "min-h",
|
|
88
|
-
minimumWidth: "min-w",
|
|
89
|
-
sourceRectangleRegion: "rect",
|
|
90
|
-
gaussianBlur: "blur",
|
|
91
|
-
duotoneAlpha: "duotone-alpha",
|
|
92
|
-
duotone: "duotone",
|
|
93
|
-
halftone: "htn",
|
|
94
|
-
monochrome: "monochrome",
|
|
95
|
-
pixellate: "px",
|
|
96
|
-
sepiaTone: "sepia",
|
|
97
|
-
textAlign: "txt-align",
|
|
98
|
-
textClippingMode: "txt-clip",
|
|
99
|
-
textColor: "txt-color",
|
|
100
|
-
textFitMode: "txt-fit",
|
|
101
|
-
textFont: "txt-font",
|
|
102
|
-
textLigatures: "txt-lig",
|
|
103
|
-
textOutlineColor: "txt-line-color",
|
|
104
|
-
textOutline: "txt-line",
|
|
105
|
-
textPadding: "txt-pad",
|
|
106
|
-
textShadow: "txt-shad",
|
|
107
|
-
textFontSize: "txt-size",
|
|
108
|
-
textWidth: "txt-width",
|
|
109
|
-
textString: "txt",
|
|
110
|
-
trimColor: "trim-color",
|
|
111
|
-
trimMeanDifference: "trim-md",
|
|
112
|
-
trimStandardDeviation: "trim-sd",
|
|
113
|
-
trimTolerance: "trim-tol",
|
|
114
|
-
trimImage: "trim",
|
|
115
|
-
textLeading: "txt-lead",
|
|
116
|
-
textTracking: "txt-track",
|
|
117
|
-
typesettingEndpoint: "~text",
|
|
118
|
-
watermarkAlignment: "mark-align",
|
|
119
|
-
watermarkAlpha: "mark-alpha",
|
|
120
|
-
watermarkBaseURL: "mark-base",
|
|
121
|
-
watermarkFitMode: "mark-fit",
|
|
122
|
-
watermarkHeight: "mark-h",
|
|
123
|
-
watermarkPadding: "mark-pad",
|
|
124
|
-
watermarkRotation: "mark-rot",
|
|
125
|
-
watermarkScale: "mark-sclae",
|
|
126
|
-
watermarkTile: "mark-tile",
|
|
127
|
-
watermarkWidth: "mark-w",
|
|
128
|
-
watermarkXPosition: "mark-x",
|
|
129
|
-
watermarkYPosition: "mark-y",
|
|
130
|
-
watermarkImageURL: "mark"
|
|
131
|
-
},
|
|
132
|
-
valueMap: {
|
|
133
|
-
fit: {
|
|
134
|
-
fill: "scale",
|
|
135
|
-
inside: "max",
|
|
136
|
-
outside: "min",
|
|
137
|
-
cover: "crop",
|
|
138
|
-
contain: "fill",
|
|
139
|
-
clamp: "clamp",
|
|
140
|
-
clip: "clip",
|
|
141
|
-
facearea: "facearea",
|
|
142
|
-
fillMax: "fillmax"
|
|
143
|
-
}
|
|
144
|
-
},
|
|
145
|
-
joinWith: "&",
|
|
146
|
-
formatter: (key, value) => `${key}=${value}`
|
|
147
|
-
});
|
|
148
|
-
export const getImage = (src, {modifiers = {}, baseURL = "/"} = {}) => {
|
|
149
|
-
const operations = operationsGenerator(modifiers);
|
|
150
|
-
return {
|
|
151
|
-
url: joinURL(baseURL, src + (operations ? "?" + operations : ""))
|
|
152
|
-
};
|
|
153
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import {joinURL, encodePath, encodeParam} from "ufo";
|
|
2
|
-
import {createOperationsGenerator} from "~image";
|
|
3
|
-
const operationsGenerator = createOperationsGenerator({
|
|
4
|
-
keyMap: {
|
|
5
|
-
format: "f",
|
|
6
|
-
fit: "fit",
|
|
7
|
-
width: "w",
|
|
8
|
-
height: "h",
|
|
9
|
-
resize: "s",
|
|
10
|
-
quality: "q",
|
|
11
|
-
background: "b"
|
|
12
|
-
},
|
|
13
|
-
joinWith: ",",
|
|
14
|
-
formatter: (key, val) => encodeParam(key) + "_" + encodeParam(val)
|
|
15
|
-
});
|
|
16
|
-
export const getImage = (src, {modifiers = {}, baseURL = "/_ipx"} = {}, {nuxtContext: {base: nuxtBase = "/"} = {}}) => {
|
|
17
|
-
if (modifiers.width && modifiers.height) {
|
|
18
|
-
modifiers.resize = `${modifiers.width}x${modifiers.height}`;
|
|
19
|
-
delete modifiers.width;
|
|
20
|
-
delete modifiers.height;
|
|
21
|
-
}
|
|
22
|
-
const params = operationsGenerator(modifiers);
|
|
23
|
-
return {
|
|
24
|
-
url: joinURL(nuxtBase, baseURL, params, encodePath(src))
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
export const validateDomains = true;
|
|
28
|
-
export const supportsAlias = true;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import {joinURL} from "ufo";
|
|
2
|
-
import {createOperationsGenerator} from "~image";
|
|
3
|
-
export const operationsGenerator = createOperationsGenerator({
|
|
4
|
-
keyMap: {
|
|
5
|
-
height: "h",
|
|
6
|
-
fit: "nf_resize",
|
|
7
|
-
width: "w"
|
|
8
|
-
},
|
|
9
|
-
valueMap: {
|
|
10
|
-
fit: {
|
|
11
|
-
fill: "smartcrop",
|
|
12
|
-
contain: "fit"
|
|
13
|
-
}
|
|
14
|
-
},
|
|
15
|
-
joinWith: "&",
|
|
16
|
-
formatter: (key, value) => `${key}=${value}`
|
|
17
|
-
});
|
|
18
|
-
const isDev = process.env.NODE_ENV === "development";
|
|
19
|
-
export const getImage = (src, {modifiers = {}, baseURL = "/"} = {}) => {
|
|
20
|
-
if (modifiers.format) {
|
|
21
|
-
delete modifiers.format;
|
|
22
|
-
}
|
|
23
|
-
const hasTransformation = modifiers.height || modifiers.width;
|
|
24
|
-
if (!modifiers.fit && hasTransformation) {
|
|
25
|
-
modifiers.fit = "contain";
|
|
26
|
-
}
|
|
27
|
-
if (hasTransformation && modifiers.fit !== "contain" && !(modifiers.height && modifiers.width)) {
|
|
28
|
-
if (isDev) {
|
|
29
|
-
console.warn(`Defaulting to fit=contain as smart cropping is only supported when providing both height and width. Warning originated from \`${src}\`.`);
|
|
30
|
-
}
|
|
31
|
-
modifiers.fit = "contain";
|
|
32
|
-
}
|
|
33
|
-
if (isDev) {
|
|
34
|
-
return {url: src};
|
|
35
|
-
}
|
|
36
|
-
const operations = operationsGenerator(modifiers);
|
|
37
|
-
return {
|
|
38
|
-
url: joinURL(baseURL, src + (operations ? "?" + operations : ""))
|
|
39
|
-
};
|
|
40
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import {joinURL, parseQuery, parseURL, stringifyQuery} from "ufo";
|
|
2
|
-
import {operationsGenerator} from "./imgix";
|
|
3
|
-
const PRISMIC_IMGIX_BUCKET = "https://images.prismic.io";
|
|
4
|
-
export const getImage = (src, {modifiers = {}, baseURL = PRISMIC_IMGIX_BUCKET} = {}) => {
|
|
5
|
-
const operations = operationsGenerator(modifiers);
|
|
6
|
-
const parsedURL = parseURL(src);
|
|
7
|
-
return {
|
|
8
|
-
url: joinURL(baseURL, parsedURL.pathname + "?" + stringifyQuery(Object.assign(parseQuery(parsedURL.search), parseQuery(operations))))
|
|
9
|
-
};
|
|
10
|
-
};
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import {joinURL} from "ufo";
|
|
2
|
-
import {createOperationsGenerator} from "~image";
|
|
3
|
-
const sanityCDN = "https://cdn.sanity.io/images";
|
|
4
|
-
const operationsGenerator = createOperationsGenerator({
|
|
5
|
-
keyMap: {
|
|
6
|
-
format: "fm",
|
|
7
|
-
height: "h",
|
|
8
|
-
quality: "q",
|
|
9
|
-
width: "w",
|
|
10
|
-
background: "bg",
|
|
11
|
-
download: "dl",
|
|
12
|
-
sharpen: "sharp",
|
|
13
|
-
orientation: "or",
|
|
14
|
-
"min-height": "min-h",
|
|
15
|
-
"max-height": "max-h",
|
|
16
|
-
"min-width": "min-w",
|
|
17
|
-
"max-width": "max-w",
|
|
18
|
-
minHeight: "min-h",
|
|
19
|
-
maxHeight: "max-h",
|
|
20
|
-
minWidth: "min-w",
|
|
21
|
-
maxWidth: "max-w",
|
|
22
|
-
saturation: "sat"
|
|
23
|
-
},
|
|
24
|
-
valueMap: {
|
|
25
|
-
format: {
|
|
26
|
-
jpeg: "jpg"
|
|
27
|
-
},
|
|
28
|
-
fit: {
|
|
29
|
-
cover: "crop",
|
|
30
|
-
contain: "fill",
|
|
31
|
-
fill: "scale",
|
|
32
|
-
inside: "min",
|
|
33
|
-
outside: "max"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
joinWith: "&",
|
|
37
|
-
formatter: (key, value) => String(value) === "true" ? key : `${key}=${value}`
|
|
38
|
-
});
|
|
39
|
-
const isDev = process.env.NODE_ENV === "development";
|
|
40
|
-
const getMetadata = (id) => {
|
|
41
|
-
const result = id.match(/-(?<width>\d*)x(?<height>\d*)-(?<format>.*)$/);
|
|
42
|
-
if (!result || !result.groups) {
|
|
43
|
-
if (isDev) {
|
|
44
|
-
console.warn(`An invalid image asset ID was passed in: ${id}`);
|
|
45
|
-
}
|
|
46
|
-
return {width: void 0, height: void 0, format: void 0};
|
|
47
|
-
}
|
|
48
|
-
const width = Number(result.groups.width);
|
|
49
|
-
const height = Number(result.groups.height);
|
|
50
|
-
return {
|
|
51
|
-
width,
|
|
52
|
-
height,
|
|
53
|
-
format: result.groups.format
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
export const getImage = (src, {modifiers = {}, projectId, dataset = "production"} = {}) => {
|
|
57
|
-
const {height: sourceHeight, width: sourceWidth} = getMetadata(src);
|
|
58
|
-
if (modifiers.crop && typeof modifiers.crop !== "string" && sourceWidth && sourceHeight) {
|
|
59
|
-
const left = modifiers.crop.left * sourceWidth;
|
|
60
|
-
const top = modifiers.crop.top * sourceHeight;
|
|
61
|
-
const right = sourceWidth - modifiers.crop.right * sourceWidth;
|
|
62
|
-
const bottom = sourceHeight - modifiers.crop.bottom * sourceHeight;
|
|
63
|
-
modifiers.rect = [left, top, right - left, bottom - top].map((i) => i.toFixed(0)).join(",");
|
|
64
|
-
delete modifiers.crop;
|
|
65
|
-
}
|
|
66
|
-
if (modifiers.hotspot && typeof modifiers.hotspot !== "string") {
|
|
67
|
-
modifiers["fp-x"] = modifiers.hotspot.x;
|
|
68
|
-
modifiers["fp-y"] = modifiers.hotspot.y;
|
|
69
|
-
delete modifiers.hotspot;
|
|
70
|
-
}
|
|
71
|
-
if (!modifiers.format || modifiers.format === "auto") {
|
|
72
|
-
if (modifiers.format === "auto") {
|
|
73
|
-
delete modifiers.format;
|
|
74
|
-
}
|
|
75
|
-
modifiers.auto = "format";
|
|
76
|
-
}
|
|
77
|
-
if (modifiers.fit === "contain" && !modifiers.bg) {
|
|
78
|
-
modifiers.bg = "ffffff";
|
|
79
|
-
}
|
|
80
|
-
const operations = operationsGenerator(modifiers);
|
|
81
|
-
const parts = src.split("-").slice(1);
|
|
82
|
-
const format = parts.pop();
|
|
83
|
-
const filenameAndQueries = parts.join("-") + "." + format + (operations ? "?" + operations : "");
|
|
84
|
-
return {
|
|
85
|
-
url: joinURL(sanityCDN, projectId, dataset, filenameAndQueries)
|
|
86
|
-
};
|
|
87
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import {withBase, joinURL, parseURL} from "ufo";
|
|
2
|
-
const storyblockCDN = "https://img2.storyblok.com";
|
|
3
|
-
export const getImage = (src, {modifiers = {}, baseURL = storyblockCDN} = {}) => {
|
|
4
|
-
const {
|
|
5
|
-
fit,
|
|
6
|
-
smart,
|
|
7
|
-
width = "0",
|
|
8
|
-
height = "0",
|
|
9
|
-
filters = {},
|
|
10
|
-
format,
|
|
11
|
-
quality
|
|
12
|
-
} = modifiers;
|
|
13
|
-
const doResize = width !== "0" || height !== "0";
|
|
14
|
-
if (format) {
|
|
15
|
-
filters.format = format + "";
|
|
16
|
-
}
|
|
17
|
-
if (quality) {
|
|
18
|
-
filters.quality = quality + "";
|
|
19
|
-
}
|
|
20
|
-
const _filters = Object.entries(filters || {}).map((e) => `${e[0]}(${e[1]})`).join(":");
|
|
21
|
-
const options = joinURL(fit ? `fit-${fit}` : "", doResize ? `${width}x${height}` : "", smart ? "smart" : "", _filters ? "filters:" + _filters : "");
|
|
22
|
-
const {pathname} = parseURL(src);
|
|
23
|
-
const url = withBase(joinURL(options, pathname), baseURL);
|
|
24
|
-
return {
|
|
25
|
-
url
|
|
26
|
-
};
|
|
27
|
-
};
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import {joinURL} from "ufo";
|
|
2
|
-
import {createMapper, createOperationsGenerator} from "~image";
|
|
3
|
-
const fits = createMapper({
|
|
4
|
-
fill: "resize",
|
|
5
|
-
inside: "contain-max",
|
|
6
|
-
outside: "contain-min",
|
|
7
|
-
cover: "cover",
|
|
8
|
-
contain: "contain",
|
|
9
|
-
missingValue: "cover"
|
|
10
|
-
});
|
|
11
|
-
const operationsGenerator = createOperationsGenerator({
|
|
12
|
-
keyMap: {
|
|
13
|
-
format: "output",
|
|
14
|
-
quality: "quality",
|
|
15
|
-
background: "background",
|
|
16
|
-
focus: "focus",
|
|
17
|
-
zoom: "zoom"
|
|
18
|
-
},
|
|
19
|
-
valueMap: {
|
|
20
|
-
format(value) {
|
|
21
|
-
if (value === "jpg") {
|
|
22
|
-
return "jpeg";
|
|
23
|
-
}
|
|
24
|
-
return value;
|
|
25
|
-
},
|
|
26
|
-
background(value) {
|
|
27
|
-
if (value.startsWith("#")) {
|
|
28
|
-
return value.replace("#", "");
|
|
29
|
-
}
|
|
30
|
-
return value;
|
|
31
|
-
},
|
|
32
|
-
focus: {
|
|
33
|
-
auto: "auto",
|
|
34
|
-
faces: "faces",
|
|
35
|
-
north: "50px0p",
|
|
36
|
-
northEast: "100px0p",
|
|
37
|
-
northWest: "0px0p",
|
|
38
|
-
west: "0px50p",
|
|
39
|
-
southWest: "100px100p",
|
|
40
|
-
south: "50px100p",
|
|
41
|
-
southEast: "0px100p",
|
|
42
|
-
east: "100px50p",
|
|
43
|
-
center: "50px50p"
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
joinWith: "/",
|
|
47
|
-
formatter: (key, value) => `${key}=${value}`
|
|
48
|
-
});
|
|
49
|
-
export const getImage = (src, {modifiers = {}, baseURL = "/"} = {}) => {
|
|
50
|
-
const {width, height, fit, ...providerModifiers} = modifiers;
|
|
51
|
-
if (width || height) {
|
|
52
|
-
providerModifiers[fits(fit)] = `${width || "-"}x${height || "-"}`;
|
|
53
|
-
}
|
|
54
|
-
const operations = operationsGenerator(providerModifiers);
|
|
55
|
-
return {
|
|
56
|
-
url: joinURL(baseURL, src + (operations ? "?twic=v1/" + operations : ""))
|
|
57
|
-
};
|
|
58
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import {stringifyQuery} from "ufo";
|
|
2
|
-
export const getImage = (src, {modifiers, baseURL = "/_vercel/image"} = {}, ctx) => {
|
|
3
|
-
const validWidths = Object.values(ctx.options.screens || {}).sort();
|
|
4
|
-
const largestWidth = validWidths[validWidths.length - 1];
|
|
5
|
-
let width = Number(modifiers?.width || 0);
|
|
6
|
-
if (!width) {
|
|
7
|
-
width = largestWidth;
|
|
8
|
-
if (process.env.NODE_ENV === "development") {
|
|
9
|
-
console.warn(`A defined width should be provided to use the \`vercel\` provider. Defaulting to \`${largestWidth}\`. Warning originated from \`${src}\`.`);
|
|
10
|
-
}
|
|
11
|
-
} else if (!validWidths.includes(width)) {
|
|
12
|
-
width = validWidths.find((validWidth) => validWidth > width) || largestWidth;
|
|
13
|
-
if (process.env.NODE_ENV === "development") {
|
|
14
|
-
console.warn(`The width being used (\`${modifiers?.width}\`) should be added to \`image.screens\`. Defaulting to \`${width}\`. Warning originated from \`${src}\`.`);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
if (process.env.NODE_ENV === "development") {
|
|
18
|
-
return {url: src};
|
|
19
|
-
}
|
|
20
|
-
return {
|
|
21
|
-
url: baseURL + "?" + stringifyQuery({
|
|
22
|
-
url: src,
|
|
23
|
-
w: String(width),
|
|
24
|
-
q: String(modifiers?.quality || "100")
|
|
25
|
-
})
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
export const validateDomains = true;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { OperationGeneratorConfig } from '../../types/image';
|
|
2
|
-
export default function imageFetch(url: string): Promise<Response>;
|
|
3
|
-
export declare function getInt(x: unknown): number | undefined;
|
|
4
|
-
export declare function getFileExtension(url?: string): string;
|
|
5
|
-
export declare function cleanDoubleSlashes(path?: string): string;
|
|
6
|
-
export declare function createMapper(map: any): (key?: string) => any;
|
|
7
|
-
export declare function createOperationsGenerator({ formatter, keyMap, joinWith, valueMap }?: OperationGeneratorConfig): (modifiers?: {
|
|
8
|
-
[key: string]: string;
|
|
9
|
-
}) => string;
|
|
10
|
-
declare type Attrs = {
|
|
11
|
-
[key: string]: string | number;
|
|
12
|
-
};
|
|
13
|
-
export declare function renderAttributesToString(attributes?: Attrs): string;
|
|
14
|
-
export declare function renderTag(tag: string, attrs: Attrs, contents?: string): string;
|
|
15
|
-
export declare function generateAlt(src?: string): string;
|
|
16
|
-
export declare function parseSize(input?: string | number | undefined): number;
|
|
17
|
-
export {};
|