move to Base layout, use position absolute, Explore list broken

Author: nemanjam

src/components/Footer.astro

@@ -2,7 +2,6 @@
 import { Icon } from 'astro-icon/components';
 
 import Link from '@/components/Link.astro';
-import ScrollToTop from '@/components/react/ScrollToTop';
 import { ROUTES } from '@/constants/routes';
 import { CONFIG } from '@/config';
 import { getLatestCommitInfo } from '@/libs/git';
@@ -79,8 +78,4 @@ const trimmedMessage = limitString(message, messageLength);
       </ul>
     </div>
   </div>
-
-  <ScrollToTop client:only="react">
-    <Icon name="mdi:arrow-up-thin" class="h-10 w-10 text-content hover:text-links-hover" />
-  </ScrollToTop>
 </footer>

src/components/react/ScrollToTop.tsx

@@ -1,15 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 
-import { SELECTORS } from '@/constants/dom';
-
 import type { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;
 }
 
-const { GISCUS_IFRAME_SELECTOR, GISCUS_WIDGET_SELECTOR } = SELECTORS;
-
 const fixedClasses = ['opacity-1', 'translate-y-0'];
 const hiddenClasses = ['opacity-0', 'translate-y-full'];
 
@@ -24,24 +20,22 @@ const hideLink = (linkRef: React.RefObject<HTMLAnchorElement>): void => {
 };
 
 const getHalfViewportHeight = (window: Window) => Math.floor(window.innerHeight / 2);
-const getDocumentScrollHeight = (document: Document) => document.documentElement.scrollHeight;
 
 const ScrollToTop: React.FC<Props> = ({ children }) => {
   const linkRef = useRef<HTMLAnchorElement>(null);
   const topRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
 
   const [height, setHeight] = useState(getHalfViewportHeight(window));
-  const [scrollHeight, setScrollHeight] = useState(getDocumentScrollHeight(document));
-
-  console.log('height', height, 'scrollHeight', scrollHeight);
 
   useEffect(() => {
     const callback: IntersectionObserverCallback = (entries) => {
-      const isAtTopOrBottom = entries.every((entry) => !entry.isIntersecting);
+      const isAtTopOrBottom = entries.some((entry) => entry.isIntersecting);
+
+      console.log('isAtTopOrBottom', isAtTopOrBottom);
 
       if (linkRef.current) {
-        isAtTopOrBottom ? showLink(linkRef) : hideLink(linkRef);
+        isAtTopOrBottom ? hideLink(linkRef) : showLink(linkRef);
       }
     };
 
@@ -55,31 +49,6 @@ const ScrollToTop: React.FC<Props> = ({ children }) => {
     };
   }, []);
 
-  useEffect(() => {
-    const shadowHost = document.querySelector(GISCUS_WIDGET_SELECTOR);
-    const shadowRoot = shadowHost?.shadowRoot;
-    if (!shadowRoot) return;
-
-    const iframe = shadowRoot.querySelector(GISCUS_IFRAME_SELECTOR) as HTMLIFrameElement;
-
-    console.log('iframe', iframe);
-    if (!iframe) return;
-
-    console.log('updated scrollHeight', scrollHeight);
-
-    let timer: NodeJS.Timeout;
-    const handleLoad = () =>
-      (timer = setTimeout(() => setScrollHeight(getDocumentScrollHeight(document)), 3000));
-
-    // not onLoad but MutationObserver to lose class="loading"
-    iframe.addEventListener('load', handleLoad);
-
-    return () => {
-      clearTimeout(timer);
-      window.removeEventListener('load', handleLoad);
-    };
-  }, []);
-
   // on resize only, vertical...?
   useEffect(() => {
     const handleResize = () => {
@@ -102,8 +71,8 @@ const ScrollToTop: React.FC<Props> = ({ children }) => {
       />
       <div
         ref={bottomRef}
-        className="pointer-events-none absolute w-10 bg-blue-500"
-        style={{ height: `${height}px`, top: `${scrollHeight - height}px` }}
+        className="pointer-events-none absolute bottom-0 w-10 bg-blue-500"
+        style={{ height: `${height}px` }}
       />
       <a
         ref={linkRef}

src/layouts/Base.astro

@@ -1,7 +1,10 @@
 ---
+import { Icon } from 'astro-icon/components';
+
 import BaseHead from '@/components/BaseHead.astro';
 import Footer from '@/components/Footer.astro';
 import Header from '@/components/Header.astro';
+import ScrollToTop from '@/components/react/ScrollToTop';
 // import { Snackbar } from '@/components/Snackbar';
 import ThemeScript from '@/components/ThemeScript.astro';
 
@@ -14,11 +17,16 @@ const { metadata } = Astro.props as BaseProps;
 
 <html lang="en">
   <BaseHead {metadata} />
-  <body class="flex flex-col min-h-screen bg-base-100 transition-colors duration-500">
+  <body class="relative flex flex-col min-h-screen bg-base-100 transition-colors duration-500">
     <Header />
     <slot />
     <Footer />
     {/* <Snackbar client:idle /> */}
+
+    <ScrollToTop client:only="react">
+      <Icon name="mdi:arrow-up-thin" class="h-10 w-10 text-content hover:text-links-hover" />
+    </ScrollToTop>
+
     <ThemeScript />
   </body>
 </html>