2b:null 2c:["$","title",null,{"children":"Github API in Observable (v3 and v4) | Shana Matthews | Observable"}] 31:T4e5,md` ## Usage You can use either v3 or v4 of the GitHub API - v3 can be use unauthenticated (with a low limit), while v4 has to have authentication. ## GitHub REST (v3) [Docs for v3 API](https://developer.github.com/v3/) Use \`github3\` as a template literal, with the path of the API resources - like \`users/asg017\` or \`repos/observablehq/runtime\` ### Unauthenticated requests (low limit, rated by IP address) \`\`\`javascript import {github3} from '@asg017/github' github3\`orgs/observablehq/repos\` // => "Array(20) [Object, Object, Object, .... ]" \`\`\` ### Authenticated requests Token will be a [GitHub Personal Access Token](https://github.com/settings/tokens). For my implementation, I used [ @tmcw/secret](https://observablehq.com/@tmcw/secret), which will store the token inside \`window.localStorage\` with key \`GITHUB_TOKEN\` (that's only scoped to notebooks owned by that user). If you don't mind using that, then import this into your notebook like so: \`\`\`javascript import {viewof ghKey, github3} from '@asg017/github' viewof ghKey // fill in this form with your personal access token github3\`user\` // => {login: "asg017", id: 1512392, node_id: "xxxx", ....} \`\`\` Here's what the \`ghKey\` form looks like: `32:T418,github3 = function(strings) { let path = ''; if(Array.isArray(strings)) { path = strings[0] + "" let i = 0, n = arguments.length; while (++i < n) path += arguments[i] + "" + strings[i]; }else path = strings let ghToken = ghKey const opts = { headers: { Accept: `application/vnd.github.v3+json` } }; if (ghToken) opts.headers.Authorization = `token ${ghToken}` const url = path.indexOf('https://api.github.com') >= 0 ? path : `https://api.github.com/${path}` return fetch(url, opts).then(async r=>{ const data = await r.json() const meta = {} const rate_limit = {} if(r.headers.has('Link')) meta.link = parseLH(r.headers.get('Link')) rate_limit.limit = +r.headers.get('X-RateLimit-Limit') rate_limit.remaining = +r.headers.get('X-RateLimit-Remaining') rate_limit.reset = new Date ( (+r.headers.get('X-RateLimit-Reset')) * 1000 ) meta.rate_limit = rate_limit; data.__meta = meta return data }) }33:[{"id":"8bf92aafcbc96002f1282650fdd41ed8669adeb67ed537e9e41de5e7a610328753f5bd50f087167e38cb06a8d2417d20a98194dede40c72d1c50cf49e1adacae","href":"https://static.observableusercontent.com/files/8bf92aafcbc96002f1282650fdd41ed8669adeb67ed537e9e41de5e7a610328753f5bd50f087167e38cb06a8d2417d20a98194dede40c72d1c50cf49e1adacae","name":"parse-link-header-1.0.1.js","type":"application/javascript","lastModified":1698952862729.584,"size":13572}] 2f:{"id":"3b80dc54291f09e6","slug":null,"title":"Github API in Observable (v3 and v4)","thumbnail":"d87f5a2b50ee1946ad3ed1c1c07f7d626eaf9527e5eb40882b9d59d7c0d60810","access_level":"public","create_time":"$D2023-11-02T19:21:02.729Z","update_time":"$D2023-11-02T20:29:59.160Z","view_time":null,"first_public_time":"$D2023-11-02T19:21:02.729Z","has_unpublished_edits":null,"fork":{"id":"ab13abbea01231e3","slug":"github","title":"Github API in Observable (v3 and v4)","owner":{"id":"512cbe7209990c30","login":"asg017","name":"Alex Garcia"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c2c4bf3817594e7a","login":"shanamatthews","name":"Shana Matthews","avatar_url":"https://avatars-next.observableusercontent.com/340ef6744a9ac2c729c6d78fcd6cba4605a6eb050c76e0528bc44eef6752a274","tier":"starter_2024"},"version":610,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"543390bedabcfda6","login":"shanamatthews","name":"Shana Matthews","avatar_url":"https://avatars-next.observableusercontent.com/340ef6744a9ac2c729c6d78fcd6cba4605a6eb050c76e0528bc44eef6752a274","tier":null}],"members":[{"type":"individual","id":"543390bedabcfda6","login":"shanamatthews","name":"Shana Matthews","avatar_url":"https://avatars-next.observableusercontent.com/340ef6744a9ac2c729c6d78fcd6cba4605a6eb050c76e0528bc44eef6752a274","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Github API in Observable (v3 and v4)","cells":[{"id":141,"value":"md`# Github API in Observable (v3 and v4)\nSmall library to easily use GitHub's API in Observable notebooks (REST v3 or GraphQL v4) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"viewof repoName = Inputs.text({\n label: \"Repo name\",\n placeholder: \"username/repo-name\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"{\n const sha = (commit) => commit.sha.substring(0, 6);\n return html`\n

\n\n${md`## The last ${commits.length} commits in the [${repoName}](https://github.com/${repoName}) repository`}\n\n${dot`\n\ndigraph {\n rankdir=TB \n ${commits\n .map((x) => {\n const name = sha(x);\n const dateWeight = scale(new Date(x.commit.committer.date));\n const color = d3.interpolateMagma(dateWeight);\n const textColor = dateWeight < 0.5 ? \"white\" : \"black\";\n return `\"${name}\"[style=\"filled\", fillcolor=\"${color}\", fontcolor=\"${textColor}\"];`;\n })\n .join(\"\\n\")}\n${commits\n .map((x) => x.parents.map((p) => `\"${sha(p)}\" -> \"${sha(x)}\"`).join(\"\\n\"))\n .join(\"\\n\")}}\n}`}\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"commits = {\n const count = 6;\n let i = 0;\n const data = [];\n\n let commits = await github3`repos/getsentry/sentry-docs/commits`;\n\n commits.map((c) => data.push(c));\n\n let next = commits.__meta.link.next.url;\n\n while (next && i < count) {\n commits = await github3(next);\n commits.map((c) => data.push(c));\n next = commits.__meta.link.next.url;\n ++i;\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"ghKey = \"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\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`If you want to override this \\`ghKey\\` with your own token management system, then do something like so:\n\n\\`\\`\\` javascript\n\nmyGithubKey = myImplementation\n\nimport {github3} with {myGithubKey as ghKey} from '@asg017/github'\n\ngithub3\\`user\\` // {\"login\": ...}\n\\`\\`\\`\n\n\nIf your stuff will always be in a private notebook, then use [Observable secrets](https://observablehq.com/@observablehq/secrets):\n\n\\`\\`\\` javascript\n\nghKeySecret = Secret('GITHUB_TOKEN_KEY') // only in private notebooks!\n\nimport {github3} with {ghKeySecret as ghKey} from '@asg017/github'\n\ngithub3\\`user\\` // {\"login\": ...}\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`### Pagination/Rate Limiting\n\nYou can get pagination information (as well as rate limiting) in the \\`.__meta\\` key of the return data. So, if you want to get ALL commits from a repo, you could do something like:\n\n\\`\\`\\`javascript\n{\n const data = []\n let currCommits = await github3\\`repos/observablehq/parser/commits\\`\n console.log(currCommits)\n while(currCommits.__meta.link.next) {\n currCommits.map(c=>data.push(c))\n currCommits = await github3(currCommits.__meta.link.next.url) // If you pass in an API url instead of a path, it'll work\n }\n\n return data // Array(120) [Object, Object, Object, ....]\n}\n\\`\\`\\`\n\nAnd get your remaining API limits with:\n\n\\`\\`\\`javascript\n{\n const data = await github3\\`user\\`\n console.log(data.__meta.rate_limit) // {limit: 5000, remaining: 4998, reset: 2019-02-28T12:17:49} \n}\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`\n## GitHub GraphQL (v4)\n[Docs for v4 API](https://developer.github.com/v4)\n\nUse \\`github4\\` as a template literal, with the GraphQL query you want to perform. \n\nAuthentication works same as above, use a GitHub Personal Access Token\n\\`\\`\\`javascript\n\nimport {viewof ghKey, github4} from '@asg017/github'\n\nghKey // put in your token here\n\ngithub4\\`query {\n repository(owner: \"observablehq\", name: \"runtime\") {\n forkCount\n stargazers {\n count: totalCount\n }\n }\n}\\`// ==> \n/* Object {\n data: Object {\n rateLimit: Object {limit: 5000, remaining: 4984}\n repository: Object {name: \"project-vending-machine\", forks: Object}\n }\n}\n*/\n\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"github4`query {\n repository(owner: \"observablehq\", name: \"runtime\") {\n forkCount\n stargazers {\n count: totalCount\n }\n }\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"ghEmojis = github3`emojis`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"{\n await visibility()\n const emojiCount = 15*5\n return html`\n

${emojiCount} random emojis

\n${d3.shuffle(Object.keys(ghEmojis))\n .filter((e,i)=>i`

`)}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"{\n const rate = (await github3`rate_limit`).rate\n const msRemaining = ((new Date(rate.reset*1000))- new Date())\n const minsRemaining = (msRemaining/1000/60).toFixed(1)\n return md` You have ${rate.remaining} api calls left! Restarts in ${minsRemaining} minutes!` \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`## Implementation\n\nFeel free to send [suggestions or comments](https://observablehq.com/@observablehq/suggestions-and-comments) to improve these!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"parseLH = require(await FileAttachment(\"parse-link-header-1.0.1.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"github4 = function (strings){\n let query = strings[0] + \"\", i = 0, n = arguments.length;\n while (++i < n) query += arguments[i] + \"\" + strings[i];\n\n let ghToken = ghKey\n const opts = {\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n method: 'post',\n body: JSON.stringify({query})\n };\n if (ghToken)\n opts.headers.Authorization = `token ${ghToken}`\n const url = `https://api.github.com/graphql`\n return fetch(url, opts).then(r=>r.json())\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {secret} from \"@tmcw/secret\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"dot = require('@observablehq/graphviz')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"d3 = require('d3-array@2', 'd3-scale-chromatic', 'd3-scale')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"scale = d3\n .scaleLinear()\n .domain(d3.extent(commits, (c) => new Date(c.commit.committer.date)))\n .range([1, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"