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

rework/lightweight #12

Merged
GauthierWebDev merged 106 commits from rework/lightweight into main 2025-04-21 16:27:38 +00:00
Conversation 0 Commits 106 Files Changed 251 +15 -17
2 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 27c0c687b1 - Show all commits

7
app/layouts/DocsLayout.tsx
View File

@ -22,8 +22,11 @@ export function DocsLayout(props: DocsLayoutProps) {
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">
<article id="article-content">
<main
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
title={pageContext.exports.frontmatter?.title}
estimatedReadingTime={pageContext.exports.readingTime?.text}

25
app/partials/ReadProgressBar.tsx
View File

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