cards again

Author: fezcode

src/components/PostMetadata.js

@@ -1,11 +1,19 @@
 import React from 'react';
 import Label from './Label';
 
-const PostMetadata = ({ metadata }) => {
+const PostMetadata = ({ metadata, readingProgress, isAtTop }) => {
   if (!metadata) {
     return null;
   }
 
+  const handleButtonClick = () => {
+    if (isAtTop) {
+      window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
   return (
     <aside className="sticky top-24">
       <div className="p-6 bg-gray-800/50 rounded-lg border border-gray-700/50">
@@ -32,6 +40,20 @@ const PostMetadata = ({ metadata }) => {
             </div>
           )}
         </div>
+        <div className="mt-6">
+          <Label className="mb-1">Reading Progress</Label>
+          <div className="w-full bg-gray-700 rounded-full h-2.5 mt-2">
+            <div className="bg-primary-500 h-2.5 rounded-full" style={{width: `${readingProgress}%`}}></div>
+          </div>
+        </div>
+        <div className="mt-6 text-center">
+          <button
+            onClick={handleButtonClick}
+            className="text-primary-400 hover:text-primary-500 transition-colors text-sm font-medium flex items-center justify-center w-full py-2 rounded-md bg-gray-700/50 hover:bg-gray-700"
+          >
+            <span className="mr-1">{isAtTop ? '↓' : '↑'}</span> {isAtTop ? 'To the bottom' : 'To the top'}
+          </button>
+        </div>
       </div>
     </aside>
   );

src/pages/BlogPostPage.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import fm from 'front-matter';
@@ -8,6 +8,9 @@ const BlogPostPage = () => {
   const { slug } = useParams();
   const [post, setPost] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [readingProgress, setReadingProgress] = useState(0);
+  const [isAtTop, setIsAtTop] = useState(true); // New state for tracking if at top
+  const contentRef = useRef(null);
 
   useEffect(() => {
     const fetchPost = async () => {
@@ -31,6 +34,21 @@ const BlogPostPage = () => {
     fetchPost();
   }, [slug]);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      if (contentRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
+        const totalHeight = scrollHeight - clientHeight;
+        const currentProgress = (scrollTop / totalHeight) * 100;
+        setReadingProgress(currentProgress);
+        setIsAtTop(scrollTop === 0); // Update isAtTop based on scroll position
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [post]); // Re-attach scroll listener if post changes
+
   if (loading) {
     return <div className="text-center py-16">Loading...</div>;
   }
@@ -47,12 +65,12 @@ const BlogPostPage = () => {
             <Link to="/blog" className="text-primary-400 hover:text-primary-500 transition-colors mb-8 block">
               &larr; Back to Blog
             </Link>
-            <div className="prose prose-xl prose-dark max-w-none">
+            <div ref={contentRef} className="prose prose-xl prose-dark max-w-none">
               <ReactMarkdown>{post.body}</ReactMarkdown>
             </div>
           </div>
           <div className="hidden lg:block">
-            <PostMetadata metadata={post.attributes} />
+            <PostMetadata metadata={post.attributes} readingProgress={readingProgress} isAtTop={isAtTop} />
           </div>
         </div>
       </div>