\n GitHubSync\n
Sync vals from Val Town to GitHub and back
\n

\n View source\n \n ,\n );\n}",[],[154,185],{"_102":194,"_95":195,"_155":196,"_157":156,"_158":140,"_159":197,"_161":162,"_104":198,"_99":199,"_165":179,"_167":200,"_168":22,"_169":-5,"_170":201,"_98":202},"67b789cc-e58b-11ef-94ab-e6cdfca9ef9f","middleware","1214684e-e56f-11ef-a5a5-e6cdfca9ef9f",142,["D",1738957237500],24,"import { Webhooks } from \"npm:@octokit/webhooks\";\nimport { Context, Hono, Next } from \"npm:hono\";\nimport signWebhook from \"../sign-webhook\";\n\n\nexport const verifyGitHubSignature = (secret: string) => {\n const webhooks = new Webhooks({ secret });\n \n return async (c: Context, next: Next) => {\n const signature = c.req.header(\"x-hub-signature-256\");\n if (!signature) {\n console.error(\"Missing GitHub secret\");\n c.status(401);\n return c.body(\"Unauthorized\");\n }\n\n // const body = await c.req.json();\n const text = await c.req.text();\n // const body = await JSON.parse(text);\n\n if (!(await webhooks.verify(text, signature))) {\n console.error(\"Invalid GitHub secret\");\n c.status(401);\n return c.body(\"Unauthorized\");\n }\n\n console.log(\"GitHub secret verified\");\n await next();\n };\n};\n\n// Middleware for signature verification\nexport const verifyValSignature = (secret: string) => {\n return async (c: Context, next: Next) => {\n console.log(\"verifyValSignature\");\n const signature = c.req.header(\"x-val-signature\");\n if (!signature) {\n console.error(\"Missing signature\");\n return c.text(\"Missing signature\", 401);\n }\n\n const text = await c.req.text();\n const expectedSignature = await signWebhook(text, secret);\n\n if (signature !== expectedSignature) {\n console.error(\"Invalid signature\");\n return c.text(\"Invalid signature\", 401);\n }\n\n console.log(\"webhook secret verified\");\n await next();\n };\n};",[],[154,195],{"_102":204,"_95":205,"_155":206,"_157":156,"_158":140,"_159":207,"_161":162,"_104":208,"_99":209,"_165":179,"_167":210,"_168":22,"_169":-5,"_170":211,"_98":212},"1afecca8-e56d-11ef-83c7-e6cdfca9ef9f","styles","e7baa34a-e56b-11ef-b737-e6cdfca9ef9f",44,["D",1738944223879],8,"export const body = {\n fontFamily: \"sans-serif\",\n margin: 0,\n padding: 32,\n lineHeight: 1.5,\n color: \"black\",\n backgroundColor: \"white\",\n};\n\nexport const title = {\n fontSize: 48,\n};\n\nexport const description = {\n fontSize: 16,\n fontWeight: \"normal\",\n};",[],[154,205],{"_102":214,"_95":215,"_155":216,"_157":156,"_158":140,"_159":217,"_161":162,"_104":218,"_99":219,"_165":179,"_167":220,"_168":22,"_169":-5,"_170":221,"_98":222},"b6d9515e-e58e-11ef-9bb7-e6cdfca9ef9f","valtown-deploy","31e417ca-e56d-11ef-b96f-e6cdfca9ef9f",158,["D",1738958658748],33,"import { decodeBase64 } from \"jsr:@std/encoding/base64\";\nimport { ValTown } from \"npm:@valtown/sdk\";\nimport { Octokit } from \"npm:@octokit/rest\";\nimport config from \"../config.json\" with { type: \"json\" };\n\nimport type { Context, Next } from \"npm:hono\";\n\nconst GITHUB_TOKEN = Deno.env.get(\"GITHUB_TOKEN\");\nconst VALTOWN_TOKEN = Deno.env.get(\"VALTOWN_TOKEN\");\n\nconst valtown = new ValTown({\n bearerToken: VALTOWN_TOKEN,\n});\nconst octokit = new Octokit({ auth: GITHUB_TOKEN });\nconst td = new TextDecoder();\n\n////\n\nexport default async function valTownDeploy(c: Context) {\n console.log(\"deploy to valtown\");\n const body = await c.req.json();\n const { ref, repository, after, commits } = body;\n\n if (ref !== config.branch) {\n console.log(`Update not on ${config.branch} branch (${ref})`);\n return c.json({ ok: true });\n }\n\n try {\n const updates = await getContents(repository, after, commits);\n console.log(`${updates.length} updates`);\n const user = await valtown.me.profile.retrieve();\n if (!user.username) {\n throw new Error(\"User not found: check your VALTOWN_TOKEN\");\n }\n console.log(\"got val.town user:\", user.username);\n await updateVals(user, updates);\n } catch (e) {\n console.error(e);\n c.status(500);\n return c.body(\"Error updating vals\");\n }\n\n return c.json({ ok: true });\n}\n\nasync function getContents(repo: Repo, after: string, commits: Commit[]) {\n const filenames = config.vals.map((name: string) => name + \".tsx\");\n console.log(`${filenames.length} val files updated`);\n const modified = getModified(commits, filenames);\n console.log(`${modified.length} modifications in commit`);\n const contents = await Promise.all(modified.map(getFileContent(repo, after)));\n console.log(`${contents.length} file contents`);\n return contents;\n}\n\nfunction getModified(commits: Commit[], filenames: string[]) {\n return commits.reduce((a: string[], b: Commit) => {\n return [...a, ...b.modified];\n }, []).filter((file: string) => filenames.includes(file));\n}\n\nfunction getFileContent(repo: Repo, after: string) {\n return async (path: string): Promise<{\n name: string;\n code: string;\n }> => {\n const { data } = await octokit.repos.getContent({\n owner: repo.owner.name,\n repo: repo.name,\n path,\n ref: after,\n });\n const [name] = path.split(\".\");\n const code = td.decode(decodeBase64(data.content));\n return {\n name,\n code,\n };\n };\n}\n\nasync function updateVals(user: ValUser, updates: { name: string; code: string; }[]) {\n console.log(\"updateVals\");\n await Promise.all(updates.map(async (update) => {\n updateVal(user.username, update)\n }));\n}\n\nasync function updateVal(username: string, update: { name: string; code: string; }) {\n const { name, code } = update;\n const val = await valtown.alias.username.valName.retrieve(username, name);\n console.log(\"updateVal\", { name, id: val.id });\n const ver = await valtown.vals.versions.create(val.id, { code });\n console.log(\"updated val:\", ver);\n}\n\n////\n\ntype Repo = {\n owner: {\n name: string;\n };\n name: string;\n};\ntype Commit = {\n modified: string[];\n};\ntype ValUser = {\n username: string;\n};",[],[154,215],[154],{"_102":225,"_95":226,"_155":116,"_157":-5,"_158":140,"_159":139,"_161":162,"_104":227,"_99":228,"_165":229,"_167":230,"_168":22,"_169":-5,"_170":231,"_98":232},"7c573ce8-f949-11ef-8e39-569c3dd06744","README.md",["D",1741127948569],39,"file","# GitHubSync\n\nWebhook to commit vals to GitHub and sync code from GitHub back to Val Town\n\n## Demo\n\nThis [example val][] is synced to this [GitHub repo][]\n\n## How to set up\n\nThis val exposes two webhook endpoints:\n\n- `/push` will copy the contents from a list of vals specified in `config.json` and push them to a GitHub repo\n- `/deploy` is a GitHub webhook URL that will fetch contents from GitHub and update the code on Val Town\n\n1. Fork this val\n1. Edit `config.json` to point to the repo and vals you plan to sync\n1. Create a new repo on GitHub to sync to\n1. Add a webhook to your repo that points to this val's `/deploy` route, e.g. `https://username-.web.val.run/deploy`\n \n - Create a _secret_ for your webhook \n - In this val's _Environment Variables_, add that secret as `GITHUB_WEBHOOK_SECRET`\n1. On GitHub, create a new personal [access token][]\n - Ensure the token has read/write access to _Contents_ for the repo\n - Copy the access token and add that as the `GITHUB_TOKEN` env var in this val\n1. Add a new [Val Town API token][] with read/write permissions. Add that token to the val's env vars as `VALTOWN_TOKEN`\n1. Add a `VAL_SECRET` env var to the val. Use this secret to sign the webhook POST request to the `/push` endpoint. Use this endpoint to commit vals from Val Town to your GitHub repo.\n\n### Example push to GitHub fetch\n\nYou can use this example to POST to the `/push` endpoint to copy vals to GitHub.\nYou should keep the code for this private so that only you can push to GitHub.\nThis example can run manually or use a Cron val.\n\n**NOTE: this can overwrite changes made outside of Val Town, on GitHub/etc.**\n\n```tsx\n// This can post to the GitHubSync `/push` webhook; keep this private\nimport sign from \"https://esm.town/v/jxnblk/GitHubSync/sign-webhook\";\n\nconst secret = Deno.env.get(\"SECRET\") as string;\nconst url = Deno.env.get(\"PUSH_URL\") as string;\n\nasync function pushValsToGitHub() {\n const body = \"hello\";\n const signature = await sign(body, secret);\n\n const res = await fetch(url, {\n method: \"POST\",\n body,\n headers: {\n \"x-val-signature\": signature,\n }\n })\n \n if (!res.ok) {\n console.log(res);\n return;\n }\n const json = await res.json();\n console.log(json);\n}\n\npushValsToGitHub();\n```\n\n## Env vars\n\n- `GITHUB_TOKEN`: Read/write GitHub personal access token for reading and writing repo contents \n- `VALTOWN_TOKEN`: ValTown API token (with read/write Vals permissions) for writing updates from GitHub\n- `GITHUB_WEBHOOK_SECRET`: secret for verifying webhooks from GitHub\n- `VAL_SECRET`: secret for verifying requests to the `/push` endpoint\n\n---\n\nThis is the latest version of .\n_Note: This will currently only work with non-project vals until the SDK supports projects._\n\n\n\n\n[github oauth app]: https://github.com/settings/developers\n[access token]: https://github.com/settings/tokens\n[val town api token]: https://www.val.town/settings/api\n[troubleshooting]: #troubleshooting\n\n[github repo]: https://github.com/jxnblk/valtown-github-sync-v2\n[example val]: https://val.town/v/jxnblk/GitHubSyncV2DemoVal",[],[226],{"_102":234,"_95":235,"_155":236,"_157":-5,"_158":140,"_159":237,"_161":162,"_104":238,"_99":239,"_165":179,"_167":240,"_168":22,"_169":-5,"_170":241,"_98":242},"4301421c-e58b-11ef-903f-e6cdfca9ef9f","commit-files","a10a6c42-e56a-11ef-bef0-e6cdfca9ef9f",139,["D",1738957175908],6,"import { Octokit } from \"npm:@octokit/rest\";\n\ninterface CommitOptions {\n token: string;\n owner: string;\n repo: string;\n files: {\n path: string;\n content: string;\n folder?: boolean;\n }[];\n branch?: string;\n message?: string;\n}\n\nconst FILE = \"100644\";\nconst FOLDER = \"040000\";\n\n/**\n * General use function to commit files to GitHub\n */\nexport async function commitFiles({\n token,\n owner,\n repo,\n files,\n branch = \"main\",\n message = \"published with https://val.town/x/jxnblk/GitHubSync\",\n}: CommitOptions) {\n const data: any = {};\n const gh = new Octokit({ auth: token });\n const user = await gh.rest.users.getAuthenticated();\n data.user = user.data;\n\n const ref = await gh.request(`GET /repos/${owner}/${repo}/git/ref/heads/${branch}`, {});\n data.ref = ref.data;\n\n // create tree\n const items = await Promise.all(\n files.map(async file => {\n const blob = await gh.request(`POST /repos/${owner}/${repo}/git/blobs`, {\n content: file.content,\n encoding: \"utf-8\",\n });\n\n return {\n path: file.path,\n sha: blob.data.sha,\n mode: file.folder ? FOLDER : FILE,\n type: \"blob\",\n };\n }),\n );\n\n const tree = await gh.request(`POST /repos/${owner}/${repo}/git/trees`, {\n base_tree: data.ref.object.sha,\n tree: items,\n });\n\n data.tree = tree.data;\n\n // create commit\n const commit = await gh.request(`POST /repos/${owner}/${repo}/git/commits`, {\n message,\n tree: data.tree.sha,\n parents: [data.ref.object.sha],\n });\n\n data.commit = commit.data;\n\n // push commit\n const push = await gh.request(`POST /repos/${owner}/${repo}/git/refs/heads/${branch}`, {\n sha: data.commit.sha,\n });\n\n data.push = push.data;\n return data;\n}",[],[235],{"_102":244,"_95":245,"_155":246,"_157":-5,"_158":140,"_159":247,"_161":162,"_104":248,"_99":239,"_165":229,"_167":249,"_168":22,"_169":-5,"_170":250,"_98":251},"ddffecaa-e581-11ef-b4c0-e6cdfca9ef9f","config.json","4dfa861c-e56b-11ef-9ffd-e6cdfca9ef9f",112,["D",1738953140978],"{\n \"owner\": \"jxnblk\",\n \"repo\": \"valtown-github-sync-v2\",\n \"branch\": \"refs/heads/main\",\n \"vals\": [\n \"GitHubSyncV2DemoVal\"\n ]\n}",[],[245],{"_102":253,"_95":254,"_155":255,"_157":-5,"_158":140,"_159":256,"_161":162,"_104":257,"_99":258,"_165":259,"_167":260,"_168":22,"_169":-5,"_170":261,"_98":262},"def1d8e0-f2ff-11ef-9dc9-569c3dd06744","index","eb615ef4-e56a-11ef-b91b-e6cdfca9ef9f",174,["D",1740436624268],21,"http","/** @jsxImportSource npm:hono/jsx */\nimport { Hono } from \"npm:hono\";\nimport config from \"./config.json\" with { type: \"json\" };\nimport push from \"./routes/github-push\";\nimport Home from \"./routes/home\";\nimport deploy from \"./routes/valtown-deploy\";\nimport {\n //\n verifyGitHubSignature,\n verifyValSignature,\n} from \"./routes/middleware\";\n\nconst VAL_SECRET = Deno.env.get(\"VAL_SECRET\");\nconst GITHUB_WEBHOOK_SECRET = Deno.env.get(\"GITHUB_WEBHOOK_SECRET\");\n\nconst app = new Hono();\n\napp.get(\"/\", Home);\n\napp.post(\"/push\", verifyValSignature(VAL_SECRET), push);\n\napp.post(\"/deploy\", verifyGitHubSignature(GITHUB_WEBHOOK_SECRET), deploy);\n\nexport default app.fetch;",[],[254],{"_102":264,"_95":265,"_155":266,"_157":-5,"_158":140,"_159":267,"_161":162,"_104":268,"_99":189,"_165":179,"_167":269,"_168":22,"_169":-5,"_170":270,"_98":271},"f659a620-e58a-11ef-bf7f-e6cdfca9ef9f","sign-webhook","36340550-e587-11ef-9c42-e6cdfca9ef9f",137,["D",1738957047304],"/**\n * Use this function along with your valtown webhook secret to create\n * the x-val-signature header when posting to the /export webhook\n */\nexport const signWebhook = async (payload: unknown, secret: string) => {\n console.log(\"signWebhook\");\n const encoder = new TextEncoder();\n const key = await crypto.subtle.importKey(\n \"raw\",\n encoder.encode(secret),\n { name: \"HMAC\", hash: \"SHA-256\" },\n false,\n [\"sign\"],\n );\n console.log(\"signWebhook\", {\n payload,\n });\n const signature = await crypto.subtle.sign(\n \"HMAC\",\n key,\n encoder.encode(payload),\n );\n return Buffer.from(signature).toString(\"hex\");\n};\n\nexport default signWebhook;",[],[265],"files",[152,172,183,193,203,213,224,233,243,252,263],"counts",{"_276":32,"_277":164,"_278":189,"_279":280},"pulls","branches","forks","envVars",{"_281":282,"_283":32},"count",4,"emptyCount","contents",[286,289,292,295,298,301],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":162,"_104":287,"_99":164,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":288},["D",1738943921472],[154],{"_102":225,"_95":226,"_155":116,"_157":-5,"_158":140,"_159":139,"_161":162,"_104":290,"_99":228,"_165":229,"_167":230,"_168":22,"_169":-5,"_98":291},["D",1741127948569],[226],{"_102":234,"_95":235,"_155":236,"_157":-5,"_158":140,"_159":237,"_161":162,"_104":293,"_99":239,"_165":179,"_167":240,"_168":22,"_169":-5,"_98":294},["D",1738957175908],[235],{"_102":244,"_95":245,"_155":246,"_157":-5,"_158":140,"_159":247,"_161":162,"_104":296,"_99":239,"_165":229,"_167":249,"_168":22,"_169":-5,"_98":297},["D",1738953140978],[245],{"_102":253,"_95":254,"_155":255,"_157":-5,"_158":140,"_159":256,"_161":162,"_104":299,"_99":258,"_165":259,"_167":260,"_168":22,"_169":-5,"_98":300},["D",1740436624268],[254],{"_102":264,"_95":265,"_155":266,"_157":-5,"_158":140,"_159":267,"_161":162,"_104":302,"_99":189,"_165":179,"_167":269,"_168":22,"_169":-5,"_98":303},["D",1738957047304],[265],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":312,"_278":317,"_385":-5},{"_102":103,"_95":96,"_104":313,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":113,"_14":114,"_115":116,"_117":22,"_118":-5,"_119":120,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":314,"_134":315,"_137":316,"_149":22},["D",1738939661756],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_99":139,"_95":43,"_102":140,"_141":103,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[318,328,338,347,356,366,376],{"_102":319,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":320,"_16":321,"_149":22,"_23":322,"_134":325,"_115":326,"_117":162,"_104":327,"_119":32},"08c7966c-07ed-11f0-9591-569c3dd06744","19cdf41f-a058-401e-a66b-bb5a73ffe400","ae47d521-2c0e-4e3b-af93-6313ba1625f5",{"_93":323,"_132":324},"tionis","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJmUFl3TGQyT0hsdFlERGplVHRIZ0JjU1pjUyJ9",{"_93":323,"_136":324},"3cd34401-7ff7-4938-8509-88a2e88a76a8",["D",1742737508430],{"_102":329,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":330,"_16":331,"_149":22,"_23":332,"_134":335,"_115":336,"_117":162,"_104":337,"_119":32},"38efecb4-ff86-11ef-ad47-569c3dd06744","90d0cd40-fdf6-11ef-b764-53a9d87883d1","8e1ea7f5-1eb6-4ffe-bc6e-1f09969193d8",{"_93":333,"_132":334},"davincidreams","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydTh0WXFwd21FUWtJV2dPOHVFTnBhczdpcVQifQ",{"_93":333,"_136":334},"af84147f-4f44-4df5-8b05-6f65da559f45",["D",1741813741761],{"_102":339,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":340,"_16":341,"_149":22,"_23":342,"_134":345,"_115":-5,"_117":22,"_104":346,"_119":164},"4fdc1f46-3ce5-11f0-a430-9e149126039e","6ba47c70-3ce3-11f0-8a84-ab0596bba6f5","a956f3ab-c5b6-4f16-a22e-9bcb0079d529",{"_93":343,"_132":344},"canstralian","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ5dncxVUwwR0NJUlhncHZ1a2NHMXZxS1g5ZSJ9",{"_93":343,"_136":344},["D",1748561603325],{"_102":348,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":349,"_16":350,"_149":22,"_23":351,"_134":354,"_115":-5,"_117":22,"_104":355,"_119":32},"542ba65c-ed30-11ef-a4f9-e6cdfca9ef9f","467d3ad5-1a73-46d2-930c-2810f55048aa","e5ce9fb5-e19a-49e2-9fab-1ed8af95b507",{"_93":352,"_132":353},"daisuke","https://images.clerk.dev/oauth_github/img_2PUvJ3Hb2veElY8QpA7oCWXCPHB.jpeg",{"_93":352,"_136":353},["D",1739797729769],{"_102":357,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":358,"_16":359,"_149":22,"_23":360,"_134":363,"_115":364,"_117":162,"_104":365,"_119":32},"8a5fb4b6-089c-11f0-9bb0-569c3dd06744","004cf910-0891-11f0-a2f4-514a10b5a6b4","b150df60-7c33-43dc-be03-84ae11c1b2bf",{"_93":361,"_132":362},"ka12m","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydWwwYlRYRnVsV1piN2RpNmVxNkc0bzB1ZzYifQ",{"_93":361,"_136":362},"be50848f-0280-41a7-9ba9-ec61d7fdb1f1",["D",1742812887783],{"_102":367,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":368,"_16":369,"_149":22,"_23":370,"_134":373,"_115":374,"_117":162,"_104":375,"_119":32},"8f1d25de-21eb-11f0-a1b2-569c3dd06744","22484a10-21dc-11f0-b5d7-f333811f0284","54c592dc-f8a0-48b5-8193-57cc991e353d",{"_93":371,"_132":372},"MadEthan6","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yd0R2VTB0eVA2Ync2aU95M1ZTRUxIZWxjc0YifQ",{"_93":371,"_136":372},"f66e3bbc-8690-45c0-b04c-55c6f1916883",["D",1745595605037],{"_102":377,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":378,"_16":379,"_149":22,"_23":380,"_134":383,"_115":-5,"_117":22,"_104":384,"_119":32},"cb21c07a-3b1e-11f0-b422-9e149126039e","29b17a00-3b1e-11f0-af91-4f7c89349bd6","61e0f5e8-609b-4bd5-b8fc-ff7933400b32",{"_93":381,"_132":382},"johnnyclem","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeGdpUzI3MTgxUklyUDVKdDFmd3JsNldHOVMifQ",{"_93":381,"_136":382},["D",1748366389144],"upstream","actionData","errors"]

\n GitHubSync\n Sync vals from Val Town to GitHub and back\n

\n GitHubSync\n
Sync vals from Val Town to GitHub and back
\n