@lonelyplanet/dotcom-core/src/helpers/imgix.ts

This package is meant to house some of our more common UI and shared libs across dotcom applications.

const sources = {
  bdc: {
    domain: "https://lpbookingcom.imgix.net",
    regex: /https?:\/\/[\w-]+.bstatic.com/,
  },
  gadventures: {
    domain: "https://lpgadventures.imgix.net",
    regex: /https?:\/\/media.gadventures.com/,
  },
  hostelworld: {
    domain: "https://lphostelworld.imgix.net",
    regex: /https?:\/\/(.*)hwstatic.com/,
  },
  media: {
    domain: "https://lonelyplanetimages.imgix.net",
    regex: /https?:\/\/media.lonelyplanet.com/,
  },
  news: {
    domain: "https://lonelyplanetwpnews.imgix.net",
    regex: /https?:\/\/www.lonelyplanet.com\/news\/wp-content\/uploads/,
  },
  staticAsset: {
    domain: "https://lonelyplanetstatic.imgix.net",
    regex: /https?:\/\/s3.amazonaws.com\/static-asset/,
  },
  staticSites: {
    domain: "http://lonelyplanetstaticsites.imgix.net",
    regex: /https?:\/\/s3.amazonaws.com\/lp-static-sites/,
  },
  viator: {
    domain: "https://lpviator.imgix.net",
    regex: /https?:\/\/cache-graphicslib.viator.com/,
  },
  wordpress: {
    domain: "https://lonelyplanetwp.imgix.net",
    regex: /https?:\/\/www.lonelyplanet.com\/travel-blog\/tip-article\/wordpress_uploads/,
  },
};

interface IImgixProps {
  auto?: string;
  crop?: string;
  fit?: string;
  h?: number;
  q?: number;
  sharp?: number;
  w?: number;
  [key: string]: any;
}

/**
 * Converts an image path to the imgix url with params
 */
export default function imgix(
  src: string,
  options: IImgixProps = {},
  source: string = "media",
): string {
  const match = sources[source || "media"];

  if (!match || !match.regex.test(src)) {
    return src;
  }

  const url = src.replace(match.regex, match.domain);
  const query = Object.keys(options)
    .map(k => `${k}=${options[k]}`)
    .join("&");

  return `${url}${query ? `?${query}` : ""}`;
}