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; }

Purpose-built for displays of data