From 3f88aae55e62f4e5c81f90eeac90c84c8499b31a Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 22:23:49 +0000
Subject: [PATCH] Display two random articles below the main content grid

Implement a new `useMemo` hook to select two random articles for display in the `WideCard` components, ensuring they are not present in the main carousel section of the home page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: fa95522d-4cc1-420f-92d8-66d4a2a08adf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 9becdd9..220a866 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -493,6 +493,19 @@ export default function Home() {
     return rows;
   }, [gridItems]);
 
+  const widePickedArticles = useMemo(() => {
+    if (!articles || articles.length < 3) return [];
+    const carouselIds = new Set(articles.slice(0, 9).map((a) => a.id));
+    const candidates = articles.filter((a) => !carouselIds.has(a.id));
+    const pool = candidates.length >= 2 ? candidates : articles;
+    const copy = [...pool];
+    for (let i = copy.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [copy[i], copy[j]] = [copy[j], copy[i]];
+    }
+    return copy.slice(0, 2);
+  }, [articles]);
+
   if (isLoading || !articles) {
     return (
       <div className="min-h-screen bg-background">
@@ -522,10 +535,11 @@ export default function Home() {
           </div>
         ))}
 
-        {shuffled.length > 1 && (
+        {widePickedArticles.length > 0 && (
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            <WideCard article={shuffled[shuffled.length - 1]} focalPoints={focalPoints} />
-            <WideCard article={shuffled[shuffled.length - 2]} focalPoints={focalPoints} />
+            {widePickedArticles.map((a) => (
+              <WideCard key={`wide-${a.id}`} article={a} focalPoints={focalPoints} />
+            ))}
           </div>
         )}