sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add two articles to the bottom of the homepage content

Browse Source 
Replace two ad slots at the bottom of the homepage with two article cards, fetching them from the articles list.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 55453f74-bba8-477d-bd9e-734b4ea451b5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/nFw7xof
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-02 17:15:44 +00:00
parent c10d34c45c
commit c47c743c96
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772471699130.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

20
client/src/pages/home.tsx
View File

@ -526,18 +526,30 @@ export default function Home() {
return copy.slice(0, 2);
}, [articles]);
const bottomArticles = useMemo(() => {
if (!articles || articles.length < 10) return [];
const usedIds = new Set([
...articles.slice(0, 9).map((a) => a.id),
...widePickedArticles.map((a) => a.id),
]);
return articles.filter((a) => !usedIds.has(a.id)).slice(0, 2);
}, [articles, widePickedArticles]);
const bottomSection = useMemo(() => {
const items: { type: "widget" | "ad"; el: JSX.Element }[] = [
const items: { type: "widget" | "ad" | "article"; el: JSX.Element }[] = [
{ type: "widget", el: <NewsWidget key="bottom-news" /> },
{ type: "widget", el: <HoroscopeWidget key="bottom-horoscope" /> },
{ type: "widget", el: <BreakingNewsWidget key="bottom-breaking" /> },
{ type: "widget", el: <RecipeWidget key="bottom-recipe" /> },
{ type: "ad", el: <div key="ad-bottom-1"><ArticleCardAd /></div> },
...bottomArticles.map((a) => ({
type: "article" as const,
el: <ArticleCard key={`bottom-art-${a.id}`} article={a} focalPoint={focalPoints[a.imageUrl || ""]} />,
})),
{ type: "widget", el: <PhotoGalleryWidget key="bottom-gallery" /> },
{ type: "ad", el: <div key="ad-bottom-2"><ArticleCardAd /></div> },
{ type: "ad", el: <div key="ad-bottom-1"><ArticleCardAd /></div> },
];
return items;
}, []);
}, [bottomArticles, focalPoints]);
if (isLoading || !articles) {
return (