Merge branch 'main' into fix/compare-modal-a11y-focus-trap

Author: JhaSourav07

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/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/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';

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);
 

components/dashboard/GrowthTrendChart.test.tsx

@@ -111,8 +111,8 @@ describe('GrowthTrendChart', () => {
     const defs = container.querySelector('defs');
     expect(defs).not.toBeNull();
 
-    const gradientA = container.querySelector('#gradient-area-a');
-    const gradientB = container.querySelector('#gradient-area-b');
+    const gradientA = container.querySelector('linearGradient[id$="-gradient-area-a"]');
+    const gradientB = container.querySelector('linearGradient[id$="-gradient-area-b"]');
     expect(gradientA).not.toBeNull();
     expect(gradientB).not.toBeNull();
     expect(gradientA?.tagName).toBe('linearGradient');
@@ -129,8 +129,8 @@ describe('GrowthTrendChart', () => {
       />
     );
 
-    const glowA = container.querySelector('#glow-line-a');
-    const glowB = container.querySelector('#glow-line-b');
+    const glowA = container.querySelector('filter[id$="-glow-line-a"]');
+    const glowB = container.querySelector('filter[id$="-glow-line-b"]');
     expect(glowA).not.toBeNull();
     expect(glowB).not.toBeNull();
     expect(glowA?.tagName).toBe('filter');

components/dashboard/GrowthTrendChart.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useId } from 'react';
 import { motion } from 'framer-motion';
 
 interface GrowthTrendChartProps {
@@ -15,6 +16,9 @@ export default function GrowthTrendChart({
   labelA,
   labelB,
 }: GrowthTrendChartProps) {
+  // Generate unique IDs to prevent SVG <defs> collisions when multiple instances render
+  const instanceId = useId();
+
   // 1. Generate chronological list of the last 12 months
   const months: Array<{
     key: string;
@@ -124,19 +128,19 @@ export default function GrowthTrendChart({
       <div className="relative w-full h-[180px] overflow-hidden">
         <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-full overflow-visible">
           <defs>
-            <linearGradient id="gradient-area-a" x1="0" y1="0" x2="0" y2="1">
+            <linearGradient id={`${instanceId}-gradient-area-a`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="0%" stopColor="#06b6d4" stopOpacity="0.16" />
               <stop offset="100%" stopColor="#06b6d4" stopOpacity="0" />
             </linearGradient>
-            <linearGradient id="gradient-area-b" x1="0" y1="0" x2="0" y2="1">
+            <linearGradient id={`${instanceId}-gradient-area-b`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="0%" stopColor="#a855f7" stopOpacity="0.16" />
               <stop offset="100%" stopColor="#a855f7" stopOpacity="0" />
             </linearGradient>
-            <filter id="glow-line-a" x="-10%" y="-10%" width="120%" height="120%">
+            <filter id={`${instanceId}-glow-line-a`} x="-10%" y="-10%" width="120%" height="120%">
               <feGaussianBlur stdDeviation="2.5" result="blur" />
               <feComposite in="SourceGraphic" in2="blur" operator="over" />
             </filter>
-            <filter id="glow-line-b" x="-10%" y="-10%" width="120%" height="120%">
+            <filter id={`${instanceId}-glow-line-b`} x="-10%" y="-10%" width="120%" height="120%">
               <feGaussianBlur stdDeviation="2.5" result="blur" />
               <feComposite in="SourceGraphic" in2="blur" operator="over" />
             </filter>
@@ -161,14 +165,14 @@ export default function GrowthTrendChart({
           {/* Paths (Area) */}
           <motion.path
             d={areaStrA}
-            fill="url(#gradient-area-a)"
+            fill={`url(#${instanceId}-gradient-area-a)`}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.8 }}
           />
           <motion.path
             d={areaStrB}
-            fill="url(#gradient-area-b)"
+            fill={`url(#${instanceId}-gradient-area-b)`}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.8, delay: 0.15 }}
@@ -182,7 +186,7 @@ export default function GrowthTrendChart({
             strokeWidth="2.5"
             strokeLinecap="round"
             strokeLinejoin="round"
-            filter="url(#glow-line-a)"
+            filter={`url(#${instanceId}-glow-line-a)`}
             initial={{ pathLength: 0 }}
             animate={{ pathLength: 1 }}
             transition={{ duration: 1.2, ease: 'easeOut' }}
@@ -194,7 +198,7 @@ export default function GrowthTrendChart({
             strokeWidth="2.5"
             strokeLinecap="round"
             strokeLinejoin="round"
-            filter="url(#glow-line-b)"
+            filter={`url(#${instanceId}-glow-line-b)`}
             initial={{ pathLength: 0 }}
             animate={{ pathLength: 1 }}
             transition={{ duration: 1.2, ease: 'easeOut', delay: 0.15 }}