31:T17fb,async function ghi(options = {}) { const { owner = null, repo = null, issue = null, debug = false, compact = false } = options; // format function formatDateNice(date) { return d3.timeFormat("%B %-d, %Y")(date); } function formatDateNerdy(date) { return d3.timeFormat("%Y-%m-%d %-I:%M%p")(date); } // parameters const color = { open: { normal: "hsl(138deg, 63%, 92%)", dark: "hsl(138deg, 63%, 26%)" }, closed: { normal: "hsl(261deg, 69%, 94%)", dark: "hsl(261deg, 59%, 49%)" }, bannerError: { normal: "hsl(44deg, 66%, 80%)", dark: "hsl(44deg, 36%, 26%)" } }; // usage string const usageString = `\`\`\` { owner: "String: owner of the github repo", repo: "String: repo name", issue: "Number issue number", compact: "Boolean (optional) true returns minimal banner version", debug: "Boolean (optional) true returns raw API response", }\`\`\` `; // documentation banner const exampleString = `\`{owner: "observablehq", repo: "plot", issue: 1}\``; function setupErrorBanner(blurb) { return box(color["bannerError"]["normal"])( md`**Documentation** # GitHub Issue Banner Use this function to add a pretty GitHub Issue to your Observable notebooks! ### Just give me an example Here is an example input object you can try: ${exampleString} ### All the nerdy details Pass the function an object to get started. Here are the available options: ${usageString} ### I'm still seeing the documentation, what's going on?! Currently your input to the function isn't returning anything. - Specifically, you are getting this error: *${blurb}* - Make sure your inputs are valid and try again (strings for owner and repo, numbers for the issue) - Deep breath. It'll be okay. ### Thanks Hope you enjoy adding GitHub issues to your Observable notebooks! *Made with love by Zach Bogart* 💛` ); } // check inputs if (typeof owner !== "string") { return setupErrorBanner("Invalid/missing owner"); } if (typeof repo !== "string") { return setupErrorBanner("Invalid/missing repo"); } if (typeof issue !== "number") { return setupErrorBanner("Invalid/missing issue number"); } // make url const baseApiUrl = "https://api.github.com/"; const url = `${baseApiUrl}repos/${owner}/${repo}/issues/${issue}`; // fetch const response = await fetch(url) .then((response) => response.json()) .catch((error) => { console.log(error); return box(color["bannerError"]["normal"])( md`**Error**: Fail to fetch response` ); }); if (debug) { return response; } // error banners const attemptIssueLink = `https://github.com/${owner}/${repo}/issues/${issue}` const detailedErrorInfo = md` Something went wrong making the banner. Here are some things you can do: - **Check Inputs**: Make sure your inputs are correct. Here's an example input object: - \`{owner: "observablehq", repo: "plot", issue: 1}\` - Make sure your issue number exists in the desired repo! - **Public repos only**: Currently there is no functionality to include credentials, so only issues from public GitHub repositories will work. - **Rate Limiting**: If you have been updating the banner very frequently (cycling through issue numbers, for example), you may have been [rate limited](https://docs.github.com/en/rest/overview/resources-in-the-rest-api#rate-limiting) by the GitHub API. - You can check this by setting \`debug\` to \`true\`. - Give it some time to refresh before trying again.`; const errorBanner = box(color["bannerError"]["normal"])( md`**Error: couldn't make banner for "${htl.html`${owner}/${repo} #${issue}`}"** ${!compact ? detailedErrorInfo : ""}` ); // unpack response, make banner let detailedBanner = errorBanner; let compactBanner = errorBanner; try { const data = { title: response.title, user: response.user.login, userUrl: response.user.html_url, userAvatarUrl: response.user.avatar_url, state: response.state, dateCreated: response.created_at, dateUpdated: response.updated_at, body: response.body, number: response.number, url: response.html_url, labels: response.labels }; compactBanner = box(color[data.state]["normal"])( md`**${htl.html`${data.title} #${data.number} `}** *${htl.html`${owner}/${repo}`}*` ); detailedBanner = box(color[data.state]["normal"])( md`**${htl.html`${data.title} #${data.number}
`}** *${htl.html`${owner}/${repo}`}* *${formatDateNice(new Date(data.dateCreated))}* ${data.body ?? ""} *** *Created by* ${htl.html`@${data.user}

`} *Labels: ${data.labels.length > 0 ? data.labels.map(d => d.name).join("; ") : "(no labels)"}* *Last updated: ${formatDateNerdy(new Date(data.dateUpdated))}* ` ); } catch (error) { console.log(error); return errorBanner; } return compact === true ? compactBanner : detailedBanner; }32:Ta00,examples = [ { label: "the default behavior", blurb: md`By default, the function shows a GitHub issue with lots of details. The banner is color-coded by issue status. The issue title links to the full issue on GitHub, and the owner/repo string links to the source repository. Below the titles are the issue creation date and the issue body. The banner's footer contains info on the issue's creator (with a link to their profile) and the most-recent update timestamp. Datetimes are displayed in local time.`, code: `ghi({ owner: "observablehq", repo: "plot", issue: 12, })`, func: () => ghi({ owner: "observablehq", repo: "plot", issue: 12, }) }, { label: "a more compact banner option", blurb: md`The compact version only shows the title, number, and owner/repo string, with links to the full issue and repo on Github.`, code: `ghi({ owner: "observablehq", repo: "plot", issue: 12, compact: true, })`, func: () => ghi({ owner: "observablehq", repo: "plot", issue: 12, compact: true, }) }, { label: "a way to debug things", blurb: "Debugging will show the raw API response for the given issue, which can be helpful for confirming functionality and checking on rate limiting.", code: `ghi({ owner: "observablehq", repo: "plot", issue: 12, debug: true })`, func: () => ghi({ owner: "observablehq", repo: "plot", issue: 12, debug: true }) }, { label: "what it looks like when things go wrong", blurb: "If unable to find the issue you specified, the function will return an error stating it's failure and listing common things to check. In the example below, the owner has no known repo called 'an-AWESOME-repo-to-end-all-repos'. Notice the banner title states what was tried, which can help you diagnose why the banner is not working. An attempt to generate the issue link is made in the title. Other common things to check are listed below if returning a non-compact banner.", code: `ghi({ owner: "observablehq", repo: "an-AWESOME-repo-to-end-all-repos", issue: 1287, })`, func: () => ghi({ owner: "observablehq", repo: "an-AWESOME-repo-to-end-all-repos", issue: 1287, }) }, { label: "where the documentation is", blurb: "If no object is provided, you will receive a documentation banner, with descriptions of the available options and an example. The documentation will also be displayed if you use invalid inputs for the owner/repo/issue parameters.", code: `ghi()`, func: () => ghi() }, ]33:[] 2f:{"title":"GitHub Issue Banner","cells":[{"id":0,"value":"# GitHub Issue Banner\n## Add GitHub issues to your Observable notebooks","pinned":false,"hidden":false,"mode":"md"},{"id":496,"value":"---\n## Use it!","pinned":false,"hidden":false,"mode":"md"},{"id":439,"value":"```js\n${importString}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":445,"value":"viewof button = Inputs.button(\"Copy import 📋\", {reduce: () => navigator.clipboard.writeText(importString)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":486,"value":"## Quickstart","pinned":false,"hidden":false,"mode":"md"},{"id":506,"value":"viewof button1 = Inputs.button(\"Copy working example 🚀\", {reduce: () => navigator.clipboard.writeText(`ghi({\n owner: \"observablehq\", \n repo: \"plot\",\n issue: 12,\n compact: false,\n debug: false,\n})`)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"ghi({\n owner: \"observablehq\", // owner of the GitHub repo\n repo: \"plot\", // repo name\n issue: 1, // Issue number\n compact: false, // Optional, returns compact banner \n debug: false, // Optional, returns raw API response\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"---\n## Walkthrough, by example","pinned":false,"hidden":false,"mode":"md"},{"id":598,"value":"viewof select = Inputs.select(examples.map(d => d.label), {label: \"Show me...\", width: 300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"### Show me *${select}*","pinned":false,"hidden":false,"mode":"md"},{"id":596,"value":"*${chosenExample.blurb}*","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"```js\n// running\n${chosenExample.code}\n// returns...\n```","pinned":false,"hidden":false,"mode":"md"},{"id":594,"value":"chosenExample.func()","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"---\n## Documentation\nGet the documentation by calling the function with no arguments.","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"ghi()","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"---\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"import { box } from \"@cookwcode/banners\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":447,"value":"importString = `import { ghi } from \"${currentSpecifier}\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"// from https://observablehq.com/@d3/example-components\ncurrentSpecifier = {\n const {pathname} = new URL(document.baseURI);\n return pathname.slice(pathname.startsWith(\"/d/\") ? 3 : 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"chosenExample = examples.filter((d) => d.label === select)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":551,"value":"ghi({\n owner: \"cookwcode\",\n repo: \"grocery-list\",\n issue: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":587,"value":"_Made with love by Zach Bogart_ 💛","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}