Error: Username is required

`);\n }\n try {\n let graph = await generateGraph(username);\n return c.html(`

${graph}

`);\n } catch (error) {\n console.error(`Error generating graph for ${username}:`, error);\n return c.html(`

Error: ${error.message}

`);\n }\n});\n\n// hono bug doesn't handle optional params? so have to do this\napp.get(\"/graph/\", async (c) => {\n const username = c.req.param(\"username\") || c.req.query(\"username\");\n if (!username) {\n return c.html(`

Error: Username is required

`);\n }\n try {\n let graph = await generateGraph(username);\n return c.html(`

${graph}

`);\n } catch (error) {\n console.error(`Error generating graph for ${username}:`, error);\n return c.html(`

Error: ${error.message}

`);\n }\n});\n\napp.get(\"/:username\", (c) => {\n if (c.req.url.pathname === \"/favicon.ico\") {\n return c.json(null, 404);\n }\n const username = c.req.param(\"username\") || c.req.query(\"username\");\n console.log(`Rendering page for username: ${username}`);\n return renderPage(c, username);\n});\n\napp.get(\"/\", (c) => {\n console.log(\"Rendering home page\");\n const username = c.req.query(\"username\");\n if (username === \"favicon.ico\") {\n return c.json(null, 404);\n }\n if (username) {\n console.log(`Username provided in query: ${username}`);\n return renderPage(c, username);\n }\n return renderPage(c);\n});\n\nasync function generateGraph(username, useVersions = true) {\n if (!username) {\n return html`

Please enter a username

`;\n }\n\n console.log(`Fetching contributions for ${username}`);\n try {\n let vals;\n if (useVersions) {\n vals = await getValsWithVersions(username, 200);\n } else {\n vals = await getVals(username);\n }\n\n // if use all versions, we get all the versions of each val\n if (useVersions) {\n vals = vals.map(val => val.versions ? val.versions : val).flat();\n }\n\n console.log(`Fetched ${vals.length} contributions`);\n const contributionData = processVals(vals, useVersions);\n console.log(`Processed ${contributionData.length} contributions`);\n return html`\n

Contribution Graph for ${username}

\n \n \n \n \n ${generateMonthLabels(contributionData)}\n \n \n \n ${generateContributionRows(contributionData)}\n \n

\n `;\n } catch (error) {\n console.error(`Error processing data for ${username}:`, error);\n throw new Error(`Failed to process data: ${error.message}`);\n }\n}\n\nfunction renderPage(c, initialUsername = null) {\n return c.html(html`\n \n \n \n \n \n \n \n Val Wall\n \n \n \n

Valtown Contribution Graph

\n \n \n \n

\n ${\n initialUsername ? html`

Loading graph...

` : \"\"\n }\n

\n Source: https://www.val.town/v/yawnxyz/valWall\n

\n \n \n `);\n}\nfunction generateMonthLabels(contributionData) {\n const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n const today = dayjs();\n const oneYearAgo = today.subtract(1, \"year\").add(1, \"day\");\n const totalDays = today.diff(oneYearAgo, \"day\") + 1;\n const totalWeeks = Math.ceil(totalDays / 7);\n\n let currentDate = oneYearAgo;\n let monthLabels = [];\n let currentMonth = null;\n let columnCount = 0;\n\n for (let week = 0; week < totalWeeks; week++) {\n const monthOfWeek = currentDate.month();\n\n if (monthOfWeek !== currentMonth) {\n if (currentMonth !== null) {\n monthLabels.push({ name: months[currentMonth], columns: columnCount });\n }\n currentMonth = monthOfWeek;\n columnCount = 1;\n } else {\n columnCount++;\n }\n\n currentDate = currentDate.add(1, \"week\");\n }\n\n // Add the last month\n monthLabels.push({ name: months[currentMonth], columns: columnCount });\n\n return html`${\n monthLabels.map(month =>\n html`${month.name}`\n )\n }`;\n}\n\nfunction generateContributionRows(contributionData) {\n const dayLabels = [\"\", \"Mon\", \"\", \"Wed\", \"\", \"Fri\", \"\"];\n let rows = [];\n\n for (let i = 0; i < 7; i++) {\n rows.push(html`\n \n ${dayLabels[i]}\n ${generateContributionCells(contributionData, i)}\n \n `);\n }\n\n return rows;\n}\nfunction generateContributionCells(contributionData, dayOfWeek) {\n let cells = [];\n for (let i = dayOfWeek; i < contributionData.length; i += 7) {\n const day = contributionData[i];\n cells.push(html`\n \n

\n ${day.date}: ${day.count} contribution${day.count !== 1 ? \"s\" : \"\"}\n

\n \n `);\n }\n return cells;\n}\nfunction processVals(vals, useVersions) {\n const today = new Date();\n const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());\n const contributionMap = new Map();\n\n // Initialize the map with all dates in the last year\n for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) {\n contributionMap.set(d.toISOString().split(\"T\")[0], 0);\n }\n\n // Count contributions\n vals.forEach(val => {\n const date = new Date(val.createdAt).toISOString().split(\"T\")[0];\n if (contributionMap.has(date)) {\n contributionMap.set(date, contributionMap.get(date) + 1);\n }\n });\n\n // Convert to array and add level\n return Array.from(contributionMap, ([date, count]) => ({\n date,\n count,\n level: count === 0\n ? 0\n : useVersions\n ? count < 10\n ? 1\n : count < 25\n ? 2\n : count < 50\n ? 3\n : 4\n : count < 5\n ? 1\n : count < 10\n ? 2\n : count < 15\n ? 3\n : 4,\n }));\n}\n\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/valWall/code/main.tsx","extension","actionData","errors"]