diff --git a/app/components/SmoothScroll.tsx b/app/components/SmoothScroll.tsx deleted file mode 100644 index f2267e9..0000000 --- a/app/components/SmoothScroll.tsx +++ /dev/null @@ -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 ( -
- {props.children} -
- ); -} diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx index 19c6858..0a4c944 100755 --- a/app/layouts/LayoutDefault.tsx +++ b/app/layouts/LayoutDefault.tsx @@ -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,44 +11,39 @@ 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; + children: JSXElement; }; export default function DefaultLayout(props: DefaultLayoutProps) { - const pageContext = usePageContext(); + const pageContext = usePageContext(); - return ( - <> - -
- + return ( + <> +
+ - {pageContext.urlPathname === "/" && } + {pageContext.urlPathname === "/" && } -
-