; if (!visible) return placeholder; return

{children}

; }; export const ScrollBox = ({children, maxHeight = 300, showHint = true, ariaLabel = "Scrollable content", style = {}, className = "", ...rest}) => { const contentRef = useRef(null); const [isOverflowing, setIsOverflowing] = useState(false); useEffect(() => { const checkOverflow = () => { if (contentRef.current) { const maxHeightPx = typeof maxHeight === "number" ? maxHeight : parseInt(maxHeight, 10) || 300; setIsOverflowing(contentRef.current.scrollHeight > maxHeightPx); } }; checkOverflow(); window.addEventListener("resize", checkOverflow); return () => window.removeEventListener("resize", checkOverflow); }, [maxHeight, children]); return

{ const el = e.target; const atBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 10; const hint = el.parentNode.querySelector("[data-scroll-hint]"); if (hint) hint.style.opacity = atBottom ? "0" : "1"; }}> {children}

{showHint && isOverflowing &&

Scroll for more ↓

}

; }; export const CustomDivider = ({color = "var(--lp-color-border-default)", middleText = "", spacing = "default", style = {}, className = "", ...rest}) => { const spacingPresets = { default: { margin: "24px 0" }, overlap: { margin: "-1rem 0 -1rem 0" }, tight: { margin: "0 0 -1rem 0" }, section: { margin: "0 0 -2rem 0" }, sectionOverlap: { margin: "-1rem 0 -2rem 0" }, deepOverlap: { margin: "-1rem 0 -1.5rem 0" } }; const spacingStyle = spacingPresets[spacing] || spacingPresets.default; return

{middleText && <> {middleText} }

; }; export const MarkdownEmbed = ({url, className = '', style = {}, ...rest}) => { const [html, setHtml] = useState(''); useEffect(() => { fetch(url).then(res => res.text()).then(md => { const converted = md.replace(/```(\w*)\n([\s\S]*?)```/g, '

$2

').replace(/`([^`]+)`/g, '$1').replace(/!\[([^\]]*)\]$([^)]+)$/g, '

').replace(/\[([^\]]+)\]$([^)]+)$/g, '$1').replace(/^######\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^#####\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^####\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^###\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^##\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^#\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/\*\*\*(.+?)\*\*\*/g, '$1').replace(/\*\*(.+?)\*\*/g, '$1').replace(/\*(.+?)\*/g, '$1').replace(/^---$/gm, '

').replace(/^[-*]\s+(.+)$/gm, '

').replace(/\n\n/g, '

').replace(/\n/g, '
'); setHtml('

' + converted + '

'); }); }, [url]); if (!html) return

; return

; }; export const DiscordAnnouncements = ({serverName = 'Livepeer', items = [], limit, ScrollBox, scrollMaxHeight = 300, className = '', style = {}, ...rest}) => { const sanitiseHTML = html => { if (!html || typeof html !== 'string') return ''; return html.replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(/\bon\w+\s*=\s*(['"])[^'"]*\1/gi, '').replace(/\bon\w+\s*=\s*[^\s>]*/gi, '').replace(/javascript\s*:/gi, ''); }; const displayItems = limit ? items.slice(0, limit) : items; if (!displayItems || displayItems.length === 0) { return

No announcements at this time.

; } const parseContent = content => { const withLinks = content.replace(/\[([^\]]+)\]$([^)]+)$/g, '$1 ↗'); return withLinks; }; return

{displayItems.map((announcement, index) =>

{serverName} {} • {new Date(announcement.timestamp).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} View in Discord{' '}

{index < displayItems.length - 1 &&

}

)}

; }; export const RssBlogCardLayout = ({items = [], cols = 2, limit, className = '', style = {}, ...rest}) => { const displayItems = limit ? items.slice(0, limit) : items; if (!displayItems || displayItems.length === 0) { return

No blog posts at this time.

; } return {displayItems.map((props, idx) => )} ; }; export const RssBlogCard = ({title, content, href, author = '', excerpt = '', datePosted = null, readingTime = null, img = null, icon = 'book-open', cta = 'Read More', className = '', style = {}, ...rest}) => { const sanitiseHTML = html => { if (!html || typeof html !== 'string') return ''; return html.replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(/\bon\w+\s*=\s*(['"])[^'"]*\1/gi, '').replace(/\bon\w+\s*=\s*[^\s>]*/gi, '').replace(/javascript\s*:/gi, ''); }; const displayContent = content || excerpt; const showScrollHint = displayContent && displayContent.length > 500; return {title} } href={href} cta={cta} img={img || undefined} arrow {...rest}>

{datePosted &&

{datePosted}

} {readingTime &&

Read Time: {readingTime} minutes

}

{ const el = e.target; const atBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 10; const hint = el.nextSibling; if (hint) hint.style.display = atBottom ? 'none' : 'block'; }} dangerouslySetInnerHTML={{ __html: sanitiseHTML(displayContent) }} /> {showScrollHint &&

Scroll for more ↓

} ; }; export const YouTubeVideoData = ({items = [], limit, cols = 2, className = "", style = {}, ...rest}) => { const displayItems = limit ? items.slice(0, limit) : items; if (!displayItems || displayItems.length === 0) { return

No videos at this time.

; } const getEmbedUrl = href => { if (!href) return ""; const videoId = href.split("v=")[1]?.split("&")[0]; return videoId ? `https://www.youtube.com/embed/${videoId}` : href; }; return {displayItems.map((item, idx) => { if (!item || !item.href) return null; const needsSpacer = idx > 0 && idx % cols === 0; return <> {needsSpacer &&

} {needsSpacer &&

} ; })} ; }; export const YouTubeVideo = ({embedUrl, url, title = "", author = "", hint = "", caption, className = "", style = {}, ...rest}) => { const toEmbedUrl = value => { if (!value || typeof value !== "string") return ""; const source = value.trim(); if (!source) return ""; try { const parsed = new URL(source); const host = parsed.hostname.replace(/^www\./, ""); if (host === "youtube.com" || host === "youtube-nocookie.com") { if (parsed.pathname.startsWith("/embed/")) return source; const videoId = parsed.pathname.startsWith("/shorts/") ? parsed.pathname.split("/").filter(Boolean)[1] : parsed.searchParams.get("v"); if (!videoId) return ""; const params = new URLSearchParams(parsed.search); params.delete("v"); const query = params.toString(); return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`; } if (host === "youtu.be") { const videoId = parsed.pathname.split("/").filter(Boolean)[0]; if (!videoId) return ""; const query = parsed.searchParams.toString(); return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`; } } catch (_err) { return ""; } return ""; }; const resolvedEmbedUrl = toEmbedUrl(embedUrl || url); if (!resolvedEmbedUrl) { return null; } const isValidYouTubeUrl = resolvedEmbedUrl.includes("youtube.com/embed/"); if (!isValidYouTubeUrl) { console.warn("Invalid YouTube embed URL:", embedUrl || url); return null; } const buildCaption = () => { if (caption) return caption; if (!author && !title) return null; return {author && <> {author} } {author && title ? `${" "} • ${title}` : title} ; }; const captionContent = buildCaption(); return