Introduce jekyll-toc (#15)

* Add jekyll toc

* Update jekyll-toc

* Set toc levels limit

* Add toc tag

* gem 'jekyll-toc', '0.12.0.rc3'

* jekyll-toc update

* Update style

* toc styling

* Update rails submodule

* Update jekyll-toc

Author: toshimaru

Gemfile

@@ -4,4 +4,5 @@ gem 'rake'
 
 group :jekyll_plugins do
   gem 'github-pages'
+  gem 'jekyll-toc'
 end

Gemfile.lock

@@ -185,6 +185,8 @@ GEM
       jekyll-seo-tag (~> 2.0)
     jekyll-titles-from-headings (0.5.1)
       jekyll (~> 3.3)
+    jekyll-toc (0.12.1)
+      nokogiri (~> 1.9)
     jekyll-watch (2.1.2)
       listen (~> 3.0)
     jemoji (0.10.2)
@@ -205,7 +207,7 @@ GEM
       jekyll-seo-tag (~> 2.1)
     minitest (5.11.3)
     multipart-post (2.0.0)
-    nokogiri (1.10.1)
+    nokogiri (1.10.2)
       mini_portile2 (~> 2.4.0)
     octokit (4.13.0)
       sawyer (~> 0.8.0, >= 0.5.3)
@@ -244,6 +246,7 @@ PLATFORMS
 
 DEPENDENCIES
   github-pages
+  jekyll-toc
   rake
 
 BUNDLED WITH

_config.yml

@@ -8,8 +8,12 @@ plugins:
   - jekyll-sitemap
 twitter:
   card: summary
+toc:
+  min_level: 2
+  max_level: 5
 defaults:
   - scope:
       path: ""
     values:
       image: https://avatars.githubusercontent.com/u/4223
+      toc: true

rails

@@ -41,11 +41,11 @@
         </div>
       </nav>
 
-      <!-- <div class="col-12 col-md-3 col-xl-2 bg-light toc-content">
-        <div>toc-content!</div>
-      </div> -->
+      <div class="col-12 col-md-3 col-xl-2 toc-content-sticky">
+        <div class="toc-content">{% toc %}</div>
+      </div>
 
-      <main role="main" class="col-12 col-md-9 col-xl-10 py-md-3 pl-md-5">
+      <main role="main" class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5">
         {{ content }}
         <footer class="site-footer">
           <!-- <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span> -->

src/_layouts/default.html

@@ -44,11 +44,41 @@ code {
   }
 }
 
-.toc-content {
+.toc-content-sticky {
   position: sticky;
   order: 2;
+  top: $navbar-height;
+  height: calc(100vh - #{$navbar-height});
   z-index: 100; /* Behind the navbar */
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+
+  .toc-content {
+    padding-top: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.section-nav {
+  padding-left: 1rem;
+  border-left: 1px solid #eee;
+  
+  ul {
+    padding-left: 1rem;
+  }
+
+  a {
+    color: rgba(0, 0, 0, .8);
+
+    &:hover {
+      color: $dark-red;
+      text-decoration: none;
+    }
+  }
+}
+
+.toc-entry {
+  display: block;
 }
 
 .sidebar-content {