From 509ba95bc91ab768cce632119009bb75bda6dde4 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Wed, 21 Oct 2020 22:02:02 -0500
Subject: [PATCH] src for meta tag

---
 .../product/ProductView/ProductView.tsx       | 14 ++++++++----
 lib/bc-image-src.ts                           | 22 +++++++++++++++++++
 next.config.js                                |  2 +-
 pages/index.tsx                               |  8 +++----
 4 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 lib/bc-image-src.ts

diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 91747cd92..be41498a8 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -1,14 +1,17 @@
-import { NextSeo } from 'next-seo'
 import { FC, useState, useEffect } from 'react'
+import cn from 'classnames'
+import { NextSeo } from 'next-seo'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
+import useAddItem from '@lib/bigcommerce/cart/use-add-item'
+import bcImageSrc from '@lib/bc-image-src'
+import getPathname from '@lib/get-pathname'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
-import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { getProductOptions } from '../helpers'
 import s from './ProductView.module.css'
 import { isDesktop } from '@lib/browser'
-import cn from 'classnames'
+
 interface Props {
   className?: string
   children?: any
@@ -56,7 +59,10 @@ const ProductView: FC<Props> = ({ product, className }) => {
           description: product.description,
           images: [
             {
-              url: product.images.edges?.[0]?.node.urlXL || '',
+              url: bcImageSrc({
+                src: getPathname(product.images.edges?.[0]?.node.urlOriginal!),
+                width: 1200,
+              }),
               width: 800,
               height: 600,
               alt: product.name,
diff --git a/lib/bc-image-src.ts b/lib/bc-image-src.ts
new file mode 100644
index 000000000..2ae92774e
--- /dev/null
+++ b/lib/bc-image-src.ts
@@ -0,0 +1,22 @@
+type Props = {
+  src: string
+  width?: number
+}
+
+type LoaderProps = Props & { root: string }
+
+function normalizeSrc(src: string) {
+  return src[0] === '/' ? src.slice(1) : src
+}
+
+// This is the same loader used by Next.js in the Image Component, we have it here too
+// so we can create image URLs for meta tags
+function bcImageLoader({ root, src, width }: LoaderProps): string {
+  return `${root}${normalizeSrc(
+    width ? src.replace('/original/', `/${width}w/`) : src
+  )}`
+}
+
+export default function bcImageSrc(props: Props) {
+  return bcImageLoader({ root: 'https://cdn11.bigcommerce.com/', ...props })
+}
diff --git a/next.config.js b/next.config.js
index 96e102176..5003c1a8b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   images: {
-    sizes: [320, 480, 1024, 1600],
+    sizes: [320, 480, 820, 1200, 1600],
     path: 'https://cdn11.bigcommerce.com/',
     loader: 'bigCommerce',
   },
diff --git a/pages/index.tsx b/pages/index.tsx
index 8539ef036..96939beca 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -70,8 +70,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The first image is the largest one in the grid
-            imgWidth={i === 0 ? 1600 : 1024}
-            imgHeight={i === 0 ? 1600 : 1024}
+            imgWidth={i === 0 ? 1600 : 820}
+            imgHeight={i === 0 ? 1600 : 820}
             priority
           />
         ))}
@@ -103,8 +103,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The second image is the largest one in the grid
-            imgWidth={i === 1 ? 1600 : 1024}
-            imgHeight={i === 1 ? 1600 : 1024}
+            imgWidth={i === 1 ? 1600 : 820}
+            imgHeight={i === 1 ? 1600 : 820}
           />
         ))}
       </Grid>