From 0eee17a43e54b47e6a1da2d9202ca8aec6ca2026 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 06:07:35 +0000
Subject: [PATCH] Add a visual sparkle effect for new news updates on the
 Erling Haaland media outlet

Introduces a new API endpoint `/api/articles` and implements a client-side animation to visually alert users of new articles on the 'erling-haaland' outlet using CSS keyframes and conditional rendering.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d9e77062-eeec-4c95-9131-905f69a78072
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/d9e77062-eeec-4c95-9131-905f69a78072/VftcvwB
---
 .replit                               |  4 +++
 client/src/components/MainContent.tsx | 28 ++++++++++++++++++--
 client/src/index.css                  | 38 +++++++++++++++++++++++++++
 server/routes.ts                      | 10 +++++++
 server/storage.ts                     |  8 ++++++
 5 files changed, 86 insertions(+), 2 deletions(-)

diff --git a/.replit b/.replit
index e53b196..bb783a3 100644
--- a/.replit
+++ b/.replit
@@ -30,6 +30,10 @@ externalPort = 3003
 localPort = 43349
 externalPort = 3000
 
+[[ports]]
+localPort = 43777
+externalPort = 4200
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index 97e6297..df444ec 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -74,6 +74,7 @@ export default function MainContent() {
     const articleCount = articleCountByOutlet[outlet.id] || 0;
     const hasArticles = articleCount > 0;
     const isErlingHaaland = outlet.slug === 'erling-haaland';
+    const showSpecialEffect = isErlingHaaland && hasArticles;
     
     const animationClass = hasArticles 
       ? 'animate-float ring-2 ring-blue-400/30 shadow-lg'
@@ -87,13 +88,36 @@ export default function MainContent() {
       >
         {hasArticles && (
           <div className="absolute -top-2 -right-2 z-10">
-            <Badge className="bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg animate-pulse">
+            <Badge className={`bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg animate-pulse ${showSpecialEffect ? 'animate-glow-pulse' : ''}`}>
               <Sparkles className="h-3 w-3 mr-1" />
               NEW
             </Badge>
+            {showSpecialEffect && (
+              <div className="absolute inset-0 pointer-events-none" data-testid="sparkle-effect-erling">
+                {[...Array(6)].map((_, i) => {
+                  const angle = (i * 60) * Math.PI / 180;
+                  const distance = 20 + (i % 2) * 10;
+                  const x = Math.cos(angle) * distance;
+                  const y = Math.sin(angle) * distance;
+                  const delay = i * 0.2;
+                  
+                  return (
+                    <div
+                      key={i}
+                      className="absolute top-1/2 left-1/2 w-2 h-2 rounded-full bg-gradient-to-r from-yellow-400 to-pink-500"
+                      style={{
+                        animation: `sparkle 2s ease-in-out ${delay}s infinite`,
+                        ['--sparkle-x' as any]: `${x}px`,
+                        ['--sparkle-y' as any]: `${y}px`,
+                      }}
+                    />
+                  );
+                })}
+              </div>
+            )}
           </div>
         )}
-        <CardContent className={`p-2 ${isErlingHaaland ? 'animate-shake' : ''}`}>
+        <CardContent className="p-2">
           <div className="flex items-center space-x-2">
             <div 
               className={`w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all ${
diff --git a/client/src/index.css b/client/src/index.css
index 9ebf7fd..f8a2287 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -137,11 +137,49 @@
     animation: float 3s ease-in-out infinite;
   }
 
+  @keyframes sparkle {
+    0% {
+      opacity: 0;
+      transform: translate(0, 0) scale(0);
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(1);
+    }
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -100% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  @keyframes glow-pulse {
+    0%, 100% {
+      box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 40px rgba(168, 85, 247, 0.3);
+    }
+    50% {
+      box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(168, 85, 247, 0.5);
+    }
+  }
+
+  .animate-glow-pulse {
+    animation: glow-pulse 2s ease-in-out infinite;
+  }
 
   @media (prefers-reduced-motion: reduce) {
     .animate-float {
       animation: none;
     }
+    .animate-glow-pulse {
+      animation: none;
+    }
   }
   
   .card-hover:hover {
diff --git a/server/routes.ts b/server/routes.ts
index cfd8116..76df104 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -69,6 +69,16 @@ export async function registerRoutes(app: Express): Promise<Server> {
   });
 
   // Article routes
+  app.get('/api/articles', async (req, res) => {
+    try {
+      const articles = await storage.getArticles();
+      res.json(articles);
+    } catch (error) {
+      console.error("Error fetching articles:", error);
+      res.status(500).json({ message: "Failed to fetch articles" });
+    }
+  });
+
   app.get('/api/media-outlets/:slug/articles', async (req, res) => {
     try {
       const outlet = await storage.getMediaOutletBySlug(req.params.slug);
diff --git a/server/storage.ts b/server/storage.ts
index f2461c2..93a4cf3 100644
--- a/server/storage.ts
+++ b/server/storage.ts
@@ -43,6 +43,7 @@ export interface IStorage {
   updateMediaOutlet(id: string, outlet: Partial<InsertMediaOutlet>): Promise<MediaOutlet>;
   
   // Article operations
+  getArticles(): Promise<Article[]>;
   getArticlesByOutlet(mediaOutletId: string): Promise<Article[]>;
   getArticleBySlug(slug: string): Promise<Article | undefined>;
   createArticle(article: InsertArticle): Promise<Article>;
@@ -144,6 +145,13 @@ export class DatabaseStorage implements IStorage {
   }
   
   // Article operations
+  async getArticles(): Promise<Article[]> {
+    return await db
+      .select()
+      .from(articles)
+      .orderBy(desc(articles.publishedAt));
+  }
+
   async getArticlesByOutlet(mediaOutletId: string): Promise<Article[]> {
     return await db
       .select()