Changed mock image service (#161)

storefront-foundation · Dec 29, 2020 · f29bcb3 · f29bcb3
1 parent 6de6a15
commit f29bcb3
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-storefront",
- "version": "8.17.3",
+ "version": "8.17.4",
  "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
  "module": "./index.js",
  "license": "Apache-2.0",

diff --git a/src/mock-connector/product.js b/src/mock-connector/product.js
@@ -1,4 +1,4 @@
-import fulfillAPIRequest from '..//props/fulfillAPIRequest'
+import fulfillAPIRequest from '../props/fulfillAPIRequest'
 import createProduct from './utils/createProduct'
 import createAppData from './utils/createAppData'
 import getBase64ForImage from 'react-storefront/utils/getBase64ForImage'

diff --git a/src/mock-connector/searchSuggestions.js b/src/mock-connector/searchSuggestions.js
@@ -34,31 +34,31 @@ export default async function searchSuggestions(q, req, res) {
  text: 'Product 1',
  href: '/p/[productId]',
  as: '/p/1?s=1&c=1',
- thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+ thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
  },
  {
  text: 'Product 2',
  href: '/p/[productId]',
  as: '/p/2?s=1&c=1',
- thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+ thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
  },
  {
  text: 'Product 3',
  href: '/p/[productId]',
  as: '/p/3?s=1&c=1',
- thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+ thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
  },
  {
  text: 'Product 4',
  href: '/p/[productId]',
  as: '/p/3?s=1&c=1',
- thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+ thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
  },
  {
  text: 'Product 5',
  href: '/p/[productId]',
  as: '/p/5?s=1&c=1',
- thumbnail: { src: 'https://via.placeholder.com/120x120', alt: 'Product 1' },
+ thumbnail: { src: 'https://dummyimage.com/120x120', alt: 'Product 1' },
  },
  ],
  },

diff --git a/src/mock-connector/utils/createFacets.js b/src/mock-connector/utils/createFacets.js
@@ -10,9 +10,9 @@ export default function createFacets() {
  name: capitalize(name),
  code: `color:${name}`,
  image: {
- src: `https://via.placeholder.com/48x48/${
- colors[name].background
- }?text=${encodeURIComponent(' ')}`,
+ src: `https://dummyimage.com/48x48/${colors[name].background}?text=${encodeURIComponent(
+ ' ',
+ )}`,
  alt: name,
  },
  })),

diff --git a/src/mock-connector/utils/createMedia.js b/src/mock-connector/utils/createMedia.js
@@ -3,20 +3,20 @@ import colors from './colors'
 export default function createMedia(id, color) {
  return {
  full: [color].map((key, i) => ({
- src: `https://via.placeholder.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
+ src: `https://dummyimage.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
  colors[key].background
  }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
  alt: `Product ${id}`,
  magnify: {
  height: i === 1 ? 800 : 1200,
  width: i === 2 ? 800 : 1200,
- src: `https://via.placeholder.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
+ src: `https://dummyimage.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
  colors[key].background
  }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
  },
  })),
  thumbnails: [color].map((key, i) => ({
- src: `https://via.placeholder.com/${i === 2 ? 300 : 400}x${i === 1 ? 300 : 400}/${
+ src: `https://dummyimage.com/${i === 2 ? 300 : 400}x${i === 1 ? 300 : 400}/${
  colors[key].background
  }?text=${encodeURIComponent(`Product ${id}`)}`,
  alt: key,

diff --git a/src/mock-connector/utils/createProduct.js b/src/mock-connector/utils/createProduct.js
@@ -15,27 +15,27 @@ export default function createProduct(id, numColors = 4) {
  priceText: `$${price}`,
  rating: (10 - (id % 10)) / 2.0,
  thumbnail: {
- src: `https://via.placeholder.com/400x400/${colors[color].background}/${
+ src: `https://dummyimage.com/400x400/${colors[color].background}/${
  colors[color].foreground
  }?text=${encodeURIComponent('Product ' + id)}`,
  alt: `Product ${id}`,
  },
  media: {
  full: variants.map((key, i) => ({
- src: `https://via.placeholder.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
+ src: `https://dummyimage.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
  colors[key].background
  }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
  alt: `Product ${id}`,
  magnify: {
  height: i === 1 ? 800 : 1200,
  width: i === 2 ? 800 : 1200,
- src: `https://via.placeholder.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
+ src: `https://dummyimage.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
  colors[key].background
  }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
  },
  })),
  thumbnails: variants.map((key, i) => ({
- src: `https://via.placeholder.com/${i === 2 ? 233 : 300}x${i === 1 ? 233 : 300}/${
+ src: `https://dummyimage.com/${i === 2 ? 233 : 300}x${i === 1 ? 233 : 300}/${
  colors[key].background
  }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
  alt: `Product ${id}`,
@@ -57,33 +57,33 @@ export default function createProduct(id, numColors = 4) {
  id: name,
  disabled: idx === 2,
  image: {
- src: `https://via.placeholder.com/48x48/${
- colors[name].background
- }?text=${encodeURIComponent(' ')}`,
+ src: `https://dummyimage.com/48x48/${colors[name].background}?text=${encodeURIComponent(
+ ' ',
+ )}`,
  alt: name,
  },
  media: {
  full: [name, name, name].map((key, i) => ({
- src: `https://via.placeholder.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
+ src: `https://dummyimage.com/${i === 2 ? 400 : 600}x${i === 1 ? 400 : 600}/${
  colors[key].background
  }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
  alt: `Product ${id}`,
  magnify: {
  height: i === 1 ? 800 : 1200,
  width: i === 2 ? 800 : 1200,
- src: `https://via.placeholder.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
+ src: `https://dummyimage.com/${i === 2 ? 800 : 1200}x${i === 1 ? 800 : 1200}/${
  colors[key].background
  }/${colors[key].foreground}?text=${encodeURIComponent('Product ' + id)}`,
  },
  })),
  thumbnails: [name, name, name].map((key, i) => ({
- src: `https://via.placeholder.com/${i === 2 ? 300 : 400}x${i === 1 ? 300 : 400}/${
+ src: `https://dummyimage.com/${i === 2 ? 300 : 400}x${i === 1 ? 300 : 400}/${
  colors[key].background
  }/${colors[key].foreground}?text=${encodeURIComponent(`Product ${id}`)}`,
  alt: key,
  })),
  thumbnail: [name].map(key => ({
- src: `https://via.placeholder.com/400x400/${colors[key].background}/${
+ src: `https://dummyimage.com/400x400/${colors[key].background}/${
  colors[key].foreground
  }?text=${encodeURIComponent('Product ' + id)}`,
  alt: `Product ${id}`,

diff --git a/src/utils/getBase64ForImage.js b/src/utils/getBase64ForImage.js
@@ -1,7 +1,7 @@
 import fetch from '../fetch'
 
-export default async function getBase64ForImage(src) {
- const res = await fetch(src)
+export default async function getBase64ForImage(...args) {
+ const res = await fetch(...args)
  const contentType = res.headers.get('content-type')
  const buffer = await res.buffer()
  return `data:${contentType};base64,${buffer.toString('base64')}`