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

Add dynamic content and ads to the bottom of the homepage

Browse Source 
Adds a new section to the homepage that dynamically displays a shuffled array of widgets (news, horoscope, weather, breaking news, recipe) interspersed with two AdSense ads.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8cd8705d-50d4-4498-81ca-641b06532cb7
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/ls5p9ni
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 22:36:04 +00:00
parent a8f10616a4
commit 75f1de829b
1 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -518,6 +518,22 @@ export default function Home() {
return copy.slice(0, 2);
}, [articles]);
const bottomSection = useMemo(() => {
const items: { type: "widget" | "ad"; el: JSX.Element }[] = [
{ type: "widget", el: <NewsWidget key="bottom-news" /> },
{ type: "widget", el: <div key="bottom-horoscope" className="flex flex-col gap-4"><HoroscopeWidget /><WeatherWidget /></div> },
{ type: "widget", el: <BreakingNewsWidget key="bottom-breaking" /> },
{ type: "widget", el: <RecipeWidget key="bottom-recipe" /> },
{ type: "ad", el: <AdSense key="ad-bottom-1" slot="bottom-1" className="w-full min-h-[250px]" /> },
{ type: "ad", el: <AdSense key="ad-bottom-2" slot="bottom-2" className="w-full min-h-[250px]" /> },
];
for (let i = items.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[items[i], items[j]] = [items[j], items[i]];
}
return items;
}, []);
if (isLoading || !articles) {
return (
<div className="min-h-screen bg-background">
@ -565,6 +581,14 @@ export default function Home() {
</div>
))}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{bottomSection.map((item, i) => (
<div key={`bottom-${i}`}>
{item.el}
</div>
))}
</div>
</main>
<Footer />
</div>