feat: add new responsive css and logic for like and share buttons on blogposts

Author: ujjwalvivek

analytics-worker/src/worker.js

@@ -565,6 +565,101 @@ async function getAnalyticsFromR2(env, startDate, endDate) {
   };
 }
 
+// Handle blog like count requests
+async function handleBlogLikeCount(request, env, dynamicCorsHeaders = corsHeaders) {
+  try {
+    const url = new URL(request.url);
+    const pathParts = url.pathname.split('/');
+    
+    // Extract post ID from /api/blog/{postId}/likes
+    if (pathParts.length !== 5 || pathParts[1] !== 'api' || pathParts[2] !== 'blog' || pathParts[4] !== 'likes') {
+      return new Response('Invalid blog likes endpoint format', { 
+        status: 400,
+        headers: dynamicCorsHeaders 
+      });
+    }
+    
+    const postId = decodeURIComponent(pathParts[3]);
+    console.log('Fetching like count for post:', postId);
+    
+    // Query R2 for blog engagement events for this post
+    const bucket = env.ANALYTICS_BUCKET;
+    if (!bucket) {
+      console.error('R2 bucket not configured');
+      return new Response(JSON.stringify({ likes: 0, error: 'Storage not configured' }), { 
+        headers: { 
+          'Content-Type': 'application/json',
+          ...dynamicCorsHeaders 
+        } 
+      });
+    }
+    
+    // List all analytics files to find blog engagement events
+    let likeCount = 0;
+    try {
+      const objects = await bucket.list({ prefix: 'analytics/' });
+      
+      for (const obj of objects.objects) {
+        try {
+          const eventFile = await bucket.get(obj.key);
+          if (eventFile) {
+            const eventText = await eventFile.text();
+            const events = eventText.split('\n').filter(line => line.trim());
+            
+            for (const eventLine of events) {
+              try {
+                const event = JSON.parse(eventLine);
+                
+                // Count 'like' events for this specific post
+                if (event.type === 'blog_engagement' && 
+                    event.action === 'like' && 
+                    event.postId === postId) {
+                  likeCount++;
+                }
+              } catch (parseError) {
+                // Skip invalid JSON lines
+                continue;
+              }
+            }
+          }
+        } catch (fileError) {
+          // Skip files we can't read
+          console.log('Could not read file:', obj.key, fileError.message);
+          continue;
+        }
+      }
+    } catch (listError) {
+      console.error('Error querying R2 for like count:', listError);
+      // Return 0 likes if we can't query the storage
+    }
+    
+    console.log(`Found ${likeCount} likes for post: ${postId}`);
+    
+    return new Response(JSON.stringify({ 
+      likes: likeCount,
+      postId: postId 
+    }), { 
+      headers: { 
+        'Content-Type': 'application/json',
+        ...dynamicCorsHeaders 
+      } 
+    });
+    
+  } catch (error) {
+    console.error('Blog like count error:', error);
+    return new Response(JSON.stringify({ 
+      likes: 0, 
+      error: 'Internal server error' 
+    }), { 
+      status: 500,
+      headers: { 
+        'Content-Type': 'application/json',
+        ...dynamicCorsHeaders 
+      } 
+    });
+  }
+}
+
 const worker = {
   async fetch(request, env) {
     const url = new URL(request.url);
@@ -586,6 +681,9 @@ const worker = {
     } else if (url.pathname === '/api/dashboard' && request.method === 'GET') {
       // Dashboard data endpoint (future feature)
       return new Response('Dashboard API endpoint', { headers: dynamicCorsHeaders });
+    } else if (url.pathname.startsWith('/api/blog/') && url.pathname.endsWith('/likes') && request.method === 'GET') {
+      // Blog like count endpoint
+      return handleBlogLikeCount(request, env, dynamicCorsHeaders);
     } else {
       return new Response('Not found', { 
         status: 404,

public/index.html

@@ -14,7 +14,7 @@
     object-src 'none'; 
     img-src 'self' data: https://cdn.ujjwalvivek.com https://images.unsplash.com; 
     font-src 'self' https://fonts.gstatic.com; 
-    connect-src 'self' https://challenges.cloudflare.com https://*.cloudflare.com https://api.github.com https://cdn.ujjwalvivek.com https://api.emailjs.com https://analytics.ujjwalvivek.com/api; 
+    connect-src 'self' https://challenges.cloudflare.com https://*.cloudflare.com https://api.github.com https://api.github.com/* https://cdn.ujjwalvivek.com https://api.emailjs.com https://analytics.ujjwalvivek.com; 
     frame-src https://challenges.cloudflare.com https://*.notion.site https://www.youtube.com https://www.youtube-nocookie.com;
     worker-src 'self' blob:;"
   />

public/posts/ideas.md

@@ -1,11 +1,10 @@
 ## 📅 v1.4 Target Changelog (WIP)
 
 #### Ongoing
-* [x] Custom made Analytics software, with a focus on privacy and performance. `Architecture planned, implementation ready`
-* [ ] update look and feel with some advanced css features.
-* [ ] Revisit UX of the website.
 
 #### Optional
+* [ ] update look and feel with some advanced css features.
+* [ ] Revisit UX of the website.
 * [ ] Editable customised shortcut keys.
 * [ ] Bundle some cool npm packages
 
@@ -33,4 +32,5 @@
          `Make it feel like sending a message through a shell (how to embed subject and body in mailto?)`
 * [x] Project sorting (opinionated) and search functionality - via commandpalette.
 * [x] Terminal command palette - Ctrl+K style navigation across your whole site (optional)
-* [x] Shortcuts Overlay with a helper toast
+* [x] Shortcuts Overlay with a helper toast
+* [x] Custom made Analytics software, with a focus on privacy and performance. `Architecture planned, implementation ready`

public/posts/log_0000_boot_sequence.md

@@ -163,7 +163,7 @@ But because abandoned builds taught my brain:
 I didn't want to be that guy anymore.
 So I pushed. Not because it's perfect, but because it's mine.
 
-<Note title="This is not a 2-week build."> This is a **two-year transformation log** disguised as a terminal vibe. </Note>
+This is a **two-year transformation log** disguised as a terminal vibe.
 
 ```javascript
 > deploy  

src/components/Pages/Blog/Blog.module.css

@@ -46,6 +46,121 @@
   box-shadow: 0 2px 4px rgba(var(--background-color-rgb), 0.2);
 }
 
+.copyButton:hover {
+  background: var(--background-color);
+  color: var(--primary-color);
+  transform: translateY(-1px);
+}
+
+/* Blog Actions Styles */
+.blogActions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  position: relative;
+  font-family: var(--font-mono);
+}
+
+.actionButton {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  color: var(--text-color);
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.actionButton:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.likeButton:hover {
+  color: var(--status-ram-color);
+  opacity: 1;
+}
+
+.likeButton.liked {
+  color: var(--status-ram-color);
+}
+
+.likeButton.liked:hover {
+  opacity: 0.9;
+  transform: none;
+  cursor: not-allowed;
+  color: var(--status-ram-color);
+}
+
+.shareButton {
+  background: transparent;
+  border-color: none;
+  opacity: 0.8;
+}
+
+.shareButton:hover {
+  color: var(--status-warn-color);
+  opacity: 1;
+}
+
+.buttonIcon {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+/* Copy Notification */
+.copyNotification {
+  position: absolute;
+  top: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+  backdrop-filter: blur(32px) saturate(180%);
+  -webkit-backdrop-filter: blur(32px) saturate(180%);
+  background: rgba(var(--background-color-rgb), 0.3);  color: var(--background-color);
+  padding: 0.5rem 1rem;
+  border-radius: 2px;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  animation: slideInBounce 0.4s ease-out;
+  z-index: 100;
+  color: var(--text-color);
+}
+
+.notificationText {
+  white-space: nowrap;
+}
+
+@keyframes slideInBounce {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  60% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes sparkle {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  25% { transform: scale(1.2) rotate(90deg); }
+  50% { transform: scale(1.1) rotate(180deg); }
+  75% { transform: scale(1.2) rotate(270deg); }
+}
+
 .copyButton:hover {
   background: var(--background-color);
   transform: translateY(-1px);

src/components/Pages/Blog/BlogPost.js

@@ -21,6 +21,8 @@ import { BsFillPencilFill, BsFillInfoSquareFill } from "react-icons/bs";
 import { MdDangerous } from "react-icons/md";
 import { AiTwotoneStar } from "react-icons/ai";
 import { useBlogAnalytics } from '../../../hooks/useAnalytics';
+import { AiFillLike, AiOutlineLike  } from "react-icons/ai";
+import { FaShare } from "react-icons/fa";
 
 // Simple reading time calculation function
 const calculateReadingTime = (text) => {
@@ -146,8 +148,32 @@ const BlogPost = () => {
   const postId = post.data?.id || filename;
   const postTitle = post.data?.title || 'Loading...';
 
-  const { trackLike, trackShare, hasLiked, hasShared } = useBlogAnalytics(postId, postTitle);
+  const { trackLike, trackShare, hasLiked } = useBlogAnalytics(postId, postTitle);
 
+  // State for copy notification
+  const [showCopyNotification, setShowCopyNotification] = useState(false);
+
+
+  // Function to copy blog link and show notification
+  const handleShare = async () => {
+    const blogUrl = `${window.location.origin}/blog/${filename}`;
+    
+    try {
+      await navigator.clipboard.writeText(blogUrl);
+      setShowCopyNotification(true);
+      trackShare('clipboard');
+      
+      // Hide notification after 3 seconds
+      setTimeout(() => {
+        setShowCopyNotification(false);
+      }, 3000);
+    } catch (error) {
+      console.error('Failed to copy:', error);
+      // Fallback: show URL in a prompt for manual copy
+      prompt('Copy this URL:', blogUrl);
+      trackShare('manual');
+    }
+  };
 
   useEffect(() => {
     const fetchPost = async () => {
@@ -268,21 +294,45 @@ const BlogPost = () => {
               {post.content}
             </ReactMarkdown>
           </div>
+          <div className={styles.blogActions}>
+            <button 
+              className={`${styles.actionButton} ${styles.likeButton} ${hasLiked ? styles.liked : ''}`}
+              onClick={trackLike} 
+              disabled={hasLiked}
+              title={hasLiked ? "You've already liked this post!" : "Like this post!"}
+            >
+              <span className={styles.buttonIcon}>
+                {hasLiked ? <AiFillLike /> : <AiOutlineLike />}
+              </span>
+            </button>
+            
+            <button 
+              className={`${styles.actionButton} ${styles.shareButton}`}
+              onClick={handleShare}
+              title="Copy link to clipboard"
+            >
+              <span className={styles.buttonIcon}>
+                <FaShare />
+              </span>
+            </button>
+
+            {/* Copy notification */}
+            {showCopyNotification && (
+              <div className={styles.copyNotification}>
+                <span className={styles.notificationText}>
+                  Copied to clipboard!
+                </span>
+              </div>
+            )}
+          </div>
           <div className={styles.authorSignature}>
             <p>
               <strong>Vivek</strong> crafting systems,
               <br />
               one line at a time.
             </p>
           </div>
-          <div className={styles.blogActions}>
-  <button onClick={trackLike} disabled={hasLiked} style={{opacity: hasLiked ? 0.5 : 1}}>
-    {hasLiked ? '👍 Liked!' : '👍 Like'}
-  </button>
-  <button onClick={() => trackShare('manual')} disabled={hasShared} style={{opacity: hasShared ? 0.5 : 1}}>
-    {hasShared ? '🔗 Shared!' : '🔗 Share'}
-  </button>
-</div>
+          
           <br />
           <RelatedPosts posts={relatedPosts} />
         </div>