Merge pull request #6879 from FreeCodeCamp/feature/wiki-sidebar

Add Wiki Sidebar, Use Gatsby Generated Wiki

client/less/main.less

@@ -1121,3 +1121,4 @@ code {
 @import "challenge.less";
 @import "toastr.less";
 @import "map.less";
+@import "wiki.less";

client/less/wiki.less

@@ -0,0 +1,176 @@
+/*
+ * based off of https://github.com/gitterHQ/sidecar
+ * license: MIT
+ */
+ 
+#wikiFrame {
+    width: 100%;
+    height: 100%;
+    padding-top: 30px;
+    top:0;
+    bottom: 0;
+    position: absolute;
+    overflow: hidden;
+}
+
+.wiki-aside {
+    width:500px;
+
+    z-index: 20000;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+
+    display: flex;
+    flex-direction: row;
+
+    background-color: @body-bg;
+    border-left: 1px solid #ddd;
+    box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.1);
+
+    transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7);
+
+    &.is-collapsed {
+      transform: translateX(110%);
+    }
+
+    /* Add some "extension" so that there isn't a gap
+     * when we translate(via animation) more than 100% */
+    &:after {
+      content: '';
+
+      z-index: -1;
+      position: absolute;
+      top: 0;
+      left: 100%;
+      bottom: 0;
+      right: -100%;
+
+      background-color: @body-bg;
+    }
+
+    & > iframe {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      overflow: scroll;
+      -webkit-overflow-scrolling: touch;
+    }
+}
+
+.wiki-aside .wiki-header {
+  display: none;
+}
+
+.wiki-aside .wiki-container {
+  padding-top: 10px;
+}
+
+.wiki-aside .wikiSelector {
+  top: 50px;
+}
+
+.wiki-aside-action-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    display: flex;
+    justify-content: flex-end;
+
+    padding-bottom: 5px;
+    padding-right:10px;
+    padding-top:5px;
+    z-index: 100;
+}
+
+.wiki-fixed-header {
+  position: fixed;
+  background: white;
+  padding-top: 5px;
+  width: 100%;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  @media (max-width: 720px) {
+    padding-top:30px;
+  }
+  p {
+  margin: 5px 0 20px;
+    @media (max-width: 720px) {
+      margin-bottom:10px;
+    }
+  }
+  hr {
+    margin:30px 0;
+    @media (max-width: 720px) {
+      margin:25px 0;
+    }
+  }
+ }
+
+.wiki-buttons {
+  margin-top: -10px;
+  & button,
+  & .input-group{
+    width:300px;
+  }
+  .input-group{
+    margin-top: 15px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+#wiki-filter {
+    background:#fff;
+    border-color: darkgreen;
+}
+
+.wiki-aside-action-item {
+    display: flex;
+    /* main axis */
+    justify-content: center;
+    /* cross axis */
+    align-items: center;
+
+    width: 40px;
+    height: 40px;
+
+    padding-left: 0;
+    padding-right: 0;
+
+    opacity: 0.65;
+    background: none;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 22px 22px;
+    border: 0;
+    outline: none;
+
+    cursor: pointer;
+    cursor: hand;
+
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+
+    &:active {
+      filter: hue-rotate(80deg) saturate(150);
+    }
+}
+
+.wiki-aside-action-pop-out {
+    margin-right: -4px;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcxLjQyOSIgZmlsbD0iIzNhMzEzMyI+PHBhdGggZD0iTTE1Ny4xNDMsMTAzLjU3MXYzNS43MTRjMCw4Ljg1NC0zLjE0NCwxNi40MjYtOS40MzEsMjIuNzEzcy0xMy44NTgsOS40MzEtMjIuNzEyLDkuNDMxSDMyLjE0MyBjLTguODU0LDAtMTYuNDI1LTMuMTQ0LTIyLjcxMi05LjQzMVMwLDE0OC4xNCwwLDEzOS4yODVWNDYuNDI5YzAtOC44NTQsMy4xNDQtMTYuNDI1LDkuNDMxLTIyLjcxMiBjNi4yODctNi4yODcsMTMuODU4LTkuNDMxLDIyLjcxMi05LjQzMWg3OC41NzJjMS4wNDEsMCwxLjg5NiwwLjMzNSwyLjU2NiwxLjAwNGMwLjY3LDAuNjcsMS4wMDQsMS41MjUsMS4wMDQsMi41NjdWMjUgYzAsMS4wNDItMC4zMzQsMS44OTctMS4wMDQsMi41NjdjLTAuNjcsMC42Ny0xLjUyNSwxLjAwNC0yLjU2NiwxLjAwNEgzMi4xNDNjLTQuOTExLDAtOS4xMTUsMS43NDktMTIuNjEyLDUuMjQ2IHMtNS4yNDYsNy43MDEtNS4yNDYsMTIuNjEydjkyLjg1NmMwLDQuOTExLDEuNzQ5LDkuMTE1LDUuMjQ2LDEyLjYxMnM3LjcwMSw1LjI0NSwxMi42MTIsNS4yNDVIMTI1YzQuOTEsMCw5LjExNS0xLjc0OCwxMi42MTEtNS4yNDUgYzMuNDk3LTMuNDk3LDUuMjQ2LTcuNzAxLDUuMjQ2LTEyLjYxMnYtMzUuNzE0YzAtMS4wNDIsMC4zMzQtMS44OTcsMS4wMDQtMi41NjdjMC42Ny0wLjY2OSwxLjUyNS0xLjAwNCwyLjU2Ny0xLjAwNGg3LjE0MyBjMS4wNDIsMCwxLjg5NywwLjMzNSwyLjU2NywxLjAwNEMxNTYuODA5LDEwMS42NzQsMTU3LjE0MywxMDIuNTI5LDE1Ny4xNDMsMTAzLjU3MXogTTIwMCw3LjE0M3Y1Ny4xNDMgYzAsMS45MzUtMC43MDcsMy42MDktMi4xMjEsNS4wMjJjLTEuNDEzLDEuNDE0LTMuMDg4LDIuMTIxLTUuMDIxLDIuMTIxYy0xLjkzNSwwLTMuNjA5LTAuNzA3LTUuMDIyLTIuMTIxbC0xOS42NDQtMTkuNjQzIGwtNzIuNzY3LDcyLjc2OWMtMC43NDQsMC43NDQtMS42LDEuMTE1LTIuNTY3LDEuMTE1cy0xLjgyMy0wLjM3MS0yLjU2Ny0xLjExNUw3Ny41NjcsMTA5LjcxYy0wLjc0NC0wLjc0NC0xLjExNi0xLjYtMS4xMTYtMi41NjcgYzAtMC45NjcsMC4zNzItMS44MjIsMS4xMTYtMi41NjZsNzIuNzY4LTcyLjc2OGwtMTkuNjQ0LTE5LjY0M2MtMS40MTMtMS40MTQtMi4xMi0zLjA4OC0yLjEyLTUuMDIyYzAtMS45MzUsMC43MDctMy42MDksMi4xMi01LjAyMiBDMTMyLjEwNSwwLjcwNywxMzMuNzc5LDAsMTM1LjcxNSwwaDU3LjE0M2MxLjkzNCwwLDMuNjA4LDAuNzA3LDUuMDIxLDIuMTIxQzE5OS4yOTMsMy41MzQsMjAwLDUuMjA4LDIwMCw3LjE0M3oiLz48L3N2Zz4=)
+}
+
+.wiki-aside-action-collapse {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzEuNDI5IDE3MS40MjkiIGZpbGw9IiMzYTMxMzMiPjxwYXRoIGQ9Ik0xMjIuNDMzLDEwNi4xMzhsLTE2LjI5NSwxNi4yOTVjLTAuNzQ0LDAuNzQ0LTEuNiwxLjExNi0yLjU2NiwxLjExNmMtMC45NjgsMC0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTUuMjktMTUuMjkgbC0xNS4yOSwxNS4yOWMtMC43NDQsMC43NDQtMS42LDEuMTE2LTIuNTY3LDEuMTE2cy0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTYuMjk0LTE2LjI5NWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY2IGMwLTAuOTY4LDAuMzcyLTEuODIzLDEuMTE2LTIuNTY3bDE1LjI5LTE1LjI5bC0xNS4yOS0xNS4yOWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY3czAuMzcyLTEuODIzLDEuMTE2LTIuNTY3IEw2NS4yOSw0OC45OTZjMC43NDQtMC43NDQsMS42LTEuMTE2LDIuNTY3LTEuMTE2czEuODIzLDAuMzcyLDIuNTY3LDEuMTE2bDE1LjI5LDE1LjI5bDE1LjI5LTE1LjI5IGMwLjc0NC0wLjc0NCwxLjYtMS4xMTYsMi41NjctMS4xMTZjMC45NjcsMCwxLjgyMiwwLjM3MiwyLjU2NiwxLjExNmwxNi4yOTUsMTYuMjk0YzAuNzQ0LDAuNzQ0LDEuMTE2LDEuNiwxLjExNiwyLjU2NyBzLTAuMzcyLDEuODIzLTEuMTE2LDIuNTY3bC0xNS4yOSwxNS4yOWwxNS4yOSwxNS4yOWMwLjc0NCwwLjc0NCwxLjExNiwxLjYsMS4xMTYsMi41NjcgQzEyMy41NDksMTA0LjUzOSwxMjMuMTc3LDEwNS4zOTQsMTIyLjQzMywxMDYuMTM4eiBNMTQ2LjQyOSw4NS43MTRjMC0xMS4wMTItMi43MTctMjEuMTY4LTguMTQ4LTMwLjQ2OSBzLTEyLjc5Ny0xNi42NjctMjIuMDk4LTIyLjA5OFM5Ni43MjYsMjUsODUuNzE0LDI1cy0yMS4xNjgsMi43MTYtMzAuNDY5LDguMTQ3UzM4LjU3OSw0NS45NDUsMzMuMTQ3LDU1LjI0NlMyNSw3NC43MDMsMjUsODUuNzE0IHMyLjcxNiwyMS4xNjgsOC4xNDcsMzAuNDY5czEyLjc5NywxNi42NjYsMjIuMDk4LDIyLjA5OHMxOS40NTcsOC4xNDgsMzAuNDY5LDguMTQ4czIxLjE2OC0yLjcxNywzMC40NjktOC4xNDggczE2LjY2Ni0xMi43OTcsMjIuMDk4LTIyLjA5OFMxNDYuNDI5LDk2LjcyNiwxNDYuNDI5LDg1LjcxNHogTTE3MS40MjksODUuNzE0YzAsMTUuNTUxLTMuODMyLDI5Ljg5My0xMS40OTYsNDMuMDI0IGMtNy42NjQsMTMuMTMzLTE4LjA2MiwyMy41My0zMS4xOTQsMzEuMTk0Yy0xMy4xMzIsNy42NjQtMjcuNDc0LDExLjQ5Ni00My4wMjQsMTEuNDk2cy0yOS44OTItMy44MzItNDMuMDI0LTExLjQ5NiBjLTEzLjEzMy03LjY2NC0yMy41MzEtMTguMDYyLTMxLjE5NC0zMS4xOTRDMy44MzIsMTE1LjYwNywwLDEwMS4yNjUsMCw4NS43MTRTMy44MzIsNTUuODIyLDExLjQ5Niw0Mi42OSBjNy42NjQtMTMuMTMzLDE4LjA2Mi0yMy41MzEsMzEuMTk0LTMxLjE5NEM1NS44MjIsMy44MzIsNzAuMTY0LDAsODUuNzE0LDBzMjkuODkzLDMuODMyLDQzLjAyNCwxMS40OTYgYzEzLjEzMyw3LjY2NCwyMy41MywxOC4wNjIsMzEuMTk0LDMxLjE5NEMxNjcuNTk3LDU1LjgyMiwxNzEuNDI5LDcwLjE2NCwxNzEuNDI5LDg1LjcxNHoiLz48L3N2Zz4=)
+}

client/main.js

@@ -377,6 +377,37 @@ $(document).ready(function() {
     }
   }
 
+  $('#nav-wiki-btn').on('click', toggleWiki);
+
+  $('.wiki-aside-action-collapse').on('click', collapseWiki);
+
+  function showWiki() {
+    if (!main.isWikiAsideLoad) {
+      var lang = window.location.toString().match(/\/\w{2}\//);
+      lang = (lang) ? lang[0] : '/en/';
+      var wikiURL = 'http://freecodecamp.github.io/wiki' + lang;
+      var wikiAside = $('<iframe>');
+      wikiAside.attr('src', wikiURL);
+      $('.wiki-aside').append(wikiAside);
+      main.isWikiAsideLoad = true;
+    }
+    $('.wiki-aside').removeClass('is-collapsed');
+  }
+
+  function collapseWiki() {
+    $('.wiki-aside').addClass('is-collapsed');
+    document.activeElement.blur();
+  }
+
+  function toggleWiki() {
+    var isCollapsed = $('.wiki-aside').hasClass('is-collapsed');
+    if (isCollapsed) {
+      showWiki();
+    } else {
+      collapseWiki();
+    }
+  }
+
   $('#accordion').on('show.bs.collapse', function(e) {
     expandCaret(e.target);
     if ($('a[data-toggle=collapse]').length === $('.fa-caret-down').length) {