GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Remove SmoothScroll component from LayoutDefault #21

Merged
GauthierWebDev merged 1 commits from fix/scroll into main 2025-04-23 11:11:34 +00:00
Conversation 0 Commits 1 Files Changed 3 +54 -191
3 changed files with 54 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
app/components/SmoothScroll.tsx
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>
);
}

56
app/layouts/LayoutDefault.tsx
View File

@ -1,7 +1,6 @@
import type { JSXElement } from "solid-js"; import type { JSXElement } from "solid-js";
import { usePageContext } from "vike-solid/usePageContext"; import { usePageContext } from "vike-solid/usePageContext";
import { SmoothScroll } from "@/components/SmoothScroll";
import { HeroSection } from "@/partials/HeroSection"; import { HeroSection } from "@/partials/HeroSection";
import { clientOnly } from "vike-solid/clientOnly"; import { clientOnly } from "vike-solid/clientOnly";
import { Navigation } from "@/partials/Navigation"; import { Navigation } from "@/partials/Navigation";
@ -12,44 +11,39 @@ import { Toaster } from "solid-toast";
import "./tailwind.css"; import "./tailwind.css";
const ReadProgressBar = clientOnly( const ReadProgressBar = clientOnly(async () => (await import("@/partials/ReadProgressBar")).ReadProgressBar);
async () => (await import("@/partials/ReadProgressBar")).ReadProgressBar,
);
type DefaultLayoutProps = { type DefaultLayoutProps = {
children: JSXElement; children: JSXElement;
}; };
export default function DefaultLayout(props: DefaultLayoutProps) { export default function DefaultLayout(props: DefaultLayoutProps) {
const pageContext = usePageContext(); const pageContext = usePageContext();
return ( return (
<> <>
<SmoothScroll class="flex w-full flex-col font-sans"> <Header />
<Header /> <ReadProgressBar />
<ReadProgressBar />
{pageContext.urlPathname === "/" && <HeroSection />} {pageContext.urlPathname === "/" && <HeroSection />}
<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12"> <div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
<div class="hidden lg:relative lg:block lg:flex-none"> <div class="hidden lg:relative lg:block lg:flex-none">
<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" /> <div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800" /> <div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800" />
<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800" /> <div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800" />
<div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16"> <div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16">
<Navigation /> <Navigation />
</div> </div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<DocsLayout>{props.children}</DocsLayout> <DocsLayout>{props.children}</DocsLayout>
</div> </div>
</div> </div>
<Footer /> <Footer />
</SmoothScroll> <Toaster />
</>
<Toaster /> );
</>
);
} }

73
app/vite.config.ts
View File

@ -15,53 +15,38 @@ import path from "node:path";
type RemoveCommentRules = (root: Root) => void; type RemoveCommentRules = (root: Root) => void;
const removeCommentRules: RemoveCommentRules = (root) => { const removeCommentRules: RemoveCommentRules = (root) => {
root.walkComments((comment) => { root.walkComments((comment) => {
comment.remove(); comment.remove();
}); });
}; };
const __dirname = path.resolve(); const __dirname = path.resolve();
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
prismjsVitePlugin({ prismjsVitePlugin({
languages: [ languages: ["javascript", "typescript", "tsx", "jsx", "css", "html", "bash", "nginx", "sql"],
"javascript", }),
"typescript", vike(),
"tsx", vikeSolid(),
"jsx", mdx({
"css", jsxImportSource: "solid-jsx",
"html", remarkPlugins: [remarkFrontmatter, remarkHeadingId, remarkExtractFrontmatter],
"bash", }),
"nginx", tailwindcss(),
], telefunc(),
}), ],
vike(), css: {
vikeSolid(), postcss: {
mdx({ plugins: [...(process.env.NODE_ENV === "production" ? [removeCommentRules] : [])],
jsxImportSource: "solid-jsx", },
remarkPlugins: [ },
remarkFrontmatter, build: {
remarkHeadingId, target: "es2022",
remarkExtractFrontmatter, },
], resolve: {
}), alias: {
tailwindcss(), "@": __dirname,
telefunc(), },
], },
css: {
postcss: {
plugins: [
...(process.env.NODE_ENV === "production" ? [removeCommentRules] : []),
],
},
},
build: {
target: "es2022",
},
resolve: {
alias: {
"@": __dirname,
},
},
}); });