Updated some layout details about rendering products pages on small devices. Improved number visibility on overlay on image carousel.

package-lock.json

@@ -22,6 +22,7 @@
       },
       "devDependencies": {
         "@apify/tsconfig": "^0.1.0",
+        "@types/jquery": "^3.5.30",
         "@types/markdown-it": "^14.1.1",
         "@types/markdown-it-attrs": "^4.1.3",
         "@types/node": "^20.0.0",
@@ -1649,6 +1650,15 @@
       "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==",
       "license": "MIT"
     },
+    "node_modules/@types/jquery": {
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.30.tgz",
+      "integrity": "sha512-nbWKkkyb919DOUxjmRVk8vwtDb0/k8FKncmUKFi+NY+QXqWltooxTrswvz4LspQwxvLdvzBN1TImr6cw3aQx2A==",
+      "dev": true,
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
     "node_modules/@types/jsdom": {
       "version": "21.1.7",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz",
@@ -1735,6 +1745,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz",
+      "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
+      "dev": true
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",

package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@apify/tsconfig": "^0.1.0",
+    "@types/jquery": "^3.5.30",
     "@types/markdown-it": "^14.1.1",
     "@types/markdown-it-attrs": "^4.1.3",
     "@types/node": "^20.0.0",

src/components/ImageCarousel.astro

@@ -9,7 +9,7 @@ export interface Image {
 
 interface Props {
 	images: Image[];
-    dots: number;
+  dots?: number;
 }
 
 const { images } = Astro.props;
@@ -68,10 +68,10 @@ class ImageCarousel extends HTMLElement {
     slidesCount() {
         return $(this).find('.carousel-slide').length || 0;
     }
-    plusSlides(plusIncrement) {
+    plusSlides(plusIncrement: number) {
         this.showSlide(this.slideIndex + plusIncrement);
     }
-    showSlide(slideIndex) {
+    showSlide(slideIndex: number) {
         const firstSlide = 1;
         const slidesCount = this.slidesCount();
         if (slideIndex < firstSlide) slideIndex = slidesCount;
@@ -112,7 +112,7 @@ image-carousel {
   cursor: pointer;
   position: absolute;
   top: 0;
-  width: 40px;
+  width: 6rem;
   height: 100%;
   color: white;
   font-weight: bold;
@@ -213,15 +213,19 @@ image-carousel {
   mix-blend-mode: difference;
 }
 .carousel-number {
-  color: #000;
-  font-size: 12px;
+  color: #23262d;
+  text-shadow: 1px 1px 2px #fff, 0 0 1em #ccc, 0 0 0.2em #23262d;
+  font-size: 0.8em;
   font-weight: 800;
   padding: 8px 12px;
   position: absolute;
-  left: 3em;
+  left: 40%;
+  right: 40%;
+  width: 20%;
+  text-align: center;
   top: 0;
   filter: invert(1);
-  mix-blend-mode: difference;
+  mix-blend-mode: luminosity;
 }
 .carousel-dot {
   cursor: pointer;

src/data/brands/index.ts

@@ -6,6 +6,8 @@ import { RubbermaidStoreProducts, BRAND_STORE_SLUG as RUBBERMAID_STORE_SLUG } fr
 import { VortexOpticsStoreProducts, BRAND_STORE_SLUG as VORTEX_OPTICS_STORE_SLUG } from './vortex-optics';
 import { InvisibleGlassProducts, BRAND_STORE_SLUG as INVISIBLE_GLASS_STORE_SLUG } from './invisible-glass';
 
+export { type Brand, type Product };
+
 export const ALL_BRAND_PRODUCTS: Product[] = [
     ...CoastStoreProducts,
     ...FirstAidOnlyStoreProducts,
@@ -48,7 +50,7 @@ First Aid Only...The Smart Choice.
         name: "Invisible Glass",
         slug: 'invisible-glass',
         logoUrl: '/assets/brands/invisible-glass.avif',
-        shortDescription: `Established in 1942, Stoner is a trusted name in the automotive and industrial cleaning industries, driven by a commitment to excellence, innovation, and integrity. With a legacy rooted in kindness, humility, and customer-centric values, Stoner continues to deliver high-performance products and support that meet the challenges of professionals worldwide.`
+        shortDescription: `Stoner has been a trusted name in the automotive and industrial cleaning industries since 1942. Driven by a commitment to excellence, innovation, and integrity, Stoner delivers performance cleaning products that support the challenges of professionals worldwide.`
     },
     {
         name: "Rubbermaid",
@@ -60,7 +62,7 @@ First Aid Only...The Smart Choice.
         name: "Vortex Optics",
         slug: VORTEX_OPTICS_STORE_SLUG,
         logoUrl: '/assets/brands/vortex-optics.svg',
-        shortDescription: `Vortex Optics is an American manufacturer of special optical equipments for hunting, wildlife watching, outdoor recreation, shooting sports and law enforcement and military. Vortex products include binoculars, spotting scopes, riflescopes, reflex sights, holographic sights and other accessories.`,
+        shortDescription: `Vortex Optics is an American manufacturer of special optical equipments for hunting, wildlife watching, outdoor recreation, shooting sports and law enforcement and military, including binoculars, spotting scopes, riflescopes, reflex sights, holographic sights, and other accessories.`,
     },
 ];
 

src/data/products/index.ts

@@ -2,6 +2,8 @@
 import { type Product } from './product';
 import { ALL_BRAND_PRODUCTS } from '../brands';
 
+export { type Product };
+
 /**
  * A list of all the products.
  */

src/pages/[productLookup].astro

@@ -48,14 +48,14 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
 			{product?.name}
 		</h2>
 		<div class="row">
-			<div class="col-4">
+			<div class="col-md-12 col-lg-4">
 				{product?.amazonProductDetails?.imageUrls !== undefined &&
 					product?.amazonProductDetails?.imageUrls.length == 1 &&
 						<img src={product?.amazonProductDetails?.imageUrls[0]} alt={product?.amazonProductDetails?.title} style="max-width: 100%;" />
 				}
 				{product?.amazonProductDetails?.imageUrls !== undefined &&
 					product?.amazonProductDetails?.imageUrls.length > 1 &&
-						<ImageCarousel images={product?.amazonProductDetails?.imageUrls.map((productUrl) => { return { src: productUrl }; } )} />
+						<ImageCarousel images={product?.amazonProductDetails?.imageUrls.map((productUrl: string) => { return { src: productUrl }; } )||[]} />
 				}
 			</div>
 			<div class="col-8">

src/pages/brand/[brandLookup].astro

@@ -111,9 +111,13 @@ const isAnyAmazon = brandProducts.find(p => p.amazonLink) || false;
 		font-size: 1rem;
 		text-align: left;
 	}
+	.brand img {
+		min-width: 8rem;
+		max-width: 10rem;
+	}
 	.brand .flex {
 		display: flex;
-		gap: 2rem;
+		gap: 1.2rem;
 		align-items: center;
 	}
 	.brand .after-flex p {