Reverted style changes, fixed tutorial section and added TOC

Author: Emma Brand

_config.yml

@@ -5,6 +5,9 @@ keywords: san diego, robotics, robosub, san diego city college, robotics team
 currentlocation: San Diego City Robotics Club, 1313 Park Blvd, San Diego, CA 92101
 email: [email protected]
 
-permalink: /news/:title
+permalink: /blog/:title
 excerpt_separator: <!--more-->
-markdown: kramdown
+markdown: kramdown
+
+collections:
+  - tutorials

_data/navigation.yml

@@ -10,8 +10,8 @@
 - page: Sponsors
   url: /sponsors
 
-- page: Code
-  url: /tutorial
+- page: Tutorials
+  url: /tutorials
 
 - page: Contact
   url: /contact

_includes/news-sidebar.html renamed to _includes/sidebar.html

@@ -6,7 +6,9 @@ <h3>Recent Posts</h3>
             <a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a><br/>
         {% endfor %}
     </section>
+    
     <hr />
+    
     <section id="js-topics">
         <h3>Topics</h3>
         {% for category in site.categories %}

_includes/toc.html

@@ -0,0 +1,87 @@
+{% capture tocWorkspace %}
+    {% comment %}
+        Version 1.0.6
+          https://github.com/allejo/jekyll-toc
+
+        "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
+
+        Usage:
+            {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
+
+        Parameters:
+            * html         (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+
+        Optional Parameters:
+            * sanitize     (bool)   : false  - when set to true, the headers will be stripped of any HTML in the TOC
+            * class        (string) :   ''   - a CSS class assigned to the TOC
+            * id           (string) :   ''   - an ID to assigned to the TOC
+            * h_min        (int)    :   1    - the minimum TOC header level to use; any header lower than this value will be ignored
+            * h_max        (int)    :   6    - the maximum TOC header level to use; any header greater than this value will be ignored
+            * ordered      (bool)   : false  - when set to true, an ordered list will be outputted instead of an unordered list
+            * item_class   (string) :   ''   - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level
+            * baseurl      (string) :   ''   - add a base url to the TOC links for when your TOC is on another page than the actual content
+            * anchor_class (string) :   ''   - add custom class(es) for each anchor element
+
+        Output:
+            An ordered or unordered list representing the table of contents of a markdown block. This snippet will only
+            generate the table of contents and will NOT output the markdown given to it
+    {% endcomment %}
+
+    {% capture my_toc %}{% endcapture %}
+    {% assign orderedList = include.ordered | default: false %}
+    {% assign minHeader = include.h_min | default: 1 %}
+    {% assign maxHeader = include.h_max | default: 6 %}
+    {% assign nodes = include.html | split: '<h' %}
+    {% assign firstHeader = true %}
+
+    {% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
+
+    {% for node in nodes %}
+        {% if node == "" %}
+            {% continue %}
+        {% endif %}
+
+        {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
+
+        {% if headerLevel < minHeader or headerLevel > maxHeader %}
+            {% continue %}
+        {% endif %}
+
+        {% if firstHeader %}
+            {% assign firstHeader = false %}
+            {% assign minHeader = headerLevel %}
+        {% endif %}
+
+        {% assign indentAmount = headerLevel | minus: minHeader | add: 1 %}
+        {% assign _workspace = node | split: '</h' %}
+
+        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+        {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+        {% assign html_id = _idWorkspace[0] %}
+
+        {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+        {% assign space = '' %}
+        {% for i in (1..indentAmount) %}
+            {% assign space = space | prepend: '    ' %}
+        {% endfor %}
+
+        {% unless include.item_class == blank %}
+            {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
+        {% endunless %}
+
+        {% capture my_toc %}{{ my_toc }}
+{{ space }}{{ listModifier }} {{ listItemClass }} [{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}
+    {% endfor %}
+
+    {% if include.class %}
+        {% capture my_toc %}{:.{{ include.class }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+
+    {% if include.id %}
+        {% capture my_toc %}{: #{{ include.id }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+{% endcapture %}{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }}

_layouts/content.html

@@ -34,4 +34,7 @@ <h2 class="text-center">{{ page.subtitle }}</h2>
 
 		{% endif %}
 	</div>
-</article>
+</article>
+<div id="scrolltop">
+	<i class="mdi mdi-48px mdi-arrow-up-drop-circle"></i>
+</div>

_layouts/left-sidebar.html

@@ -4,11 +4,7 @@
 <div class="row">
     <div class="col-12 col-md-4">
 
-        {% if page.id %}
-            {% include news-sidebar.html %}
-        {% else %}
-            {% include {{ page.sidebar }} %}
-        {% endif %}
+        {% include sidebar.html %}
 
     </div>
     <div class="col-12 col-md-8">

_layouts/posts.html

@@ -2,6 +2,7 @@
 layout: content
 ---
 <article class="post">
-  <h1 class="post-title">{{ page.title }}</h1>
+
   {{ content }}
+
 </article>

_layouts/right-sidebar.html

@@ -16,11 +16,7 @@
     </div>
     <div class="col-12 col-md-4">
 
-        {% if page.id %}
-            {% include news-sidebar.html %}
-        {% else %}
-            {% include {{ page.sidebar }} %}
-        {% endif %}
+        {% include sidebar.html %}
 
     </div>
 </div>

_layouts/tutorial.html

@@ -0,0 +1,7 @@
+---
+layout: content
+---
+
+{% include toc.html html=content baseurl=page.url %}
+
+{{ content }}

_posts/2018-10-26-robotics-while-loop.md renamed to _tutorials/2018-10-26-robotics-while-loop.md

@@ -1,11 +1,9 @@
 ---
-layout: posts
-title: "Robotics while loop"
-toc: true
-catagotries: [tutorial, code]
 ---
 
-# python tutorial 1
+# Python Tutorial 1
+
+## Robotics while loop
 
 The while loop is a convenient way to do the same task over and over again. This
 comes up a lot in robotics, where it is often desirable to let something run in

_posts/2018-11-19-github-contributing.md renamed to _tutorials/2018-11-19-github-contributing.md

@@ -1,16 +1,16 @@
 ---
-layout: content
-title: "Contributing using github"
-toc: true
-catagotries: [tutorial, code]
 ---
 
+# Contributing using GitHub
+
 In order to contribute to Zoidberg code it is first necessary to get a Github account. This is simple to do at [Github](http://github.com/). This tutorial covers version control using the program git, which is a command line tool. There are other tools to to do the same thing which use a GUI, but they may use other workflows which could mess up the repository.
 
 ## Fork and Pull workflow
 
 To get a better understanding of Git and the process we'll be using, check out these guides on the Fork and Pull workflow.
 
+<!--more-->
+
 - [general GitHub guides](https://guides.github.com/)
 - [a good rundown on the Fork and Pull workflow](https://gist.github.com/Chaser324/ce0505fbed06b947d962). This is the source of much of the information on this page.
 - [Git stash](https://git-scm.com/book/en/v1/Git-Tools-Stashing)

news/index.html renamed to blog/index.html

@@ -1,13 +1,10 @@
 ---
 layout: right-sidebar
-title: News
-subtitle: News subtitle
-permalink: /news
-sidebar: news-sidebar.html
+title: Blog
+subtitle: Read about what we're doing, learn how to contribute, and more!
+permalink: /blog
 ---
 
-<link rel="stylesheet" href="/css/blog.css" />
-
 {% for post in site.posts %}
 
 <section class="blog-posts {% for topic in post.categories %}{{ topic }} {% endfor %}">

code_tutorial.md

@@ -5,6 +5,7 @@ padding: 0;
 margin: 0;
 width: 100vw;
 overflow-x: hidden;
+scroll-behavior: smooth;
 }
 
 * {
@@ -562,4 +563,42 @@ left: -3px
 }
 .b-lazy.b-loaded {
             opacity: 1;
+}
+
+.code, code, pre {
+    color: #fff !important;
+}
+
+code table .gutter {
+    min-width: 2em;
+}
+
+.gutter pre {
+    color: #09F !important;
+}
+
+section.blog-posts {
+    display:none;
+}
+#js-topics a:hover {
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.post-title, #sidebar section a {
+    text-transform: capitalize;
+}
+
+#scrolltop {
+    position: fixed;
+    opacity: 0;
+    bottom: 50px;
+    right: 50px;
+    cursor: pointer;
+    -webkit-transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.5s ease-in-out;
+}
+
+#scrolltop.up {
+    opacity: 0.3;
 }

css/blog.css

@@ -1,6 +1,6 @@
 $("#js-topics").on("click", "a", function(){
     var topic = $(this).attr('data-topic');
-    history.pushState(null, null, "/news/#" + topic);
+    history.pushState(null, null, "/tutorials/#" + topic);
     showTopic(topic);
 });
 

css/styles.css

@@ -14,16 +14,19 @@ $(function() {
         return;
       }
 
+      if (st > 100) {
+        $('#scrolltop').addClass('up');
+      } else {
+        $('#scrolltop').removeClass('up');
+      }
+
       if (st > lastScrollTop){
         $('header').removeClass('nav-down').addClass('nav-up');
-        $('#scrolltop').removeClass('up');
       } else {
         if(st + $(window).height() < $(document).height() && st >= delta) {
           $('header').removeClass('nav-up').addClass('nav-down');
-          $('#scrolltop').addClass('up');
         } else {
           $('header').removeClass('nav-up').removeClass('nav-down');
-          $('#scrolltop').removeClass('up');
         }
       }
       lastScrollTop = st;
@@ -44,9 +47,7 @@ $(function() {
 
 
     $('#scrolltop').click(function() {
-      $('html, body').animate({
-        scrollTop: 0
-      }, 1000);
+      $('html, body').scrollTop(0);
     });
 
     $('body').on('click','a.next',function(){
@@ -72,4 +73,5 @@ $(function() {
         $(this).attr('data-src','');
       }
     });
-  }
+  }
+  

js/blog.js

@@ -0,0 +1,10 @@
+---
+layout: tutorial
+title: Code Tutorials
+---
+	  
+{% for tutorial in site.tutorials %}
+
+    {{tutorial}}
+
+{% endfor %}