How to build your own Twitter-like “Open Source” page.

2 notes

We started releasing a bunch of open source projects lately and wanted to give them a little more visibility, make them more discoverable.

Twitter has a great "Open Source" page on Github that served as an inspiration for this project.

Obviously, we did not want to have to maintain it manually so the requirements were :

  • it had to fetch its data from Github’s APIs
  • it had to be done in Javascript, since Github Pages are not dynamic

Victor started designing the page and at the same time I was working on a demo for AuraJS based on Github’ APIs. We immediately thought it was a good idea to combine our efforts and create this page as a pure AuraJS app that would serve both purposes.

The app is very simple, it uses an aura-github extension that allows our Widgets to talk directly to Github’s API, and 2 Aura widgets :

The result is here :

And here is a screenshot of what it looks like.

The beauty of using aura widgets to do it is that now the whole app is contained in those widgets, and to embed them, we just have to insert this snippet of HTML.

<header data-aura-widget="user"  data-aura-org="hull"></header> 
<ul data-aura-widget="repos" data-aura-org="hull"></ul>

The project itself is obviously open sourced here. You can fork it, improve it and use it to show off your open source skills.

We are also going to release soon a more comprehensive collection of AuraJS powered Github Widgets, deliciously ready for public consumption.

Stay tuned.

Comments ? Questions? : Discuss on hacker news



Enjoyed this post? Then you should
  1. hullapp posted this