\n);\n\nconst ErrorMessage: React.FC<{ message: string }> = ({ message }) => (\n

\n ❌\n {message}\n

\n);\n\nconst UserProfileCard: React.FC<{ user: GitHubUser }> = ({ user }) => (\n

\n \n \n \n \n

\n {user.name || user.login}\n

@{user.login}

\n {user.bio && (\n

{user.bio}

\n )}\n

\n {user.location && (\n \n 📍 {user.location}\n \n )}\n {user.company && (\n \n 🏢 {user.company}\n \n )}\n {user.blog && (\n \n 🔗 {user.blog}\n \n )}\n {user.twitter_username && (\n \n 🐦 @{user.twitter_username}\n \n )}\n {user.email && (\n \n ✉️ {user.email}\n \n )}\n

\n Joined GitHub on {formatDate(user.created_at)}\n •\n Last updated {formatDate(user.updated_at)}\n •\n User ID: {user.id}\n

\n);\n\nconst StatsGrid: React.FC<{ user: GitHubUser }> = ({ user }) => (\n

\n {[\n { label: 'Followers', value: user.followers, icon: '👥' },\n { label: 'Following', value: user.following, icon: '👤' },\n { label: 'Public Repos', value: user.public_repos, icon: '📚' },\n { label: 'Public Gists', value: user.public_gists, icon: '📝' }\n ].map((stat) => (\n

{stat.icon}

\n {stat.value.toLocaleString()}\n

{stat.label}

\n ))}\n

\n);\n\nconst RecentRepos: React.FC<{ repos: GitHubRepo[] }> = ({ repos }) => (\n

\n 📚 Recent Repositories\n

\n {repos.slice(0, 5).map((repo) => (\n

\n \n {repo.name}\n \n

\n \n ⭐ {repo.stargazers_count}\n \n \n 🍴 {repo.forks_count}\n \n

\n {repo.description && (\n

{repo.description}

\n )}\n

\n {repo.language && (\n \n \n {repo.language}\n \n )}\n {repo.topics.length > 0 && (\n

\n {repo.topics.slice(0, 3).map((topic) => (\n \n {topic}\n \n ))}\n

\n )}\n

\n \n Updated {formatDate(repo.updated_at)}\n \n

\n ))}\n

\n);\n\nconst RecentActivity: React.FC<{ events: GitHubEvent[] }> = ({ events }) => (\n

\n ⚡ Recent Activity\n

\n {events.slice(0, 8).map((event) => (\n

\n {event.type === 'PushEvent' && '📝'}\n {event.type === 'CreateEvent' && '🆕'}\n {event.type === 'WatchEvent' && '⭐'}\n {event.type === 'ForkEvent' && '🍴'}\n {event.type === 'IssuesEvent' && '🐛'}\n {event.type === 'PullRequestEvent' && '🔀'}\n {!['PushEvent', 'CreateEvent', 'WatchEvent', 'ForkEvent', 'IssuesEvent', 'PullRequestEvent'].includes(event.type) && '📋'}\n

{getEventDescription(event)}

\n {formatDate(event.created_at)}\n

\n ))}\n

\n);\n\nconst RawDataSection: React.FC<{ rawResponses: any }> = ({ rawResponses }) => {\n const [expandedSection, setExpandedSection] = useState(null);\n\n const toggleSection = (section: string) => {\n setExpandedSection(expandedSection === section ? null : section);\n };\n\n return (\n

\n 🔍 Raw API Responses\n

\n Click on any section below to view the raw JSON response from GitHub's API\n

\n {Object.entries(rawResponses).map(([key, data]) => (\n

\n toggleSection(key)}\n className=\"w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 rounded-t-lg flex items-center justify-between transition-colors\"\n >\n \n {key} API Response ({key === 'user' ? '1 object' : `${Array.isArray(data) ? data.length : 1} items`})\n \n \n {expandedSection === key ? '▼' : '▶'}\n \n \n {expandedSection === key && (\n

\n                  {JSON.stringify(data, null, 2)}\n

\n )}\n

\n ))}\n

\n 💡 API Information: This data is fetched from GitHub's REST API v3. \n The APIs used are: /users/{`{username}`}, /users/{`{username}`}/repos, \n and /users/{`{username}`}/events/public.\n

\n );\n};\n\n// Main App Component\nconst App: React.FC = () => {\n const [username, setUsername] = useState('');\n const [profileData, setProfileData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState('');\n\n const fetchProfile = async (searchUsername: string) => {\n if (!searchUsername.trim()) return;\n\n setLoading(true);\n setError('');\n setProfileData(null);\n\n try {\n const response = await fetch(`/api/user/${encodeURIComponent(searchUsername.trim())}`);\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || 'Failed to fetch profile');\n }\n\n setProfileData(data);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'An error occurred');\n } finally {\n setLoading(false);\n }\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n fetchProfile(username);\n };\n\n // Load a default profile on mount\n useEffect(() => {\n fetchProfile('octocat');\n }, []);\n\n return (\n

\n GitHub Profile Viewer\n

\n Enter a GitHub username to view their comprehensive profile\n

\n \n \n

\n\n {loading && }\n \n {error && }\n\n {profileData && (\n

\n \n \n \n \n \n

\n )}\n

\n );\n};\n\n// Render the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[126,168],"fcc54224-4c75-11f0-9f79-76b3cceeab13","index.html","fcc54350-4c75-11f0-9f79-76b3cceeab13",["D",1750273008406],"\n\n\n \n \n GitHub User Profile Viewer\n \n \n \n\n\n

\n \n\n",[],[126,176],["D",1750273008406],[151,152,153],[126],"5a439d2e-4c76-11f0-8082-76b3cceeab13","index.ts",8,["D",1750273165262],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// GitHub API interfaces\ninterface GitHubUser {\n login: string;\n id: number;\n avatar_url: string;\n name: string | null;\n company: string | null;\n blog: string | null;\n location: string | null;\n email: string | null;\n bio: string | null;\n twitter_username: string | null;\n public_repos: number;\n public_gists: number;\n followers: number;\n following: number;\n created_at: string;\n updated_at: string;\n html_url: string;\n}\n\ninterface GitHubRepo {\n id: number;\n name: string;\n full_name: string;\n description: string | null;\n html_url: string;\n language: string | null;\n stargazers_count: number;\n forks_count: number;\n updated_at: string;\n created_at: string;\n topics: string[];\n}\n\ninterface GitHubEvent {\n id: string;\n type: string;\n created_at: string;\n repo?: {\n name: string;\n url: string;\n };\n payload: any;\n}\n\ninterface GitHubProfileData {\n user: GitHubUser;\n repos: GitHubRepo[];\n events: GitHubEvent[];\n rawResponses: {\n user: any;\n repos: any;\n events: any;\n };\n}\n\n// Helper function to make GitHub API requests\nasync function fetchGitHubAPI(endpoint: string): Promise {\n const headers: Record = {\n 'Accept': 'application/vnd.github.v3+json',\n 'User-Agent': 'GitHub-Profile-Viewer'\n };\n\n // Add GitHub token if available (for higher rate limits)\n const githubToken = Deno.env.get('GITHUB_TOKEN');\n if (githubToken) {\n headers['Authorization'] = `token ${githubToken}`;\n }\n\n const response = await fetch(`https://api.github.com${endpoint}`, {\n headers\n });\n\n if (!response.ok) {\n if (response.status === 404) {\n throw new Error('User not found');\n }\n if (response.status === 403) {\n const rateLimitRemaining = response.headers.get('X-RateLimit-Remaining');\n const rateLimitReset = response.headers.get('X-RateLimit-Reset');\n if (rateLimitRemaining === '0') {\n const resetTime = rateLimitReset ? new Date(parseInt(rateLimitReset) * 1000).toLocaleTimeString() : 'unknown';\n throw new Error(`GitHub API rate limit exceeded. Resets at ${resetTime}. Consider adding a GITHUB_TOKEN environment variable for higher limits.`);\n }\n throw new Error('GitHub API access forbidden. This might be due to rate limiting.');\n }\n throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);\n }\n\n return await response.json();\n}\n\n// API endpoint to fetch GitHub user profile data\napp.get(\"/api/user/:username\", async c => {\n try {\n const username = c.req.param(\"username\");\n \n if (!username || username.trim() === \"\") {\n return c.json({ error: \"Username is required\" }, 400);\n }\n\n // Fetch user data\n const userResponse = await fetchGitHubAPI(`/users/${username}`);\n \n // Fetch user's repositories (latest 10, sorted by updated)\n const reposResponse = await fetchGitHubAPI(`/users/${username}/repos?sort=updated&per_page=10`);\n \n // Fetch user's recent public events (latest 10)\n const eventsResponse = await fetchGitHubAPI(`/users/${username}/events/public?per_page=10`);\n\n const profileData: GitHubProfileData = {\n user: userResponse,\n repos: reposResponse,\n events: eventsResponse,\n rawResponses: {\n user: userResponse,\n repos: reposResponse,\n events: eventsResponse\n }\n };\n\n return c.json(profileData);\n } catch (error) {\n console.error(\"Error fetching GitHub data:\", error);\n \n // If it's a rate limit error and the user is 'octocat', return demo data\n if (error instanceof Error && error.message.includes('rate limit') && c.req.param(\"username\") === 'octocat') {\n return c.json(getDemoData());\n }\n \n return c.json({ \n error: error instanceof Error ? error.message : \"Failed to fetch GitHub data\" \n }, 500);\n }\n});\n\n// Demo data for when API is rate limited\nfunction getDemoData(): GitHubProfileData {\n const demoUser = {\n login: \"octocat\",\n id: 1,\n avatar_url: \"https://github.com/images/error/octocat_happy.gif\",\n name: \"The Octocat\",\n company: \"@github\",\n blog: \"https://github.blog\",\n location: \"San Francisco\",\n email: null,\n bio: \"A great octopus masquerading as a cat\",\n twitter_username: null,\n public_repos: 8,\n public_gists: 8,\n followers: 9000,\n following: 9,\n created_at: \"2011-01-25T18:44:36Z\",\n updated_at: \"2023-12-07T21:00:00Z\",\n html_url: \"https://github.com/octocat\"\n };\n\n const demoRepos = [\n {\n id: 1296269,\n name: \"Hello-World\",\n full_name: \"octocat/Hello-World\",\n description: \"This your first repo!\",\n html_url: \"https://github.com/octocat/Hello-World\",\n language: \"C\",\n stargazers_count: 80,\n forks_count: 9,\n updated_at: \"2023-12-07T21:00:00Z\",\n created_at: \"2011-01-26T19:01:12Z\",\n topics: [\"octocat\", \"atom\", \"electron\", \"api\"]\n },\n {\n id: 1296270,\n name: \"Spoon-Knife\",\n full_name: \"octocat/Spoon-Knife\",\n description: \"This repo is for demonstration purposes only.\",\n html_url: \"https://github.com/octocat/Spoon-Knife\",\n language: \"HTML\",\n stargazers_count: 12000,\n forks_count: 144000,\n updated_at: \"2023-12-06T15:30:00Z\",\n created_at: \"2011-01-27T19:06:43Z\",\n topics: [\"forking\", \"git\"]\n }\n ];\n\n const demoEvents = [\n {\n id: \"1234567890\",\n type: \"PushEvent\",\n created_at: \"2023-12-07T21:00:00Z\",\n repo: {\n name: \"octocat/Hello-World\",\n url: \"https://api.github.com/repos/octocat/Hello-World\"\n },\n payload: {\n commits: [\n {\n message: \"Update README.md\"\n }\n ]\n }\n },\n {\n id: \"1234567891\",\n type: \"WatchEvent\",\n created_at: \"2023-12-06T20:00:00Z\",\n repo: {\n name: \"github/docs\",\n url: \"https://api.github.com/repos/github/docs\"\n },\n payload: {}\n }\n ];\n\n return {\n user: demoUser,\n repos: demoRepos,\n events: demoEvents,\n rawResponses: {\n user: { ...demoUser, _note: \"Demo data - API rate limited\" },\n repos: [...demoRepos],\n events: [...demoEvents]\n }\n };\n}\n\n// Health check endpoint\napp.get(\"/api/health\", c => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;",[],[133,186],["D",1750273001253],[149],[133],["D",1750272812559],{"_16":17,"_82":78},{"_16":17,"_76":-5,"_77":78,"_32":33,"_79":80,"_81":26},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":21,"_75":17},"ctx",{"_57":-5,"_103":233,"_234":235,"_236":237,"_238":26,"_239":26,"_240":26,"_241":37,"_242":-5,"_243":-7,"_244":-7,"_245":41,"_246":26,"_247":26,"_248":-5,"_249":26,"_250":26,"_251":26,"_252":-5},"ENV",{"_204":205,"_206":207,"_208":66,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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