ubervu / github-changelog Goto Github PK
View Code? Open in Web Editor NEWUse GitHub issues to communicate app updates directly to your customers.
Home Page: http://ubervu.github.io/github-changelog
Use GitHub issues to communicate app updates directly to your customers.
Home Page: http://ubervu.github.io/github-changelog
The easiest way to integrate the changelog on the client-side is through a jQuery plugin
The jQuery plugin will support the following options:
// Checks GitHub for new updates since last fetch
$('.changelog-container').changelog({
// Label for the button the appears when you got updates, supports HTML
buttonText: 'Click me, I got updates!',
// Label for the reload button shown below the list, supports HTML
reloadButtonText: 'Reload',
// Position of the list around the button. E.g. if the button is placed
// on the bottom-right corner, you probably want the list to be positioned
// top-left or left-top
listPosition: 'top-left',
// Poll GitHub for new updates at every set number of seconds
autoRefresh: 2,
// GitHub repository to fetch issues from
githubRepo: 'facebook/react',
// Only show updates that have one of these labels
githubLabels: ['bug', 'enhancement', 'feature'],
// Payload for the GitHub issues endpoint
// https://developer.github.com/v3/issues/#list-issues
githubParams: {
// Only get issues from GitHub that have ALL of these labels
// It's best to set a single label here, e.g. 'release', that's common
// to all issues. For deeper filtering 'githubLabels' can be used
labels: 'release'
}
});
The jQuery plugin will have the following methods:
// Checks GitHub for new updates since last fetch
$('.changelog-container').changelog('checkForUpdates');
We need to have a container
which in the first place will be empty, this will be targeted by the plugin.
Second, we need to make a jQuery plugin, which will have a method called checkForUpdates
. Given options set by the user(see above), it will be able to poll GitHub and generate the appropriate DOM structure when issues are closed.
For a given repository (gitHubRepo
) and a common label set under githubParams.labels
this method will request the issues that were closed since a given timestamp. The timestamp will be set when the plugin is first initialized on a container
and reset after new updates are received.
checkForUpdates
methoddestroy
method that unbinds event listeners and removes the changelog DOMBuild a HTML structure for the widget that allows for customization and that can be used by the plugin
README.md
detailing the HTML structureWe will have the plugin contained within a wrapper called changelog-wrapper
. Inside of it there are two elements:
The button will contain a badge that will show the number of new notifications. The list will be made up of multiple items, each corresponding to a notification. The list can be positioned using a class on the wrapper. There will also be a footer inside the list that will contain the reload button.
Notification item - composed of two elements, a label and text content.
As a developer
I want clean maintainable code
So that I can be more productive.
Clean code.
Refactor all the things!
Main issue: #2
We need to use the GitHub data people are already using to offer a transparent status update system for their customers, without building an additional admin panel for those status updates.
label
and were referenced in merge commits from a given branch
, newer than a given timestamp
.Ex: For timestamp: '1400251736447'
, branch: 'master'
and label: 'release'
the method would go through the following steps:
master
newer than 1400251736447
, from a given reporelease
labelSolve yata yata #11340
that basically references to github.com/org/repo/issues/11340
release
, of course)The output would then look something like this:
[{title: "Fix overlapping text", labels: ['bug', 'client', 'moderate']},
{title: "Create geo map visualization", labels: ['feature']}]
Given an timestamp
, branch
and label
we need to build the following functionality:
timestamp
(filter by branch
) and filter out commits that don't have the label
label
title
and label
that the plugin can use to populate the notification listAll github users should be able to run the demo and see it working without needing admin access to ubervu
Because of the way github works, a user that's not part of ubervu can set issues on the playground but he won't be able to set labels on that issue. This limitation makes the demo unusable for outside users.
We need to figure out a way will allow any user to run the demo.
Possible solutions:
Build LESS styling to support the HTML structure so that it can be integrated with the plugin
HTML structure
<div class="github-changelog">
<a class="github-changelog-btn" href="#">
New updates!
<span class="github-changelog-badge">2</span>
</a>
<div class="github-changelog-list">
<ul>
<li>
<span class="github-changelog-label"> issue label </span>
<p> issue title </p>
</li>
</ul>
<div class="github-changelog-footer">
<a class="github-changelog-btn github-changelog-btn-reload">Reload</a>
</div>
</div>
</div>
We'll need to create styling for the following:
top
, bottom
, left
and right
. Each of these positions can be modified by providing a second class: pull-left
and pull-right
for vertical positions and pull-top
for horizontal positions. The purpose here is to make the list usable in any positioning scenario..closed
to hide the listindex.html
file.Check for updates
button very fast.Let's see if we can simplify our primitives.
We have both "Notification button" (wiki) and "Notification icon" (readme). Are they two things or the same? Let's use only one if so. I like "button" more.
"Notifications" or "updates"? I think when it comes to software you have "updates", "notifications" are more related to activities that happen inside the app (Facebook, etc.)
Here's an example of saying nothing:
Notification item
One element of the notification list.
Item, element, list, even notification, are all abstract words you have to run away from. Then you have joint words of, the, etc., so no concrete word at all. Element of what? Item of what? List of what? etc.
Here's a sentence that stands by itself:
The list is made out of app updates that were released since the last time the user hard-refreshed the app. Each update entry corresponds to a closed GitHub issue.
As a user
I want to be able to get notifications about new changes to an application
So that I can stay informed and be able to reload the application at my own will
inspiration from github on mac
variables.less
. Should we extend this further?cc: @uberVU/ux @RadValentin
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.