webmaker-kits/index.html at gh-pages · mozilla/webmaker-kits · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//stuff.webmaker.org/makerstrap/latest/makerstrap.complete.min.css">
  <title>webmaker-kits</title>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-static-top" role="navigation">

    <div class="container">

      <div class="navbar-header">

        <a class="navbar-brand" href="./">webmaker-kits</a>

      </div>

      <div style="height: 0px;" class="collapse navbar-collapse" collapse="isCollapsed">
        <ul class="nav navbar-nav navbar-right">
          <li><a rel="githubRepoURL" href="https://github.com/mozilla/webmaker-kits"><span class="fa fa-github"></span> <span rel="githubRepo">mozilla/webmaker-kits</span></a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div>
  </nav>

  <main class="container">
    <h3>Loading...</h3>
    <p>If after a few seconds you can still see this, <a href="./README.md">click here</a> for the readme file.</p>
  </main>

  <script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script>
  function githubRepo() {
    var ghUser = location.host.split('.')[0];
    var ghRepo = location.pathname.split('/')[1];
    return ghUser + '/' + ghRepo;
  }

  function githubRepoURL() {
    return 'https://github.com/' + githubRepo();
  }

  $.ajax( './README.md', {
    dataType: 'text',
    success: function( data ) {
      var converter = new Showdown.converter();
      var readme = converter.makeHtml(data);

      // replace content
      $( 'main' ).html( readme );

      // set page/project title
      $( 'head > title' ).text( $( 'h1:first-of-type' ).text() );
      $( '.navbar-brand' ).text( $( 'h1:first-of-type' ).text() );

      // current github user/repo
      if( location.host.match( /github.io$/ ) ) {
        $( '[rel=githubRepo]' ).text( githubRepo() );
        $( '[rel=githubRepoURL]' ).attr( 'href', githubRepoURL() );
      }
    },
    error: function() {
      location.href = githubRepoURL() + '#readme';
    }
  });
  </script>
</body>
</html>