Merge pull request #6 from flo-bit/main

update

.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

@@ -1,29 +1,26 @@
 # svelte-swiper-cards
 
-Tinder-like swipeable cards for svelte.
+Tinder-like swipeable cards component for svelte.
 
-> [!NOTE]  
-> Still in active development. Expect breaking changes.
-
-[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
 
 ## Features
 
-- Built with tailwind
-- Reuses cards (only two cards, that are swapped)
-- Customizable (customize the card)
-- Modern: uses @use-gesture/vanilla for gesture handling
-- TypeScript
+- Built with **tailwind**
+- **Reuses cards** (only two cards, that are swapped)
+- **Customizable** (easily customize the card ui and data)
+- **Modern**: uses @use-gesture/vanilla for gesture handling
+- Uses **TypeScript**
 
 ## Installation
 
 - You need to have tailwind installed in your project, see [here for installation instructions](https://tailwindcss.com/docs/guides/sveltekit).
 
-- Copy the `CardSwiper` folder from `src/libs` to your projects `lib` folder.
+- Download the [`CardSwiper`](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2Fflo-bit%2Fsvelte-swiper-cards%2Ftree%2Fmain%2Fsrc%2Flib%2FCardSwiper) folder from `src/libs` to your projects `src/lib` folder.
 
-- Install dependency
+- Install dependency `@use-gesture/vanilla`
 
 ```bash
 npm i @use-gesture/vanilla
@@ -32,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>
 ```
 
@@ -57,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>
 ```
 
@@ -99,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}
 ```
 
@@ -118,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