[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_155":156,"_157":158},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",14,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","f5a9173a-94e6-11f1-ac6e-1607ee4eb77e","name","fileType","http","content","/******************************************************************************\n * Draftsim News Performance Tracker — Val.town HTTP Val\n *\n * Replaces the Cloud Run \"update-news-topic\" service that timed out once the\n * Asana project grew to ~900 tasks. Instead of one Asana call per task and one\n * GA4 query per URL, this fetches all tasks in one paginated request with\n * opt_fields and pulls one bulk GA4 report for the whole date range.\n * Publish dates come from the Asana \"Publish Date\" custom field.\n *\n * NOTE: written without template literals — the val.town editor has mangled\n * pasted backticks before. Keep it that way.\n *\n * Environment Variables (val.town Settings > Environment Variables):\n * ASANA_ACCESS_TOKEN — Asana Personal Access Token\n * GOOGLE_SA_JSON — Full Google service-account JSON (stringified)\n * GA_PROPERTY_ID — GA4 property ID (default 368713237)\n ******************************************************************************/\n\nconst WORKSPACE_NAME = \"Draftsim\";\nconst PROJECT_NAME = \"Draftsim News\";\n\n// ========================= TYPES =========================\n\ninterface NewsArticle {\n name: string;\n url: string;\n path: string;\n type: string;\n publishDate: string | null; // YYYY-MM-DD from the Asana Publish Date field\n sources: Record;\n total: number;\n}\n\n// ========================= UTILITIES =========================\n\nfunction base64url(input: string | ArrayBuffer): string {\n let str: string;\n if (typeof input === \"string\") {\n str = btoa(input);\n } else {\n const bytes = new Uint8Array(input);\n let binary = \"\";\n for (const b of bytes) binary += String.fromCharCode(b);\n str = btoa(binary);\n }\n return str.replace(/\\+/g, \"-\").replace(/\\//g, \"_\").replace(/=+$/, \"\");\n}\n\nasync function importPrivateKey(pem: string): Promise {\n const pemBody = pem\n .replace(/-----BEGIN PRIVATE KEY-----/, \"\")\n .replace(/-----END PRIVATE KEY-----/, \"\")\n .replace(/\\s/g, \"\");\n const binaryDer = Uint8Array.from(atob(pemBody), (c) => c.charCodeAt(0));\n return crypto.subtle.importKey(\n \"pkcs8\",\n binaryDer.buffer,\n { name: \"RSASSA-PKCS1-v1_5\", hash: \"SHA-256\" },\n false,\n [\"sign\"],\n );\n}\n\nfunction getUrlPath(fullUrl: string): string {\n let url = fullUrl.trim();\n if (!url.startsWith(\"http://\") && !url.startsWith(\"https://\")) {\n url = \"https://\" + url;\n }\n try {\n return new URL(url).pathname || \"/\";\n } catch {\n return \"/\";\n }\n}\n\nfunction normPath(p: string): string {\n return p.replace(/\\/+$/, \"\").toLowerCase();\n}\n\nfunction normalizeArticleUrl(raw: string): string {\n const u = raw.trim();\n if (/^https?:\\/\\//i.test(u)) return u;\n const stripped = u.replace(/^\\/+/, \"\");\n const firstSeg = stripped.split(\"/\")[0];\n if (firstSeg.includes(\".\")) return \"https://\" + stripped;\n return \"https://draftsim.com/\" + stripped;\n}\n\nfunction classifySource(sourceMedium: string): string {\n const s = sourceMedium.toLowerCase();\n const parts = s.split(\" / \");\n const src = parts[0] || \"\";\n const medium = parts.slice(1).join(\" / \");\n if (\n medium.includes(\"email\") || medium.includes(\"newsletter\") ||\n /beehiiv|mailchimp|klaviyo|convertkit|substack|sendgrid|mailerlite|^email$/\n .test(src)\n ) return \"Email\";\n if (src.includes(\"draftsim\") || medium.includes(\"homepage\")) {\n return \"Homepage\";\n }\n if (src.includes(\"news.google\")) return \"Google News\";\n if (src.includes(\"reddit\")) return \"Reddit\";\n if (src.includes(\"facebook\")) return \"Facebook\";\n if (src.includes(\"discord\")) return \"Discord\";\n if (src.includes(\"google\")) return \"Discover\";\n if (src.includes(\"(direct)\")) return \"Direct\";\n if (/bing|duckduckgo|yahoo|ecosia|brave|startpage|yandex|qwant/.test(src)) {\n return \"Search\";\n }\n if (src === \"t.co\" || src === \"x.com\" || src.includes(\"twitter\")) {\n return \"X / Twitter\";\n }\n if (/chatgpt|openai|perplexity|copilot|gemini|claude|deepseek/.test(src)) {\n return \"AI\";\n }\n return \"Other\";\n}\n\nfunction isValidDate(s: unknown): s is string {\n return typeof s === \"string\" && /^\\d{4}-\\d{2}-\\d{2}$/.test(s) &&\n !isNaN(new Date(s + \"T00:00:00Z\").getTime());\n}\n\n// ========================= GOOGLE AUTH =========================\n\nasync function getGoogleAccessToken(\n email: string,\n privateKey: string,\n scope: string,\n): Promise {\n const header = base64url(JSON.stringify({ alg: \"RS256\", typ: \"JWT\" }));\n const now = Math.floor(Date.now() / 1000);\n const claim = base64url(JSON.stringify({\n iss: email,\n scope,\n aud: \"https://oauth2.googleapis.com/token\",\n iat: now,\n exp: now + 3600,\n }));\n const signInput = header + \".\" + claim;\n const key = await importPrivateKey(privateKey);\n const sig = await crypto.subtle.sign(\n \"RSASSA-PKCS1-v1_5\",\n key,\n new TextEncoder().encode(signInput),\n );\n const jwt = signInput + \".\" + base64url(sig);\n\n const resp = await fetch(\"https://oauth2.googleapis.com/token\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body:\n \"grant_type=urn%3Aietf%3Aparams%3Aoauth%3Agrant-type%3Ajwt-bearer&assertion=\" +\n jwt,\n });\n const data = await resp.json();\n if (!data.access_token) {\n throw new Error(\"Google SA auth failed: \" + JSON.stringify(data));\n }\n return data.access_token;\n}\n\n// ========================= ASANA =========================\n\nconst ASANA_BASE = \"https://app.asana.com/api/1.0\";\n\nasync function asanaGetPaginated(path: string, token: string): Promise {\n const all: any[] = [];\n let url: string | null = ASANA_BASE + path;\n while (url) {\n const resp = await fetch(url, {\n headers: { Authorization: \"Bearer \" + token },\n });\n if (!resp.ok) {\n const text = await resp.text();\n throw new Error(\"Asana \" + resp.status + \": \" + text.slice(0, 300));\n }\n const json = await resp.json();\n all.push(...(json.data || []));\n url = json.next_page?.uri || null;\n }\n return all;\n}\n\nasync function findWorkspaceId(name: string, token: string): Promise {\n const data = await asanaGetPaginated(\"/workspaces?limit=100\", token);\n const ws = data.find((w: any) => w.name === name) ||\n data.find((w: any) =>\n (w.name || \"\").toLowerCase() === name.toLowerCase()\n ) ||\n (data.length === 1 ? data[0] : null);\n if (!ws) {\n const seen = data.map((w: any) => w.name).join(\", \") || \"(none)\";\n throw new Error(\n 'Asana workspace \"' + name + '\" not found. This token can see: ' + seen,\n );\n }\n return ws.gid;\n}\n\nasync function findProjectId(\n name: string,\n workspaceId: string,\n token: string,\n): Promise {\n const data = await asanaGetPaginated(\n \"/projects?workspace=\" + workspaceId + \"&limit=100\",\n token,\n );\n const proj = data.find((p: any) => p.name === name) ||\n data.find((p: any) => (p.name || \"\").toLowerCase() === name.toLowerCase());\n if (!proj) {\n const names = data.slice(0, 30).map((p: any) => p.name).join(\", \") ||\n \"(none)\";\n throw new Error(\n 'Asana project \"' + name + '\" not found. This token sees ' + data.length +\n \" project(s): \" + names,\n );\n }\n return proj.gid;\n}\n\nasync function getPublishedNewsArticles(\n token: string,\n): Promise<\n { name: string; url: string; type: string; publishDate: string | null }[]\n> {\n const workspaceId = await findWorkspaceId(WORKSPACE_NAME, token);\n const projectId = await findProjectId(PROJECT_NAME, workspaceId, token);\n const fields =\n \"name,memberships.section.name,custom_fields.name,custom_fields.display_value,custom_fields.date_value\";\n const tasks = await asanaGetPaginated(\n \"/projects/\" + projectId + \"/tasks?limit=100&opt_fields=\" +\n encodeURIComponent(fields),\n token,\n );\n\n const articles: {\n name: string;\n url: string;\n type: string;\n publishDate: string | null;\n }[] = [];\n for (const task of tasks) {\n const published = (task.memberships || []).some((m: any) =>\n m.section?.name === \"Published\"\n );\n if (!published) continue;\n\n let url: string | null = null;\n let type = \"\";\n let publishDate: string | null = null;\n for (const cf of task.custom_fields || []) {\n if (cf.name === \"URL\" && cf.display_value) url = cf.display_value.trim();\n if (cf.name === \"Type\" && cf.display_value) type = cf.display_value;\n if (cf.name === \"Publish Date\") {\n publishDate = cf.date_value?.date ||\n (cf.display_value ? cf.display_value.slice(0, 10) : null);\n }\n }\n // A dated Published task with no/broken URL is still a real article —\n // keep it and let the WordPress-search fallback resolve its URL.\n // Undated AND URL-less rows are not articles; skip them.\n if (!url && !publishDate) continue;\n url = normalizeArticleUrl(url || \"\");\n articles.push({ name: task.name, url, type, publishDate });\n }\n return articles;\n}\n\n// ========================= GA4 =========================\n\nasync function fetchGA4SourceReport(\n accessToken: string,\n propertyId: string,\n startDate: string,\n endDate: string,\n): Promise>> {\n const allRows: any[] = [];\n let offset = 0;\n const pageSize = 100000;\n while (true) {\n const body = {\n dateRanges: [{ startDate, endDate }],\n dimensions: [{ name: \"pagePath\" }, { name: \"sessionSourceMedium\" }],\n metrics: [{ name: \"screenPageViews\" }],\n limit: pageSize,\n offset,\n };\n const resp = await fetch(\n \"https://analyticsdata.googleapis.com/v1beta/properties/\" + propertyId +\n \":runReport\",\n {\n method: \"POST\",\n headers: {\n Authorization: \"Bearer \" + accessToken,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(body),\n },\n );\n const data = await resp.json();\n if (data.error) throw new Error(\"GA4 error: \" + data.error.message);\n const rows = data.rows || [];\n allRows.push(...rows);\n if (rows.length < pageSize) break;\n offset += pageSize;\n }\n\n const byPath = new Map>();\n for (const row of allRows) {\n const path = normPath(row.dimensionValues[0].value);\n const source = row.dimensionValues[1].value;\n const pvs = parseInt(row.metricValues[0].value, 10) || 0;\n if (!byPath.has(path)) byPath.set(path, {});\n const entry = byPath.get(path)!;\n entry[source] = (entry[source] || 0) + pvs;\n }\n return byPath;\n}\n\n// ========================= REPORT =========================\n\nconst SOURCE_COLUMNS = [\n \"Discover\",\n \"Google News\",\n \"Email\",\n \"Homepage\",\n \"Reddit\",\n \"Facebook\",\n \"Discord\",\n \"X / Twitter\",\n \"Search\",\n \"AI\",\n \"Direct\",\n \"Other\",\n];\n\nasync function buildReport(startDate: string, endDate: string) {\n const asanaToken = Deno.env.get(\"ASANA_ACCESS_TOKEN\");\n if (!asanaToken) throw new Error(\"Missing env var ASANA_ACCESS_TOKEN\");\n const saJsonStr = Deno.env.get(\"GOOGLE_SA_JSON\");\n if (!saJsonStr) throw new Error(\"Missing env var GOOGLE_SA_JSON\");\n const saJson = JSON.parse(saJsonStr);\n const propertyId = Deno.env.get(\"GA_PROPERTY_ID\") || \"368713237\";\n\n const gaTokenPromise = getGoogleAccessToken(\n saJson.client_email,\n saJson.private_key,\n \"https://www.googleapis.com/auth/analytics.readonly\",\n );\n\n const [rawArticles, gaToken] = await Promise.all([\n getPublishedNewsArticles(asanaToken),\n gaTokenPromise,\n ]);\n\n // Resolve unusable URL fields (empty or \"/\") by searching draftsim.com's\n // WordPress API for the task name. Bounded: only the broken handful.\n const broken = rawArticles.filter((a) => !normPath(getUrlPath(a.url)));\n await Promise.all(broken.map(async (a) => {\n try {\n const resp = await fetch(\n \"https://draftsim.com/wp-json/wp/v2/search?search=\" +\n encodeURIComponent(a.name.trim()) + \"&per_page=1\",\n { signal: AbortSignal.timeout(8000) },\n );\n const hits = await resp.json();\n if (Array.isArray(hits) && hits[0]?.url) a.url = hits[0].url;\n } catch {\n // leave as-is; the article shows 0 PVs rather than homepage traffic\n }\n }));\n\n const gaByPath = await fetchGA4SourceReport(\n gaToken,\n propertyId,\n startDate,\n endDate,\n );\n\n const otherRaw: Record = {};\n\n const articles: NewsArticle[] = rawArticles.map((a) => {\n const path = getUrlPath(a.url);\n // A URL that still resolves to the root path would wrongly absorb the\n // site homepage's traffic — treat it as no GA match instead.\n const key = normPath(path);\n const raw = key ? gaByPath.get(key) || {} : {};\n const sources: Record = {};\n for (const col of SOURCE_COLUMNS) sources[col] = 0;\n let total = 0;\n for (const [rawSource, pvs] of Object.entries(raw)) {\n const cat = classifySource(rawSource);\n sources[cat] = (sources[cat] || 0) + pvs;\n total += pvs;\n if (cat === \"Other\") {\n otherRaw[rawSource] = (otherRaw[rawSource] || 0) + pvs;\n }\n }\n return {\n name: a.name,\n url: a.url,\n path,\n type: a.type,\n publishDate: a.publishDate,\n sources,\n total,\n };\n });\n\n const otherBreakdown = Object.entries(otherRaw)\n .sort((x, y) => y[1] - x[1])\n .slice(0, 15)\n .map(([source, pvs]) => ({ source, pvs }));\n\n articles.sort((x, y) => y.total - x.total);\n\n const sourceTotals: Record = {};\n for (const col of SOURCE_COLUMNS) sourceTotals[col] = 0;\n let grandTotal = 0;\n for (const a of articles) {\n for (const col of SOURCE_COLUMNS) sourceTotals[col] += a.sources[col] || 0;\n grandTotal += a.total;\n }\n\n return {\n startDate,\n endDate,\n articleCount: articles.length,\n articlesWithTraffic: articles.filter((a) => a.total > 0).length,\n grandTotal,\n sourceTotals,\n otherBreakdown,\n articles,\n };\n}\n\n// ========================= HTML FRONTEND =========================\n\nconst PAGE_CSS = \"\\n\" +\n \" :root{--bg:#0f1117;--surface:#1a1d27;--card:#222533;--border:#2e3348;--text:#e2e4ed;--muted:#8b8fa3;--accent:#3b82f6;--radius:10px}\\n\" +\n \" *{box-sizing:border-box;margin:0;padding:0}\\n\" +\n \" body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}\\n\" +\n \" header{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;gap:.75rem}\\n\" +\n \" header h1{font-size:1.15rem;font-weight:600}\\n\" +\n \" .container{max-width:1200px;margin:0 auto;padding:1.5rem}\\n\" +\n \" .form-bar{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1rem}\\n\" +\n \" .field{display:flex;flex-direction:column;gap:.2rem}\\n\" +\n \" .field label{font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}\\n\" +\n \" .field input,.field select{padding:.45rem .65rem;border:1px solid var(--border);border-radius:6px;font-size:.9rem;background:var(--card);color:var(--text);outline:none;color-scheme:dark}\\n\" +\n \" .field input:focus,.field select:focus{border-color:var(--accent)}\\n\" +\n \" button.go{background:var(--accent);color:#fff;border:none;padding:.5rem 1.75rem;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer}\\n\" +\n \" button.go:hover{opacity:.85}\\n\" +\n \" button.go:disabled{opacity:.4;cursor:not-allowed}\\n\" +\n \" button.csv{background:var(--card);color:var(--text);border:1px solid var(--border);padding:.5rem 1rem;border-radius:6px;font-size:.85rem;cursor:pointer}\\n\" +\n \" button.csv:hover{border-color:var(--accent)}\\n\" +\n \" .toggles{display:flex;gap:1.25rem;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}\\n\" +\n \" .toggles label{display:flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none}\\n\" +\n \" #status{color:var(--muted);font-size:.85rem;margin-bottom:1rem;min-height:1.2rem}\\n\" +\n \" .kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:1rem}\\n\" +\n \" .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem;text-align:center}\\n\" +\n \" .kpi .kpi-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}\\n\" +\n \" .kpi .kpi-val{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}\\n\" +\n \" .traffic-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1rem}\\n\" +\n \" .traffic-box h4{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}\\n\" +\n \" .bar-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;font-size:.8rem}\\n\" +\n \" .bar-label{width:100px;text-align:right;color:var(--muted);flex-shrink:0}\\n\" +\n \" .bar-track{flex:1;height:16px;background:var(--card);border-radius:3px;overflow:hidden}\\n\" +\n \" .bar-fill{height:100%;border-radius:3px;min-width:2px;background:var(--accent)}\\n\" +\n \" .bar-val{width:75px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}\\n\" +\n \" .type-badge{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.72rem;white-space:nowrap;color:#fff}\\n\" +\n \" .col-toggles{display:none;gap:.9rem;align-items:center;font-size:.78rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}\\n\" +\n \" .col-toggles label{display:flex;align-items:center;gap:.3rem;cursor:pointer;user-select:none}\\n\" +\n \" .table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto}\\n\" +\n \" .table-wrap::-webkit-scrollbar{height:12px}\\n\" +\n \" .table-wrap::-webkit-scrollbar-thumb{background:#3d4462;border-radius:6px}\\n\" +\n \" .table-wrap::-webkit-scrollbar-track{background:var(--card)}\\n\" +\n \" table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:1250px}\\n\" +\n \" th:first-child,td:first-child{position:sticky;left:0;background:var(--surface);z-index:2}\\n\" +\n \" th{text-align:left;padding:.55rem .65rem;font-size:.68rem;text-transform:uppercase;color:var(--muted);letter-spacing:.03em;white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}\\n\" +\n \" th:hover{color:var(--text)}\\n\" +\n \" th.num,td.num{text-align:right}\\n\" +\n \" th .arrow{font-size:.6rem;margin-left:.2rem}\\n\" +\n \" td{padding:.45rem .65rem;border-bottom:1px solid var(--border)}\\n\" +\n \" tr:hover td{background:rgba(255,255,255,.02)}\\n\" +\n \" td.num{font-variant-numeric:tabular-nums}\\n\" +\n \" td.total{font-weight:700}\\n\" +\n \" a{color:var(--accent);text-decoration:none}\\n\" +\n \" a:hover{text-decoration:underline}\\n\" +\n \" @media(max-width:700px){.form-bar{flex-direction:column;align-items:stretch}}\\n\";\n\nconst PAGE_BODY = \"\\n\" +\n \"

\\n\" +\n \"

Draftsim News Performance

\\n\" +\n \"

\\n\" +\n '

\\n' +\n ' \\n\" +\n '

\\n' +\n '

\\n' +\n \"

\\n\";\n\nconst CLIENT_JS = [\n 'const form = document.getElementById(\"rangeForm\");',\n 'const statusEl = document.getElementById(\"status\");',\n 'const results = document.getElementById(\"results\");',\n 'const goBtn = document.getElementById(\"goBtn\");',\n 'const csvBtn = document.getElementById(\"csvBtn\");',\n 'const presetEl = document.getElementById(\"preset\");',\n 'const startEl = document.getElementById(\"start\");',\n 'const endEl = document.getElementById(\"end\");',\n 'const togglesEl = document.getElementById(\"toggles\");',\n 'const pubInRangeEl = document.getElementById(\"pubInRange\");',\n 'const showZeroEl = document.getElementById(\"showZero\");',\n 'const SOURCES = [\"Discover\",\"Google News\",\"Email\",\"Homepage\",\"Reddit\",\"Facebook\",\"Discord\",\"X / Twitter\",\"Search\",\"AI\",\"Direct\",\"Other\"];',\n \"let report = null;\",\n 'let sortKey = \"total\";',\n \"let sortDir = -1;\",\n \"const hiddenCols = new Set();\",\n \"function typeColor(t) {\",\n ' if (!t) return \"#4b5162\";',\n \" let hash = 0;\",\n \" for (let i = 0; i < t.length; i++) hash = (hash * 31 + t.charCodeAt(i)) >>> 0;\",\n ' return \"hsl(\" + (hash % 360) + \",50%,32%)\";',\n \"}\",\n \"function pvColor(n) {\",\n ' return n >= 5000 ? \"#22c55e\" : n >= 3000 ? \"#eab308\" : \"#ef4444\";',\n \"}\",\n \"function buildColToggles() {\",\n ' const wrap = document.getElementById(\"colToggles\");',\n \" if (wrap.childElementCount) return;\",\n \" for (const s of SOURCES) {\",\n ' const label = document.createElement(\"label\");',\n ' const cb = document.createElement(\"input\");',\n ' cb.type = \"checkbox\";',\n \" cb.checked = true;\",\n ' cb.addEventListener(\"change\", () => {',\n \" if (cb.checked) hiddenCols.delete(s); else hiddenCols.add(s);\",\n \" render();\",\n \" });\",\n \" label.appendChild(cb);\",\n ' label.appendChild(document.createTextNode(\" \" + s));',\n \" wrap.appendChild(label);\",\n \" }\",\n ' wrap.style.display = \"flex\";',\n \"}\",\n \"function isoDaysAgo(n) {\",\n \" const d = new Date(Date.now() - n * 86400000);\",\n ' return d.toISOString().split(\"T\")[0];',\n \"}\",\n \"function applyPreset() {\",\n \" const v = presetEl.value;\",\n ' if (v === \"custom\") return;',\n \" endEl.value = isoDaysAgo(0);\",\n \" startEl.value = isoDaysAgo(parseInt(v, 10) - 1);\",\n \"}\",\n 'presetEl.addEventListener(\"change\", applyPreset);',\n '[startEl, endEl].forEach(el => el.addEventListener(\"input\", () => { presetEl.value = \"custom\"; }));',\n \"applyPreset();\",\n 'form.addEventListener(\"submit\", (e) => { e.preventDefault(); load(); });',\n 'pubInRangeEl.addEventListener(\"change\", render);',\n 'showZeroEl.addEventListener(\"change\", render);',\n \"async function load() {\",\n \" const start = startEl.value, end = endEl.value;\",\n \" if (!start || !end) return;\",\n ' if (start > end) { statusEl.textContent = \"Start date must be before end date.\"; return; }',\n \" goBtn.disabled = true;\",\n ' statusEl.textContent = \"Pulling Asana tasks and GA4 data... (about 10-20s)\";',\n \" try {\",\n ' const resp = await fetch(\"/api/report?start=\" + start + \"&end=\" + end);',\n \" if (!resp.ok) throw new Error(await resp.text() || resp.statusText);\",\n \" report = await resp.json();\",\n ' statusEl.textContent = \"\";',\n ' togglesEl.style.display = \"flex\";',\n ' csvBtn.style.display = \"inline-block\";',\n \" buildColToggles();\",\n \" render();\",\n \" } catch (err) {\",\n ' statusEl.textContent = \"Error: \" + err.message;',\n \" } finally {\",\n \" goBtn.disabled = false;\",\n \" }\",\n \"}\",\n \"function visibleArticles() {\",\n \" if (!report) return [];\",\n \" let arts = report.articles;\",\n \" if (pubInRangeEl.checked) {\",\n \" arts = arts.filter(a => a.publishDate && a.publishDate >= report.startDate && a.publishDate <= report.endDate);\",\n \" }\",\n \" if (!showZeroEl.checked) {\",\n \" arts = arts.filter(a => a.total > 0 || (pubInRangeEl.checked && a.publishDate));\",\n \" }\",\n \" return arts;\",\n \"}\",\n \"function sortArticles(arts) {\",\n \" const key = sortKey, dir = sortDir;\",\n \" return [...arts].sort((a, b) => {\",\n \" let va, vb;\",\n ' if (key === \"name\" || key === \"type\") { va = (a[key] || \"\").toLowerCase(); vb = (b[key] || \"\").toLowerCase(); }',\n ' else if (key === \"publishDate\") { va = a.publishDate || \"\"; vb = b.publishDate || \"\"; }',\n ' else if (key === \"total\") { va = a.total; vb = b.total; }',\n \" else { va = a.sources[key] || 0; vb = b.sources[key] || 0; }\",\n \" if (va < vb) return -1 * dir;\",\n \" if (va > vb) return 1 * dir;\",\n \" return 0;\",\n \" });\",\n \"}\",\n \"function setSort(key) {\",\n \" if (sortKey === key) sortDir = -sortDir;\",\n ' else { sortKey = key; sortDir = (key === \"name\" || key === \"type\" || key === \"publishDate\") ? 1 : -1; }',\n \" render();\",\n \"}\",\n \"function fmt(n) { return n.toLocaleString(); }\",\n 'function escHtml(s) { const d = document.createElement(\"div\"); d.textContent = s || \"\"; return d.innerHTML; }',\n \"function render() {\",\n \" if (!report) return;\",\n \" const arts = sortArticles(visibleArticles());\",\n \" const shownTotal = arts.reduce((s, a) => s + a.total, 0);\",\n \" const shownSources = {};\",\n \" SOURCES.forEach(s => shownSources[s] = 0);\",\n \" arts.forEach(a => SOURCES.forEach(s => shownSources[s] += a.sources[s] || 0));\",\n ' let h = \"\";',\n \" h += '

';\",\n ' h += kpi(\"Total Pageviews\", fmt(shownTotal));',\n ' h += kpi(\"Articles Shown\", fmt(arts.length));',\n ' h += kpi(\"Avg PVs / Article\", fmt(arts.length ? Math.round(shownTotal / arts.length) : 0));',\n ' h += kpi(\"Date Range\", report.startDate.slice(5) + \" to \" + report.endDate.slice(5));',\n \" h += '

';\",\n \" const maxSrc = Math.max(1, ...SOURCES.map(s => shownSources[s]));\",\n \" h += '

Traffic Sources

';\",\n \" for (const s of SOURCES) {\",\n \" const w = Math.max(1, shownSources[s] / maxSrc * 100);\",\n \" h += '

' + s + ''\",\n ' + \\'

\\'',\n \" + '' + fmt(shownSources[s]) + '

';\",\n \" }\",\n \" if (report.otherBreakdown && report.otherBreakdown.length) {\",\n ' h += \\'

Top raw sources still in Other (all articles)

\\'',\n \" + '

';\",\n \" for (const o of report.otherBreakdown) {\",\n \" h += '

' + escHtml(o.source) + \\\" - \\\" + fmt(o.pvs) + \\\"

\\\";\",\n \" }\",\n \" h += '

';\",\n \" }\",\n \" h += '

';\",\n \" if (report.endDate === isoDaysAgo(0)) {\",\n \" h += '

GA is still processing todays traffic - articles published today may show low or zero pageviews for a few more hours.

';\",\n \" }\",\n \" const shownCols = SOURCES.filter(s => !hiddenCols.has(s));\",\n \" h += '

';\",\n ' h += th(\"Article\", \"name\") + th(\"Type\", \"type\") + th(\"Published\", \"publishDate\");',\n ' h += th(\"Total PVs\", \"total\", true);',\n \" for (const s of shownCols) h += th(s, s, true);\",\n \" h += '';\",\n \" for (const a of arts) {\",\n \" h += ''\",\n \" + ''\",\n \" + ''\",\n \" + '';\",\n \" for (const s of shownCols) h += '';\",\n \" h += '';\",\n \" }\",\n \" h += '

' + escHtml(a.name) + '	' + (escHtml(a.type) \|\| \\\"-\\\") + '	' + (a.publishDate \|\| \\\"-\\\") + '	' + fmt(a.total) + '	' + fmt(a.sources[s] \|\| 0) + '

' + label + '

' + val + '

';\",\n \"}\",\n \"function th(label, key, num) {\",\n ' const arrow = sortKey === key ? \\'\\' + (sortDir === 1 ? \"▲\" : \"▼\") + \\'\\' : \"\";',\n \" return '' + label + arrow + '';\",\n \"}\",\n 'csvBtn.addEventListener(\"click\", () => {',\n \" if (!report) return;\",\n \" const arts = sortArticles(visibleArticles());\",\n ' const head = [\"Article\",\"URL\",\"Type\",\"Published\",\"Total PVs\", ...SOURCES];',\n ' const lines = [head.join(\",\")];',\n \" for (const a of arts) {\",\n ' const cells = [a.name, a.url, a.type, a.publishDate || \"\", a.total, ...SOURCES.map(s => a.sources[s] || 0)];',\n \" lines.push(cells.map(c => {\",\n \" const s = String(c);\",\n \" return /[\\\",]/.test(s) || s.indexOf(String.fromCharCode(10)) >= 0 ? '\\\"' + s.split('\\\"').join('\\\"\\\"') + '\\\"' : s;\",\n ' }).join(\",\"));',\n \" }\",\n ' const blobObj = new Blob([lines.join(String.fromCharCode(10))], { type: \"text/csv\" });',\n ' const a = document.createElement(\"a\");',\n \" a.href = URL.createObjectURL(blobObj);\",\n ' a.download = \"news-performance-\" + report.startDate + \"-to-\" + report.endDate + \".csv\";',\n \" a.click();\",\n \" URL.revokeObjectURL(a.href);\",\n \"});\",\n \"load();\",\n].join(\"\\n\");\n\nfunction serveHTML(): Response {\n const html =\n 'Draftsim News Performance\" +\n PAGE_BODY +\n \"\" + CLIENT_JS + \"\";\n return new Response(html, {\n headers: { \"content-type\": \"text/html;charset=utf-8\" },\n });\n}\n\n// ========================= HTTP HANDLER =========================\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n\n if (req.method === \"GET\" && (url.pathname === \"/\" || url.pathname === \"\")) {\n return serveHTML();\n }\n\n if (req.method === \"GET\" && url.pathname === \"/api/report\") {\n try {\n const start = url.searchParams.get(\"start\");\n const end = url.searchParams.get(\"end\");\n if (!isValidDate(start) || !isValidDate(end)) {\n return new Response(\"start and end must be YYYY-MM-DD\", {\n status: 400,\n });\n }\n if (start > end) {\n return new Response(\"start must be <= end\", { status: 400 });\n }\n const report = await buildReport(start, end);\n return new Response(JSON.stringify(report), {\n headers: { \"content-type\": \"application/json\" },\n });\n } catch (err: any) {\n return new Response(err.message || \"Internal error\", { status: 500 });\n }\n }\n\n return new Response(\"Not found\", { status: 404 });\n}","/******************************************************************************\n * Draftsim News Performance Tracker — Val.town HTTP Val\n *\n * Replaces the Cloud Run \"update-news-topic\" service that timed out once the\n * Asana project grew to ~900 tasks. Instead of one Asana call per task and one\n * GA4 query per URL, this fetches all tasks in one paginated request with\n * opt_fields and pulls one bulk GA4 report for the whole date range.\n * Publish dates come from the Asana \"Publish Date\" custom field.\n *\n * Routes:\n * / — interactive dashboard\n * /api/report — JSON report for a date range\n * /update — writes the most recent 60 articles to the Google Sheet\n * \"News\" tab exactly like the original Cloud Run script\n * (same columns, same source buckets, 180-day GA window,\n * sorted oldest-first) and returns \"Update successful\".\n *\n * NOTE: written without template literals — the val.town editor has mangled\n * pasted backticks before. Keep it that way.\n *\n * Environment Variables (val.town Settings > Environment Variables):\n * ASANA_ACCESS_TOKEN — Asana Personal Access Token\n * GOOGLE_SA_JSON — Full Google service-account JSON (stringified)\n * GA_PROPERTY_ID — GA4 property ID (default 368713237)\n ******************************************************************************/\nconst WORKSPACE_NAME = \"Draftsim\";\nconst PROJECT_NAME = \"Draftsim News\";\n// ========================= UTILITIES =========================\nfunction base64url(input) {\n let str;\n if (typeof input === \"string\") {\n str = btoa(input);\n }\n else {\n const bytes = new Uint8Array(input);\n let binary = \"\";\n for (const b of bytes)\n binary += String.fromCharCode(b);\n str = btoa(binary);\n }\n return str.replace(/+/g, \"-\").replace(///g, \"_\").replace(/=+$/, \"\");\n}\nasync function importPrivateKey(pem) {\n const pemBody = pem\n .replace(/-----BEGIN PRIVATE KEY-----/, \"\")\n .replace(/-----END PRIVATE KEY-----/, \"\")\n .replace(/s/g, \"\");\n const binaryDer = Uint8Array.from(atob(pemBody), (c) => c.charCodeAt(0));\n return crypto.subtle.importKey(\"pkcs8\", binaryDer.buffer, { name: \"RSASSA-PKCS1-v1_5\", hash: \"SHA-256\" }, false, [\"sign\"]);\n}\nfunction getUrlPath(fullUrl) {\n let url = fullUrl.trim();\n if (!url.startsWith(\"http://\") && !url.startsWith(\"https://\")) {\n url = \"https://\" + url;\n }\n try {\n return new URL(url).pathname || \"/\";\n }\n catch {\n return \"/\";\n }\n}\nfunction normPath(p) {\n return p.replace(//+$/, \"\").toLowerCase();\n}\nfunction normalizeArticleUrl(raw) {\n const u = raw.trim();\n if (/^https?:///i.test(u))\n return u;\n const stripped = u.replace(/^/+/, \"\");\n const firstSeg = stripped.split(\"/\")[0];\n if (firstSeg.includes(\".\"))\n return \"https://\" + stripped;\n return \"https://draftsim.com/\" + stripped;\n}\nfunction classifySource(sourceMedium) {\n const s = sourceMedium.toLowerCase();\n const parts = s.split(\" / \");\n const src = parts[0] || \"\";\n const medium = parts.slice(1).join(\" / \");\n if (medium.includes(\"email\") || medium.includes(\"newsletter\") ||\n /beehiiv|mailchimp|klaviyo|convertkit|substack|sendgrid|mailerlite|^email$/\n .test(src))\n return \"Email\";\n if (src.includes(\"draftsim\") || medium.includes(\"homepage\")) {\n return \"Homepage\";\n }\n if (src.includes(\"news.google\"))\n return \"Google News\";\n if (src.includes(\"reddit\"))\n return \"Reddit\";\n if (src.includes(\"facebook\"))\n return \"Facebook\";\n if (src.includes(\"discord\"))\n return \"Discord\";\n if (src.includes(\"google\"))\n return \"Discover\";\n if (src.includes(\"(direct)\"))\n return \"Direct\";\n if (/bing|duckduckgo|yahoo|ecosia|brave|startpage|yandex|qwant/.test(src)) {\n return \"Search\";\n }\n if (src === \"t.co\" || src === \"x.com\" || src.includes(\"twitter\")) {\n return \"X / Twitter\";\n }\n if (/chatgpt|openai|perplexity|copilot|gemini|claude|deepseek/.test(src)) {\n return \"AI\";\n }\n return \"Other\";\n}\nfunction isValidDate(s) {\n return typeof s === \"string\" && /^d{4}-d{2}-d{2}$/.test(s) &&\n !isNaN(new Date(s + \"T00:00:00Z\").getTime());\n}\n// ========================= GOOGLE AUTH =========================\nasync function getGoogleAccessToken(email, privateKey, scope) {\n const header = base64url(JSON.stringify({ alg: \"RS256\", typ: \"JWT\" }));\n const now = Math.floor(Date.now() / 1000);\n const claim = base64url(JSON.stringify({\n iss: email,\n scope,\n aud: \"https://oauth2.googleapis.com/token\",\n iat: now,\n exp: now + 3600,\n }));\n const signInput = header + \".\" + claim;\n const key = await importPrivateKey(privateKey);\n const sig = await crypto.subtle.sign(\"RSASSA-PKCS1-v1_5\", key, new TextEncoder().encode(signInput));\n const jwt = signInput + \".\" + base64url(sig);\n const resp = await fetch(\"https://oauth2.googleapis.com/token\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body: \"grant_type=urn%3Aietf%3Aparams%3Aoauth%3Agrant-type%3Ajwt-bearer&assertion=\" +\n jwt,\n });\n const data = await resp.json();\n if (!data.access_token) {\n throw new Error(\"Google SA auth failed: \" + JSON.stringify(data));\n }\n return data.access_token;\n}\n// ========================= ASANA =========================\nconst ASANA_BASE = \"https://app.asana.com/api/1.0\";\nasync function asanaGetPaginated(path, token) {\n const all = [];\n let url = ASANA_BASE + path;\n while (url) {\n const resp = await fetch(url, {\n headers: { Authorization: \"Bearer \" + token },\n });\n if (!resp.ok) {\n const text = await resp.text();\n throw new Error(\"Asana \" + resp.status + \": \" + text.slice(0, 300));\n }\n const json = await resp.json();\n all.push(...(json.data || []));\n url = json.next_page?.uri || null;\n }\n return all;\n}\nasync function findWorkspaceId(name, token) {\n const data = await asanaGetPaginated(\"/workspaces?limit=100\", token);\n const ws = data.find((w) => w.name === name) ||\n data.find((w) => (w.name || \"\").toLowerCase() === name.toLowerCase()) ||\n (data.length === 1 ? data[0] : null);\n if (!ws) {\n const seen = data.map((w) => w.name).join(\", \") || \"(none)\";\n throw new Error('Asana workspace \"' + name + '\" not found. This token can see: ' + seen);\n }\n return ws.gid;\n}\nasync function findProjectId(name, workspaceId, token) {\n const data = await asanaGetPaginated(\"/projects?workspace=\" + workspaceId + \"&limit=100\", token);\n const proj = data.find((p) => p.name === name) ||\n data.find((p) => (p.name || \"\").toLowerCase() === name.toLowerCase());\n if (!proj) {\n const names = data.slice(0, 30).map((p) => p.name).join(\", \") ||\n \"(none)\";\n throw new Error('Asana project \"' + name + '\" not found. This token sees ' + data.length +\n \" project(s): \" + names);\n }\n return proj.gid;\n}\nasync function getPublishedNewsArticles(token) {\n const workspaceId = await findWorkspaceId(WORKSPACE_NAME, token);\n const projectId = await findProjectId(PROJECT_NAME, workspaceId, token);\n const fields = \"name,memberships.section.name,custom_fields.name,custom_fields.display_value,custom_fields.date_value\";\n const tasks = await asanaGetPaginated(\"/projects/\" + projectId + \"/tasks?limit=100&opt_fields=\" +\n encodeURIComponent(fields), token);\n const articles = [];\n for (const task of tasks) {\n const published = (task.memberships || []).some((m) => m.section?.name === \"Published\");\n if (!published)\n continue;\n let url = null;\n let type = \"\";\n let publishDate = null;\n for (const cf of task.custom_fields || []) {\n if (cf.name === \"URL\" && cf.display_value)\n url = cf.display_value.trim();\n if (cf.name === \"Type\" && cf.display_value)\n type = cf.display_value;\n if (cf.name === \"Publish Date\") {\n publishDate = cf.date_value?.date ||\n (cf.display_value ? cf.display_value.slice(0, 10) : null);\n }\n }\n // A dated Published task with no/broken URL is still a real article —\n // keep it and let the WordPress-search fallback resolve its URL.\n // Undated AND URL-less rows are not articles; skip them.\n if (!url && !publishDate)\n continue;\n url = normalizeArticleUrl(url || \"\");\n articles.push({ name: task.name, url, type, publishDate });\n }\n return articles;\n}\n// Resolve unusable URL fields (empty or \"/\") by searching draftsim.com's\n// WordPress API for the task name. Bounded: only the broken handful.\nasync function resolveBrokenUrls(articles) {\n const broken = articles.filter((a) => !normPath(getUrlPath(a.url)));\n await Promise.all(broken.map(async (a) => {\n try {\n const resp = await fetch(\"https://draftsim.com/wp-json/wp/v2/search?search=\" +\n encodeURIComponent(a.name.trim()) + \"&per_page=1\", { signal: AbortSignal.timeout(8000) });\n const hits = await resp.json();\n if (Array.isArray(hits) && hits[0]?.url)\n a.url = hits[0].url;\n }\n catch {\n // leave as-is; the article shows 0 PVs rather than homepage traffic\n }\n }));\n}\n// ========================= GA4 =========================\nasync function fetchGA4SourceReport(accessToken, propertyId, startDate, endDate) {\n const allRows = [];\n let offset = 0;\n const pageSize = 100000;\n while (true) {\n const body = {\n dateRanges: [{ startDate, endDate }],\n dimensions: [{ name: \"pagePath\" }, { name: \"sessionSourceMedium\" }],\n metrics: [{ name: \"screenPageViews\" }],\n limit: pageSize,\n offset,\n };\n const resp = await fetch(\"https://analyticsdata.googleapis.com/v1beta/properties/\" + propertyId +\n \":runReport\", {\n method: \"POST\",\n headers: {\n Authorization: \"Bearer \" + accessToken,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(body),\n });\n const data = await resp.json();\n if (data.error)\n throw new Error(\"GA4 error: \" + data.error.message);\n const rows = data.rows || [];\n allRows.push(...rows);\n if (rows.length < pageSize)\n break;\n offset += pageSize;\n }\n const byPath = new Map();\n for (const row of allRows) {\n const path = normPath(row.dimensionValues[0].value);\n const source = row.dimensionValues[1].value;\n const pvs = parseInt(row.metricValues[0].value, 10) || 0;\n if (!byPath.has(path))\n byPath.set(path, {});\n const entry = byPath.get(path);\n entry[source] = (entry[source] || 0) + pvs;\n }\n return byPath;\n}\n// ========================= REPORT =========================\nconst SOURCE_COLUMNS = [\n \"Discover\",\n \"Google News\",\n \"Email\",\n \"Homepage\",\n \"Reddit\",\n \"Facebook\",\n \"Discord\",\n \"X / Twitter\",\n \"Search\",\n \"AI\",\n \"Direct\",\n \"Other\",\n];\nasync function buildReport(startDate, endDate) {\n const asanaToken = Deno.env.get(\"ASANA_ACCESS_TOKEN\");\n if (!asanaToken)\n throw new Error(\"Missing env var ASANA_ACCESS_TOKEN\");\n const saJsonStr = Deno.env.get(\"GOOGLE_SA_JSON\");\n if (!saJsonStr)\n throw new Error(\"Missing env var GOOGLE_SA_JSON\");\n const saJson = JSON.parse(saJsonStr);\n const propertyId = Deno.env.get(\"GA_PROPERTY_ID\") || \"368713237\";\n const gaTokenPromise = getGoogleAccessToken(saJson.client_email, saJson.private_key, \"https://www.googleapis.com/auth/analytics.readonly\");\n const [rawArticles, gaToken] = await Promise.all([\n getPublishedNewsArticles(asanaToken),\n gaTokenPromise,\n ]);\n await resolveBrokenUrls(rawArticles);\n const gaByPath = await fetchGA4SourceReport(gaToken, propertyId, startDate, endDate);\n const otherRaw = {};\n const articles = rawArticles.map((a) => {\n const path = getUrlPath(a.url);\n // A URL that still resolves to the root path would wrongly absorb the\n // site homepage's traffic — treat it as no GA match instead.\n const key = normPath(path);\n const raw = key ? gaByPath.get(key) || {} : {};\n const sources = {};\n for (const col of SOURCE_COLUMNS)\n sources[col] = 0;\n let total = 0;\n for (const [rawSource, pvs] of Object.entries(raw)) {\n const cat = classifySource(rawSource);\n sources[cat] = (sources[cat] || 0) + pvs;\n total += pvs;\n if (cat === \"Other\") {\n otherRaw[rawSource] = (otherRaw[rawSource] || 0) + pvs;\n }\n }\n return {\n name: a.name,\n url: a.url,\n path,\n type: a.type,\n publishDate: a.publishDate,\n sources,\n total,\n };\n });\n const otherBreakdown = Object.entries(otherRaw)\n .sort((x, y) => y[1] - x[1])\n .slice(0, 15)\n .map(([source, pvs]) => ({ source, pvs }));\n articles.sort((x, y) => y.total - x.total);\n const sourceTotals = {};\n for (const col of SOURCE_COLUMNS)\n sourceTotals[col] = 0;\n let grandTotal = 0;\n for (const a of articles) {\n for (const col of SOURCE_COLUMNS)\n sourceTotals[col] += a.sources[col] || 0;\n grandTotal += a.total;\n }\n return {\n startDate,\n endDate,\n articleCount: articles.length,\n articlesWithTraffic: articles.filter((a) => a.total > 0).length,\n grandTotal,\n sourceTotals,\n otherBreakdown,\n articles,\n };\n}\n// ========================= GOOGLE SHEET (Cloud Run parity) =========================\n// Mirrors the original update-news-topic Cloud Run script: most recent 60\n// published articles, GA window of the last 180 days, the OG's simpler\n// source buckets, written to the \"News\" tab oldest-first.\nconst SHEET_ID = \"1nzvDY6HE09yvShrhU4HYxlM9G0WNCeZXC6PgNZ7ro1k\";\nconst SHEET_TAB = \"News\";\nconst SHEET_LIMIT = 60;\nconst SHEET_GA_START = \"180daysAgo\";\nconst OG_COLUMNS = [\"Discover\", \"Google News\", \"Reddit\", \"Facebook\", \"Discord\", \"Other\"];\nfunction ogClassify(sourceMedium) {\n const src = (sourceMedium.split(\" / \")[0] || \"\").toLowerCase();\n if (src.includes(\"reddit\"))\n return \"Reddit\";\n if (src.includes(\"facebook\"))\n return \"Facebook\";\n if (src.includes(\"news.google\"))\n return \"Google News\";\n if (src.includes(\"google\"))\n return \"Discover\";\n if (src.includes(\"discord\"))\n return \"Discord\";\n return \"Other\";\n}\nfunction formatSheetDate(iso) {\n if (!iso)\n return \"Publish date not found\";\n const parts = iso.split(\"-\");\n if (parts.length !== 3)\n return \"Publish date not found\";\n return parts[1] + \"-\" + parts[2] + \"-\" + parts[0];\n}\nasync function updateSheet() {\n const asanaToken = Deno.env.get(\"ASANA_ACCESS_TOKEN\");\n if (!asanaToken)\n throw new Error(\"Missing env var ASANA_ACCESS_TOKEN\");\n const saJsonStr = Deno.env.get(\"GOOGLE_SA_JSON\");\n if (!saJsonStr)\n throw new Error(\"Missing env var GOOGLE_SA_JSON\");\n const saJson = JSON.parse(saJsonStr);\n const propertyId = Deno.env.get(\"GA_PROPERTY_ID\") || \"368713237\";\n const gaTokenPromise = getGoogleAccessToken(saJson.client_email, saJson.private_key, \"https://www.googleapis.com/auth/analytics.readonly\");\n const sheetsTokenPromise = getGoogleAccessToken(saJson.client_email, saJson.private_key, \"https://www.googleapis.com/auth/spreadsheets\");\n const [rawArticles, gaToken, sheetsToken] = await Promise.all([\n getPublishedNewsArticles(asanaToken),\n gaTokenPromise,\n sheetsTokenPromise,\n ]);\n rawArticles.sort((x, y) => (y.publishDate || \"\").localeCompare(x.publishDate || \"\"));\n const recent = rawArticles.slice(0, SHEET_LIMIT);\n await resolveBrokenUrls(recent);\n const gaByPath = await fetchGA4SourceReport(gaToken, propertyId, SHEET_GA_START, \"today\");\n const rows = recent.map((a) => {\n const path = getUrlPath(a.url);\n const key = normPath(path);\n const raw = key ? gaByPath.get(key) || {} : {};\n const buckets = {};\n for (const c of OG_COLUMNS)\n buckets[c] = 0;\n for (const [rawSource, pvs] of Object.entries(raw)) {\n buckets[ogClassify(rawSource)] += pvs;\n }\n const total = OG_COLUMNS.reduce((s, c) => s + buckets[c], 0);\n return { link: path, publishDate: a.publishDate, buckets, type: a.type || \"\", total };\n });\n // Oldest first, unknown dates last — the order the sheet has always had.\n rows.sort((x, y) => {\n if (!x.publishDate && !y.publishDate)\n return 0;\n if (!x.publishDate)\n return 1;\n if (!y.publishDate)\n return -1;\n return x.publishDate.localeCompare(y.publishDate);\n });\n const values = [[\n \"Link\",\n \"Publish Date\",\n \"Discover\",\n \"Google News\",\n \"Reddit\",\n \"Facebook\",\n \"Discord\",\n \"Other\",\n \"Type\",\n \"Total PVs\",\n ]];\n for (const r of rows) {\n values.push([\n r.link,\n formatSheetDate(r.publishDate),\n r.buckets[\"Discover\"],\n r.buckets[\"Google News\"],\n r.buckets[\"Reddit\"],\n r.buckets[\"Facebook\"],\n r.buckets[\"Discord\"],\n r.buckets[\"Other\"],\n r.type,\n r.total,\n ]);\n }\n const base = \"https://sheets.googleapis.com/v4/spreadsheets/\" + SHEET_ID + \"/values/\";\n const clearResp = await fetch(base + encodeURIComponent(SHEET_TAB) + \":clear\", {\n method: \"POST\",\n headers: { Authorization: \"Bearer \" + sheetsToken },\n });\n if (!clearResp.ok) {\n throw new Error(\"Sheets clear failed: \" + (await clearResp.text()).slice(0, 300));\n }\n const updateResp = await fetch(base + encodeURIComponent(SHEET_TAB + \"!A1\") + \"?valueInputOption=RAW\", {\n method: \"PUT\",\n headers: {\n Authorization: \"Bearer \" + sheetsToken,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ values }),\n });\n if (!updateResp.ok) {\n throw new Error(\"Sheets update failed: \" + (await updateResp.text()).slice(0, 300));\n }\n return rows.length;\n}\n// ========================= HTML FRONTEND =========================\nconst PAGE_CSS = \"\n\" +\n \" :root{--bg:#0f1117;--surface:#1a1d27;--card:#222533;--border:#2e3348;--text:#e2e4ed;--muted:#8b8fa3;--accent:#3b82f6;--radius:10px}\n\" +\n \" *{box-sizing:border-box;margin:0;padding:0}\n\" +\n \" body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}\n\" +\n \" header{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;gap:.75rem}\n\" +\n \" header h1{font-size:1.15rem;font-weight:600}\n\" +\n \" header .sheet-link{margin-left:auto;font-size:.8rem;color:var(--muted)}\n\" +\n \" header .sheet-link:hover{color:var(--accent)}\n\" +\n \" .container{max-width:1200px;margin:0 auto;padding:1.5rem}\n\" +\n \" .form-bar{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1rem}\n\" +\n \" .field{display:flex;flex-direction:column;gap:.2rem}\n\" +\n \" .field label{font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}\n\" +\n \" .field input,.field select{padding:.45rem .65rem;border:1px solid var(--border);border-radius:6px;font-size:.9rem;background:var(--card);color:var(--text);outline:none;color-scheme:dark}\n\" +\n \" .field input:focus,.field select:focus{border-color:var(--accent)}\n\" +\n \" button.go{background:var(--accent);color:#fff;border:none;padding:.5rem 1.75rem;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer}\n\" +\n \" button.go:hover{opacity:.85}\n\" +\n \" button.go:disabled{opacity:.4;cursor:not-allowed}\n\" +\n \" button.csv{background:var(--card);color:var(--text);border:1px solid var(--border);padding:.5rem 1rem;border-radius:6px;font-size:.85rem;cursor:pointer}\n\" +\n \" button.csv:hover{border-color:var(--accent)}\n\" +\n \" .toggles{display:flex;gap:1.25rem;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}\n\" +\n \" .toggles label{display:flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none}\n\" +\n \" #status{color:var(--muted);font-size:.85rem;margin-bottom:1rem;min-height:1.2rem}\n\" +\n \" .kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:1rem}\n\" +\n \" .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem;text-align:center}\n\" +\n \" .kpi .kpi-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}\n\" +\n \" .kpi .kpi-val{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}\n\" +\n \" .traffic-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1rem}\n\" +\n \" .traffic-box h4{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}\n\" +\n \" .bar-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;font-size:.8rem}\n\" +\n \" .bar-label{width:100px;text-align:right;color:var(--muted);flex-shrink:0}\n\" +\n \" .bar-track{flex:1;height:16px;background:var(--card);border-radius:3px;overflow:hidden}\n\" +\n \" .bar-fill{height:100%;border-radius:3px;min-width:2px;background:var(--accent)}\n\" +\n \" .bar-val{width:75px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}\n\" +\n \" .type-badge{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.72rem;white-space:nowrap;color:#fff}\n\" +\n \" .col-toggles{display:none;gap:.9rem;align-items:center;font-size:.78rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}\n\" +\n \" .col-toggles label{display:flex;align-items:center;gap:.3rem;cursor:pointer;user-select:none}\n\" +\n \" .table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto}\n\" +\n \" .table-wrap::-webkit-scrollbar{height:12px}\n\" +\n \" .table-wrap::-webkit-scrollbar-thumb{background:#3d4462;border-radius:6px}\n\" +\n \" .table-wrap::-webkit-scrollbar-track{background:var(--card)}\n\" +\n \" table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:1250px}\n\" +\n \" th:first-child,td:first-child{position:sticky;left:0;background:var(--surface);z-index:2}\n\" +\n \" th{text-align:left;padding:.55rem .65rem;font-size:.68rem;text-transform:uppercase;color:var(--muted);letter-spacing:.03em;white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}\n\" +\n \" th:hover{color:var(--text)}\n\" +\n \" th.num,td.num{text-align:right}\n\" +\n \" th .arrow{font-size:.6rem;margin-left:.2rem}\n\" +\n \" td{padding:.45rem .65rem;border-bottom:1px solid var(--border)}\n\" +\n \" tr:hover td{background:rgba(255,255,255,.02)}\n\" +\n \" td.num{font-variant-numeric:tabular-nums}\n\" +\n \" td.total{font-weight:700}\n\" +\n \" a{color:var(--accent);text-decoration:none}\n\" +\n \" a:hover{text-decoration:underline}\n\" +\n \" @media(max-width:700px){.form-bar{flex-direction:column;align-items:stretch}}\n\";\nconst PAGE_BODY = \"\n\" +\n \"

\n\" +\n \"

Draftsim News Performance

\n\" +\n ' Update Google Sheet\n' +\n \"

\n\" +\n '

\n' +\n ' \n\" +\n '

\n' +\n '

\n' +\n \"

\n\";\nconst CLIENT_JS = [\n 'const form = document.getElementById(\"rangeForm\");',\n 'const statusEl = document.getElementById(\"status\");',\n 'const results = document.getElementById(\"results\");',\n 'const goBtn = document.getElementById(\"goBtn\");',\n 'const csvBtn = document.getElementById(\"csvBtn\");',\n 'const presetEl = document.getElementById(\"preset\");',\n 'const startEl = document.getElementById(\"start\");',\n 'const endEl = document.getElementById(\"end\");',\n 'const togglesEl = document.getElementById(\"toggles\");',\n 'const pubInRangeEl = document.getElementById(\"pubInRange\");',\n 'const showZeroEl = document.getElementById(\"showZero\");',\n 'const SOURCES = [\"Discover\",\"Google News\",\"Email\",\"Homepage\",\"Reddit\",\"Facebook\",\"Discord\",\"X / Twitter\",\"Search\",\"AI\",\"Direct\",\"Other\"];',\n \"let report = null;\",\n 'let sortKey = \"total\";',\n \"let sortDir = -1;\",\n \"const hiddenCols = new Set();\",\n \"function typeColor(t) {\",\n ' if (!t) return \"#4b5162\";',\n \" let hash = 0;\",\n \" for (let i = 0; i < t.length; i++) hash = (hash * 31 + t.charCodeAt(i)) >>> 0;\",\n ' return \"hsl(\" + (hash % 360) + \",50%,32%)\";',\n \"}\",\n \"function pvColor(n) {\",\n ' return n >= 5000 ? \"#22c55e\" : n >= 3000 ? \"#eab308\" : \"#ef4444\";',\n \"}\",\n \"function buildColToggles() {\",\n ' const wrap = document.getElementById(\"colToggles\");',\n \" if (wrap.childElementCount) return;\",\n \" for (const s of SOURCES) {\",\n ' const label = document.createElement(\"label\");',\n ' const cb = document.createElement(\"input\");',\n ' cb.type = \"checkbox\";',\n \" cb.checked = true;\",\n ' cb.addEventListener(\"change\", () => {',\n \" if (cb.checked) hiddenCols.delete(s); else hiddenCols.add(s);\",\n \" render();\",\n \" });\",\n \" label.appendChild(cb);\",\n ' label.appendChild(document.createTextNode(\" \" + s));',\n \" wrap.appendChild(label);\",\n \" }\",\n ' wrap.style.display = \"flex\";',\n \"}\",\n \"function isoDaysAgo(n) {\",\n \" const d = new Date(Date.now() - n * 86400000);\",\n ' return d.toISOString().split(\"T\")[0];',\n \"}\",\n \"function applyPreset() {\",\n \" const v = presetEl.value;\",\n ' if (v === \"custom\") return;',\n \" endEl.value = isoDaysAgo(0);\",\n \" startEl.value = isoDaysAgo(parseInt(v, 10) - 1);\",\n \"}\",\n 'presetEl.addEventListener(\"change\", applyPreset);',\n '[startEl, endEl].forEach(el => el.addEventListener(\"input\", () => { presetEl.value = \"custom\"; }));',\n \"applyPreset();\",\n 'form.addEventListener(\"submit\", (e) => { e.preventDefault(); load(); });',\n 'pubInRangeEl.addEventListener(\"change\", render);',\n 'showZeroEl.addEventListener(\"change\", render);',\n \"async function load() {\",\n \" const start = startEl.value, end = endEl.value;\",\n \" if (!start || !end) return;\",\n ' if (start > end) { statusEl.textContent = \"Start date must be before end date.\"; return; }',\n \" goBtn.disabled = true;\",\n ' statusEl.textContent = \"Pulling Asana tasks and GA4 data... (about 10-20s)\";',\n \" try {\",\n ' const resp = await fetch(\"/api/report?start=\" + start + \"&end=\" + end);',\n \" if (!resp.ok) throw new Error(await resp.text() || resp.statusText);\",\n \" report = await resp.json();\",\n ' statusEl.textContent = \"\";',\n ' togglesEl.style.display = \"flex\";',\n ' csvBtn.style.display = \"inline-block\";',\n \" buildColToggles();\",\n \" render();\",\n \" } catch (err) {\",\n ' statusEl.textContent = \"Error: \" + err.message;',\n \" } finally {\",\n \" goBtn.disabled = false;\",\n \" }\",\n \"}\",\n \"function visibleArticles() {\",\n \" if (!report) return [];\",\n \" let arts = report.articles;\",\n \" if (pubInRangeEl.checked) {\",\n \" arts = arts.filter(a => a.publishDate && a.publishDate >= report.startDate && a.publishDate <= report.endDate);\",\n \" }\",\n \" if (!showZeroEl.checked) {\",\n \" arts = arts.filter(a => a.total > 0 || (pubInRangeEl.checked && a.publishDate));\",\n \" }\",\n \" return arts;\",\n \"}\",\n \"function sortArticles(arts) {\",\n \" const key = sortKey, dir = sortDir;\",\n \" return [...arts].sort((a, b) => {\",\n \" let va, vb;\",\n ' if (key === \"name\" || key === \"type\") { va = (a[key] || \"\").toLowerCase(); vb = (b[key] || \"\").toLowerCase(); }',\n ' else if (key === \"publishDate\") { va = a.publishDate || \"\"; vb = b.publishDate || \"\"; }',\n ' else if (key === \"total\") { va = a.total; vb = b.total; }',\n \" else { va = a.sources[key] || 0; vb = b.sources[key] || 0; }\",\n \" if (va < vb) return -1 * dir;\",\n \" if (va > vb) return 1 * dir;\",\n \" return 0;\",\n \" });\",\n \"}\",\n \"function setSort(key) {\",\n \" if (sortKey === key) sortDir = -sortDir;\",\n ' else { sortKey = key; sortDir = (key === \"name\" || key === \"type\" || key === \"publishDate\") ? 1 : -1; }',\n \" render();\",\n \"}\",\n \"function fmt(n) { return n.toLocaleString(); }\",\n 'function escHtml(s) { const d = document.createElement(\"div\"); d.textContent = s || \"\"; return d.innerHTML; }',\n \"function render() {\",\n \" if (!report) return;\",\n \" const arts = sortArticles(visibleArticles());\",\n \" const shownTotal = arts.reduce((s, a) => s + a.total, 0);\",\n \" const shownSources = {};\",\n \" SOURCES.forEach(s => shownSources[s] = 0);\",\n \" arts.forEach(a => SOURCES.forEach(s => shownSources[s] += a.sources[s] || 0));\",\n ' let h = \"\";',\n \" h += '

';\",\n \" const maxSrc = Math.max(1, ...SOURCES.map(s => shownSources[s]));\",\n \" h += '

Traffic Sources

';\",\n \" for (const s of SOURCES) {\",\n \" const w = Math.max(1, shownSources[s] / maxSrc * 100);\",\n \" h += '

' + s + ''\",\n ' + \\'

\\'',\n \" + '' + fmt(shownSources[s]) + '

';\",\n \" }\",\n \" if (report.otherBreakdown && report.otherBreakdown.length) {\",\n ' h += \\'

Top raw sources still in Other (all articles)

\\'',\n \" + '

';\",\n \" for (const o of report.otherBreakdown) {\",\n \" h += '

' + escHtml(o.source) + \\\" - \\\" + fmt(o.pvs) + \\\"

\\\";\",\n \" }\",\n \" h += '

';\",\n \" }\",\n \" h += '

';\",\n \" if (report.endDate === isoDaysAgo(0)) {\",\n \" h += '

GA is still processing todays traffic - articles published today may show low or zero pageviews for a few more hours.

';\",\n \" }\",\n \" const shownCols = SOURCES.filter(s => !hiddenCols.has(s));\",\n \" h += '

' + escHtml(a.name) + '	' + (escHtml(a.type) \|\| \\\"-\\\") + '	' + (a.publishDate \|\| \\\"-\\\") + '	' + fmt(a.total) + '	' + fmt(a.sources[s] \|\| 0) + '

';\",\n \" results.innerHTML = h;\",\n ' results.querySelectorAll(\"th[data-key]\").forEach(el => {',\n ' el.addEventListener(\"click\", () => setSort(el.dataset.key));',\n \" });\",\n \"}\",\n * Draftsim News Performance Tracker — Val.town HTTP Val\n *\n * Replaces the Cloud Run \"update-news-topic\" service that timed out once the\n * Asana project grew to ~900 tasks. Instead of one Asana call per task and one\n * GA4 query per URL, this fetches all tasks in one paginated request with\n * opt_fields and pulls one bulk GA4 report for the whole date range.\n * Publish dates come from the Asana \"Publish Date\" custom field.\n *\n * Routes:\n * / - interactive dashboard\n * /api/report - JSON report for a date range\n * /update - writes the most recent 60 articles to the Google Sheet\n * \"News\" tab exactly like the original Cloud Run script\n * (same columns, same source buckets, 180-day GA window,\n * sorted oldest-first) and returns \"Update successful\".\n *\n * NOTE: written without template literals — the val.town editor has mangled\n * pasted backticks before. Keep it that way.\n *\n * Environment Variables (val.town Settings > Environment Variables):\n * ASANA_ACCESS_TOKEN — Asana Personal Access Token\n * GOOGLE_SA_JSON — Full Google service-account JSON (stringified)\n * GA_PROPERTY_ID — GA4 property ID (default 368713237)\n ******************************************************************************/\nconst WORKSPACE_NAME = \"Draftsim\";\nconst PROJECT_NAME = \"Draftsim News\";\n// ========================= UTILITIES =========================\nfunction base64url(input) {\n let str;\n if (typeof input === \"string\") {\n str = btoa(input);\n }\n else {\n const bytes = new Uint8Array(input);\n let binary = \"\";\n for (const b of bytes)\n binary += String.fromCharCode(b);\n str = btoa(binary);\n }\n return str.replace(/\\+/g, \"-\").replace(/\\//g, \"_\").replace(/=+$/, \"\");\n}\nasync function importPrivateKey(pem) {\n const pemBody = pem\n .replace(/-----BEGIN PRIVATE KEY-----/, \"\")\n .replace(/-----END PRIVATE KEY-----/, \"\")\n .replace(/\\s/g, \"\");\n const binaryDer = Uint8Array.from(atob(pemBody), (c) => c.charCodeAt(0));\n return crypto.subtle.importKey(\"pkcs8\", binaryDer.buffer, { name: \"RSASSA-PKCS1-v1_5\", hash: \"SHA-256\" }, false, [\"sign\"]);\n}\nfunction getUrlPath(fullUrl) {\n let url = fullUrl.trim();\n if (!url.startsWith(\"http://\") && !url.startsWith(\"https://\")) {\n url = \"https://\" + url;\n }\n try {\n return new URL(url).pathname || \"/\";\n }\n catch {\n return \"/\";\n }\n}\nfunction normPath(p) {\n return p.replace(/\\/+$/, \"\").toLowerCase();\n}\nfunction normalizeArticleUrl(raw) {\n const u = raw.trim();\n if (/^https?:\\/\\//i.test(u))\n return u;\n const stripped = u.replace(/^\\/+/, \"\");\n const firstSeg = stripped.split(\"/\")[0];\n if (firstSeg.includes(\".\"))\n return \"https://\" + stripped;\n return \"https://draftsim.com/\" + stripped;\n}\nfunction classifySource(sourceMedium) {\n const s = sourceMedium.toLowerCase();\n const parts = s.split(\" / \");\n const src = parts[0] || \"\";\n const medium = parts.slice(1).join(\" / \");\n if (medium.includes(\"email\") || medium.includes(\"newsletter\") ||\n /beehiiv|mailchimp|klaviyo|convertkit|substack|sendgrid|mailerlite|^email$/\n .test(src))\n return \"Email\";\n if (src.includes(\"draftsim\") || medium.includes(\"homepage\")) {\n return \"Homepage\";\n }\n if (src.includes(\"news.google\"))\n return \"Google News\";\n if (src.includes(\"reddit\"))\n return \"Reddit\";\n if (src.includes(\"facebook\"))\n return \"Facebook\";\n if (src.includes(\"discord\"))\n return \"Discord\";\n if (src.includes(\"google\"))\n return \"Discover\";\n if (src.includes(\"(direct)\"))\n return \"Direct\";\n if (/bing|duckduckgo|yahoo|ecosia|brave|startpage|yandex|qwant/.test(src)) {\n return \"Search\";\n }\n if (src === \"t.co\" || src === \"x.com\" || src.includes(\"twitter\")) {\n return \"X / Twitter\";\n }\n if (/chatgpt|openai|perplexity|copilot|gemini|claude|deepseek/.test(src)) {\n return \"AI\";\n }\n return \"Other\";\n}\nfunction isValidDate(s) {\n return typeof s === \"string\" && /^\\d{4}-\\d{2}-\\d{2}$/.test(s) &&\n !isNaN(new Date(s + \"T00:00:00Z\").getTime());\n}\n// ========================= GOOGLE AUTH =========================\nasync function getGoogleAccessToken(email, privateKey, scope) {\n const header = base64url(JSON.stringify({ alg: \"RS256\", typ: \"JWT\" }));\n const now = Math.floor(Date.now() / 1000);\n const claim = base64url(JSON.stringify({\n iss: email,\n scope,\n aud: \"https://oauth2.googleapis.com/token\",\n iat: now,\n exp: now + 3600,\n }));\n const signInput = header + \".\" + claim;\n const key = await importPrivateKey(privateKey);\n const sig = await crypto.subtle.sign(\"RSASSA-PKCS1-v1_5\", key, new TextEncoder().encode(signInput));\n const jwt = signInput + \".\" + base64url(sig);\n const resp = await fetch(\"https://oauth2.googleapis.com/token\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body: \"grant_type=urn%3Aietf%3Aparams%3Aoauth%3Agrant-type%3Ajwt-bearer&assertion=\" +\n jwt,\n });\n const data = await resp.json();\n if (!data.access_token) {\n throw new Error(\"Google SA auth failed: \" + JSON.stringify(data));\n }\n return data.access_token;\n}\n// ========================= ASANA =========================\nconst ASANA_BASE = \"https://app.asana.com/api/1.0\";\nasync function asanaGetPaginated(path, token) {\n const all = [];\n let url = ASANA_BASE + path;\n while (url) {\n const resp = await fetch(url, {\n headers: { Authorization: \"Bearer \" + token },\n });\n if (!resp.ok) {\n const text = await resp.text();\n throw new Error(\"Asana \" + resp.status + \": \" + text.slice(0, 300));\n }\n const json = await resp.json();\n all.push(...(json.data || []));\n url = json.next_page?.uri || null;\n }\n return all;\n}\nasync function findWorkspaceId(name, token) {\n const data = await asanaGetPaginated(\"/workspaces?limit=100\", token);\n const ws = data.find((w) => w.name === name) ||\n data.find((w) => (w.name || \"\").toLowerCase() === name.toLowerCase()) ||\n (data.length === 1 ? data[0] : null);\n if (!ws) {\n const seen = data.map((w) => w.name).join(\", \") || \"(none)\";\n throw new Error('Asana workspace \"' + name + '\" not found. This token can see: ' + seen);\n }\n return ws.gid;\n}\nasync function findProjectId(name, workspaceId, token) {\n const data = await asanaGetPaginated(\"/projects?workspace=\" + workspaceId + \"&limit=100\", token);\n const proj = data.find((p) => p.name === name) ||\n data.find((p) => (p.name || \"\").toLowerCase() === name.toLowerCase());\n if (!proj) {\n const names = data.slice(0, 30).map((p) => p.name).join(\", \") ||\n \"(none)\";\n throw new Error('Asana project \"' + name + '\" not found. This token sees ' + data.length +\n \" project(s): \" + names);\n }\n return proj.gid;\n}\nasync function getPublishedNewsArticles(token) {\n const workspaceId = await findWorkspaceId(WORKSPACE_NAME, token);\n const projectId = await findProjectId(PROJECT_NAME, workspaceId, token);\n const fields = \"name,memberships.section.name,custom_fields.name,custom_fields.display_value,custom_fields.date_value\";\n const tasks = await asanaGetPaginated(\"/projects/\" + projectId + \"/tasks?limit=100&opt_fields=\" +\n encodeURIComponent(fields), token);\n const articles = [];\n for (const task of tasks) {\n const published = (task.memberships || []).some((m) => m.section?.name === \"Published\");\n if (!published)\n continue;\n let url = null;\n let type = \"\";\n let publishDate = null;\n for (const cf of task.custom_fields || []) {\n if (cf.name === \"URL\" && cf.display_value)\n url = cf.display_value.trim();\n if (cf.name === \"Type\" && cf.display_value)\n type = cf.display_value;\n if (cf.name === \"Publish Date\") {\n publishDate = cf.date_value?.date ||\n (cf.display_value ? cf.display_value.slice(0, 10) : null);\n }\n }\n // A dated Published task with no/broken URL is still a real article —\n // keep it and let the WordPress-search fallback resolve its URL.\n // Undated AND URL-less rows are not articles; skip them.\n if (!url && !publishDate)\n continue;\n url = normalizeArticleUrl(url || \"\");\n articles.push({ name: task.name, url, type, publishDate });\n }\n return articles;\n}\n// ========================= GA4 =========================\nasync function fetchGA4SourceReport(accessToken, propertyId, startDate, endDate) {\n const allRows = [];\n let offset = 0;\n const pageSize = 100000;\n while (true) {\n const body = {\n dateRanges: [{ startDate, endDate }],\n dimensions: [{ name: \"pagePath\" }, { name: \"sessionSourceMedium\" }],\n metrics: [{ name: \"screenPageViews\" }],\n limit: pageSize,\n offset,\n };\n const resp = await fetch(\"https://analyticsdata.googleapis.com/v1beta/properties/\" + propertyId +\n \":runReport\", {\n method: \"POST\",\n headers: {\n Authorization: \"Bearer \" + accessToken,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(body),\n });\n const data = await resp.json();\n if (data.error)\n throw new Error(\"GA4 error: \" + data.error.message);\n const rows = data.rows || [];\n allRows.push(...rows);\n if (rows.length < pageSize)\n break;\n offset += pageSize;\n }\n const byPath = new Map();\n for (const row of allRows) {\n const path = normPath(row.dimensionValues[0].value);\n const source = row.dimensionValues[1].value;\n const pvs = parseInt(row.metricValues[0].value, 10) || 0;\n if (!byPath.has(path))\n byPath.set(path, {});\n const entry = byPath.get(path);\n entry[source] = (entry[source] || 0) + pvs;\n }\n return byPath;\n}\n// ========================= REPORT =========================\nconst SOURCE_COLUMNS = [\n \"Discover\",\n \"Google News\",\n \"Email\",\n \"Homepage\",\n \"Reddit\",\n \"Facebook\",\n \"Discord\",\n \"X / Twitter\",\n \"Search\",\n \"AI\",\n \"Direct\",\n \"Other\",\n];\nasync function buildReport(startDate, endDate) {\n const asanaToken = Deno.env.get(\"ASANA_ACCESS_TOKEN\");\n if (!asanaToken)\n throw new Error(\"Missing env var ASANA_ACCESS_TOKEN\");\n const saJsonStr = Deno.env.get(\"GOOGLE_SA_JSON\");\n if (!saJsonStr)\n throw new Error(\"Missing env var GOOGLE_SA_JSON\");\n const saJson = JSON.parse(saJsonStr);\n const propertyId = Deno.env.get(\"GA_PROPERTY_ID\") || \"368713237\";\n const gaTokenPromise = getGoogleAccessToken(saJson.client_email, saJson.private_key, \"https://www.googleapis.com/auth/analytics.readonly\");\n const [rawArticles, gaToken] = await Promise.all([\n getPublishedNewsArticles(asanaToken),\n gaTokenPromise,\n ]);\n // Resolve unusable URL fields (empty or \"/\") by searching draftsim.com's\n // WordPress API for the task name. Bounded: only the broken handful.\n const broken = rawArticles.filter((a) => !normPath(getUrlPath(a.url)));\n await Promise.all(broken.map(async (a) => {\n try {\n const resp = await fetch(\"https://draftsim.com/wp-json/wp/v2/search?search=\" +\n encodeURIComponent(a.name.trim()) + \"&per_page=1\", { signal: AbortSignal.timeout(8000) });\n const hits = await resp.json();\n if (Array.isArray(hits) && hits[0]?.url)\n a.url = hits[0].url;\n }\n catch {\n // leave as-is; the article shows 0 PVs rather than homepage traffic\n }\n }));\n const gaByPath = await fetchGA4SourceReport(gaToken, propertyId, startDate, endDate);\n const otherRaw = {};\n const articles = rawArticles.map((a) => {\n const path = getUrlPath(a.url);\n // A URL that still resolves to the root path would wrongly absorb the\n // site homepage's traffic — treat it as no GA match instead.\n const key = normPath(path);\n const raw = key ? gaByPath.get(key) || {} : {};\n const sources = {};\n for (const col of SOURCE_COLUMNS)\n sources[col] = 0;\n let total = 0;\n for (const [rawSource, pvs] of Object.entries(raw)) {\n const cat = classifySource(rawSource);\n sources[cat] = (sources[cat] || 0) + pvs;\n total += pvs;\n if (cat === \"Other\") {\n otherRaw[rawSource] = (otherRaw[rawSource] || 0) + pvs;\n }\n }\n return {\n name: a.name,\n url: a.url,\n path,\n type: a.type,\n publishDate: a.publishDate,\n sources,\n total,\n };\n });\n const otherBreakdown = Object.entries(otherRaw)\n .sort((x, y) => y[1] - x[1])\n .slice(0, 15)\n .map(([source, pvs]) => ({ source, pvs }));\n articles.sort((x, y) => y.total - x.total);\n const sourceTotals = {};\n for (const col of SOURCE_COLUMNS)\n sourceTotals[col] = 0;\n let grandTotal = 0;\n for (const a of articles) {\n for (const col of SOURCE_COLUMNS)\n sourceTotals[col] += a.sources[col] || 0;\n grandTotal += a.total;\n }\n return {\n startDate,\n endDate,\n articleCount: articles.length,\n articlesWithTraffic: articles.filter((a) => a.total > 0).length,\n grandTotal,\n sourceTotals,\n otherBreakdown,\n articles,\n };\n}\n// ========================= GOOGLE SHEET (Cloud Run parity) =========================\n// Mirrors the original update-news-topic Cloud Run script: most recent 60\n// published articles, GA window of the last 180 days, the OG's simpler\n// source buckets, written to the \"News\" tab oldest-first.\nconst SHEET_ID = \"1nzvDY6HE09yvShrhU4HYxlM9G0WNCeZXC6PgNZ7ro1k\";\nconst SHEET_TAB = \"News\";\nconst SHEET_LIMIT = 60;\nfunction ogClassify(sourceMedium) {\n const src = (sourceMedium.split(\" / \")[0] || \"\").toLowerCase();\n if (src.includes(\"reddit\"))\n return \"Reddit\";\n if (src.includes(\"facebook\"))\n return \"Facebook\";\n if (src.includes(\"news.google\"))\n return \"Google News\";\n if (src.includes(\"google\"))\n return \"Discover\";\n if (src.includes(\"discord\"))\n return \"Discord\";\n return \"Other\";\n}\nconst OG_COLUMNS = [\"Discover\", \"Google News\", \"Reddit\", \"Facebook\", \"Discord\", \"Other\"];\nfunction formatSheetDate(iso) {\n if (!iso)\n return \"Publish date not found\";\n const parts = iso.split(\"-\");\n if (parts.length !== 3)\n return \"Publish date not found\";\n return parts[1] + \"-\" + parts[2] + \"-\" + parts[0];\n}\nasync function updateSheet() {\n const asanaToken = Deno.env.get(\"ASANA_ACCESS_TOKEN\");\n if (!asanaToken)\n throw new Error(\"Missing env var ASANA_ACCESS_TOKEN\");\n const saJsonStr = Deno.env.get(\"GOOGLE_SA_JSON\");\n if (!saJsonStr)\n throw new Error(\"Missing env var GOOGLE_SA_JSON\");\n const saJson = JSON.parse(saJsonStr);\n const propertyId = Deno.env.get(\"GA_PROPERTY_ID\") || \"368713237\";\n const gaTokenPromise = getGoogleAccessToken(saJson.client_email, saJson.private_key, \"https://www.googleapis.com/auth/analytics.readonly\");\n const sheetsTokenPromise = getGoogleAccessToken(saJson.client_email, saJson.private_key, \"https://www.googleapis.com/auth/spreadsheets\");\n const [rawArticles, gaToken, sheetsToken] = await Promise.all([\n getPublishedNewsArticles(asanaToken),\n gaTokenPromise,\n sheetsTokenPromise,\n ]);\n rawArticles.sort((x, y) => (y.publishDate || \"\").localeCompare(x.publishDate || \"\"));\n const recent = rawArticles.slice(0, SHEET_LIMIT);\n // Same WordPress-search fallback as the dashboard, but only for the\n // sliced recent set.\n const broken = recent.filter((a) => !normPath(getUrlPath(a.url)));\n await Promise.all(broken.map(async (a) => {\n try {\n const resp = await fetch(\"https://draftsim.com/wp-json/wp/v2/search?search=\" +\n encodeURIComponent(a.name.trim()) + \"&per_page=1\", { signal: AbortSignal.timeout(8000) });\n const hits = await resp.json();\n if (Array.isArray(hits) && hits[0]?.url)\n a.url = hits[0].url;\n }\n catch {\n // leave as-is; the row shows 0 PVs rather than homepage traffic\n }\n }));\n const gaByPath = await fetchGA4SourceReport(gaToken, propertyId, \"180daysAgo\", \"today\");\n const rows = recent.map((a) => {\n const path = getUrlPath(a.url);\n const key = normPath(path);\n const raw = key ? gaByPath.get(key) || {} : {};\n const buckets = {};\n for (const c of OG_COLUMNS)\n buckets[c] = 0;\n for (const [rawSource, pvs] of Object.entries(raw)) {\n buckets[ogClassify(rawSource)] += pvs;\n }\n const total = OG_COLUMNS.reduce((s, c) => s + buckets[c], 0);\n return { link: path, publishDate: a.publishDate, buckets, type: a.type || \"\", total };\n });\n // Oldest first, unknown dates last - the order the sheet has always had.\n rows.sort((x, y) => {\n if (!x.publishDate && !y.publishDate)\n return 0;\n if (!x.publishDate)\n return 1;\n if (!y.publishDate)\n return -1;\n return x.publishDate.localeCompare(y.publishDate);\n });\n const values = [[\n \"Link\",\n \"Publish Date\",\n \"Discover\",\n \"Google News\",\n \"Reddit\",\n \"Facebook\",\n \"Discord\",\n \"Other\",\n \"Type\",\n \"Total PVs\",\n ]];\n for (const r of rows) {\n values.push([\n r.link,\n formatSheetDate(r.publishDate),\n r.buckets[\"Discover\"],\n r.buckets[\"Google News\"],\n r.buckets[\"Reddit\"],\n r.buckets[\"Facebook\"],\n r.buckets[\"Discord\"],\n r.buckets[\"Other\"],\n r.type,\n r.total,\n ]);\n }\n const base = \"https://sheets.googleapis.com/v4/spreadsheets/\" + SHEET_ID + \"/values/\";\n const clearResp = await fetch(base + encodeURIComponent(SHEET_TAB) + \":clear\", {\n method: \"POST\",\n headers: { Authorization: \"Bearer \" + sheetsToken },\n });\n if (!clearResp.ok) {\n throw new Error(\"Sheets clear failed: \" + (await clearResp.text()).slice(0, 300));\n }\n const updateResp = await fetch(base + encodeURIComponent(SHEET_TAB + \"!A1\") + \"?valueInputOption=RAW\", {\n method: \"PUT\",\n headers: {\n Authorization: \"Bearer \" + sheetsToken,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ values }),\n });\n if (!updateResp.ok) {\n throw new Error(\"Sheets update failed: \" + (await updateResp.text()).slice(0, 300));\n }\n return rows.length;\n}\n// ========================= HTML FRONTEND =========================\nconst PAGE_CSS = \"\\n\" +\n \" :root{--bg:#0f1117;--surface:#1a1d27;--card:#222533;--border:#2e3348;--text:#e2e4ed;--muted:#8b8fa3;--accent:#3b82f6;--radius:10px}\\n\" +\n \" *{box-sizing:border-box;margin:0;padding:0}\\n\" +\n \" body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}\\n\" +\n \" header{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;gap:.75rem}\\n\" +\n \" header h1{font-size:1.15rem;font-weight:600}\\n\" +\n \" header .sheet-link{margin-left:auto;font-size:.8rem;color:var(--muted)}\\n\" +\n \" header .sheet-link:hover{color:var(--accent)}\\n\" +\n \" .container{max-width:1200px;margin:0 auto;padding:1.5rem}\\n\" +\n \" .form-bar{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1rem}\\n\" +\n \" .field{display:flex;flex-direction:column;gap:.2rem}\\n\" +\n \" .field label{font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}\\n\" +\n \" .field input,.field select{padding:.45rem .65rem;border:1px solid var(--border);border-radius:6px;font-size:.9rem;background:var(--card);color:var(--text);outline:none;color-scheme:dark}\\n\" +\n \" .field input:focus,.field select:focus{border-color:var(--accent)}\\n\" +\n \" button.go{background:var(--accent);color:#fff;border:none;padding:.5rem 1.75rem;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer}\\n\" +\n \" button.go:hover{opacity:.85}\\n\" +\n \" button.go:disabled{opacity:.4;cursor:not-allowed}\\n\" +\n \" button.csv{background:var(--card);color:var(--text);border:1px solid var(--border);padding:.5rem 1rem;border-radius:6px;font-size:.85rem;cursor:pointer}\\n\" +\n \" button.csv:hover{border-color:var(--accent)}\\n\" +\n \" .toggles{display:flex;gap:1.25rem;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}\\n\" +\n \" .toggles label{display:flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none}\\n\" +\n \" #status{color:var(--muted);font-size:.85rem;margin-bottom:1rem;min-height:1.2rem}\\n\" +\n \" .kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:1rem}\\n\" +\n \" .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem;text-align:center}\\n\" +\n \" .kpi .kpi-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}\\n\" +\n \" .kpi .kpi-val{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}\\n\" +\n \" .traffic-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1rem}\\n\" +\n \" .traffic-box h4{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}\\n\" +\n \" .bar-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;font-size:.8rem}\\n\" +\n \" .bar-label{width:100px;text-align:right;color:var(--muted);flex-shrink:0}\\n\" +\n \" .bar-track{flex:1;height:16px;background:var(--card);border-radius:3px;overflow:hidden}\\n\" +\n \" .bar-fill{height:100%;border-radius:3px;min-width:2px;background:var(--accent)}\\n\" +\n \" .bar-val{width:75px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}\\n\" +\n \" .type-badge{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.72rem;white-space:nowrap;color:#fff}\\n\" +\n \" .col-toggles{display:none;gap:.9rem;align-items:center;font-size:.78rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}\\n\" +\n \" .col-toggles label{display:flex;align-items:center;gap:.3rem;cursor:pointer;user-select:none}\\n\" +\n \" .table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto}\\n\" +\n \" .table-wrap::-webkit-scrollbar{height:12px}\\n\" +\n \" .table-wrap::-webkit-scrollbar-thumb{background:#3d4462;border-radius:6px}\\n\" +\n \" .table-wrap::-webkit-scrollbar-track{background:var(--card)}\\n\" +\n \" table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:1250px}\\n\" +\n \" th:first-child,td:first-child{position:sticky;left:0;background:var(--surface);z-index:2}\\n\" +\n \" th{text-align:left;padding:.55rem .65rem;font-size:.68rem;text-transform:uppercase;color:var(--muted);letter-spacing:.03em;white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}\\n\" +\n \" th:hover{color:var(--text)}\\n\" +\n \" th.num,td.num{text-align:right}\\n\" +\n \" th .arrow{font-size:.6rem;margin-left:.2rem}\\n\" +\n \" td{padding:.45rem .65rem;border-bottom:1px solid var(--border)}\\n\" +\n \" tr:hover td{background:rgba(255,255,255,.02)}\\n\" +\n \" td.num{font-variant-numeric:tabular-nums}\\n\" +\n \" td.total{font-weight:700}\\n\" +\n \" a{color:var(--accent);text-decoration:none}\\n\" +\n \" a:hover{text-decoration:underline}\\n\" +\n \" @media(max-width:700px){.form-bar{flex-direction:column;align-items:stretch}}\\n\";\nconst PAGE_BODY = \"\\n\" +\n \"

\\n\" +\n \"

Draftsim News Performance

\\n\" +\n ' Update Google Sheet\\n' +\n \"

\\n\" +\n '

\\n' +\n ' \\n\" +\n '

\\n' +\n '

\\n' +\n \"

\\n\";\nconst CLIENT_JS = [\n 'const form = document.getElementById(\"rangeForm\");',\n 'const statusEl = document.getElementById(\"status\");',\n 'const results = document.getElementById(\"results\");',\n 'const goBtn = document.getElementById(\"goBtn\");',\n 'const csvBtn = document.getElementById(\"csvBtn\");',\n 'const presetEl = document.getElementById(\"preset\");',\n 'const startEl = document.getElementById(\"start\");',\n 'const endEl = document.getElementById(\"end\");',\n 'const togglesEl = document.getElementById(\"toggles\");',\n 'const pubInRangeEl = document.getElementById(\"pubInRange\");',\n 'const showZeroEl = document.getElementById(\"showZero\");',\n 'const SOURCES = [\"Discover\",\"Google News\",\"Email\",\"Homepage\",\"Reddit\",\"Facebook\",\"Discord\",\"X / Twitter\",\"Search\",\"AI\",\"Direct\",\"Other\"];',\n \"let report = null;\",\n 'let sortKey = \"total\";',\n \"let sortDir = -1;\",\n \"const hiddenCols = new Set();\",\n \"function typeColor(t) {\",\n ' if (!t) return \"#4b5162\";',\n \" let hash = 0;\",\n \" for (let i = 0; i < t.length; i++) hash = (hash * 31 + t.charCodeAt(i)) >>> 0;\",\n ' return \"hsl(\" + (hash % 360) + \",50%,32%)\";',\n \"}\",\n \"function pvColor(n) {\",\n ' return n >= 5000 ? \"#22c55e\" : n >= 3000 ? \"#eab308\" : \"#ef4444\";',\n \"}\",\n \"function buildColToggles() {\",\n ' const wrap = document.getElementById(\"colToggles\");',\n \" if (wrap.childElementCount) return;\",\n \" for (const s of SOURCES) {\",\n ' const label = document.createElement(\"label\");',\n ' const cb = document.createElement(\"input\");',\n ' cb.type = \"checkbox\";',\n \" cb.checked = true;\",\n ' cb.addEventListener(\"change\", () => {',\n \" if (cb.checked) hiddenCols.delete(s); else hiddenCols.add(s);\",\n \" render();\",\n \" });\",\n \" label.appendChild(cb);\",\n ' label.appendChild(document.createTextNode(\" \" + s));',\n \" wrap.appendChild(label);\",\n \" }\",\n ' wrap.style.display = \"flex\";',\n \"}\",\n \"function isoDaysAgo(n) {\",\n \" const d = new Date(Date.now() - n * 86400000);\",\n ' return d.toISOString().split(\"T\")[0];',\n \"}\",\n \"function applyPreset() {\",\n \" const v = presetEl.value;\",\n ' if (v === \"custom\") return;',\n \" endEl.value = isoDaysAgo(0);\",\n \" startEl.value = isoDaysAgo(parseInt(v, 10) - 1);\",\n \"}\",\n 'presetEl.addEventListener(\"change\", applyPreset);',\n '[startEl, endEl].forEach(el => el.addEventListener(\"input\", () => { presetEl.value = \"custom\"; }));',\n \"applyPreset();\",\n 'form.addEventListener(\"submit\", (e) => { e.preventDefault(); load(); });',\n 'pubInRangeEl.addEventListener(\"change\", render);',\n 'showZeroEl.addEventListener(\"change\", render);',\n \"async function load() {\",\n \" const start = startEl.value, end = endEl.value;\",\n \" if (!start || !end) return;\",\n ' if (start > end) { statusEl.textContent = \"Start date must be before end date.\"; return; }',\n \" goBtn.disabled = true;\",\n ' statusEl.textContent = \"Pulling Asana tasks and GA4 data... (about 10-20s)\";',\n \" try {\",\n ' const resp = await fetch(\"/api/report?start=\" + start + \"&end=\" + end);',\n \" if (!resp.ok) throw new Error(await resp.text() || resp.statusText);\",\n \" report = await resp.json();\",\n ' statusEl.textContent = \"\";',\n ' togglesEl.style.display = \"flex\";',\n ' csvBtn.style.display = \"inline-block\";',\n \" buildColToggles();\",\n \" render();\",\n \" } catch (err) {\",\n ' statusEl.textContent = \"Error: \" + err.message;',\n \" } finally {\",\n \" goBtn.disabled = false;\",\n \" }\",\n \"}\",\n \"function visibleArticles() {\",\n \" if (!report) return [];\",\n \" let arts = report.articles;\",\n \" if (pubInRangeEl.checked) {\",\n \" arts = arts.filter(a => a.publishDate && a.publishDate >= report.startDate && a.publishDate <= report.endDate);\",\n \" }\",\n \" if (!showZeroEl.checked) {\",\n \" arts = arts.filter(a => a.total > 0 || (pubInRangeEl.checked && a.publishDate));\",\n \" }\",\n \" return arts;\",\n \"}\",\n \"function sortArticles(arts) {\",\n \" const key = sortKey, dir = sortDir;\",\n \" return [...arts].sort((a, b) => {\",\n \" let va, vb;\",\n ' if (key === \"name\" || key === \"type\") { va = (a[key] || \"\").toLowerCase(); vb = (b[key] || \"\").toLowerCase(); }',\n ' else if (key === \"publishDate\") { va = a.publishDate || \"\"; vb = b.publishDate || \"\"; }',\n ' else if (key === \"total\") { va = a.total; vb = b.total; }',\n \" else { va = a.sources[key] || 0; vb = b.sources[key] || 0; }\",\n \" if (va < vb) return -1 * dir;\",\n \" if (va > vb) return 1 * dir;\",\n \" return 0;\",\n \" });\",\n \"}\",\n \"function setSort(key) {\",\n \" if (sortKey === key) sortDir = -sortDir;\",\n ' else { sortKey = key; sortDir = (key === \"name\" || key === \"type\" || key === \"publishDate\") ? 1 : -1; }',\n \" render();\",\n \"}\",\n \"function fmt(n) { return n.toLocaleString(); }\",\n 'function escHtml(s) { const d = document.createElement(\"div\"); d.textContent = s || \"\"; return d.innerHTML; }',\n \"function render() {\",\n \" if (!report) return;\",\n \" const arts = sortArticles(visibleArticles());\",\n \" const shownTotal = arts.reduce((s, a) => s + a.total, 0);\",\n \" const shownSources = {};\",\n \" SOURCES.forEach(s => shownSources[s] = 0);\",\n \" arts.forEach(a => SOURCES.forEach(s => shownSources[s] += a.sources[s] || 0));\",\n ' let h = \"\";',\n \" h += '

';\",\n \" const maxSrc = Math.max(1, ...SOURCES.map(s => shownSources[s]));\",\n \" h += '

Traffic Sources

';\",\n \" for (const s of SOURCES) {\",\n \" const w = Math.max(1, shownSources[s] / maxSrc * 100);\",\n \" h += '

' + s + ''\",\n ' + \\'

\\'',\n \" + '' + fmt(shownSources[s]) + '

';\",\n \" }\",\n \" if (report.otherBreakdown && report.otherBreakdown.length) {\",\n ' h += \\'

Top raw sources still in Other (all articles)

\\'',\n \" + '

';\",\n \" for (const o of report.otherBreakdown) {\",\n \" h += '

' + escHtml(o.source) + \\\" - \\\" + fmt(o.pvs) + \\\"

\\\";\",\n \" }\",\n \" h += '

';\",\n \" }\",\n \" h += '

';\",\n \" if (report.endDate === isoDaysAgo(0)) {\",\n \" h += '

GA is still processing todays traffic - articles published today may show low or zero pageviews for a few more hours.

';\",\n \" }\",\n \" const shownCols = SOURCES.filter(s => !hiddenCols.has(s));\",\n \" h += '

' + escHtml(a.name) + '	' + (escHtml(a.type) \|\| \\\"-\\\") + '	' + (a.publishDate \|\| \\\"-\\\") + '	' + fmt(a.total) + '	' + fmt(a.sources[s] \|\| 0) + '

' + label + '

' + val + '

Diff · v14