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

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

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