Add current news widget and randomize widget placement on homepage

Introduce a new "Aktuelle Nachrichten" widget fetching breaking news from Google News and integrate it into the homepage layout, allowing for randomized placement alongside other widgets.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a9755292-f3f6-4e82-9daf-584c288b7d23
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
This commit is contained in:
sebastjanartic
2026-02-28 22:10:27 +00:00
parent a2dc9f36d9
commit 65205f55cd
4 changed files with 152 additions and 9 deletions
+10 -9
View File
@@ -13,6 +13,7 @@ import { HoroscopeWidget } from "@/components/horoscope-widget";
import { RecipeWidget } from "@/components/recipe-widget";
import { NewsWidget } from "@/components/news-widget";
import { WeatherWidget } from "@/components/weather-widget";
import { BreakingNewsWidget } from "@/components/breaking-news-widget";
import { useState, useEffect, useCallback, useRef, useMemo } from "react";
function useFocalPoints() {
@@ -428,6 +429,7 @@ export default function Home() {
{ id: "horoscope-weather", el: <div key="horoscope-weather" className="flex flex-col gap-4"><HoroscopeWidget /><WeatherWidget /></div> },
{ id: "gallery", el: <PhotoGalleryWidget key="gallery" /> },
{ id: "news", el: <div key="news" className="flex flex-col gap-4"><NewsWidget /></div> },
{ id: "breaking", el: <div key="breaking" className="flex flex-col gap-4"><BreakingNewsWidget /></div> },
];
for (let i = w.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
@@ -440,16 +442,15 @@ export default function Home() {
const items: { type: "article" | "widget"; article?: Article; widget?: typeof widgets[0] }[] = [];
let ai = 0;
let wi = 0;
const widgetRows = Math.ceil(widgets.length / 2);
items.push({ type: "article", article: shuffled[ai++] });
items.push({ type: "article", article: shuffled[ai++] });
if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
items.push({ type: "article", article: shuffled[ai++] });
items.push({ type: "article", article: shuffled[ai++] });
if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
for (let r = 0; r < widgetRows; r++) {
if (ai < shuffled.length) items.push({ type: "article", article: shuffled[ai++] });
if (ai < shuffled.length) items.push({ type: "article", article: shuffled[ai++] });
if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
if (wi < widgets.length) items.push({ type: "widget", widget: widgets[wi++] });
else if (ai < shuffled.length) items.push({ type: "article", article: shuffled[ai++] });
}
while (ai < shuffled.length) {
items.push({ type: "article", article: shuffled[ai++] });