/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Pachelbel's Canon chord progression in D major const CHORD_PROGRESSION = [ [146.83, 220.00, 293.66], // D (I) [220.00, 329.63, 440.00], // A (V) [164.81, 246.94, 329.63], // Bm (vi) [196.00, 293.66, 392.00], // F#m (iii) [196.00, 293.66, 392.00], // G (IV) [146.83, 220.00, 293.66], // D (I) [196.00, 293.66, 392.00], // G (IV) [220.00, 329.63, 440.00], // A (V) ]; function App() { const [username, setUsername] = useState("stevekrouse"); const [contributionData, setContributionData] = useState(null); const [userData, setUserData] = useState(null); const [error, setError] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const [currentColumn, setCurrentColumn] = useState(0); const [currentBeat, setCurrentBeat] = useState(0); const [currentSubBeat, setCurrentSubBeat] = useState(0); const audioContextRef = useRef(null); const intervalRef = useRef(null); const lowPassFilterRef = useRef(null); useEffect(() => { fetchContributions(); }, []); const fetchContributions = async () => { setError(null); setContributionData(null); setUserData(null); try { const response = await fetch("/contributions", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username }), }); if (!response.ok) throw new Error("Failed to fetch contributions"); const data = await response.json(); console.log("Fetched data:", data); setContributionData(data.contributionCalendar); setUserData(data.user); } catch (err) { console.error("Error fetching contributions:", err); setError(err.message); } }; const initAudio = () => { if (!audioContextRef.current) { try { audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)(); lowPassFilterRef.current = audioContextRef.current.createBiquadFilter(); lowPassFilterRef.current.type = "lowpass"; lowPassFilterRef.current.frequency.setValueAtTime(1000, audioContextRef.current.currentTime); lowPassFilterRef.current.Q.setValueAtTime(1, audioContextRef.current.currentTime); lowPassFilterRef.current.connect(audioContextRef.current.destination); console.log("Audio context initialized"); } catch (error) { console.error("Failed to initialize audio context:", error); } } }; const playSound = (frequency, intensity, type = "synth", duration = 0.25, pan = 0) => { if (!audioContextRef.current) { console.warn("Audio context not initialized. Initializing now."); initAudio(); } const ctx = audioContextRef.current; const gain = ctx.createGain(); const panner = ctx.createStereoPanner(); panner.pan.setValueAtTime(pan, ctx.currentTime); gain.connect(panner); panner.connect(lowPassFilterRef.current); let volume, attackTime, decayTime, sustainLevel, releaseTime; if (type === "synth") { const oscillators = [ { type: "sine", detune: 0, gain: 0.3 }, { type: "triangle", detune: 5, gain: 0.1 }, { type: "sawtooth", detune: -5, gain: 0.1 }, ]; oscillators.forEach(oscSettings => { const oscillator = ctx.createOscillator(); const oscGain = ctx.createGain(); oscillator.type = oscSettings.type; oscillator.frequency.setValueAtTime(frequency, ctx.currentTime); oscillator.detune.setValueAtTime(oscSettings.detune, ctx.currentTime); oscGain.gain.setValueAtTime(oscSettings.gain, ctx.currentTime); oscillator.connect(oscGain); oscGain.connect(gain); oscillator.start(ctx.currentTime); oscillator.stop(ctx.currentTime + duration); }); volume = 0.05 + (intensity * 0.02); attackTime = 0.01; decayTime = 0.05; sustainLevel = 0.7; releaseTime = 0.1; } // Apply ADSR envelope gain.gain.setValueAtTime(0, ctx.currentTime); gain.gain.linearRampToValueAtTime(volume, ctx.currentTime + attackTime); gain.gain.linearRampToValueAtTime(sustainLevel * volume, ctx.currentTime + attackTime + decayTime); gain.gain.setValueAtTime(sustainLevel * volume, ctx.currentTime + attackTime + decayTime + duration * 0.5); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration); }; const playColumnArpeggio = (column, beat, subBeat, chordIndex, pan) => { if (beat < 7 && column.contributionDays[beat]) { const day = column.contributionDays[beat]; if (day.contributionCount > 0) { const intensity = Math.min(day.contributionCount, 4); const noteIndex = beat % 3; // Use 3 notes per chord const frequency = CHORD_PROGRESSION[chordIndex][noteIndex]; // Determine note duration based on color intensity let noteDuration = 0.25; // Default to quarter note let subBeatsToPlay = 1; if (day.color === '#216e39') { // darkest green noteDuration = 0.0625; // Sixteenth note subBeatsToPlay = 4; } else if (day.color === '#30a14e') { // second darkest noteDuration = 0.125; // Eighth note subBeatsToPlay = 2; } if (subBeat < subBeatsToPlay) { playSound(frequency, intensity, "synth", noteDuration, pan); } } } }; const togglePlay = () => { if (!isPlaying) { initAudio(); } setIsPlaying(!isPlaying); }; useEffect(() => { if (isPlaying && contributionData) { console.log("Starting playback"); const bpm = 180; // Increased tempo for faster playback const beatDuration = (60 / bpm) * 1000; // Duration of each beat in milliseconds const subBeatDuration = beatDuration / 4; // Each beat is divided into 4 sub-beats const totalWeeks = contributionData.weeks.length; intervalRef.current = setInterval(() => { const currentWeek = contributionData.weeks[currentColumn]; const nextWeek = contributionData.weeks[(currentColumn + 1) % totalWeeks]; const chordIndex = Math.floor(currentColumn / 2) % CHORD_PROGRESSION.length; const nextChordIndex = Math.floor((currentColumn + 1) / 2) % CHORD_PROGRESSION.length; playColumnArpeggio(currentWeek, currentBeat, currentSubBeat, chordIndex, -0.5); playColumnArpeggio(nextWeek, currentBeat, currentSubBeat, nextChordIndex, 0.5); setCurrentSubBeat((prevSubBeat) => (prevSubBeat + 1) % 4); if (currentSubBeat === 3) { setCurrentBeat((prevBeat) => (prevBeat + 1) % 7); if (currentBeat === 6) { setCurrentColumn((prevColumn) => (prevColumn + 1) % totalWeeks); } } }, subBeatDuration); } else if (!isPlaying && intervalRef.current) { setCurrentColumn(0); setCurrentBeat(0); setCurrentSubBeat(0); console.log("Stopping playback"); clearInterval(intervalRef.current); } return () => clearInterval(intervalRef.current); }, [isPlaying, contributionData, currentColumn, currentBeat, currentSubBeat]); const handleKeyPress = (event) => { if (event.key === "Enter") { fetchContributions(); } }; const getCurrentWeekIndex = () => { if (!contributionData) return 0; const today = new Date(); const index = contributionData.weeks.findIndex(week => week.contributionDays.some(day => new Date(day.date) > today) ); return index === -1 ? contributionData.weeks.length : index; }; return (

Git Jiggy

setUsername(e.target.value)} onKeyPress={handleKeyPress} placeholder="Enter GitHub username" />

{error &&

{error}

} {userData ? (

{userData.name}

) : null} {contributionData && ( <>

{contributionData.weeks.slice(0, getCurrentWeekIndex()).map((week, weekIndex) => (

{Array.from({ length: 7 }).map((_, dayIndex) => { const day = week.contributionDays[dayIndex]; return (

); })}

))}

)} {!contributionData && !userData && (

To use this app, you need to set up a GitHub Personal Access Token:

Go to GitHub Personal Access Tokens
Click "Generate new token" and select "Fine-grained tokens"
Set the token name, expiration, and select the repository you want to access
Under "Permissions", expand "Account permissions" and select "Read-only" for "Commit statuses"
Click "Generate token" at the bottom of the page
Copy the generated token
Set the token as an environment variable named GITHUB_CONTRIBUTIONS in your Val Town settings

)}

View source on Val Town

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/contributions") { const { username } = await request.json(); const contributionData = await fetchGitHubContributions(username); return new Response(JSON.stringify(contributionData), { headers: { "Content-Type": "application/json" }, }); } return new Response( ` Git Jiggy

`, { headers: { "Content-Type": "text/html" }, }, ); } async function fetchGitHubContributions(username: string) { const query = ` query($username: String!) { user(login: $username) { name avatarUrl contributionsCollection { contributionCalendar { totalContributions weeks { contributionDays { contributionCount date color } } } } } } `; const response = await fetch("https://api.github.com/graphql", { method: "POST", headers: { "Authorization": `Bearer ${Deno.env.get("GITHUB_CONTRIBUTIONS")}`, "Content-Type": "application/json", }, body: JSON.stringify({ query, variables: { username } }), }); if (!response.ok) { if (response.status === 401) { throw new Error("GitHub API key is invalid or not set. Please check your GITHUB_CONTRIBUTIONS environment variable."); } else { throw new Error(`Failed to fetch GitHub data: ${response.statusText}`); } } const data = await response.json(); return { user: { name: data.data.user.name, avatarUrl: data.data.user.avatarUrl, }, contributionCalendar: data.data.user.contributionsCollection.contributionCalendar, }; } const css = ` body { font-family: 'Inter', sans-serif; margin: 0; padding: 20px; background-color: #ffffff; color: #000000; } .container { max-width: 1000px; margin: 0 auto; } h1 { color: #000000; text-align: center; margin-bottom: 30px; font-weight: 700; } .input-group { display: flex; justify-content: center; margin-bottom: 20px; } input { padding: 10px; font-size: 16px; background-color: #f0f0f0; border-radius: 4px 0 0 4px; color: #000000; font-family: 'Inter', sans-serif; width: 250px; } button { padding: 10px 20px; font-size: 16px; background-color: #000000; color: white; border: 1px solid #000000; border-radius: 0 4px 4px 0; cursor: pointer; font-family: 'Inter', sans-serif; white-space: nowrap; } button:hover { background-color: #333333; } .error { color: #ff0000; } .graph-container { display: flex; margin-bottom: 20px; } .contribution-graph { flex-grow: 1; background-color: #ffffff; border-radius: 4px; padding: 8px; overflow: hidden; } .weeks { display: flex; overflow-x: auto; } .week { display: flex; flex-direction: column; transition: opacity 0.3s ease; } .week.active { opacity: 1; box-shadow: 0 0 5px rgba(0,0,255,0.5); } .week.active-canon { opacity: 1; box-shadow: 0 0 5px rgba(255,0,0,0.5); } .week:not(.active):not(.active-canon) { opacity: 0.5; } .day { width: 10px; height: 10px; margin: 2px; border-radius: 2px; border: 1px solid #ebedf0; transition: all 0.3s ease; } .day:hover { border-color: rgba(27,31,35,0.3); transition: border-color 0.1s ease-in-out; cursor: pointer; } .day.playing { transform: scale(1.2); box-shadow: 0 0 5px rgba(0,0,0,0.3); } .controls { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .footer { margin-top: 30px; text-align: center; font-size: 14px; color: #666666; } .footer a { color: #000000; text-decoration: none; } .footer a:hover { text-decoration: underline; } .user-info { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } h2 { font-size: 18px; margin: 0; } `;

git_jiggy