ee1c1fdc07 | ||
---|---|---|
src | ||
style | ||
.eslintrc | ||
.gitignore | ||
README.md | ||
favicon32.png | ||
index.html | ||
package.json | ||
webpack.config.js |
README.md
Serverless Kanban Board for GitHub Issues
Why waste time and money paying for a Ticket Tracker when you already work in GitHub? Now, you don't have to.
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.
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.
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)
Filtering
- cards can be filtered by label, milestone, board column, or user
- filters can be inclusive as well as exclusive
Milestone Planning
When doing Milestone (or Sprint) planning there is a view to easily move cards into milestones
Moving Cards
Cards can be dragged from one column to the next
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.
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
Examples
Just specify a GitHub repository in the URL and off you go!
- openstax/tutor-js
- openstax/tutor-js + tutor-server (multiple repositories)
- react-bootstrap/react-bootstrap
- jquery/jquery
- Or wildcards! (must be logged in) using
http://philschatz.com/gh-board/#/r/openstax:tutor-js|*
Development
npm start
to start up the dev server and go tohttp://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
- Since there is no server to do OAuth, people need to provide a GitHub token which is stored in
- 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 inlocalStorage
(orIndexedDB
)
Hosting your own Forked Version
- create a fork
- switch to the
gh-pages
branch - make a commit and push it to
gh-pages
(to trigger GitHub to start hosting the files) - go to
https://${USERNAME}.github.io/gh-board/
- To make edits and push them up on GitHub
- make edits in the src directory in
gh-pages
- run
npm run build
- commit and push
TODO List
- combine Issue and the Pull Requests that fixes it
- handle dragging in multiple repos:
- 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
- add GitHub search