[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_150":151,"_152":153},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_58":125,"_16":-7,"_17":126,"_127":128,"_26":129,"_19":130,"_21":131,"_132":-5,"_133":-5,"_134":-5,"_135":33,"_136":137,"_138":33},"routes/_app.x.$handle.$name._index",{"_11":12,"_13":14,"_15":-7,"_16":-7,"_17":18,"_19":20,"_21":22,"_23":-7,"_24":-5,"_25":-5,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":33,"_34":33},"handle","ejfox","name","valcontributionchart","branchName","version","project",{"_35":74,"_13":14,"_47":75,"_76":-5,"_77":46,"_78":79,"_80":-5,"_81":-5,"_82":83,"_84":39,"_85":46,"_86":-5,"_87":-5,"_88":66,"_89":90,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":96,"_97":96,"_98":99,"_100":99,"_101":99,"_102":96,"_103":96,"_104":105,"_106":107,"_108":109,"_110":33},"counts",{"_63":49,"_64":44,"_65":66,"_67":68,"_69":70},"contents",[60],"readme","upstream","pull","files",[29],"preview",{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_16":49,"_50":51,"_52":53,"_54":33,"_55":-5,"_56":57,"_58":59},"ahead","behind","showHomeCustomizationHint",false,"showHTTPPreviewSettingsHint","id","446e9f80-2791-11f0-9d52-569c3dd06744","main.tsx","fileId","446ea016-2791-11f0-9d52-569c3dd06744","parentId","branchId","446c4aa0-2791-11f0-9d52-569c3dd06744","branchVersion",1,"latest",true,"createdAt",["D",1725222699080],0,"fileType","http","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;","deleted","label","children",[],"path",[37],{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":61,"_16":49,"_50":51,"_52":53,"_54":33,"_55":-5,"_58":62},["D",1725222699080],[37],"pulls","branches","forks",2,"envVars",{"_71":49,"_73":49},"connections",{"_71":49,"_72":49},"count","unfilledCount","emptyCount","4469d4b4-2791-11f0-9d52-569c3dd06744",["D",1746216531999],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","userId","a4aec79a-2356-44be-852a-f563484e5396","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","3e8846da-05b3-4475-a463-83b2ba84a98f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_124":121},"org",{"_11":12,"_120":121,"_82":83,"_122":123},"branch",{"_16":44,"_13":111,"_35":42,"_112":74,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":14,"_119":12},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXg0S3IwMDg3bURoN1dIUHg5TW5sSUhKRyIsImluaXRpYWxzIjoiRUYifQ","tier","free","profileImageUrl","",{"_35":74,"_13":14,"_47":146,"_76":-5,"_77":46,"_78":79,"_80":-5,"_81":-5,"_82":83,"_84":39,"_85":46,"_86":-5,"_87":-5,"_88":66,"_89":90,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":96,"_97":96,"_98":99,"_100":99,"_101":99,"_102":96,"_103":96,"_104":147,"_106":148,"_108":149,"_110":33},"tree",[143],[143],{"_63":49,"_64":44,"_65":66,"_67":141,"_69":142},[139],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"navCollapsed",{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":61,"_16":49,"_50":51,"_52":53,"_54":33,"_55":-5,"_58":140},[37],{"_71":49,"_73":49},{"_71":49,"_72":49},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_16":49,"_50":51,"_52":53,"_54":33,"_55":-5,"_56":144,"_58":145},[],[37],["D",1746216531999],{"_11":12,"_124":121},{"_11":12,"_120":121,"_82":83,"_122":123},{"_16":44,"_13":111,"_35":42,"_112":74,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":14,"_119":12},"ctx",{"_104":-5,"_183":184,"_185":186,"_187":33,"_188":33,"_189":33,"_190":-5,"_191":-7,"_192":-7,"_193":49,"_194":33,"_195":33,"_196":-5,"_197":33,"_198":33},"ENV",{"_154":155,"_156":157,"_158":159,"_160":111,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","f1316bb1ce3ad41ce227a17bcad7725ad044419f","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","API_URL","https://api.val.town","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier"]