From b3afa6615b7713879309407f8d0915c1fb9b460d Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Mon, 21 Apr 2025 17:31:11 +0200
Subject: [PATCH] feat: Add SmoothScroll component

---
 app/components/SmoothScroll.tsx  | 80 ++++++++++++++++++++++++++++++++
 app/components/Snippet.tsx       |  2 +-
 app/layouts/DocsLayout.tsx       |  1 -
 app/layouts/LayoutDefault.tsx    |  5 +-
 app/partials/ReadProgressBar.tsx |  2 +-
 5 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 app/components/SmoothScroll.tsx

diff --git a/app/components/SmoothScroll.tsx b/app/components/SmoothScroll.tsx
new file mode 100644
index 0000000..8a5cc45
--- /dev/null
+++ b/app/components/SmoothScroll.tsx
@@ -0,0 +1,80 @@
+import type { JSX } from "solid-js";
+import { createSignal, onCleanup } from "solid-js";
+
+type SmoothScrollProps = JSX.IntrinsicElements["div"] & {
+	children: JSX.Element;
+};
+
+export function SmoothScroll(props: SmoothScrollProps) {
+	const [isScrolling, setIsScrolling] = createSignal(false);
+	let animationFrameId: number | null = null;
+
+	const easeOutQuad = (t: number, b: number, c: number, d: number) => {
+		const time = t / d;
+		return -c * time * (time - 2) + b;
+	};
+
+	const smoothScroll = (deltaY: number) => {
+		const scrollSpeed = 3;
+		const currentScroll = window.scrollY;
+		const targetScroll = deltaY * scrollSpeed;
+		const duration = 300;
+		const startTime = performance.now();
+
+		const animateScroll = (currentTime: number) => {
+			const elapsedTime = currentTime - startTime;
+			const ease = easeOutQuad(
+				elapsedTime,
+				currentScroll,
+				targetScroll,
+				duration,
+			);
+
+			window.scrollTo(0, ease);
+
+			if (elapsedTime < duration) {
+				animationFrameId = requestAnimationFrame(animateScroll);
+			} else {
+				setIsScrolling(false);
+			}
+		};
+
+		animationFrameId = requestAnimationFrame(animateScroll);
+	};
+
+	const isMobile = () => {
+		const regex =
+			/Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+		return regex.test(navigator.userAgent);
+	};
+
+	const handleWheel = (event: WheelEvent) => {
+		if (isMobile()) return;
+
+		event.preventDefault();
+		if (isScrolling()) {
+			if (animationFrameId !== null) {
+				cancelAnimationFrame(animationFrameId);
+			}
+		}
+
+		requestAnimationFrame(() => {
+			smoothScroll(event.deltaY);
+			setIsScrolling(false);
+		});
+
+		setIsScrolling(true);
+	};
+
+	onCleanup(() => {
+		if (animationFrameId !== null) {
+			cancelAnimationFrame(animationFrameId);
+		}
+	});
+
+	return (
+		<div {...props} onWheel={handleWheel} style={{ "touch-action": "auto" }}>
+			{props.children}
+		</div>
+	);
+}
diff --git a/app/components/Snippet.tsx b/app/components/Snippet.tsx
index e799a33..bb8efbb 100644
--- a/app/components/Snippet.tsx
+++ b/app/components/Snippet.tsx
@@ -68,7 +68,7 @@ export function Snippet(props: SnippetProps) {
 			<div class="pt-4 pl-4">
 				<TrafficLightsIcon class="h-2.5 w-auto stroke-slate-500/30" />
 
-				<div class="mt-4 flex space-x-2 text-xs">
+				<div class="mt-4 flex space-x-2 text-xs overflow-x-auto">
 					<For each={props.snippets}>
 						{(tab) => (
 							<div
diff --git a/app/layouts/DocsLayout.tsx b/app/layouts/DocsLayout.tsx
index 9ca584d..1eee27d 100644
--- a/app/layouts/DocsLayout.tsx
+++ b/app/layouts/DocsLayout.tsx
@@ -1,6 +1,5 @@
 import type { JSXElement } from "solid-js";
 
-// import { TableOfContents } from "@/partials/TableOfContents";
 import { PrevNextLinks } from "@/components/PrevNextLinks";
 import { usePageContext } from "vike-solid/usePageContext";
 import { clientOnly } from "vike-solid/clientOnly";
diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx
index 7032c31..7dbd8d4 100755
--- a/app/layouts/LayoutDefault.tsx
+++ b/app/layouts/LayoutDefault.tsx
@@ -1,6 +1,7 @@
 import type { JSXElement } from "solid-js";
 
 import { usePageContext } from "vike-solid/usePageContext";
+import { SmoothScroll } from "@/components/SmoothScroll";
 import { HeroSection } from "@/partials/HeroSection";
 import { Navigation } from "@/partials/Navigation";
 import { clientOnly } from "vike-solid/clientOnly";
@@ -24,7 +25,7 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 
 	return (
 		<>
-			<div class="flex w-full flex-col font-sans">
+			<SmoothScroll class="flex w-full flex-col font-sans">
 				<Header />
 				<ReadProgressBar />
 
@@ -43,7 +44,7 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 				</div>
 
 				<Footer />
-			</div>
+			</SmoothScroll>
 
 			<Toaster />
 		</>
diff --git a/app/partials/ReadProgressBar.tsx b/app/partials/ReadProgressBar.tsx
index e1f807e..3b0d51e 100644
--- a/app/partials/ReadProgressBar.tsx
+++ b/app/partials/ReadProgressBar.tsx
@@ -43,7 +43,7 @@ export function ReadProgressBar() {
 			class="sticky inset-x-0 top-20 z-50 h-1 w-full bg-violet-50"
 		>
 			<div
-				class="bg-violet-300 h-full transition-all duration-75"
+				class="bg-violet-300 h-full transition-all duration-300 ease-in-out"
 				style={{ width: width() }}
 			/>
 		</div>