diff --git a/package-lock.json b/package-lock.json index bcc7c0a..61b17be 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 42bc849..7bd1220 100644 --- a/package.json +++ b/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", diff --git a/src/components/ImageCarousel.astro b/src/components/ImageCarousel.astro index 08a4668..4e8dd23 100644 --- a/src/components/ImageCarousel.astro +++ b/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; diff --git a/src/data/brands/index.ts b/src/data/brands/index.ts index 9af5417..cd73161 100644 --- a/src/data/brands/index.ts +++ b/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.`, }, ]; diff --git a/src/data/products/index.ts b/src/data/products/index.ts index ba82cb8..97ec666 100644 --- a/src/data/products/index.ts +++ b/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. */ diff --git a/src/pages/[productLookup].astro b/src/pages/[productLookup].astro index 5910688..d32b4fc 100644 --- a/src/pages/[productLookup].astro +++ b/src/pages/[productLookup].astro @@ -48,14 +48,14 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!; {product?.name}