Tangled.sh Follow Graph

\n \n \n 🕸️ Tangled.sh Follow Graph\n \n \n {isDarkMode ? \"☀️\" : \"🌙\"}\n \n

\n \n setStartHandle(e.target.value)}\n disabled={isLoading}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !isLoading && startHandle.trim()) {\n fetchFollowGraph();\n }\n }}\n style={{\n flex: 1,\n minWidth: \"200px\", // Ensure readability on mobile\n padding: \"12px\", // Larger touch target\n fontSize: \"16px\", // Prevent auto-zoom on iOS\n }}\n />\n \n Generate Graph\n \n \n\n {isLoading && (\n \n \n \n \n

\n Discovering connections…(this may take a few minutes)…\n {graph.length > 0 && ` (${graph.length} found)`}\n

\n \n )}\n\n {progress && !isLoading && (\n \n {progress}\n {graph.length > 0 && !isLoading && (\n \n Zoom/pinch to explore. Node circles are movable.\n
\n Click/tap handle to go to their Tangled profile.\n \n )}\n \n )}\n\n {graph.length > 0 && }\n\n \n {graph.map((edge, idx) => (\n

\n {edge.from} → {edge.to}\n

\n ))}\n \n\n \n View Source\n \n\n \n @hrbrmstr.dev\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/fetch-graph\") {\n const { handle } = await request.json();\n\n const agent = new BskyAgent({ service: \"https://bsky.social\" });\n\n async function resolveHandle(handle: string) {\n try {\n const { data } = await agent.resolveHandle({ handle });\n return data.did;\n } catch (error) {\n console.error(\"Handle resolution failed\", error);\n return null;\n }\n }\n\n async function didToHandle(did: string) {\n try {\n const plcResponse = await fetch(`https://plc.directory/${encodeURIComponent(did)}`);\n const plcData = await plcResponse.json();\n return plcData.alsoKnownAs[0]?.replace(\"at://\", \"\") || did;\n } catch (error) {\n console.error(\"Handle resolution from DID failed\", error);\n return did;\n }\n }\n\n async function fetchFollowGraph(startDid: string, maxDepth = 4) {\n const visited = new Set();\n const uniqueEdges = new Set();\n const edges: FollowEdge[] = [];\n let handleCount = 0;\n\n async function traverseGraph(did: string, depth = 0) {\n if (depth > maxDepth || visited.has(did)) return;\n visited.add(did);\n handleCount++;\n\n try {\n const plcResponse = await fetch(`https://plc.directory/${encodeURIComponent(did)}`);\n const plcData = await plcResponse.json();\n const serviceEndpoint = plcData.service.find(\n (s: any) => s.type === \"AtprotoPersonalDataServer\",\n )?.serviceEndpoint;\n\n if (!serviceEndpoint) return;\n\n const followsResponse = await fetch(\n `${serviceEndpoint}/xrpc/com.atproto.repo.listRecords?repo=${\n encodeURIComponent(\n did,\n )\n }&collection=sh.tangled.graph.follow&limit=100`,\n );\n const followsData = await followsResponse.json();\n\n const fromHandle = await didToHandle(did);\n\n for (const record of followsData.records) {\n const subjectDid = record.value.subject;\n const toHandle = await didToHandle(subjectDid);\n\n // Create a unique edge representation\n const edgeKey = `${fromHandle}→${toHandle}`;\n\n // Only add if this edge hasn't been seen before\n if (!uniqueEdges.has(edgeKey)) {\n uniqueEdges.add(edgeKey);\n edges.push({\n from: fromHandle,\n to: toHandle,\n });\n }\n\n // Continue graph traversal\n await traverseGraph(subjectDid, depth + 1);\n }\n } catch (error) {\n console.error(\"Graph traversal error\", error);\n }\n }\n\n await traverseGraph(startDid);\n return edges;\n }\n\n const startDid = await resolveHandle(handle);\n if (!startDid) {\n return new Response(JSON.stringify([]), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const graph = await fetchFollowGraph(startDid);\n return new Response(JSON.stringify(graph), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n \n Tangled.sh Follow Graph\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = ``;","deleted","label",[109],"89bed79e-20a2-11f0-99a0-569c3dd06744","README.md","89bed816-20a2-11f0-99a0-569c3dd06744",1,["D",1742463295520],0,"Tangled.sh is a layered, decentralized social coding graph on top of the AT protocol, with support for storage on Bluesky core PDS or individual PDS instances. It is further comprised of personally hosted git instances (\"knots\").\n\nThis application collects all the handles a given user follows and builds a follow tree until all leaf nodes are reached.",[125],"pulls","branches","forks","envVars",{"_139":129,"_141":129},"connections",{"_139":129,"_140":129},"count","unfilledCount","emptyCount",{"_18":124,"_20":125,"_110":126,"_111":-5,"_112":67,"_113":127,"_114":26,"_22":148,"_64":129,"_117":95,"_119":130,"_121":63,"_122":-5,"_145":149,"_84":150},{"_18":108,"_20":109,"_110":35,"_111":-5,"_112":67,"_113":65,"_114":26,"_22":144,"_64":116,"_117":118,"_119":120,"_121":63,"_122":-5,"_145":146,"_84":147},["D",1742577658117],"children",[],[109],["D",1742463295520],[],[125],["D",1745454291601],{"_16":17,"_82":78},{"_16":17,"_76":-5,"_77":78,"_32":33,"_79":80,"_81":63},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":21,"_75":17},"ctx",{"_56":-5,"_103":188,"_189":190,"_191":192,"_193":63,"_194":63,"_195":63,"_196":26,"_197":-5,"_198":-7,"_199":-7,"_200":129,"_201":63,"_202":63,"_203":-5,"_204":63,"_205":63,"_206":63,"_207":-5},"ENV",{"_159":160,"_161":162,"_163":66,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search