local assets 1/2
This commit is contained in:
@@ -33,7 +33,7 @@ export default async function ({
|
||||
const { path, base, rest, image, imageWidth, imageHeight, imageFormat } =
|
||||
await getProcessedImage(src, transformConfigs);
|
||||
|
||||
await delay(100);
|
||||
await delay(250);
|
||||
src = path;
|
||||
|
||||
rest.aspect = `${imageWidth / imageHeight}`;
|
||||
@@ -81,23 +81,19 @@ export default async function ({
|
||||
|
||||
// Ensure artDirectedImages is an array
|
||||
const images = Array.isArray(artDirectedImages) ? [...artDirectedImages, mainImage] : [mainImage];
|
||||
|
||||
const uuid = crypto.randomBytes(4).toString("hex").toUpperCase();
|
||||
|
||||
const returnObject = {
|
||||
uuid,
|
||||
images,
|
||||
};
|
||||
|
||||
imagesData.set(hash, returnObject);
|
||||
|
||||
//const end = performance.now();
|
||||
|
||||
//console.log( `Responsive Image sets generated for ${type} at ${args[0].src} in ${end - start}ms`);
|
||||
|
||||
return returnObject;
|
||||
} catch (error) {
|
||||
console.error("Error processing images:", error);
|
||||
debugger
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
// @ts-check
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { extname, relative, resolve } from "node:path";
|
||||
|
||||
import { getSrcPath } from "./getSrcPath.js";
|
||||
import getResolvedSrc from "./getResolvedSrc.js";
|
||||
import { cwd, sharp } from "../../utils/runtimeChecks.js";
|
||||
import throwErrorIfUnsupported from "./throwErrorIfUnsupported.js";
|
||||
|
||||
const { getImageDetails } = await (sharp
|
||||
? import("./imagetools.js")
|
||||
: import("./codecs.js"));
|
||||
|
||||
export default async function getProcessedImage(src, transformConfigs) {
|
||||
throwErrorIfUnsupported(src, extname(src).slice(1));
|
||||
|
||||
let base;
|
||||
if (src.match("(http://|https://|data:image/).*")) {
|
||||
({ src, base } = await getResolvedSrc(src))
|
||||
} else {
|
||||
const {
|
||||
default: { isSsrBuild },
|
||||
} = await import("../../astroViteConfigs.js")
|
||||
|
||||
if (isSsrBuild) {
|
||||
const filename = fileURLToPath(import.meta.url)
|
||||
const assetPath = resolve(filename, "../../client") + src
|
||||
src = "/" + relative(cwd, assetPath);
|
||||
}
|
||||
}
|
||||
const {
|
||||
w,
|
||||
h,
|
||||
ar,
|
||||
width = w,
|
||||
height = h,
|
||||
aspect = ar,
|
||||
...rest
|
||||
} = transformConfigs;
|
||||
|
||||
const path = src.replace(/\\/g, `/`);
|
||||
|
||||
const { image, imageWidth, imageHeight, imageFormat } = await getImageDetails(
|
||||
await getSrcPath(src),
|
||||
width,
|
||||
height,
|
||||
aspect
|
||||
);
|
||||
|
||||
return {
|
||||
path,
|
||||
base,
|
||||
rest,
|
||||
image,
|
||||
imageWidth,
|
||||
imageHeight,
|
||||
imageFormat,
|
||||
};
|
||||
}
|
||||
// @ts-check
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { extname, relative, resolve } from "node:path";
|
||||
|
||||
import { getSrcPath } from "./getSrcPath.js";
|
||||
import getResolvedSrc from "./getResolvedSrc.js";
|
||||
import { cwd, sharp } from "../../utils/runtimeChecks.js";
|
||||
import throwErrorIfUnsupported from "./throwErrorIfUnsupported.js";
|
||||
|
||||
const { getImageDetails } = await (sharp
|
||||
? import("./imagetools.js")
|
||||
: import("./codecs.js"));
|
||||
|
||||
export default async function getProcessedImage(src, transformConfigs) {
|
||||
throwErrorIfUnsupported(src, extname(src).slice(1));
|
||||
|
||||
let base;
|
||||
if (src.match("(http://|https://|data:image/).*")) {
|
||||
({ src, base } = await getResolvedSrc(src))
|
||||
} else {
|
||||
const {
|
||||
default: { isSsrBuild },
|
||||
} = await import("../../astroViteConfigs.js")
|
||||
|
||||
if (isSsrBuild) {
|
||||
const filename = fileURLToPath(import.meta.url)
|
||||
const assetPath = resolve(filename, "../../client") + src
|
||||
src = "/" + relative(cwd, assetPath);
|
||||
}
|
||||
}
|
||||
const {
|
||||
w,
|
||||
h,
|
||||
ar,
|
||||
width = w,
|
||||
height = h,
|
||||
aspect = ar,
|
||||
...rest
|
||||
} = transformConfigs;
|
||||
|
||||
const path = src.replace(/\\/g, `/`);
|
||||
|
||||
const { image, imageWidth, imageHeight, imageFormat } = await getImageDetails(
|
||||
await getSrcPath(src),
|
||||
width,
|
||||
height,
|
||||
aspect
|
||||
);
|
||||
|
||||
return {
|
||||
path,
|
||||
base,
|
||||
rest,
|
||||
image,
|
||||
imageWidth,
|
||||
imageHeight,
|
||||
imageFormat,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,32 +1,31 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
// To strip off params when checking for file on disk.
|
||||
const paramPattern = /\?.*/;
|
||||
|
||||
/**
|
||||
* getSrcPath allows the use of `src` attributes relative to either the public folder or project root.
|
||||
*
|
||||
* It first checks to see if the src is a file relative to the project root.
|
||||
* If the file isn't found, it will look in the public folder.
|
||||
* Finally, if it still can't be found, the original input will be returned.
|
||||
*/
|
||||
export async function getSrcPath(src) {
|
||||
const { default: astroViteConfigs } = await import(
|
||||
"../../astroViteConfigs.js"
|
||||
);
|
||||
|
||||
// If this is already resolved to a file, return it.
|
||||
if (fs.existsSync(src.replace(paramPattern, ""))) return src;
|
||||
|
||||
const rootPath = path.join(astroViteConfigs.rootDir, src);
|
||||
const rootTest = rootPath.replace(paramPattern, "");
|
||||
if (fs.existsSync(rootTest)) return rootPath;
|
||||
|
||||
const publicPath = path.join(astroViteConfigs.publicDir, src);
|
||||
const publicTest = publicPath.replace(paramPattern, "");
|
||||
if (fs.existsSync(publicTest)) return publicPath;
|
||||
|
||||
// Fallback
|
||||
return src;
|
||||
}
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
// To strip off params when checking for file on disk.
|
||||
const paramPattern = /\?.*/;
|
||||
/**
|
||||
* getSrcPath allows the use of `src` attributes relative to either the public folder or project root.
|
||||
*
|
||||
* It first checks to see if the src is a file relative to the project root.
|
||||
* If the file isn't found, it will look in the public folder.
|
||||
* Finally, if it still can't be found, the original input will be returned.
|
||||
*/
|
||||
export async function getSrcPath(src) {
|
||||
const { default: astroViteConfigs } = await import(
|
||||
"../../astroViteConfigs.js"
|
||||
);
|
||||
|
||||
// If this is already resolved to a file, return it.
|
||||
if (fs.existsSync(src.replace(paramPattern, ""))) return src;
|
||||
|
||||
const rootPath = path.join(astroViteConfigs.rootDir, src);
|
||||
const rootTest = rootPath.replace(paramPattern, "");
|
||||
if (fs.existsSync(rootTest)) return rootPath;
|
||||
|
||||
const publicPath = path.join(astroViteConfigs.publicDir, src);
|
||||
const publicTest = publicPath.replace(paramPattern, "");
|
||||
if (fs.existsSync(publicTest)) return publicPath;
|
||||
|
||||
// Fallback
|
||||
return src;
|
||||
}
|
||||
|
||||
@@ -1,39 +1,37 @@
|
||||
// @ts-check
|
||||
import { getSrcPath } from "./getSrcPath.js";
|
||||
|
||||
export default async function getSrcset(
|
||||
src,
|
||||
base,
|
||||
breakpoints,
|
||||
format,
|
||||
options
|
||||
) {
|
||||
options = {
|
||||
format,
|
||||
w: breakpoints,
|
||||
...options,
|
||||
};
|
||||
|
||||
const keys = Object.keys(options);
|
||||
|
||||
const params = keys.length
|
||||
? keys
|
||||
.map((key) =>
|
||||
Array.isArray(options[key])
|
||||
? `&${key}=${options[key].join(";")}`
|
||||
: `&${key}=${options[key]}`
|
||||
)
|
||||
.join("")
|
||||
: "";
|
||||
|
||||
const id = `${src}?${params.slice(1)}`;
|
||||
|
||||
const fullPath = await getSrcPath(id);
|
||||
|
||||
const { default: load } = await import("../../plugin/hooks/load.js");
|
||||
|
||||
// @ts-ignore
|
||||
const srcset = (await load(fullPath, base)).slice(16, -1);
|
||||
|
||||
return srcset;
|
||||
}
|
||||
// @ts-check
|
||||
import { getSrcPath } from "./getSrcPath.js";
|
||||
export default async function getSrcset(
|
||||
src,
|
||||
base,
|
||||
breakpoints,
|
||||
format,
|
||||
options
|
||||
) {
|
||||
options = {
|
||||
format,
|
||||
w: breakpoints,
|
||||
...options,
|
||||
};
|
||||
|
||||
const keys = Object.keys(options);
|
||||
const params = keys.length
|
||||
? keys
|
||||
.map((key) =>
|
||||
Array.isArray(options[key])
|
||||
? `&${key}=${options[key].join(";")}`
|
||||
: `&${key}=${options[key]}`
|
||||
)
|
||||
.join("")
|
||||
: "";
|
||||
|
||||
const id = `${src}?${params.slice(1)}`
|
||||
const fullPath = await getSrcPath(id);
|
||||
const { default: load } = await import("../../plugin/hooks/load.js");
|
||||
//console.log("get source set", fullPath, src, id);
|
||||
const loaded = await load(fullPath, base)
|
||||
if (!loaded) {
|
||||
return "";
|
||||
}
|
||||
const srcset = loaded.slice(16, -1)
|
||||
return srcset;
|
||||
}
|
||||
|
||||
@@ -1,40 +1,44 @@
|
||||
// @ts-check
|
||||
import {
|
||||
builtins,
|
||||
loadImage,
|
||||
applyTransforms,
|
||||
generateTransforms,
|
||||
} from "imagetools-core";
|
||||
export {
|
||||
loadImage
|
||||
} from "imagetools-core";
|
||||
export async function getImageDetails(path, width, height, aspect) {
|
||||
const loadedImage = loadImage(path);
|
||||
|
||||
if (aspect && !width && !height) {
|
||||
if (!width && !height) {
|
||||
({ width } = await loadedImage.metadata());
|
||||
}
|
||||
|
||||
if (width) {
|
||||
height = width / aspect;
|
||||
}
|
||||
|
||||
if (height) {
|
||||
width = height * aspect;
|
||||
}
|
||||
}
|
||||
|
||||
const { image, metadata } = await applyTransforms(
|
||||
generateTransforms({ width, height }, builtins).transforms,
|
||||
loadedImage
|
||||
);
|
||||
|
||||
const {
|
||||
width: imageWidth,
|
||||
height: imageHeight,
|
||||
format: imageFormat,
|
||||
} = metadata;
|
||||
|
||||
return { image, imageWidth, imageHeight, imageFormat };
|
||||
}
|
||||
// @ts-check
|
||||
import fs from "node:fs";
|
||||
import {
|
||||
builtins,
|
||||
loadImage,
|
||||
applyTransforms,
|
||||
generateTransforms,
|
||||
} from "imagetools-core";
|
||||
export {
|
||||
loadImage
|
||||
} from "imagetools-core";
|
||||
export async function getImageDetails(path, width, height, aspect) {
|
||||
if (!fs.existsSync(path)) {
|
||||
return null
|
||||
}
|
||||
const loadedImage = loadImage(path);
|
||||
|
||||
if (aspect && !width && !height) {
|
||||
if (!width && !height) {
|
||||
({ width } = await loadedImage.metadata());
|
||||
}
|
||||
|
||||
if (width) {
|
||||
height = width / aspect;
|
||||
}
|
||||
|
||||
if (height) {
|
||||
width = height * aspect;
|
||||
}
|
||||
}
|
||||
|
||||
const { image, metadata } = await applyTransforms(
|
||||
generateTransforms({ width, height }, builtins).transforms,
|
||||
loadedImage
|
||||
);
|
||||
|
||||
const {
|
||||
width: imageWidth,
|
||||
height: imageHeight,
|
||||
format: imageFormat,
|
||||
} = metadata;
|
||||
|
||||
return { image, imageWidth, imageHeight, imageFormat };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user