Merge branch 'main' into github-action-bot-spamming-limit

Author: Ayush4958

app/api/notify/route.test.ts

@@ -95,4 +95,43 @@ describe('GET /api/notify', () => {
     const res = await GET(makeRequest('GET', undefined, 'user=testuser'));
     expect(res.status).toBe(200);
   });
+
+  it('masks the email address in GET responses to prevent PII exposure', async () => {
+    vi.mocked(Notification.findOne).mockResolvedValue({
+      username: 'testuser',
+      email: 'john.doe@gmail.com',
+      frequency: 'weekly',
+      notifyOnCommit: true,
+      notifyOnStreak: false,
+      notifyOnMilestone: true,
+    } as never);
+
+    const res = await GET(makeRequest('GET', undefined, 'user=testuser'));
+    const body = await res.json();
+
+    expect(res.status).toBe(200);
+    // Assert the exact masked output for a known input
+    expect(body.data.email).toBe('jo***@gm***.com');
+    // The full email must never be returned
+    expect(body.data.email).not.toBe('john.doe@gmail.com');
+  });
+
+  it('masks emails without a TLD dot correctly (no trailing dot)', async () => {
+    vi.mocked(Notification.findOne).mockResolvedValue({
+      username: 'localuser',
+      email: 'admin@localhost',
+      frequency: 'daily',
+      notifyOnCommit: true,
+      notifyOnStreak: true,
+      notifyOnMilestone: true,
+    } as never);
+
+    const res = await GET(makeRequest('GET', undefined, 'user=localuser'));
+    const body = await res.json();
+
+    expect(res.status).toBe(200);
+    expect(body.data.email).toBe('ad***@lo***');
+    // Must not have a trailing dot
+    expect(body.data.email.endsWith('.')).toBe(false);
+  });
 });

app/api/notify/route.ts

@@ -3,6 +3,31 @@ import dbConnect from '@/lib/mongodb';
 import { Notification } from '@/models/Notification';
 import { NotificationPayload, NotificationResponse } from '@/types/index';
 
+/**
+ * Masks an email address to prevent PII exposure in unauthenticated responses.
+ * Example: "john.doe@gmail.com" → "jo***@gm***.com"
+ */
+function maskEmail(email: string): string {
+  const [local, domain] = email.split('@');
+  if (!local || !domain) return '***@***.***';
+
+  const maskedLocal = local.slice(0, Math.min(2, local.length)) + '***';
+
+  const dotIndex = domain.lastIndexOf('.');
+  if (dotIndex === -1) {
+    // Domain without a TLD (e.g., "localhost") — mask without trailing dot
+    const maskedDomain = domain.slice(0, Math.min(2, domain.length)) + '***';
+    return `${maskedLocal}@${maskedDomain}`;
+  }
+
+  const domainName = domain.slice(0, dotIndex);
+  const tld = domain.slice(dotIndex + 1);
+
+  const maskedDomain = domainName.slice(0, Math.min(2, domainName.length)) + '***';
+
+  return `${maskedLocal}@${maskedDomain}.${tld}`;
+}
+
 // ─── POST /api/notify ────────────────────────────────────────────────────────
 // Register or update email notification preferences for a user
 export async function POST(req: NextRequest): Promise<NextResponse<NotificationResponse>> {
@@ -106,13 +131,15 @@ export async function GET(req: NextRequest): Promise<NextResponse<NotificationRe
       );
     }
 
+    // Mask the email to prevent PII exposure in unauthenticated GET responses.
+    // The full email is only accepted on POST (write) — never returned on GET (read).
     return NextResponse.json(
       {
         success: true,
         message: 'Notification preferences fetched successfully.',
         data: {
           username: notification.username,
-          email: notification.email,
+          email: maskEmail(notification.email),
           frequency: notification.frequency,
           preferences: {
             notifyOnCommit: notification.notifyOnCommit,

app/compare/page.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from 'react';
 import type { Metadata } from 'next';
 import CompareClient from './CompareClient';
+import { Footer } from '../components/Footer';
 
 export const metadata: Metadata = {
   title: 'Compare | CommitPulse',
@@ -14,14 +15,19 @@ export const metadata: Metadata = {
 
 export default function ComparePage() {
   return (
-    <Suspense
-      fallback={
-        <div className="min-h-screen flex items-center justify-center pt-28 pb-16">
-          <div className="w-8 h-8 rounded-full border-2 border-emerald-500 border-t-transparent animate-spin"></div>
-        </div>
-      }
-    >
-      <CompareClient />
-    </Suspense>
+    <>
+      <Suspense
+        fallback={
+          <div className="min-h-screen flex items-center justify-center pt-28 pb-16">
+            <div className="w-8 h-8 rounded-full border-2 border-emerald-500 border-t-transparent animate-spin"></div>
+          </div>
+        }
+      >
+        <CompareClient />
+      </Suspense>
+      <div className="mx-auto max-w-7xl px-6 pb-8">
+        <Footer />
+      </div>
+    </>
   );
 }

app/components/CopyRepoButton.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy } from 'lucide-react';
+
+export default function CopyRepoButton() {
+  const [copied, setCopied] = useState(false);
+
+  const repoUrl = 'https://github.com/JhaSourav07/commitpulse';
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(repoUrl);
+
+    setCopied(true);
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="inline-flex items-center gap-2 rounded-2xl border border-black/10 bg-white/60 px-8 py-4 font-semibold transition-all duration-300 hover:scale-105 dark:border-white/10 dark:bg-white/5"
+    >
+      <Copy className="h-5 w-5" />
+      {copied ? 'Copied!' : 'Copy URL'}
+    </button>
+  );
+}

app/components/CustomizeCTA.test.tsx

@@ -141,6 +141,46 @@ describe('CustomizeCTA', () => {
       expect(decorativeIcon).toBeTruthy();
     });
   });
+  describe('responsive rendering', () => {
+    it('uses responsive flex layout classes', () => {
+      const { container } = render(<CustomizeCTA />);
+
+      const layoutContainer = container.querySelector('.flex.flex-col.md\\:flex-row');
+
+      expect(layoutContainer).toBeTruthy();
+    });
+
+    it('uses responsive text alignment classes', () => {
+      const { container } = render(<CustomizeCTA />);
+
+      const contentContainer = container.querySelector('.text-center.md\\:text-left');
+
+      expect(contentContainer).toBeTruthy();
+    });
+
+    it('uses responsive heading sizing classes', () => {
+      render(<CustomizeCTA />);
+
+      const heading = screen.getByRole('heading', {
+        level: 2,
+        name: 'Want to fine-tune your monolith?',
+      });
+
+      expect(heading.className).toContain('text-2xl');
+      expect(heading.className).toContain('md:text-3xl');
+    });
+
+    it('uses responsive button padding classes', () => {
+      render(<CustomizeCTA />);
+
+      const link = screen.getByRole('link');
+
+      const button = link.querySelector('span');
+
+      expect(button?.className).toContain('px-4');
+      expect(button?.className).toContain('md:px-7');
+    });
+  });
 
   describe('responsive breakpoints', () => {
     it('renders all layout structure elements across viewports', () => {

app/contributors/page.tsx

@@ -1,10 +1,10 @@
 import Link from 'next/link';
 import { Globe, Sparkles, Users, GitPullRequest, ArrowRight } from 'lucide-react';
-
 import BrandParticles from '@/components/BrandParticles';
 import { Footer } from '@/app/components/Footer';
 import ContributorsSearch from './ContributorsSearch';
 import Leaderboard from '@/components/Leaderboard';
+import CopyRepoButton from '@/app/components/CopyRepoButton';
 
 interface Contributor {
   id: number;
@@ -231,6 +231,8 @@ export default async function ContributorsPage() {
                   View Repository
                 </Link>
 
+                <CopyRepoButton />
+
                 <Link
                   href="https://github.com/JhaSourav07/commitpulse/issues"
                   target="_blank"

app/customize/components/ExportPanel.tsx

@@ -171,7 +171,7 @@ export function ExportPanel({
                 ? 'Add a GitHub username to enable image downloads'
                 : format === 'action'
                   ? 'Download is not available in GitHub Action mode'
-                  : 'Download custom monolith layout as an image'
+                  : `Download badge as commitpulse-${username}.svg`
             }
             className={`relative inline-flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 ${
               !hasUsername || isDownloading || format === 'action'

app/customize/page.tsx

@@ -150,6 +150,32 @@ export default function CustomizePage(): ReactElement {
         // - Use a conservative URI whitelist to prevent javascript: URIs
         const sanitized = DOMPurify.sanitize(text, {
           USE_PROFILES: { svg: true },
+          ADD_TAGS: ['animate', 'style'],
+          ADD_ATTR: [
+            'fill',
+            'fill-opacity',
+            'stroke',
+            'stroke-width',
+            'stroke-opacity',
+            'x1',
+            'y1',
+            'x2',
+            'y2',
+            'stop-color',
+            'stop-opacity',
+            'offset',
+            'transform-origin',
+            'transform-box',
+            'transform',
+            'attributeName',
+            'from',
+            'to',
+            'dur',
+            'repeatCount',
+            'id',
+            'class',
+            'href',
+          ],
           FORBID_TAGS: ['foreignObject', 'iframe', 'object', 'embed', 'script'],
           FORBID_ATTR: ['xlink:href'],
           ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|data):|#)/i,

app/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { trackUser } from '@/utils/tracking';
-import InteractiveViewer from '@/components/InteractiveViewer';
 import Link from 'next/link';
 import { useRef, useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -14,6 +13,7 @@ import { Footer } from '@/app/components/Footer';
 
 import { FeatureCard, FeatureCardsSection } from '@/components/FeatureCards';
 import { DiscordButton } from '@/components/DiscordButton';
+import { WallOfLove } from '@/components/WallOfLove';
 
 const Icons = {
   Github: () => (
@@ -182,6 +182,11 @@ export default function LandingPage() {
                     </button>
                   ) : null}
                 </div>
+                {mounted && username.length === 0 && (
+                  <p className="text-amber-500 text-xs mt-1 self-start pl-1">
+                    Please enter a GitHub username to copy your badge link.
+                  </p>
+                )}
                 {username.length === 39 && (
                   <p className="text-red-500 text-xs mt-1 self-start pl-1">
                     GitHub username limit reached (39 characters maximum)
@@ -374,6 +379,9 @@ export default function LandingPage() {
             desc="Sophisticated 3D projection formulas turn 2D data into digital architecture."
           />
         </FeatureCardsSection>
+
+        <WallOfLove />
+
         <Footer />
       </main>
     </div>

components/FeatureCards.tsx

@@ -4,9 +4,7 @@ import { useRef, useState, useEffect, type ReactNode } from 'react';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
-if (typeof window !== 'undefined') {
-  gsap.registerPlugin(ScrollTrigger);
-}
+let gsapRegistered = false;
 
 /* ─── Types ─── */
 interface FeatureCardProps {
@@ -44,7 +42,7 @@ function FloatingParticle({
     tl.to(ref.current, {
       opacity: 0.6,
       y: -60,
-      x: `random(-30, 30)`,
+      x: Math.random() * 60 - 30,
       duration: duration * 0.4,
       ease: 'power2.out',
     })
@@ -119,8 +117,6 @@ function AnimatedBorder({ color, isHovered }: { color: string; isHovered: boolea
       style={{
         opacity: 0,
         background: `conic-gradient(from 0deg, transparent, ${color}, transparent, ${color}44, transparent)`,
-        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-        maskComposite: 'exclude',
         WebkitMaskComposite: 'xor',
         padding: '1.5px',
       }}
@@ -417,6 +413,13 @@ export function FeatureCard({ icon, title, desc, accent, index, accentColor }: F
 
 /* ─── Section Wrapper (optional heading + background glow) ─── */
 export function FeatureCardsSection({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    if (!gsapRegistered) {
+      gsap.registerPlugin(ScrollTrigger);
+      gsapRegistered = true;
+    }
+  }, []);
+
   const sectionRef = useRef<HTMLDivElement>(null);
   const headingRef = useRef<HTMLHeadingElement>(null);