:octocat: Serverless Kanban for GitHub Issues using gh-pages
JavaScript CSS Other
Latest commit be81e92 Jan 20, 2017 @mathieudutour mathieudutour committed on GitHub Merge pull request #65 from enkidevs/trello-view
trello view

README.md

Serverless Kanban Board for GitHub Issues

issues dependency status dev dependency status

Why waste time and money paying for a Ticket Tracker when you already work in GitHub? Now, you don't have to.

image

Features

Multiple Repositories

Multiple Repositories in an organization can be shown on a board (from different organizations too!). The repository is shown in gray next to the Issue number.

image

Linked Issues and Pull Requests

Just add #123 or orgName/RepoName#123 to the Issue or Pull Request body and linked Issues will show up with the column they are in, both below the Card and in the preview popup.

image

Real-Time Collaboration

By clicking the ✏️ icon next to the card title, multiple people can edit the Issue Body at once (ie in a meeting), and when editing is done, one person clicks Save to GitHub.

Features:

  • send anyone the link to edit
  • real-time preview of Markdown
  • references to Issues show with their state and board column
  • Sequence, State, Gantt, and other diagrams are supported (using mermaid)

gh-board_realtime-editing4

Filtering

  • cards can be filtered by label, milestone, board column, or user
  • filters can be inclusive as well as exclusive

gh-board_filters

Milestone Planning

When doing Milestone (or Sprint) planning there is a view to easily move cards into milestones

gh-board_milestone-planning

Moving Cards

Cards can be dragged from one column to the next

gh-board_moving-cards

Task Lists

By using the - [ ] notation in the body of an Issue or Pull Request, the progress of an Issue is shown in the top-right corner of a Card.

gh-board_task-lists

CI Status and Merge Conflict

  • CI Status shows up as a green βœ”οΈ or a red ❌ on the top-right corner of a card
  • Merge conflicts are shown with a yellow ⚠️ and have a diagonal striped background

image

image

image

Burnup Chart

Why Burnup instead of Burndown?

Shows a burnup chart for a Milestone (ie "Sprint" or "Iteration"). If you use select multiple repositories it will include all of them.

It also skips when nothing was opened or closed that day/month/year (useful to see weekends or holidays).

burnup-chart

Issue Image

If an Issue or Pull Request contains an image then it will be shown in the Issue

image

Pull Request to non-default branch

Sometimes Pull Requests go to a branch other than the main branch. This makes it clear when that happens.

image

Batch-Edit Labels in Multiple Repositories

If you need to rename a column or remove a duplicate label you can get to this page from the Settings dropdown next to the filter link.

image

Easter Eggs

Plus, it comes with totally useful easter eggs you can unlock!

easter-eggs

Examples

Just specify a GitHub repository in the URL and off you go!

Development

  • npm start to start up the dev server and go to http://localhost:8080
  • npm run build to generate the JS and CSS files in ./dist

How Does it Work?

  • JavaScript calls the GitHub API and pulls in the Issues for a given repository.
    • Since there is no server to do OAuth, people need to provide a GitHub token which is stored in localStorage
  • It uses the first repository to get the Issue Labels and Milestones.
  • There are special Labels which represent the board columns (in the format # - Column Title)
  • To be a "Good API Citizen" gh-board uses eTags provided by GitHub and saves them in localStorage (or IndexedDB)

Hosting your own Forked Version

  1. create a fork
  2. switch to the gh-pages branch
  3. make a commit and push it to gh-pages (to trigger GitHub to start hosting the files)
  4. go to https://${USERNAME}.github.io/gh-board/
To make edits and push them up on GitHub
  1. make edits in the src directory in master
  2. commit your changes
  3. run npm run deploy
To update your fork with the upstream (this repo)
  1. git pull https://github.com/philschatz/gh-board.git master
  2. run npm run deploy

TODO List

  • combine Issue and the Pull Requests that fixes it
  • handle dragging in multiple repos:
    1. auto-create the label in the new repo (confirm first)
  • add checkbox for selecting multiple repos in dashboard
  • select between Issue-centric and PullRequest-centric view
  • support milestone (sprint) planning by making each milestone a column
  • show labels unique to each repository
  • linked Issues & PR's should include the title
  • collaboratively edit Milestones and any GitHub file by going to /p-file/:repoOwner/:repoName/:branch/path-to-file
  • add a list view in addition to a board
    • Sort by Due At, Updated At, and ascending/descending
  • add a way to add labels/milestones to an Issue (autocreate the label/milestone in the repo)
  • cache issues-updated-since requests and CI status requests in Session Storage instead of IndexedDB so they can be cleared easier
  • add effort labels XS, S, M, L, XL
  • add GitHub search