Total Pageviews

Saturday, 21 December 2013

angular-gh-page

Angular-GH-Page is a simple Angular-app that fetches your GitHub-data via JSONP, displays some general infos about you and a list of your public repositories.
Visit my GitHub-page to get an impression.

First steps

First of all clone this repository:
git@github.com:herschel666/angular-gh-page.git && cd angular-gh-page
After that you have to install the dependencies:
bower install
npm install

Usage

  1. Navigate to assets/scripts/app.js and set your GitHub-username. The default value after cloning this repo is willie-t-stokes.
  2. Build the scripts and stylesheets by running grunt build inside your console.
  3. Change the stylesheet-reference inside the index.html from main.css to main.min.css.
  4. Remove all script-includes inside the index.html.
  5. Include bower_components/angular-unstable/angular.min.js and assets/scripts/app.min.js inside the index.html.
There you are, your new shiny GitHub-page should run like a young puppy.

Development

If you don't just want to take this code and upload it but develop on it, do the following:
  1. Leave the index.htmlas it is!
  2. Run grunt karma inside your console to start the unit-tests. They re-run every time you save a js-file inside the assets/scripts-folder or the test/specs-folder.
  3. Run grunt watch inside your console to automatically compile the SCSS everytime you save a css-file inside the assets/styles/app-folder.
  4. Write JS and SCSS like there's no tomorrow. Btw: inside assets/styles/ext/ is an instance of the Bourbon-Mixins-library. Use it, if you like.

Notes

  • To install and use the dependencies you will have to have Git, Node.js, Bower, Ruby and SASS installed on your machine. If one of them is missing, an appropriate error message will probably pop up inside your console.
  • Angular-GH-Page uses the unauthorized GitHub-API. This works fine but the amount of requests is limited to 60/hour. If your GitHub-page is highly frequented you'll probably have build some kind of proxy-service, that caches the API-data and serves it to the Angular-app.
  • Angular-GH-Page filters all forked repositories from the repo-list. This is just my personal preference. If you want to include forked repositories inside your list, remove the ownRepo-filter from the ng-repeat inside the index.html. If you want to do it thoroughly, remove the assets/scripts/filter/own-repo.js as well.
If you have any question, open an issue or contact me via twitter: @herschel_r

from  https://github.com/herschel666/angular-gh-page
这其实也是个建站程序。