refactor: Remove SmoothScroll component from LayoutDefault

This commit is contained in:
Gauthier Daniels 2025-04-23 13:11:07 +02:00
parent e31401b403
commit b1e4a60fcc
3 changed files with 54 additions and 191 deletions

View File

@ -1,116 +0,0 @@
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 isElementScrollable = (element: HTMLElement) => {
if (!element) return false;
return (
element.scrollHeight > element.clientHeight && element.tagName !== "HTML"
);
};
const findScrollableParent = (element: HTMLElement) => {
let currentElement: HTMLElement | null = element;
while (currentElement) {
if (isElementScrollable(currentElement)) {
return currentElement;
}
currentElement = currentElement.parentElement;
}
return null;
};
const handleWheel = (event: WheelEvent) => {
if (isMobile()) return;
if (event.ctrlKey) return;
if (event.metaKey) return;
const hoveredElement = document.elementFromPoint(
event.clientX,
event.clientY,
) as HTMLElement;
if (findScrollableParent(hoveredElement)) {
if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
return;
}
event.preventDefault();
event.stopPropagation();
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>
);
}

View File

@ -1,7 +1,6 @@
import type { JSXElement } from "solid-js";
import { usePageContext } from "vike-solid/usePageContext";
import { SmoothScroll } from "@/components/SmoothScroll";
import { HeroSection } from "@/partials/HeroSection";
import { clientOnly } from "vike-solid/clientOnly";
import { Navigation } from "@/partials/Navigation";
@ -12,9 +11,7 @@ import { Toaster } from "solid-toast";
import "./tailwind.css";
const ReadProgressBar = clientOnly(
async () => (await import("@/partials/ReadProgressBar")).ReadProgressBar,
);
const ReadProgressBar = clientOnly(async () => (await import("@/partials/ReadProgressBar")).ReadProgressBar);
type DefaultLayoutProps = {
children: JSXElement;
@ -25,7 +22,6 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
return (
<>
<SmoothScroll class="flex w-full flex-col font-sans">
<Header />
<ReadProgressBar />
@ -47,8 +43,6 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
</div>
<Footer />
</SmoothScroll>
<Toaster />
</>
);

View File

@ -25,35 +25,20 @@ const __dirname = path.resolve();
export default defineConfig({
plugins: [
prismjsVitePlugin({
languages: [
"javascript",
"typescript",
"tsx",
"jsx",
"css",
"html",
"bash",
"nginx",
],
languages: ["javascript", "typescript", "tsx", "jsx", "css", "html", "bash", "nginx", "sql"],
}),
vike(),
vikeSolid(),
mdx({
jsxImportSource: "solid-jsx",
remarkPlugins: [
remarkFrontmatter,
remarkHeadingId,
remarkExtractFrontmatter,
],
remarkPlugins: [remarkFrontmatter, remarkHeadingId, remarkExtractFrontmatter],
}),
tailwindcss(),
telefunc(),
],
css: {
postcss: {
plugins: [
...(process.env.NODE_ENV === "production" ? [removeCommentRules] : []),
],
plugins: [...(process.env.NODE_ENV === "production" ? [removeCommentRules] : [])],
},
},
build: {