[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_122":-5,"_20":123,"_22":124,"_125":126,"_127":128,"_26":129,"_24":130,"_131":132,"_133":134,"_135":48,"_136":137,"_138":73,"_139":-5,"_140":-5,"_141":142},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":-5},"handle","iamseeley","name","valcontributionchart","branchName","main","version","path","main.tsx","project",{"_33":79,"_13":14,"_35":80,"_46":-5,"_81":73,"_49":50,"_82":50,"_83":-5,"_84":-5,"_85":86,"_87":60,"_88":73,"_89":-5,"_90":-5,"_91":65,"_53":92,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":98,"_99":98,"_100":101,"_102":101,"_103":101,"_104":98,"_105":98,"_106":107,"_108":109,"_110":111,"_47":48},"tree",[71],"file",{"_33":56,"_57":58,"_59":60,"_13":19,"_61":62,"_63":64,"_17":65,"_66":-5,"_35":67,"_68":41,"_69":-5,"_18":70},"contents",[],"upstream",{"_33":34,"_35":36,"_37":38,"_13":16,"_39":40,"_17":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":14},"pull","ahead","behind","id","446c4aa0-2791-11f0-9d52-569c3dd06744","createdAt",["D",1746216531999],"updatedAt",["D",1725222699080],"projectId","4469d4b4-2791-11f0-9d52-569c3dd06744",1,"forkedBranchId","forkedBranchVersion","lockfileKey","1746253800811-esm.town_v_ejfox_valcontributionchart@1-main","deletedAt","isOwned",false,"privacy","public","userHandle","ejfox","orgId","3e8846da-05b3-4475-a463-83b2ba84a98f","projectName","893a6c3e-2827-11f0-af78-569c3dd06744","branchId","89375558-2827-11f0-af78-569c3dd06744","fileId","893a6cca-2827-11f0-af78-569c3dd06744","content","// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart,\n// and render it using React. We'll use the fetch API to get the data, process it to create a heatmap-like structure,\n// and then use CSS Grid to render the chart with varying shades of green based on the number of vals created each day.\n\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [contributionData, setContributionData] = useState({});\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n fetch('https://ejfox-allvals.web.val.run')\n .then(response => response.json())\n .then(data => {\n const processedData = processContributionData(data.vals);\n setContributionData(processedData);\n setLoading(false);\n })\n .catch(error => {\n console.error('Error fetching data:', error);\n setLoading(false);\n });\n }, []);\n\n const processContributionData = (vals) => {\n const today = new Date();\n const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());\n const data = {};\n\n // Initialize all days in the past year with 0 contributions\n for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) {\n data[d.toISOString().split('T')[0]] = 0;\n }\n\n // Count contributions for each day\n vals.forEach(val => {\n const date = new Date(val.createdAt).toISOString().split('T')[0];\n if (date in data) {\n data[date]++;\n }\n });\n\n return data;\n };\n\n const getColorIntensity = (count) => {\n if (count === 0) return '#ebedf0';\n if (count < 5) return '#9be9a8';\n if (count < 10) return '#40c463';\n if (count < 15) return '#30a14e';\n return '#216e39';\n };\n\n const renderContributionGrid = () => {\n const weeks = [];\n const days = Object.keys(contributionData).sort();\n\n for (let i = 0; i < days.length; i += 7) {\n const week = days.slice(i, i + 7);\n weeks.push(\n

\n {week.map(day => (\n \n ))}\n

\n );\n }\n\n return

{weeks}

;\n };\n\n return (\n

Val Contribution Chart

\n {loading ? (\n

\n ) : (\n <>\n {renderContributionGrid()}\n

\n \n View Source\n \n

\n \n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n return new Response(`\n \n \n Val Contribution Chart\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: #f6f8fa;\n}\n.container {\n max-width: 1000px;\n margin: 2rem auto;\n padding: 1rem;\n background-color: white;\n border-radius: 6px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n}\nh1 {\n color: #24292e;\n}\n.contribution-grid {\n display: flex;\n flex-direction: row;\n gap: 2px;\n overflow-x: auto;\n}\n.contribution-week {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.contribution-day {\n width: 10px;\n height: 10px;\n border-radius: 2px;\n}\n.source-link {\n margin-top: 1rem;\n text-align: right;\n}\n.source-link a {\n color: #0366d6;\n text-decoration: none;\n}\n.source-link a:hover {\n text-decoration: underline;\n}\n`;\n\nexport default server;","fileType","http",0,"parentId",["D",1725275981028],"branchVersion","label",[19],{"_33":56,"_13":19,"_59":60,"_66":-5,"_57":58,"_68":41,"_72":73,"_35":74,"_17":65,"_63":64,"_61":-5,"_75":48,"_69":-5,"_76":77,"_18":78},"latest",true,["D",1725275981028],"deleted","children",[],[19],"89370ad0-2827-11f0-af78-569c3dd06744",["D",1746281071938],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","fed077e2-dbc0-4421-bb81-a71b0796f69e","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","8bf3083e-3312-4fc4-8746-fcbc375455ce","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_121":117},"org",{"_11":12,"_115":-5,"_116":117,"_85":86,"_118":119,"_120":48},"branch",{"_17":41,"_13":16,"_33":58,"_39":79,"_42":34,"_43":65,"_112":50,"_113":40,"_114":54,"_55":14,"_51":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJsaWQ1T0xmZ2dwbk5kMWNOWW1yR2dIZDdHeCJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":79,"_13":14,"_35":162,"_46":-5,"_81":73,"_49":50,"_82":50,"_83":-5,"_84":-5,"_85":86,"_87":60,"_88":73,"_89":-5,"_90":-5,"_91":65,"_53":92,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":98,"_99":98,"_100":101,"_102":101,"_103":101,"_104":98,"_105":98,"_106":163,"_108":164,"_110":165,"_47":48},[159],"files",[159],"counts",{"_149":65,"_150":65,"_151":65,"_152":153,"_154":155},[],{"_33":56,"_13":19,"_59":60,"_66":-5,"_57":58,"_68":41,"_72":73,"_35":147,"_17":65,"_63":64,"_61":62,"_75":48,"_69":-5,"_18":148},"upstreamProject",{"_33":40,"_13":14,"_83":-5,"_84":-5,"_49":50,"_106":145},"upstreamBranch",{"_33":34,"_35":143,"_37":144,"_13":16,"_39":40,"_17":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746216531999],["D",1725222699080],{"_11":52,"_121":146},"https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXg0S3IwMDg3bURoN1dIUHg5TW5sSUhKRyIsImluaXRpYWxzIjoiRUYifQ",["D",1725275981028],[19],"pulls","branches","forks","envVars",{"_156":65,"_158":65},"connections",{"_156":65,"_157":65},"count","unfilledCount","emptyCount",{"_33":56,"_13":19,"_59":60,"_66":-5,"_57":58,"_68":41,"_72":73,"_35":74,"_17":65,"_63":64,"_61":-5,"_75":48,"_69":-5,"_76":160,"_18":161},[],[19],["D",1746281071938],{"_11":12,"_121":117},{"_11":12,"_115":-5,"_116":117,"_85":86,"_118":119,"_120":48},{"_17":41,"_13":16,"_33":58,"_39":79,"_42":34,"_43":65,"_112":50,"_113":40,"_114":54,"_55":14,"_51":12},"ctx",{"_106":-5,"_199":200,"_140":201,"_202":203,"_204":205,"_206":48,"_207":48,"_208":48,"_209":73,"_210":-5,"_211":-7,"_212":-7,"_213":65,"_214":48,"_215":48,"_216":-5},"ENV",{"_170":171,"_172":173,"_174":16,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","db46cea2d909ccbd011cfec0e4ddfe291f419728","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","aiChatModels",[217,218,219,220,221],[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","navCollapsed","currentOrgId",{"_222":246,"_69":247,"_225":248,"_83":249,"_228":73,"_229":73,"_230":231,"_232":73},{"_222":241,"_69":242,"_225":243,"_83":244,"_228":73,"_229":48,"_230":245,"_232":48},{"_222":237,"_69":238,"_225":239,"_83":240,"_228":73,"_229":73,"_230":231,"_232":48},{"_222":233,"_69":234,"_225":235,"_83":236,"_228":73,"_229":73,"_230":231,"_232":48},{"_222":223,"_69":224,"_225":226,"_83":227,"_228":73,"_229":73,"_230":231,"_232":48},"value","fable","Claude Fable 5.1","shortLabel","Fable","Most capable; 2× Opus pricing","imageInput","thinking","contextWindowSize",1000000,"isDefault","opus55","Claude Opus 5.5","Opus","Highly capable for complex work","sonnet55","Claude Sonnet 5.5","Sonnet","Balanced speed and capability","haiku","Claude Haiku 4.5","Haiku","Fastest; best for simple edits",200000,"deepseekflash","DeepSeek V4.1 Flash","DeepSeek Flash","Smart and very cheap"]