CSS HTML JavaScript Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
photography
widgets
.gitignore
404.html
CNAME
Gruntfile.js
README.md
blog.html
config.rb
index.html
package.json
photography.html

README.md

This app is a showcase of Github projects for an organization or a user, all in Javascript.

It uses AuraJS and an aura-github extension that allows our Widgets to talk directly to Github's API, and 2 Aura widgets :

If you want to know more how it was done, read the blog post.

Using on your own github homepage

  1. First, clone this repository (or fork it directly on Github) :

     git clone git://github.com/hull/hull.github.io.git
    
  2. Create a repository named you.github.io, where you is your username (If you have fork the repository, don't forget to rename it!)

  3. Whitelist your domain on your github applications settings https://github.com/settings/applications

    Click on Register a new application

    Fill Main URL and Callback URL with your github homepage url. (i.e. http://you.github.io)

  4. Configure index.html with the correct settings.

    If you are an organization:

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

    else you are a simple user:

     <header data-aura-widget="user" data-aura-user="victa"></header> 
     <ul data-aura-widget="repos" data-aura-user="victa"></ul>
    
  5. git push to your github page repository and you’re done!

More about github pages

Using locally

Install node.js (Only used for developing the app locally, not needed for deployment)

Install grunt-cli as a global module.

[sudo] npm install grunt-cli -g

then install grunt and it's modules in the project's folder.

cd hull.github.io
npm install

Running the app

Start grunt

grunt

Open in your browser

open http://localhost:3010

Options

User widget

  • style: Optional, could be small or complete depending on what do you want to show.
Example:
<ul data-aura-widget="repos" data-aura-style="complete" data-aura-user="victa"></ul>

Next steps

Here are a few ideas for further improvement :

  • Add statistics widgets
  • Add more details about an user, an organization, a repository…
  • ...

Feel free to fork the project and add your own widget.