Code Monkey home page Code Monkey logo

git-util-dash-dev-frankly's Introduction

frankly

Frankly is a summary dashboard about the open issues and PRs across any set of GitHub repositories. Because, frankly, we need one.

Installing and running the demo

git clone https://github.com/notwaldorf/frankly.git
cd frankly
bower install
python -m SimpleHTTPServer ## or your favourite local server

Sample use

This is what the index.html contains

<!-- HTML imports for Polymer element and the Web Components polyfill -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="frank-ly.html">

<!-- The whole dashboard -->
<frank-ly
    header="๐Ÿš‚๐Ÿšƒ๐Ÿšƒ๐Ÿ’จ"
    repos='["frankly", "emoji-rain", "emoji-selector", "github-canned-responses"]'
    labels='["bug", "enhancement"]'>
</frank-ly>

And that's literally it. It looks like this:

screenshot of the dashboard

Configuring it

By default, the dashboard looks at the repositories under the authenticated user's username, however it can be configured to use an organization, or even a mix of repositories from different users and organizations:

All the repositories the user is subscribed to

<frank-ly header="๐Ÿš‚๐Ÿšƒ๐Ÿšƒ๐Ÿ’จ"
    labels='["bug", "enhancement"]'>
</frank-ly>

Repositories for a specific organization

<frank-ly
    organization="polymerelements"
    repos='["paper-input", "paper-button"]'
    labels='["bug", "enhancement"]'>
</frank-ly>

Repositories for a mix of users and organization

<frank-ly
    full-repo-names
    repos='["notwaldorf/emoji-rain", "notwaldorf/caturday-post", "polymerelements/paper-input", "jquery/jquery"]'
    labels='["bug", "enhancement"]'>
</frank-ly>

You can also configure which labels you want to display. Untriaged is always the open issues that have no labels applied to them.

Multiple dashboards in parallel

To use multiple dashboards for the same user, just use the <frankly-header> element directly, with multiple <frankly-result> elements. A dom-bind is a special Polymer construct that allows you to easily bind data together (in this case, the authenticated user:

<!-- HTML imports for Polymer element and the Web Components polyfill -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="frankly-header.html">
<link rel="import" href="frankly-results.html">

<template is="dom-bind">
  <frankly-header
    header="Look at this dashboard go!"
    github-user="{{user}}"></frankly-header>
  <frankly-results
      github-user="[[user]]"
      repos='["emoji-rain", "emoji-translate"]'
      labels='["bug", "enhancement"]'>
  </frankly-results>
  <frankly-results
      github-user="[[user]]"
      full-repo-names
      repos='["notwaldorf/caturday-post", "polymerelements/paper-input", "jquery/jquery"]'
      labels='["bug", "enhancement", "help wanted"]'>
  </frankly-results>
</template>

Private repos?

At the moment Frankly only works for public repos, since it's requesting the least amount of permissions from GitHub -- my understanding is that the permissions needed to access anything about private repos require read/write access to all of that organization's repos, which is a bit scary.

Deploying it somewhere?

Frankly uses Firebase to authenticate to GitHub. The Firebase app that I've included lets you run the app locally, but won't work once you deploy it to your own domain. In that case, all you have to do is create your own Firebase and GitHub apps (make sure to update your GitHub secrets into the Firebase app) and update the Firebase settings in frankly-header:

<firebase-auth provider="github" id="githubAuth"
  location="https://<your-app-name-here>.firebaseio.com"
  user="{{githubUser}}">
</firebase-auth>

<3

Hope this helps you stay on top of issues and PRs!

git-util-dash-dev-frankly's People

Contributors

notwaldorf avatar nzwulfin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.