Merge pull request #112 from crowdtainer/28022024

Improve loading time with image optimizations

package.json

@@ -21,6 +21,7 @@
 		"@steeze-ui/svelte-icon": "^1.3.2",
 		"@sveltejs/adapter-auto": "1.0.2",
 		"@sveltejs/adapter-node": "^1.1.6",
+		"@sveltejs/enhanced-img": "^0.1.8",
 		"@sveltejs/kit": "^1.24.0",
 		"@tailwindcss/forms": "^0.5.4",
 		"@tailwindcss/typography": "^0.5.9",

src/lib/CampaignActions.svelte

@@ -19,6 +19,9 @@
 
 	let transferWalletModalDialog: ModalDialog;
 
+	import CartImage from '$lib/images/site/Cart.svg';
+	import TransferImage from '$lib/images/site/Transfer.svg';
+
 	// Wallet management
 	import { OrderStatus } from './api';
 	import type { WalletCrowdtainerModel } from './Model/WalletCrowdtainerModel.js';
@@ -38,6 +41,9 @@
 	let transferWalletUserInput = '';
 
 	const dispatch = createEventDispatcher();
+
+	import ExitImage from '$lib/images/site/Exit.svg';
+
 </script>
 
 <ModalDialog bind:this={transferWalletModalDialog}>
@@ -113,7 +119,7 @@
 				>
 					<span class="squared-btn">
 						<div class="flex justify-center items-center">
-							<img width="30" height="30" src="images/site/Cart.svg" alt="Checkout" />
+							<img width="30" height="30" src={CartImage} alt="Checkout" />
 						</div>
 						<p class="text-lg mt-5">Checkout</p>
 					</span>
@@ -145,7 +151,7 @@
 							<img
 								width="30"
 								height="30"
-								src="images/site/Transfer.svg"
+								src={TransferImage}
 								alt="Transfer participation proof to another wallet."
 							/>
 						</div>
@@ -188,7 +194,7 @@
 				>
 					<span class="squared-btn">
 						<div class="flex justify-center items-center">
-							<img width="30" height="30" src="images/site/Exit.svg" alt="Leave campaign" />
+							<img width="30" height="30" src={ExitImage} alt="Leave campaign" />
 						</div>
 						<p class="text-lg mt-5">Leave</p>
 					</span>
@@ -218,7 +224,7 @@
 			>
 				<span class="squared-btn">
 					<div class="flex justify-center items-center">
-						<img width="30" height="30" src="images/site/Exit.svg" alt="Leave campaign" />
+						<img width="30" height="30" src={ExitImage} alt="Leave campaign" />
 					</div>
 					<p class="text-lg mt-5">Withdraw {tokenSymbol}</p>
 				</span>

src/lib/JoinProjectButton.svelte

@@ -34,7 +34,6 @@
 	export let tokenVersion: string;
 	export let txSponsoringEnabled: boolean;
 	export let totalSum: number;
-	export let tokenDecimals: number;
 	export let totalCostInERCUnits: BigNumber;
 	export let discountValue: number;
 	export let validUserCouponCode: string;

src/lib/MyCampaign.svelte

@@ -156,7 +156,7 @@
 	<div class="rounded-md max-w-lg mx-auto white overflow-hidden md:max-w-7xl my-8">
 		<div class="md:flex">
 			<div class="md:shrink-0">
-				<!-- <img class="w-full object-cover md:h-full md:w-96" src={projectImageURL} alt="Coffee" /> -->
+				<!-- <enhanced:img class="w-full object-cover md:h-full md:w-96" src={projectImageURL} alt="Coffee" /> -->
 				<img
 					class="drop-shadow-md hover:drop-shadow-xl w-full object-cover md:w-96 p-2"
 					src={svg}

src/lib/Project.svelte

@@ -31,6 +31,9 @@
 	import { findTokenIdsForWallet, type TokenIDAssociations } from './ethersCalls/rpcRequests.js';
 	import { Circle } from 'svelte-loading-spinners';
 
+	import { campaignImagesAt } from './ProjectImages.js';
+	import type { Image } from './ProjectImages';
+
 	export let vouchers721Address: string;
 	export let chainId: number;
 	export let tokenVersion: string;
@@ -62,6 +65,11 @@
 
 	let tokenIdAssociations: TokenIDAssociations | undefined;
 
+	let staticProjectImages: [string, Image][];
+	staticProjectImages = campaignImagesAt(projectImageURLs);
+	const isURL = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/;
+	let otherProjectImages = projectImageURLs.filter((path) => isURL.test(path));
+
 	async function refreshData() {
 		if (staticDataLoadStatus !== LoadStatus.Loaded) {
 			console.log('Skipped wallet data refresh, project data still loading.');
@@ -159,11 +167,25 @@
 				<div class="flex flex-col items-center align-center h-full">
 					<div class="my-4 grow carousel carousel-vertical p-4 rounded-box">
 						<div class="h-[32rem]">
-							{#each projectImageURLs as imageURL}
-								<div class="carousel-item justify-center w-full">
-									<img src={imageURL} class="rounded-box w-auto my-2" alt="" />
-								</div>
-							{/each}
+							{#if staticProjectImages}
+								{#each staticProjectImages as [_, imageData], index}
+									<div class="carousel-item justify-center w-full">
+										<enhanced:img
+											src={imageData}
+											class="rounded-box my-2"
+											alt="Campaign"
+											fetchPriority={index === 0 ? 'high' : 'auto'}
+										/>
+									</div>
+								{/each}
+							{/if}
+							{#if otherProjectImages}
+								{#each otherProjectImages as imageURL, index}
+									<div class="carousel-item justify-center w-full">
+										<img src={imageURL} class="rounded-box w-auto my-2" alt="Campaign" />
+									</div>
+								{/each}
+							{/if}
 						</div>
 					</div>
 				</div>
@@ -173,9 +195,16 @@
 			<div class="block md:hidden p-4">
 				<div class="flex flex-col items-center align-center">
 					<div class="carousel carousel-end rounded-box space-x-4">
-						{#each projectImageURLs as imageURL}
+						{#if staticProjectImages}
+							{#each staticProjectImages as [_, imageData], index}
+								<div class="carousel-item">
+									<enhanced:img src={imageData} alt="Campaign" />
+								</div>
+							{/each}
+						{/if}
+						{#each otherProjectImages as imageURL, index}
 							<div class="carousel-item">
-								<img src={imageURL} class="h-80" alt="test" />
+								<img src={imageURL} class="h-80" alt="Campaign" />
 							</div>
 						{/each}
 					</div>

src/lib/ProjectGlobalView.svelte

@@ -119,7 +119,7 @@
 			{state}
 		/>
 
-		<div class="min-w-max">
+		<div class="min-w-max mx-2">
 			{#if campaignStaticUI}
 				<p class="projectStatus">
 					<TimeLeft endTime={$campaignStaticUI.endDate} />

src/lib/ProjectImages.ts

@@ -0,0 +1,29 @@
+export type Image = {
+	sources: {
+		avif: string
+		webp: string
+		png: string
+	}
+	img: {
+		src: string
+		w: number
+		h: number
+	}
+};
+
+export const campaignImages = Object.entries(
+	import.meta.glob<Image>('$lib/images/projects/**/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}', {
+		query: { enhanced: true },
+		import: 'default',
+		eager: true
+	})
+);
+
+export function campaignImagesAt(paths: string[]): [string, Image][] {
+	return campaignImages.filter(([stringItem, _]) => {
+		return paths.some(path => {
+			return stringItem.includes(path);
+		}
+		);
+	});
+}

src/lib/TopMenuNav.svelte

@@ -9,6 +9,10 @@
 	import { Clipboard } from '@steeze-ui/heroicons';
 	import { clickOutside } from '$lib/Utils/clickOutside';
 
+	import CrowdtainerLogo from '$lib/images/site/CrowdtainerLogo.svg';
+	import TopNavbarLogo from '$lib/images/site/TopNavbarLogo.svg';
+	import EthereumLogo from '$lib/images/site/Ethereum.svg';
+
 	// Wallet management
 	import {
 		walletState,
@@ -68,7 +72,6 @@
 	$: path = $page.url.pathname;
 </script>
 
-
 <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
 	<div class="relative flex items-center justify-between h-16">
 		<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
@@ -112,14 +115,14 @@
 				<a href="/">
 					<img
 						class="block lg:hidden h-8 w-auto mx-16 sm:mx-0"
-						src="/images/site/CrowdtainerLogo.svg"
+						src={CrowdtainerLogo}
 						alt="Crowdtainer"
 					/>
 				</a>
 				<a href="/">
 					<img
 						class="hidden lg:block h-8 w-auto"
-						src="/images/site/TopNavbarLogo.svg"
+						src={TopNavbarLogo}
 						alt="Crowdtainer"
 					/>
 				</a>
@@ -170,7 +173,9 @@
 							/>
 							<span class="relative inline-flex rounded-full h-2 w-2 bg-yellow-400" />
 						</span>
-						<p class="pt-1 text-right text-sm text-white max-w-[120px] md:max-w-full">Wallet locked</p>
+						<p class="pt-1 text-right text-sm text-white max-w-[120px] md:max-w-full">
+							Wallet locked
+						</p>
 					</div>
 				{:else if $walletState.connectionState === ConnectionState.ConnectedToUnsupportedNetwork}
 					<div class="inline-flex items-baseline">
@@ -205,7 +210,7 @@
 							aria-haspopup="true"
 						>
 							<span class="sr-only">Open user menu</span>
-							<img class="h-8 w-8 rounded-full" src="/images/site/Ethereum.svg" alt="" />
+							<img class="h-8 w-8 rounded-full" src={EthereumLogo} alt="" />
 						</button>
 					</div>
 

src/routes/+error.svelte

@@ -1,16 +1,17 @@
 <script>
-  
-  import { page } from '$app/stores'
+	import { page } from '$app/stores';
+
+	import CrowdtainerLogo from '$lib/images/site/CrowdtainerLogo.svg';
 
 	export let title = `${$page.status} - ${$page.error?.message}`;
 </script>
 
 <figure
-	class="max-w-4xl mx-auto grid grid-cols-1 py-6 px-4 sm:p-6 md:py-10 md:px-8 bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"
+	class="my-10 max-w-4xl mx-auto grid grid-cols-1 py-6 px-4 sm:p-6 md:py-10 md:px-8 rounded-xl p-8 md:p-0"
 >
 	<img
 		class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"
-		src="/images/site/CrowdtainerLogo.svg"
+		src={CrowdtainerLogo}
 		alt=""
 		width="384"
 		height="512"

src/routes/About/+page.svelte

@@ -1,10 +1,11 @@
+<script lang="ts">
+	import CrowdtainerLogo from '$lib/images/site/CrowdtainerLogo.svg';
+	import SplitPayment from '$lib/images/site/splitPayment.webp';
+</script>
+
 <div class="flex justify-center">
 	<a class="link" href="https://crowdtainer.io">
-		<img
-			class="lg:h-32 md:h-28 h-20 mt-16"
-			alt="Crowdtainer Logo"
-			src="images/site/CrowdtainerLogo.svg"
-		/>
+		<img class="lg:h-32 md:h-28 h-20 mt-16" alt="Crowdtainer Logo" src={CrowdtainerLogo} />
 	</a>
 </div>
 <div class="flex justify-center mt-20">
@@ -48,9 +49,8 @@
 						<li class="py-4">
 							<b>Banks and credit cards are not strictly required.</b> Ethereum
 							<a class="link" href="https://eips.ethereum.org/EIPS/eip-20">ERC20</a> tokens are used
-							as a medium of payment. Costs are per transaction, not
-							a percentage. <b>Less fees</b> for intermediaries means <b>more</b> is available for the
-							campaign goal.
+							as a medium of payment. Costs are per transaction, not a percentage. <b>Less fees</b>
+							for intermediaries means <b>more</b> is available for the campaign goal.
 						</li>
 						<li class="py-4">
 							<b>Optional, transparent & fair referral system.</b> Backers can share the campaign with
@@ -63,7 +63,7 @@
 							<b>Improved privacy.</b> Instead of multiple companies receiving sensitive data (such
 							as delivery details), only the actual service provider receives what is needed to
 							fulfil the agreements. Other ways to improve the status quo in online ordering and
-							privacy, such as using 
+							privacy, such as using
 							<a class="link" href="https://en.wikipedia.org/wiki/Zero-knowledge_proof"
 								>zero knowledge proofs</a
 							>
@@ -75,11 +75,7 @@
 							<a class="link" href="https://github.com/0xSplits/splits-sdk">split contract</a>
 							at the recipient address:
 							<div class="flex justify-center">
-								<img
-									class="dark:invert"
-									alt="Crowdtainer Logo"
-									src="/images/site/splitPayment.webp"
-								/>
+								<img class="dark:invert" alt="Crowdtainer Logo" src={SplitPayment} />
 							</div>
 						</li>
 					</ul>

src/routes/Data/projects.json

@@ -14,9 +14,7 @@
             "description": "Explore the amazing world of Single Origin coffee beans. Sitting at altitudes between 950 and 1,450 m.a.s.l., the farm covers almost 900 hectares of predominantly hilly terrain, of which 239 hectares are used for coffee cultivation.",
             "projectURL": "https://shop.barterfly.de/index.php/meet-your-farmers/",
             "projectImageURLs": [
-                "images/projects/CoffeeBag.png",
-                "images/projects/CoffeeBag.png",
-                "images/projects/CoffeeBag.png"
+                "/images/projects/31337/1/"
             ],
             "basePriceDenominator": [
                 0.5,