KzeMdV

index.html

<div class="jumbotron">
  <h1 class="text-center">handbook</h1>
</div>

<div ng-app="handbook" ng-controller="TabController">

  <ul class="nav nav-tabs nav-justified">
    <li><a href ng-click="setTab(1)">Explore</a></li>
    <li><a href ng-click="setTab(2)">Read</a></li>
    <li><a href ng-click="setTab(3)">Rectify</a></li>
  </ul>

  <div class="container">

    <section ng-show="tab == 1" ng-controller="ExploreController">
      <h2>Current Topic: </h2>
      <ol class="breadcrumb">
        <li>handbook</li>
        <li ng-repeat="entry in path.split('/')">{{entry}}</li>
      </ol>
      <hr>
      <div ng-if="path != '' ">
        <a href ng-click="setPath(path.split('/').slice(0,-1).join('/'))">Back</a>
        <hr>
      </div>
      <h2 ng-if="subTopics != '' ">Sub-Topics</h2>
      <ul ng-repeat="entry in subTopics" class="replace">
        <li><a href ng-click="setPath(entry.path)">{{ entry.name }}</a></li>
      </ul>
      <h2 ng-if="books != '' ">Books</h2>
      <ul ng-repeat="entry in books" class="replace">
        <li><a href ng-click="setFile(entry.path); setTab(2)">{{ entry.name }}</a></li>
      </ul>
    </section>

    <section ng-show="tab == 2" ng-controller="FileController">
      <h2>Current Book: </h2>
      <ol class="breadcrumb">
        <li>handbook</li>
        <li ng-repeat="entry in filePath.split('/')">{{entry}}</li>
      </ol>
      <div id="book"></div>
    </section>
    
    <section ng-show="tab == 3">
      <h2>Coming Soon!</h2>
    </section>
    
  </div>

</div>

KzeMdV.markdown

KzeMdV

A Pen by Ujjwal Sharma on CodePen.

License.

script.js

var api = 'https://api.github.com/repos/ryzokuken/pixel-dungeon/contents';

var back = '?client_id=188f08251b2c44ea2b6a&client_secret=73b59f09e3620726ce1e42a7f45f4192f98e9a3e';

angular.module('handbook', [])

.controller('ExploreController', function($scope, $http) {
  $scope.path = '';
  $scope.subTopics = [];
  $scope.books = [];
  $scope.getData = function() {
    $scope.subTopics = [{
      name: 'Loading'
    }];
    $scope.books = [{
      name: 'Loading'
    }];
    $http.get(api + $scope.path + back).success(function(response) {
      $scope.subTopics = [];
      $scope.books = [];
      var data = response;
      for (var i = 0; i < data.length; i++) {
        if (data[i].type == 'dir') {
          $scope.subTopics.push(data[i]);
        } else if (data[i].type == 'file') {
          $scope.books.push(data[i]);
        }
      }
    });
  }
  $scope.setPath = function(path) {
    $scope.path = path;
    $scope.getData();
  }
  $scope.getData();
})

.controller('FileController', function($scope, $rootScope, $http) {
  $rootScope.filePath = 'README.md';
  $rootScope.setFile = function(path) {
    $('#book').html('<h1>Loading</h1>');
    $rootScope.filePath = path;
    $http({
      method: 'GET',
      url: api + $scope.filePath + back,
      headers: {
        'Accept': 'application/vnd.github.v3.html+json'
      }
    }).success(function(data) {
      $('#book').html(data);
    });
    $http({
      method: 'GET',
      url: api + $scope.filePath + back,
      headers: {
        'Accept': 'application/vnd.github.v3.raw+json'
      }
    }).success(function(data) {
      $rootScope.editContents = data;
    });
  };
  $rootScope.setFile('README.md');
})

.controller('TabController', function($scope) {
  $scope.tab = 1;
  $scope.setTab = function(tab) {
    $scope.tab = tab;
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.css

body {
  font-family: Helvetica;
}
.dir {
  color: red;
}
.file {
  color: blue;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />