Local Administrator
d8ca8ff3ec
Two pointed bugs on the article detail page: 1) Width alignment. The right-rail Related Articles and Related Forum Posts boxes were free-stretching to the lg:col-span-4 width while the SidebarAdStack below them rendered ads at their natural 300px (items- end, right-aligned). The visual result: boxes overhung the ad column on both edges. Wrapped each sidebar in an inner `w-full lg:w-[300px] lg:ml-auto` div so every block (ads + boxes + newsletter) shares one 300px column on lg+ and stays full-width on mobile. Applied to both article templates (/articles/[slug] and /news/[slug]). 2) Placeholder rendered the old "AV BEAT" wordmark when an article had no featured image. Rebuilt article-placeholder.svg around the new brand mark — the A-monogram tile with the blue gradient (#2563EB→#1E3A8A) that matches AnimatedLogo + the rest of the brand-gradient system. Same 1200×630 dimensions so OG/feed embeds aren't affected. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
494 lines
25 KiB
TypeScript
494 lines
25 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect, useRef, useCallback } from "react";
|
|
import Link from "next/link";
|
|
import AppImage from "@/components/ui/AppImage";
|
|
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
import SidebarAdStack from "@/components/SidebarAdStack";
|
|
import StarRating from "@/components/StarRating";
|
|
import { createClient } from "@/lib/supabase/client";
|
|
import type { Article } from "@/lib/articles/types";
|
|
import type { RelatedForumThread } from "@/lib/articles/legacy-source";
|
|
import ArticleComments from "@/components/ArticleComments";
|
|
|
|
// DO NOT OVERRIDE — ArticleDetailClient interface and session tracking
|
|
interface ArticleDetailClientProps {
|
|
article: Article;
|
|
relatedArticles: Article[];
|
|
relatedForumThreads?: RelatedForumThread[];
|
|
}
|
|
|
|
function getSessionId(): string {
|
|
if (typeof window === "undefined") return "";
|
|
let sid = sessionStorage.getItem("bb_session_id");
|
|
if (!sid) {
|
|
sid = `sess_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
|
|
sessionStorage.setItem("bb_session_id", sid);
|
|
}
|
|
return sid;
|
|
}
|
|
|
|
export default function ArticleDetailClient({ article, relatedArticles, relatedForumThreads = [] }: ArticleDetailClientProps) {
|
|
const [isSaved, setIsSaved] = useState(false);
|
|
const [savingState, setSavingState] = useState<"idle" | "saving" | "removing">("idle");
|
|
const [saveToast, setSaveToast] = useState<string | null>(null);
|
|
const [currentUser, setCurrentUser] = useState<{ id: string } | null>(null);
|
|
const articleStartTime = useRef<number>(Date.now());
|
|
const hasTrackedView = useRef(false);
|
|
const supabase = createClient();
|
|
|
|
// Get current user
|
|
useEffect(() => {
|
|
supabase?.auth?.getUser().then(({ data }) => {
|
|
setCurrentUser(data?.user ?? null);
|
|
});
|
|
}, []);
|
|
|
|
// Track article view on mount
|
|
useEffect(() => {
|
|
if (hasTrackedView.current || !article?.slug) return;
|
|
hasTrackedView.current = true;
|
|
articleStartTime.current = Date.now();
|
|
|
|
const trackView = async () => {
|
|
try {
|
|
const { data: userData } = await supabase?.auth?.getUser();
|
|
await supabase?.from("article_analytics")?.insert({
|
|
article_slug: article.slug,
|
|
article_title: article.title,
|
|
user_id: userData?.user?.id ?? null,
|
|
session_id: getSessionId(),
|
|
event_type: "view",
|
|
read_time_seconds: 0,
|
|
scroll_depth: 0,
|
|
referrer: typeof document !== "undefined" ? document.referrer : "",
|
|
});
|
|
|
|
// Track reading history and topic preferences for authenticated users
|
|
if (userData?.user?.id) {
|
|
// Upsert reading history
|
|
await supabase?.from("reading_history")?.upsert(
|
|
{
|
|
user_id: userData.user.id,
|
|
article_slug: article.slug,
|
|
article_title: article.title,
|
|
article_excerpt: article.excerpt ?? null,
|
|
article_image: article.image ?? null,
|
|
article_image_alt: article.alt ?? null,
|
|
article_category: article.category ?? null,
|
|
article_author: article.author ?? null,
|
|
article_read_time: article.readTime ?? null,
|
|
article_date: article.date ?? null,
|
|
viewed_at: new Date().toISOString(),
|
|
},
|
|
{ onConflict: "user_id,article_slug" }
|
|
);
|
|
|
|
// Upsert topic preference
|
|
if (article.category) {
|
|
const topic = article.category.toLowerCase().trim();
|
|
const { data: existing } = await supabase
|
|
?.from("user_topic_preferences")
|
|
?.select("id, view_count")
|
|
?.eq("user_id", userData.user.id)
|
|
?.eq("topic", topic)
|
|
?.maybeSingle();
|
|
|
|
if (existing) {
|
|
await supabase
|
|
?.from("user_topic_preferences")
|
|
?.update({
|
|
view_count: (existing.view_count || 0) + 1,
|
|
last_viewed_at: new Date().toISOString(),
|
|
})
|
|
?.eq("id", existing.id);
|
|
} else {
|
|
await supabase?.from("user_topic_preferences")?.insert({
|
|
user_id: userData.user.id,
|
|
topic,
|
|
view_count: 1,
|
|
last_viewed_at: new Date().toISOString(),
|
|
});
|
|
}
|
|
}
|
|
}
|
|
} catch {
|
|
// Silent fail — analytics should not break the page
|
|
}
|
|
};
|
|
trackView();
|
|
}, [article?.slug]);
|
|
|
|
// Track read completion on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
if (!article?.slug) return;
|
|
const readSeconds = Math.round((Date.now() - articleStartTime.current) / 1000);
|
|
if (readSeconds < 5) return;
|
|
const trackRead = async () => {
|
|
try {
|
|
const { data: userData } = await supabase?.auth?.getUser();
|
|
await supabase?.from("article_analytics")?.insert({
|
|
article_slug: article.slug,
|
|
article_title: article.title,
|
|
user_id: userData?.user?.id ?? null,
|
|
session_id: getSessionId(),
|
|
event_type: "read",
|
|
read_time_seconds: readSeconds,
|
|
scroll_depth: 0,
|
|
referrer: typeof document !== "undefined" ? document.referrer : "",
|
|
});
|
|
} catch {
|
|
// Silent fail
|
|
}
|
|
};
|
|
trackRead();
|
|
};
|
|
}, [article?.slug]);
|
|
|
|
// Check if article is already saved
|
|
useEffect(() => {
|
|
if (!currentUser || !article?.slug) return;
|
|
const checkSaved = async () => {
|
|
try {
|
|
const { data } = await supabase
|
|
?.from("reading_list")
|
|
?.select("id")
|
|
?.eq("user_id", currentUser.id)
|
|
?.eq("article_slug", article.slug)
|
|
?.maybeSingle();
|
|
setIsSaved(!!data);
|
|
} catch {
|
|
// Silent fail
|
|
}
|
|
};
|
|
checkSaved();
|
|
}, [currentUser, article?.slug]);
|
|
|
|
const handleSaveToReadingList = useCallback(async () => {
|
|
if (!currentUser) {
|
|
setSaveToast("Sign in to save articles to your reading list");
|
|
setTimeout(() => setSaveToast(null), 3000);
|
|
return;
|
|
}
|
|
if (isSaved) {
|
|
setSavingState("removing");
|
|
try {
|
|
await supabase
|
|
?.from("reading_list")
|
|
?.delete()
|
|
?.eq("user_id", currentUser.id)
|
|
?.eq("article_slug", article.slug);
|
|
setIsSaved(false);
|
|
setSaveToast("Removed from reading list");
|
|
} catch {
|
|
setSaveToast("Failed to remove article");
|
|
} finally {
|
|
setSavingState("idle");
|
|
setTimeout(() => setSaveToast(null), 2500);
|
|
}
|
|
} else {
|
|
setSavingState("saving");
|
|
try {
|
|
await supabase?.from("reading_list")?.insert({
|
|
user_id: currentUser.id,
|
|
article_slug: article.slug,
|
|
article_title: article.title,
|
|
article_excerpt: article.excerpt,
|
|
article_image: article.image,
|
|
article_image_alt: article.alt,
|
|
article_category: article.category,
|
|
article_author: article.author,
|
|
article_read_time: article.readTime,
|
|
article_date: article.date,
|
|
});
|
|
setIsSaved(true);
|
|
setSaveToast("Saved to reading list");
|
|
} catch {
|
|
setSaveToast("Failed to save article");
|
|
} finally {
|
|
setSavingState("idle");
|
|
setTimeout(() => setSaveToast(null), 2500);
|
|
}
|
|
}
|
|
}, [currentUser, isSaved, article]);
|
|
|
|
// Breadcrumb section label
|
|
const sectionLabel = article.section === "gear" ? "Gear & Reviews"
|
|
: article.section === "show-coverage" ? "Show Coverage"
|
|
: article.section === "technology"? "Technology" :"News";
|
|
const sectionHref = article.section === "gear" ? "/gear"
|
|
: article.section === "show-coverage" ? "/show-coverage"
|
|
: article.section === "technology"? "/technology" :"/news";
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Header />
|
|
|
|
{/* Breadcrumb navigation */}
|
|
{/* DO NOT OVERRIDE — article breadcrumb and back navigation */}
|
|
<div className="bg-[#F8FAFC] border-b border-[#FFFFFF]">
|
|
<div className="max-w-container mx-auto px-4 py-2.5 flex items-center gap-2 text-xs font-body text-[#555]">
|
|
<Link href="/home-page" className="hover:text-[#1D4ED8] transition-colors">Home</Link>
|
|
<span>/</span>
|
|
<Link href={sectionHref} className="hover:text-[#1D4ED8] transition-colors">{sectionLabel}</Link>
|
|
<span>/</span>
|
|
<span className="text-[#888] truncate max-w-[300px]">{article.title}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Article Content */}
|
|
<article className="max-w-container mx-auto px-4 py-8 md:py-12">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
|
{/* Main Content */}
|
|
<div className="lg:col-span-8">
|
|
{/* Article Header */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<Link href={sectionHref} className="text-xs font-bold uppercase tracking-widest text-[#1D4ED8] hover:underline">
|
|
{article.category}
|
|
</Link>
|
|
<span className="text-xs text-[#777]">{article.date}</span>
|
|
<span className="text-xs text-[#555]">·</span>
|
|
<span className="text-xs text-[#777]">{article.readTime}</span>
|
|
</div>
|
|
<h1 className="font-serif text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#1e293b]">
|
|
{article.title}
|
|
</h1>
|
|
<div className="mb-4">
|
|
<StarRating seed={article.slug} publishedAt={article.publishedAt || article.date} size="md" />
|
|
</div>
|
|
{/* Article Meta */}
|
|
<div className="flex items-center justify-between py-4 border-t border-b border-[#222]">
|
|
<div className="flex items-center gap-3">
|
|
<AppImage
|
|
src={article.authorAvatar}
|
|
alt={`${article.author} — ${article.authorTitle}`}
|
|
width={40}
|
|
height={40}
|
|
className="w-10 h-10 rounded-full object-cover"
|
|
/>
|
|
<div>
|
|
<Link
|
|
href={`/authors/${article.authorSlug}`}
|
|
className="font-serif font-bold text-sm hover:text-[#1D4ED8] transition-colors text-[#1e293b]">
|
|
{article.author}
|
|
</Link>
|
|
<p className="font-body text-xs text-[#777]">{article.authorTitle}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{(() => {
|
|
const articleUrl = typeof window !== "undefined"
|
|
? window.location.href
|
|
: `https://avbeat.com/articles/${article.slug}`;
|
|
return (
|
|
<>
|
|
<a href={`mailto:?subject=${encodeURIComponent(article.title)}&body=${encodeURIComponent(articleUrl)}`}
|
|
aria-label="Share via email" title="Email"
|
|
className="flex items-center justify-center w-8 h-8 rounded-sm text-[#888] hover:text-[#1D4ED8] hover:bg-[#FFFFFF] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D4ED8]">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
|
<rect x="2" y="4" width="20" height="16" rx="2" />
|
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
|
</svg>
|
|
</a>
|
|
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(articleUrl)}`}
|
|
target="_blank" rel="noopener noreferrer" aria-label="Share on LinkedIn" title="LinkedIn"
|
|
className="flex items-center justify-center w-8 h-8 rounded-sm text-[#888] hover:text-[#0a66c2] hover:bg-[#FFFFFF] transition-colors">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 0h-14C2.24 0 0 2.24 0 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5V5c0-2.76-2.24-5-5-5zM8 19H5V8h3v11zM6.5 6.73a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5zM20 19h-3v-5.6c0-3.37-4-3.12-4 0V19h-3V8h3v1.77c1.4-2.59 7-2.78 7 2.48V19z"/></svg>
|
|
</a>
|
|
<a href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(articleUrl)}&text=${encodeURIComponent(article.title)}&via=BroadcastBeat`}
|
|
target="_blank" rel="noopener noreferrer" aria-label="Share on X" title="X (Twitter)"
|
|
className="flex items-center justify-center w-8 h-8 rounded-sm text-[#888] hover:text-white hover:bg-[#FFFFFF] transition-colors">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
|
</a>
|
|
<a href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(articleUrl)}`}
|
|
target="_blank" rel="noopener noreferrer" aria-label="Share on Facebook" title="Facebook"
|
|
className="flex items-center justify-center w-8 h-8 rounded-sm text-[#888] hover:text-[#1877f2] hover:bg-[#FFFFFF] transition-colors">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.073c0-6.627-5.373-12-12-12S0 5.446 0 12.073C0 18.062 4.388 23.027 10.125 23.927v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
|
</a>
|
|
<a href={`https://www.reddit.com/submit?url=${encodeURIComponent(articleUrl)}&title=${encodeURIComponent(article.title)}`}
|
|
target="_blank" rel="noopener noreferrer" aria-label="Share on Reddit" title="Reddit"
|
|
className="flex items-center justify-center w-8 h-8 rounded-sm text-[#888] hover:text-[#ff4500] hover:bg-[#FFFFFF] transition-colors">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
|
|
</a>
|
|
<a href={`https://api.whatsapp.com/send?text=${encodeURIComponent(article.title + " " + articleUrl)}`}
|
|
target="_blank" rel="noopener noreferrer" aria-label="Share on WhatsApp" title="WhatsApp"
|
|
className="flex items-center justify-center w-8 h-8 rounded-sm text-[#888] hover:text-[#25d366] hover:bg-[#FFFFFF] transition-colors">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.945C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.711.306 1.265.489 1.697.626.713.226 1.362.194 1.875.118.572-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/></svg>
|
|
</a>
|
|
<button type="button"
|
|
onClick={async () => { try { await navigator.clipboard.writeText(articleUrl); } catch {} }}
|
|
aria-label="Copy article link" title="Copy link"
|
|
className="flex items-center justify-center w-8 h-8 rounded-sm text-[#888] hover:text-[#1D4ED8] hover:bg-[#FFFFFF] transition-colors">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
|
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
|
</svg>
|
|
</button>
|
|
<span className="w-px h-5 bg-[#DCE6F2] mx-1" aria-hidden="true" />
|
|
</>
|
|
);
|
|
})()}
|
|
<button
|
|
onClick={handleSaveToReadingList}
|
|
disabled={savingState !== "idle"}
|
|
aria-label={isSaved ? "Remove from reading list" : "Save to reading list"}
|
|
className="text-xs font-bold uppercase tracking-widest text-[#1D4ED8] hover:text-blue-300 disabled:opacity-50 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D4ED8]">
|
|
{savingState === "saving" ? "Saving..." : savingState === "removing" ? "Removing..." : isSaved ? "✓ Saved" : "Save"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Featured Image — editorial standard: cap at 480px high. */}
|
|
<figure className="mb-8 overflow-hidden rounded-sm bg-[#F1F5F9] flex items-center justify-center" style={{maxHeight: 480}}>
|
|
<AppImage
|
|
src={article.image}
|
|
alt={article.alt}
|
|
width={800}
|
|
height={450}
|
|
className="max-h-[480px] w-auto max-w-full object-contain"
|
|
priority
|
|
/>
|
|
</figure>
|
|
|
|
{/* Article Body */}
|
|
{/* DO NOT OVERRIDE — article body prose styles */}
|
|
<div
|
|
className="bb-article-prose prose max-w-none mb-8"
|
|
dangerouslySetInnerHTML={{ __html: article.content }}
|
|
/>
|
|
|
|
{/* Tags */}
|
|
{article.tags && article.tags.length > 0 && (
|
|
<div className="py-6 border-t border-[#222]">
|
|
<p className="font-body text-xs text-[#555] uppercase tracking-wider mb-3">Tags</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{article.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="px-3 py-1 text-xs font-body bg-[#FFFFFF] border border-[#DCE6F2] text-[#888] hover:border-[#1D4ED8] hover:text-[#1D4ED8] transition-colors rounded-sm cursor-default">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Back navigation */}
|
|
<div className="pt-6 border-t border-[#222]">
|
|
<Link
|
|
href={sectionHref}
|
|
className="inline-flex items-center gap-2 text-[#1D4ED8] font-body text-sm hover:underline focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D4ED8]">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
|
<polyline points="15 18 9 12 15 6" />
|
|
</svg>
|
|
Back to {sectionLabel}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Article comments — anonymous read, signed-in members can
|
|
post + vote + reply. */}
|
|
<ArticleComments articleSlug={article.slug} />
|
|
</div>
|
|
|
|
{/* Sidebar — every right-rail block (ads, Related Articles, Related
|
|
Forum Posts) shares the same 300px column width on lg+ so left +
|
|
right edges align cleanly with the ad inventory below. */}
|
|
<aside className="lg:col-span-4">
|
|
<div className="space-y-6 w-full lg:w-[300px] lg:ml-auto">
|
|
{/* Related Articles */}
|
|
{/* DO NOT OVERRIDE — related articles sidebar */}
|
|
<div className="bg-[#111] border border-[#222] p-5">
|
|
<h3 className="font-body font-bold text-xs text-[#1D4ED8] uppercase tracking-widest mb-4 pb-2 border-b border-[#222]">
|
|
Related Articles
|
|
</h3>
|
|
<div className="space-y-4">
|
|
{relatedArticles.map((related) => (
|
|
<Link
|
|
key={related.slug}
|
|
href={`/articles/${related.slug}`}
|
|
className="flex gap-3 group">
|
|
<div className="flex-shrink-0 w-[80px] h-[55px] relative overflow-hidden rounded-sm">
|
|
<AppImage
|
|
src={related.image}
|
|
alt={related.alt}
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
|
sizes="80px"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-[#1D4ED8] font-body text-[9px] font-bold uppercase tracking-wider mb-0.5">
|
|
{related.category}
|
|
</p>
|
|
<p className="font-heading text-[#e0e0e0] text-xs font-bold group-hover:text-[#1D4ED8] transition-colors line-clamp-2 leading-snug">
|
|
{related.title}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Related Forum Posts — surfaces broadcast-pro discussion
|
|
threads relevant to the same topic/keyword as the article.
|
|
Title-keyword match, recency-ordered. Falls back to most-
|
|
recently-active threads so the box is never empty. */}
|
|
{relatedForumThreads.length > 0 && (
|
|
<div className="bg-[#111] border border-[#222] p-5">
|
|
<h3 className="font-body font-bold text-xs text-[#1D4ED8] uppercase tracking-widest mb-4 pb-2 border-b border-[#222]">
|
|
Related Forum Posts
|
|
</h3>
|
|
<ul className="space-y-3.5">
|
|
{relatedForumThreads.map((t) => (
|
|
<li key={t.id}>
|
|
<Link href={`/forum/thread/${t.id}`} className="group block">
|
|
<p className="font-heading text-[#e0e0e0] text-xs font-bold group-hover:text-[#1D4ED8] transition-colors line-clamp-2 leading-snug">
|
|
{t.title}
|
|
</p>
|
|
<p className="flex items-center gap-2 mt-1 text-[10px] text-[#666]">
|
|
{t.category_name && (
|
|
<span className="text-[#1D4ED8] font-body font-bold uppercase tracking-wider">
|
|
{t.category_name}
|
|
</span>
|
|
)}
|
|
<span>·</span>
|
|
<span>{t.reply_count} {t.reply_count === 1 ? "reply" : "replies"}</span>
|
|
{t.vote_score > 0 && <><span>·</span><span>▲ {t.vote_score}</span></>}
|
|
</p>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link
|
|
href="/forum"
|
|
className="block mt-4 pt-3 border-t border-[#222] text-[11px] text-[#1D4ED8] hover:underline font-body font-semibold uppercase tracking-wider"
|
|
>
|
|
Browse all forum threads →
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
{/* Sidebar ad stack — 300x600 + 300x250 rotating */}
|
|
<SidebarAdStack />
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</article>
|
|
|
|
{/* Toast Notification */}
|
|
{saveToast && (
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
className="fixed bottom-4 right-4 bg-[#FFFFFF] border border-[#1D4ED8] text-white px-4 py-3 rounded-sm text-sm font-body shadow-lg z-50">
|
|
{saveToast}
|
|
</div>
|
|
)}
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
} |