/** @jsxImportSource https://esm.sh/react */ import React, { memo, useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // ============================================================================ // SETTINGS - Customize these values // ============================================================================ // Demo mode - set to true to show mock data instead of making API requests const DEMO_MODE = true; // Time window for fetching activity const HOURS_TO_FETCH = 30; // GitHub Settings const GITHUB = { USERNAME: "danphilibin", REPOSITORY: "campsite/campsite", TOKEN_ENV_VAR: "GITHUB_PERSONAL_TOKEN", SECTION_TITLE: "Campsite PRs", }; // Linear Settings const LINEAR = { EMAIL: "dan@campsite.co", TOKEN_ENV_VAR: "LINEAR_PERSONAL_TOKEN", SECTION_TITLE: "Linear Issues", }; // Mock data for demo mode const MOCK_DATA = { prs: [ { title: "Use Campsite SDK in internal integrations", url: "#", meta: "open • 10/24/2024, 9:04:41 PM", }, { title: "Use color + fill for favorite icons", url: "#", meta: "closed • 10/24/2024, 8:47:14 PM", }, { title: "Fix new chat links", url: "#", meta: "closed • 10/24/2024, 8:21:20 PM", }, { title: "View space -> View channel", url: "#", meta: "closed • 10/24/2024, 7:46:28 PM", }, ], issues: [ { title: "Improve channel navigation", url: "#", prefix: "CAMP-123", meta: "Completed 10/24/2024, 8:15:00 PM", }, { title: "Add support for custom emoji reactions", url: "#", prefix: "CAMP-456", meta: "Completed 10/24/2024, 7:30:00 PM", }, { title: "Fix message threading in mobile view", url: "#", prefix: "CAMP-789", meta: "Completed 10/24/2024, 6:45:00 PM", }, ], }; // ============================================================================ // Application Code (do not modify below this line unless you know what you're doing) // ============================================================================ // Common types type ActivityItem = { title: string; url: string; meta: string; prefix?: string; }; const ActivityList = memo(({ items, type }: { items: ActivityItem[]; type: string }) => (

{type}

{items.length === 0 ?

No {type.toLowerCase()} found in the last {HOURS_TO_FETCH} hours

: (

{item.prefix ? `${item.prefix}: ` : ""} {item.title}
{item.meta}

)}

)); const ErrorMessage = memo(({ message }: { message: string }) =>

Error: {message}

); function App() { const [data, setData] = useState<{ prs: ActivityItem[] | null; issues: ActivityItem[] | null; }>({ prs: null, issues: null }); const [errors, setErrors] = useState>({}); const [loading, setLoading] = useState(true); useEffect(() => { Promise.all([ fetch("/api/prs").then(async (res) => { if (!res.ok) { const error = await res.json(); throw new Error(error.message || "Failed to fetch PRs"); } return res.json(); }), fetch("/api/issues").then(async (res) => { if (!res.ok) { const error = await res.json(); throw new Error(error.message || "Failed to fetch issues"); } return res.json(); }), ]) .then(([prs, issues]) => { setData({ prs, issues }); }) .catch((err) => { setErrors({ api: err.message }); }) .finally(() => { setLoading(false); }); }, []); if (loading) return

; if (errors.api) return ; return (

What did I work on today?

{DEMO_MODE && (

👋 This is a demo version showing sample data.

)} {data.prs && } {data.issues && }

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } const MILLISECONDS_PER_HOUR = 60 * 60 * 1000; const JSON_HEADERS = { "Content-Type": "application/json" }; const createErrorResponse = (message: string, status = 500) => new Response(JSON.stringify({ message }), { status, headers: JSON_HEADERS }); export default async function server(req: Request): Promise { const url = new URL(req.url); // Return mock data in demo mode if (DEMO_MODE) { if (url.pathname === "/api/prs") { return new Response(JSON.stringify(MOCK_DATA.prs), { headers: JSON_HEADERS }); } if (url.pathname === "/api/issues") { return new Response(JSON.stringify(MOCK_DATA.issues), { headers: JSON_HEADERS }); } } if (url.pathname === "/api/prs") { const githubToken = Deno.env.get(GITHUB.TOKEN_ENV_VAR); if (!githubToken) { return createErrorResponse("GitHub token not configured"); } const timeAgo = new Date(Date.now() - (HOURS_TO_FETCH * MILLISECONDS_PER_HOUR)).toISOString(); const response = await fetch( `https://api.github.com/search/issues?q=repo:${GITHUB.REPOSITORY}+author:${GITHUB.USERNAME}+created:>${timeAgo}+type:pr`, { headers: { "Accept": "application/vnd.github.v3+json", "Authorization": `Bearer ${githubToken}`, "User-Agent": "Val-Town-PR-Fetcher", }, }, ); if (!response.ok) { const error = await response.json(); return createErrorResponse(error.message || "Failed to fetch from GitHub", response.status); } const data = await response.json(); const prs = data.items.map((pr: any) => ({ title: pr.title, url: pr.html_url, meta: `${pr.state} • ${new Date(pr.created_at).toLocaleString()}`, })); return new Response(JSON.stringify(prs), { headers: JSON_HEADERS }); } if (url.pathname === "/api/issues") { const linearToken = Deno.env.get(LINEAR.TOKEN_ENV_VAR); if (!linearToken) { return createErrorResponse("Linear token not configured"); } const timeAgo = new Date(Date.now() - (HOURS_TO_FETCH * MILLISECONDS_PER_HOUR)).toISOString(); const query = ` query { issues( filter: { completedAt: { gt: "${timeAgo}" } assignee: { email: { eq: "${LINEAR.EMAIL}" } } } ) { nodes { id identifier title url completedAt } } } `; const response = await fetch("https://api.linear.app/graphql", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": linearToken, }, body: JSON.stringify({ query }), }); if (!response.ok) { const error = await response.json(); return createErrorResponse(error.message || "Failed to fetch from Linear", response.status); } const data = await response.json(); const issues = data.data.issues.nodes.map((issue: any) => ({ title: issue.title, url: issue.url, prefix: issue.identifier, meta: `Completed ${new Date(issue.completedAt).toLocaleString()}`, })); return new Response(JSON.stringify(issues), { headers: JSON_HEADERS }); } return new Response( ` What did I work on today?

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: 'Inter', system-ui, sans-serif; line-height: 1.4; margin: 0; padding: 16px; color: #000; font-size: 14px; background: #fafafa; } .container { max-width: 600px; margin: 0 auto; background: white; padding: 24px; border-radius: 12px; border: 1px solid #eaeaea; } h1 { font-size: 20px; font-weight: 600; margin: 0 0 24px 0; color: #000; } .section { margin-bottom: 24px; } .section h2 { font-size: 14px; margin: 0 0 12px 0; font-weight: 600; color: #666; } .list { list-style: none; padding: 0; margin: 0; } .item { padding: 8px 0; border-bottom: 1px solid #eaeaea; } .item:last-child { border-bottom: none; } .item a { color: #0070f3; text-decoration: none; font-weight: 500; } .item a:hover { text-decoration: underline; } .meta { color: #666; font-size: 12px; margin-top: 2px; } .error { color: #e00; padding: 12px; background: #fff0f0; border-radius: 6px; font-size: 13px; } .demo-notice { margin: 16px 0; padding: 12px; background: #f5f5f5; border-radius: 6px; text-align: center; } .demo-notice p { margin: 0; color: #666; font-size: 13px; } footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid #eaeaea; text-align: center; font-size: 12px; } footer a { color: #666; } `;