demo: compress+preload images

cleanup
update documentation
start of svelte 5 conversion (remove dispatch)

.github/workflows/deploy_gh_pages.yml

@@ -48,4 +48,4 @@ jobs:
     steps:
       - name: Deploy
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v2

README.md

@@ -2,7 +2,7 @@
 
 Tinder-like swipeable cards component for svelte.
 
-[Try the simple demo here!](https://flo-bit.github.io/svelte-swiper-cards/simple-demo)
+[Try the demo here!](https://flo-bit.github.io/svelte-swiper-cards)
 
 https://github.com/flo-bit/svelte-swiper-cards/assets/45694132/61077605-b6f8-4114-aaa3-5527d8887f99
 
@@ -29,19 +29,21 @@ npm i @use-gesture/vanilla
 ## Usage
 
 ```svelte
-<script>
-  import { CardSwiper } from '$lib/CardSwiper'
-
-  let data = (index) => {
-    return {
-      title: 'Card ' + index,
-      description: 'Description ' + index
-    }
-  }
+<script lang="ts">
+	import { CardSwiper } from '$lib/CardSwiper';
+
+	// function that returns the data for each card, by default has title, description and image
+	let data = (index) => {
+		return {
+			title: 'Card ' + index,
+			description: 'Description ' + index,
+			image: '/profiles/' + index + '.webp'
+		};
+	};
 </script>
 
 <div class="h-screen w-screen">
-  <CardSwiper cardData={data} />
+	<CardSwiper cardData={data} />
 </div>
 ```
 
@@ -54,37 +56,37 @@ Customize the `Card.svelte` file to your needs, if you need to pass in more data
 You can control the cards programmatically by calling the swipe function.
 
 ```svelte
-<script>
-  import { CardSwiper } from '$lib/CardSwiper'
+<script lang="ts">
+	import { CardSwiper } from '$lib/CardSwiper';
 
-  let swipe: (direction?: 'left' | 'right') => void
+	let swipe: (direction?: 'left' | 'right') => void;
 </script>
 
 <div class="h-screen w-screen">
-  <CardSwiper bind:swipe />
-  <button on:click={() => swipe('left')}>Swipe left</button>
-  <button on:click={() => swipe('right')}>Swipe right</button>
+	<CardSwiper bind:swipe />
+	<button on:click={() => swipe('left')}>Swipe left</button>
+	<button on:click={() => swipe('right')}>Swipe right</button>
 </div>
 ```
 
 ### Events
 
 ```svelte
-<script>
-  import { CardSwiper } from '$lib/CardSwiper'
-
-  function onSwipe(event) {
-    // details: 
-    // direction: 'left' | 'right'
-    // index: number
-    // element: HTMLElement
-    // data: CardData
-    console.log(event.details)
-  }
+<script lang="ts">
+	import { CardSwiper } from '$lib/CardSwiper';
+
+	function onSwipe(cardInfo: {
+		direction: Direction;
+		element: HTMLElement;
+		data: CardData;
+		index: number;
+	}) {
+		console.log('swiped', cardInfo.direction, 'on card', cardInfo.data.title);
+	}
 </script>
 
 <div class="h-screen w-screen">
-  <CardSwiper on:swipe={onSwipe} />
+	<CardSwiper {onSwipe} />
 </div>
 ```
 
@@ -96,17 +98,17 @@ Show a threshold overlay when swiping like so (set to 0 if no threshold reached,
 
 ```svelte
 <script>
-  import { CardSwiper } from '$lib/CardSwiper'
+	import { CardSwiper } from '$lib/CardSwiper';
 
-  let thresholdPassed = 0
+	let thresholdPassed = 0;
 </script>
 
 <CardSwiper bind:thresholdPassed />
 
 {#if thresholdPassed !== 0}
-  <div class="absolute w-full h-full inset-0 flex items-center justify-center text-9xl">
-    {thresholdPassed > 0 ? '👍' : '👎'}
-  </div>
+	<div class="absolute w-full h-full inset-0 flex items-center justify-center text-9xl">
+		{thresholdPassed > 0 ? '👍' : '👎'}
+	</div>
 {/if}
 ```
 
@@ -115,10 +117,7 @@ Show a threshold overlay when swiping like so (set to 0 if no threshold reached,
 You can also set the minimum threshold as a percentage of the card width (default is 0.5) and the minimum speed (default is 0.5).
 
 ```svelte
-<CardSwiper
-  minSwipeDistance={0.3}
-  minSwipeVelocity={0.3}
-/>
+<CardSwiper minSwipeDistance={0.3} minSwipeVelocity={0.3} />
 ```
 
 #### arrowKeys