Merge #150: Improve Slider Component with Navigation Buttons & Bindings

636b750 scrollbar on mobile, arrows on tablets and up (Graeme Byrne)
88863d5 add buttons to slider (Graeme Byrne)

Pull request description:

  ## Changes Introduced
  Based on issue #145, this PR enhances the `Slider` SvelteKit component by introducing navigation buttons for improved user experience and refactoring the component structure for better maintainability.

  ### New Features & Improvements:
  - **Added Previous & Next Buttons**
    - Implemented navigation buttons (`.pre-btn`, `.nxt-btn`) to allow users to scroll through the slider items more easily.
    - Buttons are now hidden by default and only appear when hovering over the component.
    - Simplified event listeners by using `onclick` directly in the template.
  - **Improved Accessibility**
    - Added `aria-label` attributes to the buttons for better screen reader support.
  - **Refactored CSS for Better Readability & Maintainability**
    - Extracted `.slider-item` for consistent styling.
    - Improved button visibility logic: Buttons now fade in when the user hovers over the slider.
  - **Removed Scrollbar**
    - Implemented `::-webkit-scrollbar` on `.slider-container`, setting `display: none;` so as to remove the unnecessary and distracting grey scrollbar which wasn't consistent over different browsers.

ACKs for top commit:
  josecelano:
    ACK 636b750

Tree-SHA512: 089c3966c045db61ec5e66e4a9f4ce0ce94267914d6a376374bbaa56f507befb71377904f866c066f732cf349c8f1cfdf4b7d3bee0112a9d03e4e5a525d1d94a

Author: josecelano

src/lib/components/atoms/Slider.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Icon from '@iconify/svelte';
+
 	interface TitleObj {
 		title: string;
 		link: string;
@@ -9,38 +11,89 @@
 	}
 
 	let { titleArr = [] }: Props = $props();
+	let sliderContainer: HTMLElement;
+	let prevButton: HTMLElement;
+	let nextButton: HTMLElement;
+
+	function handlePrevClick() {
+		if (sliderContainer) {
+			sliderContainer.scrollLeft -= sliderContainer.offsetWidth;
+		}
+	}
+
+	function handleNextClick() {
+		if (sliderContainer) {
+			sliderContainer.scrollLeft += sliderContainer.offsetWidth;
+		}
+	}
 </script>
 
-<div class="slider-container">
-	{#each titleArr as item}
-		{#if item.link}
-			<a href={item.link} target="_blank" rel="noopener noreferrer">
-				<div class={item.link ? 'has-link' : ''}>
+<section class="slider">
+	<div class="button-group">
+		<button
+			class="pre-btn"
+			aria-label="Previous slide"
+			bind:this={prevButton}
+			onclick={handlePrevClick}
+		>
+			<Icon icon="fa6-solid:angle-left" />
+		</button>
+
+		<button
+			class="nxt-btn"
+			aria-label="Next slide"
+			bind:this={nextButton}
+			onclick={handleNextClick}
+		>
+			<Icon icon="fa6-solid:angle-right" />
+		</button>
+	</div>
+
+	<div class="slider-container" bind:this={sliderContainer}>
+		{#each titleArr as item (item)}
+			{#if item.link}
+				<a href={item.link} target="_blank" rel="noopener noreferrer">
+					<div class="slider-item has-link">
+						<p>{item.title}</p>
+					</div>
+				</a>
+			{:else}
+				<div class="slider-item">
 					<p>{item.title}</p>
 				</div>
-			</a>
-		{:else}
-			<div class={item.link ? 'has-link' : ''}>
-				<p>{item.title}</p>
-			</div>
-		{/if}
-	{/each}
-</div>
+			{/if}
+		{/each}
+	</div>
+</section>
 
 <style lang="scss">
+	@use '$lib/scss/breakpoints.scss' as bp;
+
+	.slider {
+		position: relative;
+		overflow: hidden;
+		padding-block: 20px;
+	}
+
 	.slider-container {
+		padding: 0 10vw;
 		display: flex;
-		gap: 1rem;
 		overflow-x: auto;
+		scroll-behavior: smooth;
+		gap: 1rem;
 		width: 100vw;
 		margin: 3rem 0rem 0 0rem;
-		padding-inline: 1.5rem;
+		padding-inline: 0rem;
 		padding-bottom: 1rem;
-		scroll-behavior: smooth;
 		box-sizing: border-box;
 		position: relative;
 		left: 0;
 
+		padding-left: 2rem;
+		transition:
+			margin 0.3s ease-out,
+			padding 0.3s ease-out;
+
 		div {
 			flex: 0 0 auto;
 			width: 280px;
@@ -72,4 +125,79 @@
 			font-size: 20px;
 		}
 	}
+
+	.slider-container {
+		// Firefox specific styling
+		scrollbar-width: thin;
+		scrollbar-color: rgba(255, 49, 0, 0.8) transparent;
+
+		@include bp.for-tablet-portrait-up {
+			&::-webkit-scrollbar {
+				display: none !important;
+			}
+			scrollbar-width: none !important;
+		}
+
+		&::-webkit-scrollbar {
+			width: 2px !important;
+			min-width: 2px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: rgba(255, 49, 0, 0.8);
+			border-radius: 10px;
+			width: 2px;
+			min-width: 2px;
+		}
+
+		&::-webkit-scrollbar-thumb:hover {
+			background: rgba(255, 49, 0, 0.8);
+		}
+	}
+
+	.button-group {
+		display: none;
+		opacity: 0;
+		transition: opacity 0.3s ease-in-out;
+		pointer-events: none;
+
+		@include bp.for-tablet-portrait-up {
+			display: flex;
+			justify-content: center;
+			gap: 1rem;
+		}
+
+		.slider:hover & {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+
+	.pre-btn,
+	.nxt-btn {
+		border: none;
+		width: 10vw;
+		height: 100%;
+		position: absolute;
+		top: 10px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0% 100%);
+		cursor: pointer;
+		z-index: 8;
+		font-size: 2em;
+	}
+
+	.pre-btn {
+		left: 0;
+	}
+
+	.nxt-btn {
+		right: 0;
+	}
 </style>

static/blogMetadata.json

@@ -1,29 +1,16 @@
 [
   {
-    "title": "Benchmarking the Torrust BitTorrent Tracker",
-    "slug": "benchmarking-the-torrust-bittorrent-tracker",
-    "contributor": "Jose Celano",
-    "contributorSlug": "jose-celano",
-    "date": "2024-03-19T00:00:00.000Z",
-    "coverImage": "/images/posts/benchmarking-the-torrust-bittorrent-tracker/benchmarking-the-torrust-bittorrent-tracker-banner.webp",
-    "excerpt": "In the ever-evolving landscape of BitTorrent technology, performance and scalability are paramount. Torrust stands at the forefront, offering a suite of open-source software products designed to enhance peer-to-peer file sharing. At the heart of this suite is the Torrust BitTorrent Tracker, a Rust-based engine crafted for efficiency and speed. This post will introduce you to the benchmarking tools we are using at the moment for the tracker.",
-    "tags": [
-      "Performance",
-      "Benchmarking"
-    ]
-  },
-  {
-    "title": "Deploying Torrust To Production",
-    "slug": "deploying-torrust-to-production",
+    "title": "Containerizing Rust Applications",
+    "slug": "containerizing-rust-applications-best-practices",
     "contributor": "Jose Celano",
     "contributorSlug": "jose-celano",
-    "date": "2023-12-20T00:00:00.000Z",
-    "coverImage": "/images/posts/deploying-torrust-to-production/deploy-torrust-to-a-digital-ocean-droplet.png",
-    "excerpt": "Dive into our step-by-step tutorial on deploying a BitTorrent Index and Tracker, written in Rust, on a Digital Ocean droplet. From initial server setup to advanced configurations, this guide is designed for both non-developers and tech-savvy users, ensuring a seamless, production-ready deployment.",
+    "date": "2023-11-09T12:08:04.295Z",
+    "coverImage": "/images/posts/rust-crab-carrying-a-shipping-container.jpeg",
+    "excerpt": "Torrust services (Tracker and Index) support docker, we want to ensure that contributors understand our containerfile and we also want to share good practices for containerizing Rust applications.",
     "tags": [
-      "Tutorial",
-      "Deployment",
-      "Production"
+      "Torrent",
+      "Tracker",
+      "BitTorrent"
     ]
   },
   {
@@ -41,20 +28,6 @@
       "Rust"
     ]
   },
-  {
-    "title": "Contributor Path",
-    "slug": "contributor-path",
-    "contributor": "Jose Celano",
-    "contributorSlug": "jose-celano",
-    "date": "2024-10-29T09:20:51.608Z",
-    "coverImage": "/images/posts/contributor-path/rust-crab-going-safe-into-water.webp",
-    "excerpt": "Ready to contribute to Torrust? Here's your guide to get started and make meaningful contributions, from small fixes to full-fledged features.",
-    "tags": [
-      "Community",
-      "Onboarding",
-      "Contributors"
-    ]
-  },
   {
     "title": "Hash2Torrent - Retrieve Torrent Files Effortlessly!",
     "slug": "hash2torrent-retrieve-torrent-files-effortlessly",
@@ -72,17 +45,31 @@
     ]
   },
   {
-    "title": "Containerizing Rust Applications",
-    "slug": "containerizing-rust-applications-best-practices",
+    "title": "Deploying Torrust To Production",
+    "slug": "deploying-torrust-to-production",
     "contributor": "Jose Celano",
     "contributorSlug": "jose-celano",
-    "date": "2023-11-09T12:08:04.295Z",
-    "coverImage": "/images/posts/rust-crab-carrying-a-shipping-container.jpeg",
-    "excerpt": "Torrust services (Tracker and Index) support docker, we want to ensure that contributors understand our containerfile and we also want to share good practices for containerizing Rust applications.",
+    "date": "2023-12-20T00:00:00.000Z",
+    "coverImage": "/images/posts/deploying-torrust-to-production/deploy-torrust-to-a-digital-ocean-droplet.png",
+    "excerpt": "Dive into our step-by-step tutorial on deploying a BitTorrent Index and Tracker, written in Rust, on a Digital Ocean droplet. From initial server setup to advanced configurations, this guide is designed for both non-developers and tech-savvy users, ensuring a seamless, production-ready deployment.",
     "tags": [
-      "Torrent",
-      "Tracker",
-      "BitTorrent"
+      "Tutorial",
+      "Deployment",
+      "Production"
+    ]
+  },
+  {
+    "title": "Contributor Path",
+    "slug": "contributor-path",
+    "contributor": "Jose Celano",
+    "contributorSlug": "jose-celano",
+    "date": "2024-10-29T09:20:51.608Z",
+    "coverImage": "/images/posts/contributor-path/rust-crab-going-safe-into-water.webp",
+    "excerpt": "Ready to contribute to Torrust? Here's your guide to get started and make meaningful contributions, from small fixes to full-fledged features.",
+    "tags": [
+      "Community",
+      "Onboarding",
+      "Contributors"
     ]
   },
   {
@@ -98,6 +85,19 @@
       "Announcement"
     ]
   },
+  {
+    "title": "Benchmarking the Torrust BitTorrent Tracker",
+    "slug": "benchmarking-the-torrust-bittorrent-tracker",
+    "contributor": "Jose Celano",
+    "contributorSlug": "jose-celano",
+    "date": "2024-03-19T00:00:00.000Z",
+    "coverImage": "/images/posts/benchmarking-the-torrust-bittorrent-tracker/benchmarking-the-torrust-bittorrent-tracker-banner.webp",
+    "excerpt": "In the ever-evolving landscape of BitTorrent technology, performance and scalability are paramount. Torrust stands at the forefront, offering a suite of open-source software products designed to enhance peer-to-peer file sharing. At the heart of this suite is the Torrust BitTorrent Tracker, a Rust-based engine crafted for efficiency and speed. This post will introduce you to the benchmarking tools we are using at the moment for the tracker.",
+    "tags": [
+      "Performance",
+      "Benchmarking"
+    ]
+  },
   {
     "title": "How To Contribute To This Site",
     "slug": "how-to-contribute-to-this-site",