Skip to content

Commit 0cb75bf

Browse files
alanthaialanthai
committed
optimized images
1 parent 1c62733 commit 0cb75bf

File tree

11 files changed

+764
-51
lines changed

11 files changed

+764
-51
lines changed

‎client/package-lock.json‎

Lines changed: 647 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"@preact/preset-vite": "^2.10.1",
2525
"@tanstack/router-devtools": "^1.124.0",
2626
"typescript": "~5.8.3",
27-
"vite": "^7.0.0"
27+
"vite": "^7.0.0",
28+
"vite-imagetools": "^10.0.0"
2829
},
2930
"volta": {
3031
"node": "22.17.0"

‎client/src/assets/product-images.d.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// Type declarations for product-images.js (vite-imagetools transforms).
2+
// Icon exports are URL strings. SrcSet exports are "url Nw, url Mw" srcset strings.
3+
4+
export declare const IconSwipeableAds: string;
5+
export declare const IconCarouselAds: string;
6+
export declare const IconVideoAds: string;
7+
export declare const IconGameController: string;
8+
export declare const IconCheckoutProduct: string;
9+
10+
export declare const PreviewSwipeableAdSrcSet: string;
11+
export declare const PreviewCarouselAdSrcSet: string;
12+
export declare const PreviewVideoAdSrcSet: string;
13+
export declare const PreviewCheckoutProductSrcSet: string;
14+
15+
export declare const PreviewSwipeableGameSrcSet: string;
16+
export declare const PreviewCarouselGameSrcSet: string;
17+
export declare const PreviewVideoGameSrcSet: string;
18+
export declare const PreviewCheckoutGameSrcSet: string;

‎client/src/assets/product-images.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// vite-imagetools query-param imports.
2+
// TypeScript resolves the companion product-images.d.ts for types.
3+
// Vite processes this file and runs the actual imagetools transforms at build time.
4+
5+
// Icons: WebP at 2× display size (displayed at 80–88px), single URL
6+
export { default as IconSwipeableAds } from "./icon-swipeable-ads.png?w=160&format=webp";
7+
export { default as IconCarouselAds } from "./icon-carousel-ads.png?w=160&format=webp";
8+
export { default as IconVideoAds } from "./icon-video-ads.png?w=160&format=webp";
9+
export { default as IconGameController } from "./icon-game-controller.png?w=176&format=webp";
10+
export { default as IconCheckoutProduct } from "./icon-checkout-product.png?w=160&format=webp";
11+
12+
// Ad preview images: displayed at height 400px (fixed CSS), width ~300px
13+
// Generates two sizes and returns a "url 300w, url 600w" srcset string
14+
export { default as PreviewSwipeableAdSrcSet } from "./preview-swipeable-ad.png?w=300;600&format=webp&as=srcset";
15+
export { default as PreviewCarouselAdSrcSet } from "./preview-carousel-ad.png?w=300;600&format=webp&as=srcset";
16+
export { default as PreviewVideoAdSrcSet } from "./preview-video-ad.png?w=300;600&format=webp&as=srcset";
17+
export { default as PreviewCheckoutProductSrcSet } from "./preview-checkout-product.png?w=300;600&format=webp&as=srcset";
18+
19+
// Game preview images: displayed at exactly 200×250px with object-fit: cover
20+
// Generates two sizes and returns a "url 200w, url 400w" srcset string
21+
export { default as PreviewSwipeableGameSrcSet } from "./preview-swipeable-game.png?w=200;400&format=webp&as=srcset";
22+
export { default as PreviewCarouselGameSrcSet } from "./preview-carousel-game.jpg?w=200;400&format=webp&as=srcset";
23+
export { default as PreviewVideoGameSrcSet } from "./preview-video-game.jpg?w=200;400&format=webp&as=srcset";
24+
export { default as PreviewCheckoutGameSrcSet } from "./preview-checkout-game.png?w=200;400&format=webp&as=srcset";

‎client/src/assets/sdk-images.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Type declarations for sdk-images.js (vite-imagetools transforms).
2+
// All exports are "url Nw, url Mw" srcset strings.
3+
4+
export declare const PreviewUnitySrcSet: string;
5+
export declare const PreviewJSSrcSet: string;

‎client/src/assets/sdk-images.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// vite-imagetools query-param imports.
2+
// TypeScript resolves the companion sdk-images.d.ts for types.
3+
// Vite processes this file and runs the actual imagetools transforms at build time.
4+
5+
// SDK preview images: displayed at width 400px (fixed CSS)
6+
export { default as PreviewUnitySrcSet } from "./preview-unity.png?w=400;800&format=webp&as=srcset";
7+
export { default as PreviewJSSrcSet } from "./preview-js.jpg?w=400;800&format=webp&as=srcset";

‎client/src/globals.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
/// <reference types="vite/client" />
22

3+
// vite-imagetools: query-param image imports return a URL string by default.
4+
// Using wildcards here because TypeScript can't resolve arbitrary query strings.
5+
declare module "*.png?w=160&format=webp" {
6+
const src: string;
7+
export default src;
8+
}
9+
310
declare global {
411
interface Window {
512
BoltSDK?: any;

‎client/src/pages/products/Products.tsx‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
import Tabs from "../../design/tabs/Tabs";
22
import { Section, Sections } from "../../components/section/Section";
3-
4-
import IconSwipeableAds from "../../assets/icon-swipeable-ads.png";
5-
import PreviewSwipeableAd from "../../assets/preview-swipeable-ad.png";
6-
import PreviewSwipeableGame from "../../assets/preview-swipeable-game.png";
7-
8-
import IconCarouselAds from "../../assets/icon-carousel-ads.png";
9-
import PreviewCarouselAd from "../../assets/preview-carousel-ad.png";
10-
import PreviewCarouselGame from "../../assets/preview-carousel-game.jpg";
11-
12-
import IconVideoAds from "../../assets/icon-video-ads.png";
13-
import PreviewVideoAd from "../../assets/preview-video-ad.png";
14-
import PreviewVideoGame from "../../assets/preview-video-game.jpg";
15-
16-
import IconGameController from "../../assets/icon-game-controller.png";
17-
18-
import IconCheckoutProduct from "../../assets/icon-checkout-product.png";
19-
import PreviewCheckoutProduct from "../../assets/preview-checkout-product.png";
20-
import PreviewCheckoutGame from "../../assets/preview-checkout-game.png";
3+
import {
4+
IconSwipeableAds,
5+
IconCarouselAds,
6+
IconVideoAds,
7+
IconGameController,
8+
IconCheckoutProduct,
9+
PreviewSwipeableAdSrcSet,
10+
PreviewCarouselAdSrcSet,
11+
PreviewVideoAdSrcSet,
12+
PreviewCheckoutProductSrcSet,
13+
PreviewSwipeableGameSrcSet,
14+
PreviewCarouselGameSrcSet,
15+
PreviewVideoGameSrcSet,
16+
PreviewCheckoutGameSrcSet,
17+
} from "../../assets/product-images";
2118

2219
import styles from "./Product.module.css";
2320
import { Heading1 } from "../../design/heading/Heading";
@@ -76,7 +73,10 @@ function AdsProductContent() {
7673
/>
7774
}
7875
preview={
79-
<Preview adUrl={PreviewSwipeableAd} gameUrl={PreviewSwipeableGame} />
76+
<Preview
77+
adSrcSet={PreviewSwipeableAdSrcSet}
78+
gameSrcSet={PreviewSwipeableGameSrcSet}
79+
/>
8080
}
8181
/>
8282
<Section
@@ -90,7 +90,10 @@ function AdsProductContent() {
9090
/>
9191
}
9292
preview={
93-
<Preview adUrl={PreviewCarouselAd} gameUrl={PreviewCarouselGame} />
93+
<Preview
94+
adSrcSet={PreviewCarouselAdSrcSet}
95+
gameSrcSet={PreviewCarouselGameSrcSet}
96+
/>
9497
}
9598
/>
9699
<Section
@@ -103,7 +106,12 @@ function AdsProductContent() {
103106
label="View Experience"
104107
/>
105108
}
106-
preview={<Preview adUrl={PreviewVideoAd} gameUrl={PreviewVideoGame} />}
109+
preview={
110+
<Preview
111+
adSrcSet={PreviewVideoAdSrcSet}
112+
gameSrcSet={PreviewVideoGameSrcSet}
113+
/>
114+
}
107115
/>
108116
</Sections>
109117
);
@@ -119,20 +127,30 @@ function CheckoutProductContent() {
119127
action={<CheckoutAction label="View Experience" />}
120128
preview={
121129
<Preview
122-
adUrl={PreviewCheckoutProduct}
123-
gameUrl={PreviewCheckoutGame}
130+
adSrcSet={PreviewCheckoutProductSrcSet}
131+
gameSrcSet={PreviewCheckoutGameSrcSet}
124132
/>
125133
}
126134
/>
127135
</Sections>
128136
);
129137
}
130138

131-
function Preview({ adUrl, gameUrl }: { adUrl: string; gameUrl: string }) {
139+
function Preview({ adSrcSet, gameSrcSet }: { adSrcSet: string; gameSrcSet: string }) {
132140
return (
133141
<div className={styles.preview}>
134-
<img src={adUrl} className={styles.previewAd} alt="Preview Ad" />
135-
<img src={gameUrl} className={styles.previewGame} alt="Preview Game" />
142+
<img
143+
srcSet={adSrcSet}
144+
sizes="300px"
145+
className={styles.previewAd}
146+
alt="Preview Ad"
147+
/>
148+
<img
149+
srcSet={gameSrcSet}
150+
sizes="200px"
151+
className={styles.previewGame}
152+
alt="Preview Game"
153+
/>
136154
</div>
137155
);
138156
}

‎client/src/pages/sdks/DeveloperSDKs.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import { Section, Sections } from "../../components/section/Section";
33
import { Heading1 } from "../../design/heading/Heading";
44
import { TextBlock } from "../../design/text-block/TextBlock";
55

6-
import PreviewUnity from "../../assets/preview-unity.png";
7-
8-
import PreviewJS from "../../assets/preview-js.jpg";
6+
import { PreviewUnitySrcSet, PreviewJSSrcSet } from "../../assets/sdk-images";
97

108
import styles from "./DeveloperSDKs.module.css";
119
import { LinkButton } from "../../design/button/Button";
@@ -37,7 +35,8 @@ export function DevelopmentSDKs() {
3735
}
3836
preview={
3937
<img
40-
src={PreviewUnity}
38+
srcSet={PreviewUnitySrcSet}
39+
sizes="400px"
4140
className={styles.previewImage}
4241
alt="Unity SDK Preview"
4342
/>
@@ -57,7 +56,8 @@ export function DevelopmentSDKs() {
5756
}
5857
preview={
5958
<img
60-
src={PreviewJS}
59+
srcSet={PreviewJSSrcSet}
60+
sizes="400px"
6161
className={styles.previewImage}
6262
alt="TypeScript SDK Preview"
6363
/>

‎client/tsconfig.app.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"noUnusedParameters": true,
2828
"erasableSyntaxOnly": true,
2929
"noFallthroughCasesInSwitch": true,
30-
"noUncheckedSideEffectImports": true
30+
"noUncheckedSideEffectImports": false
3131
},
32-
"include": ["src", "../server/src"]
32+
"include": ["src", "../server/src"],
33+
"files": ["src/globals.d.ts"]
3334
}

0 commit comments

Comments
 (0)