A Minimal Example of Opening GitHub Issues with Selecting Text

Jeffrey Arnold

2019-01-21

Opening GitHub Issues by Selecting Text

This bookdown document is a proof-of-concept for opening GitHub issues from a Medium-like selection of text on a page. The envisioned use case for this is opening GitHub issues for typos in webpages.

To use, select some text on the page. A popover will appear with options, including opening a GitHub issue.

Screenshot of text selected on a page with a popover that has a GitHub icon

Click on the GitHub icon in the popover. A new window will open with new GitHub issue for the repository. The body of the GitHub issue will be pre-filled with the text selection and a link to the page.

Screenshot of a new GitHub issue pre-filled with the selected text

Details

The share-this provides the ability to share selections of text from a page. I extended it by writing a new GitHub sharer.

Setup

Right now this is a proof of concept, so the only method is manually copying what is done in this repository. Copy these files into your bookdown repository:

• assets/share-this/*: distribution files copied from the share-this JavaScript package.
• assets/share-this-github/*: JavaScript and CSS assets for the GitHub sharer
• includes/share-this.html: A snippet of HTML included in each HTML page by bookdown. Some lines could be uncommented to load other sharers.

Configuration and initialization is handled by the share-this-config.js file. It needs to be configured with the GitHub repository associated with the site.

// settings for ShareThis
const shareThis = window.ShareThis;
// uncomment to load a twitter sharer
// const twitterSharer = window.ShareThisViaTwitter;

// set this to your
const githubRepo = "jrnold/bookdown-github-issues";
// optionally add a github label to use
const githubIssueLabel = null;
const githubSharer = new GitHubIssueSharer(githubRepo, label = githubIssueLabel);

const selectionShare = shareThis({
    // sharers: [ githubSharer, twitterSharer ]
    sharers: [ githubSharer ]
});
selectionShare.init();

Add this line to _output.yml:

bookdown::gitbook:
  # ...
  includes:
    in_header:
    - "includes/share-this.html"