diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index d8d734d..0ace312 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -1,6 +1,7 @@
"use client";
import React, { useState, useRef, useId, useEffect, useCallback } from "react";
import AppImage from "@/components/ui/AppImage";
+import SidebarAdStack from "@/components/SidebarAdStack";
import { PersonIcon, ChevronLeftIcon, ChevronRightIcon, SearchIcon, CloseIcon } from "@/components/ui/Icons";
import Link from "next/link";
@@ -202,14 +203,6 @@ const staticArticles: ArticleItem[] = [
}
];
-const sidebarAds = [
- { src: "https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=300&h=600&fit=crop", alt: "Blackmagic Design advertisement 300x600", label: "Blackmagic", size: "300x600" },
- { src: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300&h=250&fit=crop", alt: "Zixi broadcast technology advertisement 300x250", label: "Zixi", size: "300x250" },
- { src: "https://www.broadcastbeat.com/wp-content/uploads/728-x-90-pxEN.gif", alt: "LiveU live production solutions advertisement 300x250", label: "LiveU", size: "300x250" },
- { src: "https://images.unsplash.com/photo-1563986768609-322da13575f3?w=300&h=250&fit=crop", alt: "TelyCam broadcast camera advertisement 300x250", label: "TelyCam", size: "300x250" },
- { src: "https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=300&h=250&fit=crop", alt: "AJA Video Systems advertisement 300x250", label: "AJA", size: "300x250" },
- { src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=300&h=250&fit=crop", alt: "Studio Suite production management advertisement 300x250", label: "Studio Suite", size: "300x250" }
-];
const ALL_CATEGORIES = ["All", "BROADCAST", "FEATURED", "POST PRODUCTION", "ANIMATION"];
const SOURCE_FILTERS = ["All", "Live", "Imported"] as const;
@@ -907,49 +900,10 @@ export default function ArticleFeed() {
)}
- {/* Sidebar */}
+ {/* Sidebar — Blackmagic 300x600 fixed at top + 5 rotating 300x250s */}
diff --git a/src/app/news/[slug]/NewsArticleDetailClient.tsx b/src/app/news/[slug]/NewsArticleDetailClient.tsx
index a24b670..04fb9ea 100644
--- a/src/app/news/[slug]/NewsArticleDetailClient.tsx
+++ b/src/app/news/[slug]/NewsArticleDetailClient.tsx
@@ -5,6 +5,8 @@ import AppImage from "@/components/ui/AppImage";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AdSlot from "@/components/AdSlot";
+import SidebarAdStack from "@/components/SidebarAdStack";
+import ArticleBody from "@/components/ArticleBody";
import { createClient } from "@/lib/supabase/client";
import type { Article } from "@/lib/articles/types";
@@ -377,8 +379,10 @@ export default function NewsArticleDetailClient({
/>
- {/* Article Body */}
-
{/* Tags */}
@@ -450,8 +453,8 @@ export default function NewsArticleDetailClient({
{/* Sidebar */}
diff --git a/src/components/AdImage.tsx b/src/components/AdImage.tsx
new file mode 100644
index 0000000..cd010d0
--- /dev/null
+++ b/src/components/AdImage.tsx
@@ -0,0 +1,39 @@
+import AppImage from "@/components/ui/AppImage";
+import type { Ad } from "@/lib/ads";
+
+const SIZE_DIM: Record = {
+ "300x250": { w: 300, h: 250 },
+ "300x600": { w: 300, h: 600 },
+ "728x90": { w: 728, h: 90 },
+};
+
+export default function AdImage({
+ ad,
+ className = "",
+ priority = false,
+}: {
+ ad: Ad;
+ className?: string;
+ priority?: boolean;
+}) {
+ const { w, h } = SIZE_DIM[ad.size];
+ return (
+
+
+
+ );
+}
diff --git a/src/components/ArticleBody.tsx b/src/components/ArticleBody.tsx
new file mode 100644
index 0000000..2e6ff73
--- /dev/null
+++ b/src/components/ArticleBody.tsx
@@ -0,0 +1,68 @@
+"use client";
+import { useMemo } from "react";
+import AdImage from "./AdImage";
+import { pickAds } from "@/lib/ads";
+
+/**
+ * Article body renderer: splits the supplied HTML at paragraph boundaries
+ * and splices a 300×250 ad after every Nth paragraph (default 4).
+ *
+ * `excludeSrcs` lets the caller forbid creatives already used in the
+ * sidebar so the same page never shows a banner twice.
+ */
+export default function ArticleBody({
+ html,
+ everyN = 4,
+ excludeSrcs = [],
+ className = "",
+}: {
+ html: string;
+ everyN?: number;
+ excludeSrcs?: string[];
+ className?: string;
+}) {
+ const { chunks, ads } = useMemo(() => {
+ // Split keeping the closing tags so each chunk is one paragraph block.
+ const parts = (html || "").split(/(<\/p>)/i);
+ const grouped: string[] = [];
+ let buf = "";
+ for (const p of parts) {
+ buf += p;
+ if (p.toLowerCase() === "") {
+ grouped.push(buf);
+ buf = "";
+ }
+ }
+ if (buf.trim()) grouped.push(buf);
+
+ const slotsNeeded = Math.max(0, Math.floor((grouped.length - 1) / everyN));
+ const ads = pickAds("300x250", slotsNeeded, new Set(excludeSrcs));
+ return { chunks: grouped, ads };
+ }, [html, everyN, excludeSrcs.join("|")]);
+
+ const out: React.ReactNode[] = [];
+ let adCursor = 0;
+ for (let i = 0; i < chunks.length; i++) {
+ out.push(
+ ,
+ );
+ // Insert ad after this chunk if it's at an everyN boundary and not the last
+ if ((i + 1) % everyN === 0 && i < chunks.length - 1 && adCursor < ads.length) {
+ const ad = ads[adCursor++];
+ out.push(
+ ,
+ );
+ }
+ }
+
+ return {out}
;
+}
diff --git a/src/components/SidebarAdStack.tsx b/src/components/SidebarAdStack.tsx
new file mode 100644
index 0000000..d51d462
--- /dev/null
+++ b/src/components/SidebarAdStack.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { useMemo } from "react";
+import AdImage from "./AdImage";
+import { FIXED_BLACKMAGIC_300X600, pickAds, type Ad } from "@/lib/ads";
+
+/**
+ * Sidebar ad stack — fixed Blackmagic 300×600 on top, then `count` rotating
+ * 300×250 banners.
+ *
+ * Pass `excludeSrcs` (Set or array) when other slots on the same page already
+ * use specific 300×250 creatives, to avoid duplicates within a page render.
+ */
+export default function SidebarAdStack({
+ count = 5,
+ excludeSrcs = [],
+ className = "",
+}: {
+ count?: number;
+ excludeSrcs?: string[];
+ className?: string;
+}) {
+ const rotating = useMemo(
+ () => pickAds("300x250", count, new Set(excludeSrcs)),
+ // exclude list is page-render scoped; recompute when it changes
+ [count, excludeSrcs.join("|")],
+ );
+
+ return (
+
+
+ {rotating.map((ad) => (
+
+ ))}
+