lapikud.github.io/src/lib/imageHelpers.js

/**
 * Image path helpers for assets under /public/assets.
 *
 * Optimised convention:
 * /assets/{category}/optimised/{imageName}/
 *   full.webp, full.jpg
 *   400.webp, 800.webp, 1200.webp (optional responsive variants)
 */

/**
 * Get the image name without extension
 * @param {string} filename - e.g., "mari.jpg"
 * @returns {string} - e.g., "mari"
 */
function getImageName(filename) {
  if (!filename) return "";
  const lastDot = filename.lastIndexOf(".");
  return lastDot > 0 ? filename.slice(0, lastDot) : filename;
}

function normaliseFormat(format) {
  return String(format || "").toLowerCase() === "webp" ? "webp" : "jpg";
}

function getOptimisedBasePath(category, filename) {
  const imageName = getImageName(filename);
  return `/assets/${category}/optimised/${imageName}`;
}

function getVariantSrc(category, filename, variant = "full", format = "webp") {
  const ext = normaliseFormat(format);
  const safeVariant = String(variant || "full").trim() || "full";
  return `${getOptimisedBasePath(category, filename)}/${safeVariant}.${ext}`;
}

/**
 * Get an asset path from category root (e.g. SVG icons).
 * @param {string} category - e.g., "helpdesk-page-images"
 * @param {string} filename - e.g., "helpdesk-icon.svg" or "helpdesk-icon"
 * @param {string} defaultExt - e.g., "svg"
 * @returns {string} - e.g., "/assets/helpdesk-page-images/helpdesk-icon.svg"
 */
export function getRootAssetPath(category, filename, defaultExt = "svg") {
  const value = String(filename || "").trim();
  if (!value) return "";
  const hasExt = /\.[^./\\]+$/.test(value);
  const fileWithExt = hasExt ? value : `${value}.${defaultExt}`;
  return `/assets/${category}/${fileWithExt}`;
}

/**
 * Get the optimised image path.
 * @param {string} category - e.g., "mentors-images", "past-management-images"
 * @param {string} filename - e.g., "mari.jpg"
 * @param {string} format - "webp" or "jpg" (default: "webp")
 * @param {string} variant - e.g., "full", "400", "800", "1200" (default: "full")
 * @returns {string} - e.g., "/assets/mentors-images/optimised/mari/full.webp"
 */
export function getOptimisedImagePath(category, filename, format = "webp", variant = "full") {
  return getVariantSrc(category, filename, variant, format);
}

/**
 * Get srcset for responsive variants.
 * @param {string} category - e.g., "home-page-images"
 * @param {string} filename - e.g., "hero.png"
 * @param {number[]} widths - e.g., [400, 800, 1200]
 * @param {string} format - "webp" or "jpg"
 * @returns {string} - srcset string with width descriptors
 */
export function getResponsiveImageSrcSet(category, filename, widths = [400, 800, 1200], format = "webp") {
  return widths
    .map((w) => `${getVariantSrc(category, filename, w, format)} ${w}w`)
    .join(", ");
}

/**
 * Get srcset for hero/background images with responsive variants
 * @param {string} category - e.g., "home-page-images"
 * @param {string} filename - e.g., "hero.png"
 * @returns {string} - srcset string with 400w, 800w, 1200w variants
 */
export function getHeroImageSrcSet(category, filename) {
  return getResponsiveImageSrcSet(category, filename, [400, 800, 1200], "webp");
}

/**
 * Get the full size image path for hero images
 * @param {string} category - e.g., "home-page-images"
 * @param {string} filename - e.g., "hero.png"
 * @returns {string} - e.g., "/assets/home-page-images/optimised/hero/1200.webp"
 */
export function getHeroImagePath(category, filename) {
  return getOptimisedImagePath(category, filename, "webp", "1200");
}

/**
 * Get the fallback (jpg) path for hero images.
 * @param {string} category - e.g., "home-page-images"
 * @param {string} filename - e.g., "hero.png"
 * @returns {string} - e.g., "/assets/home-page-images/optimised/hero/full.jpg"
 */
export function getHeroImageFallback(category, filename) {
  return getOptimisedImagePath(category, filename, "jpg");
}

/**
 * Get srcset for regular optimised images (full variant only)
 * @param {string} category - e.g., "mentors-images"
 * @param {string} filename - e.g., "mari.jpg"
 * @returns {string} - srcset string with webp and jpg variants
 */
export function getOptimisedImageSrcSet(category, filename) {
  return getOptimisedImagePath(category, filename, "webp");
}

/**
 * Get the fallback jpg for regular optimised images
 * @param {string} category - e.g., "mentors-images"
 * @param {string} filename - e.g., "mari.jpg"
 * @returns {string} - e.g., "/assets/mentors-images/optimised/mari/full.jpg"
 */
export function getOptimisedImageFallback(category, filename) {
  return getOptimisedImagePath(category, filename, "jpg");
}