29:null 2a:["$","title",null,{"children":"Github API in Observable (v3 and v4) | Alex Garcia | Observable"}] 2d:{"id":"ab13abbea01231e3","slug":"github","title":"Github API in Observable (v3 and v4)","thumbnail":"7061f6c81e7ddefb075900b6910ba8ddb8a570df535e2a134020c78e35fbf39b","access_level":"public","create_time":"$D2019-02-23T02:11:44.028Z","update_time":"$D2021-03-23T21:43:50.620Z","view_time":null,"first_public_time":"$D2019-02-28T21:28:00.732Z","fork":false,"stars":19,"starred":false,"owner":{"type":"team","id":"512cbe7209990c30","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":"starter_2024"},"version":595,"publish_version":595,"role":null,"authored":false,"authors":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null}],"editors":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null}],"comments":[],"trashed":false,"subscribed":null,"forks":19,"collection":null,"type":"notebook"} 30: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: `31: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 }) }32:[{"id":"8bf92aafcbc96002f1282650fdd41ed8669adeb67ed537e9e41de5e7a610328753f5bd50f087167e38cb06a8d2417d20a98194dede40c72d1c50cf49e1adacae","href":"https://static.observableusercontent.com/files/8bf92aafcbc96002f1282650fdd41ed8669adeb67ed537e9e41de5e7a610328753f5bd50f087167e38cb06a8d2417d20a98194dede40c72d1c50cf49e1adacae","name":"parse-link-header-1.0.1.js","type":"application/javascript","lastModified":1598212672613.149,"size":13572}] 2e:{"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"},{"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"},{"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"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":505,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"ghEmojis = github3`emojis`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"parseLH = require(await FileAttachment(\"parse-link-header-1.0.1.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":454,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {secret} from \"@tmcw/secret\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"dot = require('@observablehq/graphviz')","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"d3 = require('d3-array@2', 'd3-scale-chromatic', 'd3-scale')","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}