/* global React, ReactDOM */ const BSKY_HANDLE = 'colewebdev.bsky.social'; const BSKY_API = 'https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed'; function timeAgo(isoString) { const diff = Date.now() - new Date(isoString).getTime(); const mins = Math.floor(diff / 60000); if (mins < 1) return 'just now'; if (mins < 60) return `${mins}m ago`; const hrs = Math.floor(mins / 60); if (hrs < 24) return `${hrs}h ago`; const days = Math.floor(hrs / 24); if (days < 30) return `${days}d ago`; const d = new Date(isoString); return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } function postUrl(post) { const rkey = post.uri.split('/').pop(); return `https://bsky.app/profile/${post.author.handle}/post/${rkey}`; } function safeHostname(uri) { try { return new URL(uri).hostname; } catch { return uri; } } function PostEmbed({ embed }) { if (!embed) return null; const type = embed.$type; if (type === 'app.bsky.embed.images#view' && embed.images?.length) { return (
{embed.images.slice(0, 4).map((img, i) => ( {img.alt ))}
); } if (type === 'app.bsky.embed.external#view' && embed.external) { const ext = embed.external; return ( {ext.thumb && }
{ext.title &&
{ext.title}
} {ext.description &&
{ext.description}
}
{safeHostname(ext.uri)}
 ); } return null; } function SocialSidebar() { return ( ); } function SocialNewsPage() { const [posts, setPosts] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [cursor, setCursor] = React.useState(null); const [loadingMore, setLoadingMore] = React.useState(false); function fetchPosts(cur) { const params = new URLSearchParams({ actor: BSKY_HANDLE, limit: 20 }); if (cur) params.set('cursor', cur); return fetch(`${BSKY_API}?${params}`) .then(res => { if (!res.ok) throw new Error(`API error ${res.status}`); return res.json(); }); } React.useEffect(() => { fetchPosts() .then(data => { setPosts(data.feed.filter(item => item.post?.record != null)); setCursor(data.cursor || null); }) .catch(e => setError(e.message)) .finally(() => setLoading(false)); }, []); function loadMore() { if (!cursor || loadingMore) return; setLoadingMore(true); fetchPosts(cursor) .then(data => { setPosts(prev => [...prev, ...data.feed.filter(item => item.post?.record != null)]); setCursor(data.cursor || null); }) .catch(e => setError(e.message)) .finally(() => setLoadingMore(false)); } return (
Social News

From our Bluesky.

Live from the COLEwebdev team.{' '} Follow us on Bluesky →

{loading && (
Loading feed…
)} {error && (
Could not load feed — {error}
)} {!loading && !error && posts.length === 0 && (
No posts found.
)} {posts.map((item, idx) => { const post = item.post; const isRepost = !!item.reason; const text = post.record?.text || ''; return (
{isRepost && (
↻ Reposted
)}
{post.author.avatar && ( )}
{post.author.displayName || post.author.handle}
@{post.author.handle}
{text ?

{text}

: null}
♥ {post.likeCount || 0} ↻ {post.repostCount || 0} ↩ {post.replyCount || 0}
View on Bluesky →
); })} {cursor && !loading && (
)}