clients/web: remove Product media slideshow on Checkout info to reduc…

…e bundle size

clients/apps/web/next.config.mjs

@@ -75,6 +75,12 @@ const nextConfig = {
 
   images: {
     remotePatterns: [
+      {
+        protocol: process.env.S3_PUBLIC_IMAGES_BUCKET_PROTOCOL || 'http',
+        hostname: process.env.S3_PUBLIC_IMAGES_BUCKET_HOSTNAME || '127.0.0.1',
+        port: process.env.S3_PUBLIC_IMAGES_BUCKET_PORT || '9000',
+        pathname: process.env.S3_PUBLIC_IMAGES_BUCKET_PATHNAME || '**',
+      },
       {
         protocol: 'https',
         hostname: 'avatars.githubusercontent.com',

clients/apps/web/src/components/Checkout/CheckoutProductInfo.tsx

@@ -1,10 +1,10 @@
-import { Slideshow } from '@/components/Products/Slideshow'
 import { markdownOptions } from '@/utils/markdown'
 import { organizationPageLink } from '@/utils/nav'
 import type { CheckoutProduct } from '@polar-sh/sdk/models/components/checkoutproduct'
 import type { Organization } from '@polar-sh/sdk/models/components/organization'
 import Avatar from '@polar-sh/ui/components/atoms/Avatar'
 import Markdown from 'markdown-to-jsx'
+import Image from 'next/image'
 import Link from 'next/link'
 
 interface CheckoutProductInfoProps {
@@ -37,7 +37,14 @@ const CheckoutProductInfo = ({
         <h1 className="text-3xl">{product.name}</h1>
       </div>
       {product.medias.length > 0 && (
-        <Slideshow images={product.medias.map(({ publicUrl }) => publicUrl)} />
+        <div className="dark:bg-polar-900 dark:border-polar-700 relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl bg-gray-100 bg-cover bg-center lg:rounded-3xl dark:border">
+          <Image
+            alt={product.medias[0].name}
+            src={product.medias[0].publicUrl}
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
       )}
       {product.description ? (
         <div className="prose dark:prose-invert prose-headings:mt-8 prose-headings:font-medium prose-headings:text-black prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-h4:text-md prose-h5:text-sm prose-h6:text-sm dark:prose-headings:text-white dark:text-polar-300 max-w-4xl text-gray-800">

clients/turbo.json

@@ -36,7 +36,11 @@
     "SENTRY_ORG",
     "POLAR_AUTH_COOKIE_KEY",
     "POLAR_CHECKOUT_EMBED_SCRIPT_ALLOWED_ORIGINS",
-    "NEXT_PUBLIC_CHECKOUT_EMBED_SCRIPT_SRC"
+    "NEXT_PUBLIC_CHECKOUT_EMBED_SCRIPT_SRC",
+    "S3_PUBLIC_IMAGES_BUCKET_PROTOCOL",
+    "S3_PUBLIC_IMAGES_BUCKET_HOSTNAME",
+    "S3_PUBLIC_IMAGES_BUCKET_PORT",
+    "S3_PUBLIC_IMAGES_BUCKET_PATHNAME"
   ],
   "tasks": {
     "build": {