products

Status dashboard from Markdown

See the project build status for all projects at once.

Personal dashboard with zero programming

After a while I found myself with lots of github projects, npm modules, etc. There are download statistics, continuous build statuses and dependency out of date warnings. Usually I place links to badges in the project's README.md file, as I described in this blog post. While it is very convenient for a single project, I had no overall view of the state of things. A project could be in terrible shape, or spike in downloads, and I would not know for weeks.

I wanted to create a combined view that would show information about as many of my projects as possible, while doing as little programming as possible. Luckily I found a way to make it work using two tools I love: Markdown syntax and GitHub pages.

Here is how the status page looks on desktop and mobile browsers.

Status

Image screenshots generated by the Google's page insight.

Main features

  • index.html page loads the README.md by making an Ajax call and rendering the markdown dynamically.
  • I removed the master branch of the repository, leaving only the gh-pages branch.
    • make the gh-pages branch the default BEFORE removing master
  • One would need to update README.md only when a project is added / deleted, or the build server urls change.
  • The status page looks almost the same when looking at the github repo, or at the status web page.

README.md syntax

Here is a part of the file, displaying several badges. I use the separate image syntax shorthand to keep the Markdown complexity low.

**[deps-ok](https://github.com/bahmutov/deps-ok)**

[![NPM][deps-ok-icon]][deps-ok-url]
[![Build][deps-ok-ci-image]][deps-ok-ci-url]
[![dependencies][deps-ok-deps-image]][deps-ok-deps-url]

[deps-ok-icon]: https://nodei.co/npm/deps-ok.png?downloads=true
[deps-ok-url]: https://npmjs.org/package/deps-ok
[deps-ok-ci-image]: https://secure.travis-ci.org/bahmutov/deps-ok.png?branch=master
[deps-ok-ci-url]: http://travis-ci.org/#!/bahmutov/deps-ok
[deps-ok-deps-image]: https://david-dm.org/bahmutov/deps-ok.png
[deps-ok-deps-url]: https://david-dm.org/bahmutov/deps-ok

Markdown to HTML

I use robust and fast marked converter to generate the HTML elements from the README.md file.

$.get(readme, function success(md) {
    var converted = marked(md);
    $('#dashboard').html(converted);
}).fail(function error(msg) {
    $('#dashboard').html('<h2>Could not load ' + readme + '</h2>');
});

You can clone my status repo and adjust it to point to your projects. All you need to do is to edit the text inside the README.md file, but other than this the rest should work fine.