@@ -1,34 +1,194 @@ -import clsx from 'clsx'; import { BookMarked, CircleDot, FolderCode, GalleryVertical, GitPullRequest, LoaderCircle, - Star, - Users, UserRound, + TrendingUp, + ShieldCheck, + Shield, + ShieldPlus, + Megaphone, } from 'lucide-solid'; +import clsx from 'clsx'; import { A } from '@solidjs/router'; import { createQuery } from '@tanstack/solid-query'; -import { For, Show, createEffect, createMemo, onCleanup, type Component, type JSX } from 'solid-js'; +import { For, Show, createEffect, createMemo, createSignal, onCleanup, type Component, type JSX } from 'solid-js'; -import { Avatar, ErrorState, LoadingState } from '../components/common'; +import { Avatar, ErrorState, LoadingState, StateBadge } from '../components/common'; +import { RepoCard } from '../components/repo'; import { listFollowRecords } from '../lib/api/graph'; import { resolveActor } from '../lib/api/identity'; import { listRepoRecords, type RepoRecord } from '../lib/api/repos'; import { useAuth } from '../lib/auth'; import { useLiveEvents, type LiveEvent } from '../lib/live-events'; -import { formatRelativeTime, loadRecentRepos } from '../lib/repo-utils'; +import { formatRelativeTime, loadRecentRepos, loadRecentIssuesPulls } from '../lib/repo-utils'; -const SAMPLE_REPOS = [ - { owner: 'mary.my.id', slug: 'atcute' }, - { owner: 'mary.my.id', slug: 'boat' }, - { owner: 'mary.my.id', slug: 'aglais' }, +const SAMPLE_REPOS: Array<{ + owner: string; + slug: string; + description?: string; + language?: string; + stars?: number; + forks?: number; + openIssues?: number; + openPRs?: number; +}> = [ + { owner: 'nekomimi.pet', slug: 'wisp.place-monorepo', description: 'Monorepo for wisp.place. A static site hosting service built on top of the AT Protocol.', language: 'TypeScript', stars: 94, openIssues: 39, openPRs: 23 }, + { owner: 'mary.my.id', slug: 'atcute', description: 'a collection of lightweight TypeScript packages for AT Protocol, the protocol powering Bluesky', language: 'TypeScript', stars: 101, openIssues: 8 }, + { owner: 'pds.ls', slug: 'pdsls', description: 'atmosphere explorer', language: 'TypeScript', stars: 491, openIssues: 20, openPRs: 21 }, ]; +const FALLBACK_ENTRIES = [ + { + title: 'tail CI logs over SSH', + link: 'https://blog.tangled.org/ssh', + summary: 'never leave your terminal to check on CI!', + updated: '2026-05-28T00:00:00Z', + author: 'Akshay' + }, + { + title: 'combat LLM spam by building a web of trust', + link: 'https://blog.tangled.org/vouching', + summary: 'vouching on tangled!', + updated: '2026-05-01T00:00:00Z', + author: 'Akshay' + }, + { + title: 'we need a federation of forges', + link: 'https://blog.tangled.org/federation', + summary: 'git is decentralized, but what of the rest?', + updated: '2026-04-29T00:00:00Z', + author: 'Akshay' + }, + { + title: 'newsletter 01 — hello!', + link: 'https://blog.tangled.org/newsletter-01', + summary: 'kicking off our newsletter!', + updated: '2026-04-16T00:00:00Z', + author: 'Anirudh' + }, + { + title: 'announcing our €3,8M seed round', + link: 'https://blog.tangled.org/seed', + summary: "and more on what's next", + updated: '2026-03-02T00:00:00Z', + author: 'Anirudh' + } +]; + +const fetchBlogFeed = async (): Promise => { + try { + const response = await fetch('https://blog.tangled.org/feed.xml'); + if (!response.ok) throw new Error('Failed to fetch'); + const text = await response.text(); + const parser = new DOMParser(); + const xmlDoc = parser.parseFromString(text, 'text/xml'); + const entries = xmlDoc.getElementsByTagName('entry'); + const posts = []; + for (let i = 0; i < entries.length; i++) { + const entry = entries[i]; + const title = entry.getElementsByTagName('title')[0]?.textContent || ''; + const updated = entry.getElementsByTagName('updated')[0]?.textContent || ''; + const summary = entry.getElementsByTagName('summary')[0]?.textContent || ''; + const authorName = entry.getElementsByTagName('author')[0]?.getElementsByTagName('name')[0]?.textContent || ''; + + let href = ''; + const links = entry.getElementsByTagName('link'); + for (let j = 0; j < links.length; j++) { + const link = links[j]; + if (link.getAttribute('rel') === 'alternate' || !link.getAttribute('rel')) { + href = link.getAttribute('href') || ''; + break; + } + } + posts.push({ + title, + link: href || 'https://blog.tangled.org', + summary, + updated, + author: authorName, + }); + } + return posts; + } catch (err) { + console.warn('CORS or network error fetching blog feed, using fallback', err); + return FALLBACK_ENTRIES; + } +}; + +const formatBlogDate = (dateStr: string) => { + try { + const date = new Date(dateStr); + return date.toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric' + }); + } catch { + return dateStr; + } +}; + +const ANNOUNCEMENT_COLORS = [ + 'untangled-home-promo-card-indigo', + 'untangled-home-promo-card-green', + 'untangled-home-promo-card-purple', + 'untangled-home-promo-card-blue', + 'untangled-home-promo-card-amber' +]; + +const hashStringToIndex = (str: string, count: number): number => { + let hash = 0; + for (let i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + return Math.abs(hash) % count; +}; + +const AnnouncementCard: Component<{ + title: string; + link: string; + summary: string; + updated: string; + author: string; + cardClass: string; +}> = (props) => { + const formattedDate = () => formatBlogDate(props.updated); + + return ( +

+ +

+ {props.author} + {formattedDate()} +

+ {props.title} +

+ {props.summary} +

+ + Read more → + +

+ ); +}; + const HOME_ACTIVITY_SOURCES = [ 'sh.tangled.repo.issue:repoDid', 'sh.tangled.repo.issue:repo', 'sh.tangled.repo.pull:target.repo', @@ -55,8 +215,9 @@ href: string; at?: string; body?: string; actorDid?: string; + actorHandle?: string; }; type FollowingHomeData = { actors: Array<{ @@ -78,11 +239,8 @@ const timestamp = item.at ? new Date(item.at).getTime() : 0; return Number.isFinite(timestamp) ? timestamp : 0; }; -const formatCount = (count: number, singular: string, plural = `${singular}s`) => - `${count} ${count === 1 ? singular : plural}`; - const homeRepoItem = (owner: string, repo: RepoRecord): HomeRepoItem => { const slug = repoSlug(repo); return { owner, @@ -148,8 +306,9 @@ href: repoItem.href, at: repoItem.createdAt, body: repoItem.description, actorDid: item.actor.did, + actorHandle: item.actor.handle, }; }), ) .sort((left, right) => activityTimestamp(right) - activityTimestamp(left)) @@ -161,9 +320,12 @@ export const HomePage: Component = () => { const auth = useAuth(); const live = useLiveEvents(); const recentRepos = createMemo(loadRecentRepos); + const recentIssuesPulls = createMemo(loadRecentIssuesPulls); + + const ownReposQuery = createQuery(() => ({ queryKey: ['own-repos', auth.currentDid()], enabled: Boolean(auth.currentDid()), queryFn: async () => { @@ -178,16 +340,51 @@ enabled: Boolean(auth.currentDid()), queryFn: async () => fetchFollowingHomeData(auth.currentDid()!), })); + const [vouchedHandles, setVouchedHandles] = createSignal([]); + + const vouchSuggestionsQuery = createQuery(() => ({ + queryKey: ['vouch-suggestions'], + queryFn: async () => { + const handles = ['nekomimi.pet', 'mary.my.id', 'juliet.paris']; + const resolved = await Promise.all( + handles.map(async (handle) => { + try { + const actor = await resolveActor(handle); + return { + did: actor.did, + handle: actor.handle, + }; + } catch { + return { + did: `did:placeholder:${handle}`, + handle, + }; + } + }) + ); + return resolved; + } + })); + + const blogQuery = createQuery(() => ({ + queryKey: ['blog-feed'], + queryFn: fetchBlogFeed, + })); + + const ownRepoItems = createMemo(() => { const data = ownReposQuery.data; if (!data) return []; return data.records .map((repo) => homeRepoItem(data.actor.handle, repo)) .sort((left, right) => repoTimestamp(right) - repoTimestamp(left)); }); + const currentUserHandle = () => ownReposQuery.data?.actor.handle || ''; + const currentUserDid = () => auth.currentDid() || ''; + const repoByDid = createMemo(() => { const repos = new Map(); for (const repo of ownRepoItems()) { if (repo.repoDid) repos.set(repo.repoDid, repo); @@ -223,8 +420,10 @@ live.clear(); }); }); + + const activityItems = createMemo(() => { const repos = repoByDid(); const liveItems = live.events() .map((event): HomeActivityItem | null => { @@ -236,8 +435,10 @@ ...label, repoLabel: repo.title, href: eventActivityHref(repo, event), at: event.receivedAt, + actorDid: currentUserDid(), + actorHandle: currentUserHandle(), }; }) .filter((item): item is HomeActivityItem => Boolean(item)); @@ -248,8 +449,10 @@ repoLabel: repo.title, href: repo.href, at: repo.createdAt, body: repo.description, + actorDid: currentUserDid(), + actorHandle: currentUserHandle(), })); return [...liveItems, ...repoItems] .sort((left, right) => activityTimestamp(right) - activityTimestamp(left)) @@ -258,57 +461,14 @@ return (

- -

activity

- - - 0} fallback="idle"> - {formatCount(ownRepoItems().length, 'repo')} watched - - -

- } title="following" /> - } - > +

+ {/* Recent Repos */} +

+ } title="recent" /> } + when={recentRepos().length > 0} + fallback={} > - } - > - 0} - fallback={} - > -

- - {(actor) => ( -

- - - {actor.handle} - {formatCount(actor.repoCount, 'repo')} - -

- )} - -

- - +

+ + {(repo) => ( + + )} + +

+ + {/* Recent Issues / PRs */} +

+ } title="recent issues / prs" /> + 0} + fallback={} + > +

+ + {(item) => ( + +

+ {item.title}{' '} + #{item.number} +

+ + {item.author} · {item.repoLabel} +

+ + )} + +

- + +

- } title="recent repositories" /> - 0} - fallback={} - > -

- - {(repo) => ( - - {repo.title} - {formatRelativeTime(repo.updatedAt)} - - )} - +

+ {/* Left sidebar announcements */} +

+ -

- } title="following activity" /> +

+ } title="following activity" /> } > @@ -424,12 +611,89 @@

- } title="sample repositories" /> - -

+ } title="trending" /> +

+ + {(repo) => ( + + )} + +

+ + {/* Suggested (Vouches) Section */} +

+ +

suggested

+ + + view all → + + +

+ }> + + {(suggestion) => { + const isVouched = () => vouchedHandles().includes(suggestion.handle); + const toggleVouch = () => { + if (!auth.currentDid()) { + alert('Please sign in to vouch for users.'); + return; + } + if (isVouched()) { + setVouchedHandles(prev => prev.filter(h => h !== suggestion.handle)); + } else { + setVouchedHandles(prev => [...prev, suggestion.handle]); + } + }; + return ( +

+ +

+ + {suggestion.handle} + + + + +

+ +

+ ); + }} + + +

); @@ -461,77 +725,72 @@

Checking your repositories.

); -const RepoLinkRow: Component<{ - href: string; - title: string; - description?: string; - meta?: string; -}> = (props) => ( - - - - {props.title} - - - {props.description} - - - {props.meta} - - -); +const ActivityRow: Component<{ item: HomeActivityItem; index: number }> = (props) => { + const repoUrl = () => `/${props.item.repoLabel}`; + const actorUrl = () => props.item.actorHandle ? `/${props.item.actorHandle}` : '#'; -const ActivityRow: Component<{ item: HomeActivityItem; index: number }> = (props) => ( -

- 0}> -

- -

- - - - + const actionText = () => { + if (props.item.kind === 'repo') return 'published repository'; + if (props.item.kind === 'issue') return 'created issue in'; + if (props.item.kind === 'pull') return 'opened pull request in'; + return 'updated'; + }; + + return ( +

+ 0}> +

+ +

+ {/* Header row */} +

- + - {props.item.title} - {props.item.repoLabel} - - {formatRelativeTime(props.item.at)} + + {props.item.actorHandle || 'user'} + + {actionText()} + + {props.item.repoLabel} + + + {formatRelativeTime(props.item.at)} + +

+ + {/* Content row */} + +

+ }> + + + + {props.item.title} + +

+ +

+ {props.item.body} +

+ +

+ } + > + +

- - - {props.item.body} - -

-); + ); +}; -const ActivityIcon: Component<{ kind: HomeActivityKind }> = (props) => ( - }> - - - } - > - - -); - -const HomeSampleRepos: Component<{ compact?: boolean }> = (props) => ( -

- - {(repo) => ( - - {repo.owner} - {repo.slug} - - )} - -

-);