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

style: Update class attribute to id in DocsLayout

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-21 16:56:12 +02:00
parent 6e7eeb7dc0
commit 27c0c687b1
2 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/layouts/DocsLayout.tsx
View File

@ -22,8 +22,11 @@ export function DocsLayout(props: DocsLayoutProps) {
return ( return (
<> <>
<main class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow"> <main
<article id="article-content"> id="article-content"
class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow"
>
<article>
<DocsHeader <DocsHeader
title={pageContext.exports.frontmatter?.title} title={pageContext.exports.frontmatter?.title}
estimatedReadingTime={pageContext.exports.readingTime?.text} estimatedReadingTime={pageContext.exports.readingTime?.text}

25
app/partials/ReadProgressBar.tsx
View File

@ -9,24 +9,17 @@ export function ReadProgressBar() {
const handleScroll = () => { const handleScroll = () => {
const articleHeight = articleContentElement.scrollHeight; const articleHeight = articleContentElement.scrollHeight;
const articleTopPosition = const topPosition = articleContentElement.getBoundingClientRect().top;
articleContentElement.getBoundingClientRect().top;
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
// Calculer la hauteur visible de l'élément dans la fenêtre if (articleHeight <= windowHeight) {
const visibleHeight = Math.min( setWidth("100%");
articleHeight, return;
windowHeight + articleTopPosition, }
);
// Calculer la position de défilement relative à l'élément const elementScrollTop = -topPosition;
const elementScrollTop = -articleTopPosition; const scrollableHeight = articleHeight - windowHeight;
const percentage = (elementScrollTop / scrollableHeight) * 100;
// Calculer le pourcentage de défilement relatif à l'élément
const percentage =
(elementScrollTop / (articleHeight - windowHeight)) * 100;
// Limiter le pourcentage entre 0 et 100
const clampedPercentage = Math.max(0, Math.min(100, percentage)); const clampedPercentage = Math.max(0, Math.min(100, percentage));
setWidth(`${clampedPercentage}%`); setWidth(`${clampedPercentage}%`);
@ -34,11 +27,13 @@ export function ReadProgressBar() {
createEffect(() => { createEffect(() => {
window.addEventListener("scroll", handleScroll); window.addEventListener("scroll", handleScroll);
window.addEventListener("resize", handleScroll);
handleScroll(); handleScroll();
return () => { return () => {
window.removeEventListener("scroll", handleScroll); window.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleScroll);
}; };
}); });