import { html } from "https://deno.land/x/hono@v3.11.7/helper.ts"; import { Hono } from "jsr:@hono/hono"; import dayjs from "npm:dayjs"; import { appendTrailingSlash } from "npm:hono/trailing-slash"; // import { getVals, getValsWithVersions } from "./api.js"; import { getVals, getValsWithVersions } from "https://esm.town/v/yawnxyz/valVersions"; const app = new Hono(); app.use(appendTrailingSlash()); app.get("/graph/:username?", async (c) => { console.log("graph:", c.req.param("username") || c.req.query("username")); const username = c.req.param("username") || c.req.query("username"); if (!username) { return c.html(`

Error: Username is required

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

${graph}

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

Error: ${error.message}

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

Error: Username is required

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

${graph}

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

Error: ${error.message}

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

Please enter a username

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

Contribution Graph for ${username}

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

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

Valtown Contribution Graph

${ initialUsername ? html`

Loading graph...

` : "" }

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

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

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

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