Added "Contribute" page with active issues

_data/navigation.yml

@@ -32,3 +32,14 @@
   url: /blog/
 - title: FAQ
   url: /faq
+- title: Contributing
+  subnav:
+      - items:
+          - title: Babel
+            url: /contributing/babel
+          - title: Babel Preset Env
+            url: /contributing/babel-preset-env
+          - title: Babili
+            url: /contributing/babili
+          - title: Babylon
+            url: /contributing/babylon

_includes/header.html

@@ -19,8 +19,20 @@
     <nav id="babel-navbar" class="collapse navbar-collapse babel-navbar">
       <ul class="nav navbar-nav">
         {% for item in site.data.navigation %}
+          {% if item.url %}
+            {% assign active_part = item.url %}
+          {% else %}
+            {% assign active_part = item.title | downcase %}
+          {% endif %}
+
+          {% if page.url contains active_part %}
+            {% assign top_active_class = "active" %}
+          {% else %}
+            {% assign top_active_class = "" %}
+          {% endif %}
+
           {% if item.subnav %}
-            <li class="dropdown {% if page.url contains item.url %}active{% endif %}">
+            <li class="dropdown {{ top_active_class }}">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ item.title }} <span class="caret"></span></a>
               <ul class="dropdown-menu" role="menu">
                 {% for group in item.subnav %}
@@ -30,8 +42,7 @@
                   {% endif %}
 
                   {% for item in group.items %}
-
-                    <li {% if page.url contains item.url %}class="active"{% endif %}>
+                    <li class="{% if page.url == item.url %}active{% endif %}">
                       <a href="{{ item.url | prepend: site.baseurl }}">{{ item.title }}</a>
                     </li>
                   {% endfor %}
@@ -40,7 +51,7 @@
               </ul>
             </li>
           {% else %}
-            <li {% if page.url contains item.url %}class="active"{% endif %}>
+            <li class="{{ top_active_class }}">
               <a href="{{ item.url | prepend: site.baseurl }}">{{ item.title }}</a>
             </li>
           {% endif %}

_includes/open-issues.html

@@ -0,0 +1,20 @@
+<h2>Open Issues</h2>
+
+<div class="open-issues">
+  <div class="open-issues-section open-issues-section--beginner">
+    <div class="open-issues-section__content">
+      <div class="open-issues-section__title">
+        Beginner Friendly
+      </div>
+      <ul class="issues"></ul>
+    </div>
+  </div>
+  <div class="open-issues-section open-issues-section--help-wanted">
+    <div class="open-issues-section__content">
+      <div class="open-issues-section__title">
+        Help Wanted
+      </div>
+      <ul class="issues"></ul>
+    </div>
+  </div>
+</div>

_sass/_main.scss

@@ -84,3 +84,4 @@ body {
 @import "pages/_repl.scss";
 @import "pages/_tools.scss";
 @import "pages/_search.scss";
+@import "pages/_contributing.scss";

_sass/pages/_contributing.scss

@@ -0,0 +1,63 @@
+.open-issues {
+  @include flexbox;
+  @include flex-direction(column);
+  background: #F9F9F9;
+  margin-bottom: 48px;
+
+  @media (min-width: $screen-md-min) {
+    @include flex-direction(row);
+  }
+
+  h2 {
+    font-size: 2rem;
+    margin: 0;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+  }
+}
+
+.open-issues-section {
+  @include align-self(stretch);
+  @include flex(1);
+  @include flexbox;
+  margin: 12px;
+
+  &__content {
+    @include flex(1);
+    background: #FFF;
+    padding: 24px;
+  }
+
+  &__title {
+    border-bottom: 1px solid #EEE;
+    font-size: 2rem;
+    font-weight: 700;
+    padding-bottom: 9px;
+  }
+}
+
+.issue {
+  margin: 12px 0;
+
+  a {
+    @include align-items(flex-start);
+    @include flexbox;
+    color: #323330;
+  }
+
+  &__number {
+    background-color: #f5da55;
+    display: inline-block;
+    margin-right: 8px;
+    min-width: 48px;
+    padding: 3px 5px;
+    text-align: right;
+  }
+
+  &__title {
+    padding-top: 3px;
+  }
+}

docs/contributing/babel-preset-env.md

@@ -0,0 +1,12 @@
+---
+layout: docs
+title: Contributing
+description: Contributing to Babel Preset Env
+permalink: /contributing/babel-preset-env
+custom_js_with_timestamps:
+- contributing.js
+---
+
+{% include open-issues.html %}
+
+{% include babel-preset-env/CONTRIBUTING.md %}

docs/contributing/babel.md

@@ -0,0 +1,12 @@
+---
+layout: docs
+title: Contributing
+description: Contributing to Babel
+permalink: /contributing/babel
+custom_js_with_timestamps:
+  - contributing.js
+---
+
+{% include open-issues.html %}
+
+{% include babel/CONTRIBUTING.md %}

docs/contributing/babili.md

@@ -0,0 +1,12 @@
+---
+layout: docs
+title: Contributing
+description: Contributing to Babili
+permalink: /contributing/babili
+custom_js_with_timestamps:
+- contributing.js
+---
+
+{% include open-issues.html %}
+
+{% include babili/CONTRIBUTING.md %}

docs/contributing/babylon.md

@@ -0,0 +1,12 @@
+---
+layout: docs
+title: Contributing
+description: Contributing to Babylon
+permalink: /contributing/babylon
+custom_js_with_timestamps:
+- contributing.js
+---
+
+{% include open-issues.html %}
+
+{% include babylon/CONTRIBUTING.md %}

scripts/contributing.js

@@ -0,0 +1,66 @@
+/* global jQuery*/
+
+(function($){
+    var githubIssuesEndpoint;
+    var githubHTMLBeginnerFriendlyURL;
+    var githubHTMLHelpWantedURL;
+
+    switch(window.location.pathname){
+        case "/contributing/babel":
+            githubIssuesEndpoint = 'https://api.github.com/repos/babel/babel/issues';
+            githubHTMLBeginnerFriendlyURL = "https://github.com/babel/babel/labels/beginner-friendly";
+            githubHTMLHelpWantedURL = "https://github.com/babel/babel/labels/help%20wanted";
+            break;
+        case "/contributing/babili":
+            githubIssuesEndpoint = 'https://api.github.com/repos/babel/babili/issues';
+            githubHTMLBeginnerFriendlyURL = "https://github.com/babel/babili/labels/beginner-friendly";
+            githubHTMLHelpWantedURL = "https://github.com/babel/babili/labels/help%20wanted";
+            break;
+        case "/contributing/babylon":
+            githubIssuesEndpoint = 'https://api.github.com/repos/babel/babylon/issues';
+            githubHTMLBeginnerFriendlyURL = "https://github.com/babel/babylon/labels/beginner-friendly";
+            githubHTMLHelpWantedURL = "https://github.com/babel/babylon/labels/help%20wanted";
+            break;
+        case "/contributing/babel-preset-env":
+            githubIssuesEndpoint = 'https://api.github.com/repos/babel/babel-preset-env/issues';
+            githubHTMLBeginnerFriendlyURL = "https://github.com/babel/babel-preset-env/labels/beginner-friendly";
+            githubHTMLHelpWantedURL = "https://github.com/babel/babel-preset-env/labels/help%20wanted";
+            break;
+        default:
+            throw "no github endpoint available for " + window.location.pathname;
+            break;
+    }
+
+    $.ajax(githubIssuesEndpoint, {
+            data: {
+                labels: 'beginner-friendly'
+            },
+            success: function(data){
+                for(var i = 0; i < data.length; i++){
+                    $('.open-issues-section--beginner .issues').append('<li class="issue"><a href="' + data[i].html_url + '"><span class="issue__number">#' + data[i].number +'</span><span class="issue__title">' + data[i].title + '</span></a></li>');
+                }
+            },
+            error : function(xhr, status, error){
+                $('.open-issues-section--beginner .issues').append('<li><a href="' + githubHTMLBeginnerFriendlyURL + '"><span>Failed to load issues. View Beginner-Friendly issues on Github.</span></a></li>');
+                throw error;
+            }
+        }
+    );
+
+    $.ajax(githubIssuesEndpoint, {
+            data: {
+                labels: 'help wanted'
+            },
+            success: function(data){
+                for(var i = 0; i < data.length; i++){
+                    $('.open-issues-section--help-wanted .issues').append('<li class="issue"><a href="' + data[i].html_url + '"><span class="issue__number">#' + data[i].number +'</span><span class="issue__title">' + data[i].title + '</span></a></li>');
+                }
+            },
+            error: function(xhr, status, error){
+                $('.open-issues-section--help-wanted .issues').append('<li><a href="' + githubHTMLHelpWantedURL + '"><span>Failed to load issues. View Help-Wanted issues on Github.</span></a></li>');
+                throw error;
+            }
+        }
+    );
+
+})(jQuery);