2d:null 2e:["$","title",null,{"children":"Github API in Observable (v3 and v4) | AbserAri | Observable"}] 33: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: `34:[] 31:{"id":"fb0dda31c2b7d3c0","slug":"github-api-in-observable-v3-and-v4","title":"Github API in Observable (v3 and v4)","thumbnail":"11dc81fcb7d29e52118daaeff1b7016f9d1955687d61f46265ee22b3bba12e92","access_level":"public","create_time":"$D2020-02-13T06:18:30.887Z","update_time":"$D2021-01-29T09:41:56.875Z","view_time":null,"first_public_time":"$D2020-02-13T07:08:37.232Z","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":4,"starred":false,"owner":{"type":"team","id":"8c968b856895152e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":"starter_2024"},"version":573,"publish_version":573,"role":null,"authored":false,"authors":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null}],"members":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"f173face24975a47","slug":"observable-usage","title":"Observable Tools","owner":{"id":"8c968b856895152e","login":"yhyddr","name":"AbserAri"}},"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":516,"value":"{\n const size = width*10/16\n return html`\n

\n`\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 ${linuxCommits.length} commits in the [torvalds/linux](https://github.com/torvalds/linux) repository`}\n\n${dot`\n\ndigraph {\n rankdir=TB \n ${linuxCommits.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 < .5 ? 'white' : 'black'\n return `\"${name}\"[style=\"filled\", fillcolor=\"${color}\", fontcolor=\"${textColor}\"];`\n }).join('\\n')}\n${linuxCommits.map(x=>x.parents.map(p=>`\"${sha(p)}\" -> \"${sha(x)}\"`).join('\\n'))\n .join('\\n')}}\n}`}\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"linuxCommits = {\n const count = 6\n let i = 0;\n const data = []\n\n let commits = await github3`repos/torvalds/linux/commits` \n\n commits.map(c=>data.push(c))\n\n let next = commits.__meta.link.next.url;\n\n while(next && idata.push(c))\n next = commits.__meta.link.next.url;\n ++i;\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof ghKey = secret(\"GITHUB_TOKEN\", {\n description:\n \"This is a secret API token whose value is only available to you!\",\n submit: \"Set secret\"\n})","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":"github3 = function(strings) {\n let path = '';\n if (Array.isArray(strings)) {\n path = strings[0] + \"\";\n let i = 0,\n n = arguments.length;\n while (++i < n) path += arguments[i] + \"\" + strings[i];\n } else path = strings;\n let ghToken = ghKey;\n const opts = {\n headers: {\n Accept: `application/vnd.github.v3+json`\n }\n };\n if (ghToken) opts.headers.Authorization = `token ${ghToken}`;\n const url =\n path.indexOf('https://api.github.com') >= 0\n ? path\n : `https://api.github.com/${path}`;\n return fetch(url, opts).then(async r => {\n const data = await r.json();\n const meta = {};\n const rate_limit = {};\n\n if (r.headers.has('Link')) meta.link = parseLH(r.headers.get('Link'));\n\n rate_limit.limit = +r.headers.get('X-RateLimit-Limit');\n rate_limit.remaining = +r.headers.get('X-RateLimit-Remaining');\n rate_limit.reset = new Date(+r.headers.get('X-RateLimit-Reset') * 1000);\n\n meta.rate_limit = rate_limit;\n data.__meta = meta;\n return data;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"parseLH = require('https://bundle.run/parse-link-header@1.0.1')","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":90,"value":"style","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":88,"value":"import {style} from '@asg017/preferred-style'","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.scaleLinear()\n .domain(d3.extent(linuxCommits, 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":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"