swap kramdown toc for jekyll-toc plugin, update page layout to only show on xl and above

Author: mdo

Gemfile

@@ -4,5 +4,6 @@ group :development, :test do
   gem 'jekyll', '~> 3.4.3'
   gem 'jekyll-redirect-from', '~> 0.12.1'
   gem 'jekyll-sitemap', '~> 1.1.1'
+  gem 'jekyll-toc', '~> 0.3.0.pre1'
   gem 'scss_lint', '~> 0.53.0'
 end

Gemfile.lock

@@ -23,6 +23,8 @@ GEM
       sass (~> 3.4)
     jekyll-sitemap (1.1.1)
       jekyll (~> 3.3)
+    jekyll-toc (0.3.0.pre1)
+      nokogiri (~> 1.6)
     jekyll-watch (1.5.0)
       listen (~> 3.0, < 3.1)
     kramdown (1.13.2)
@@ -31,6 +33,9 @@ GEM
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
     mercenary (0.3.6)
+    mini_portile2 (2.1.0)
+    nokogiri (1.7.2)
+      mini_portile2 (~> 2.1.0)
     pathutil (0.14.0)
       forwardable-extended (~> 2.6)
     public_suffix (2.0.5)
@@ -52,6 +57,7 @@ DEPENDENCIES
   jekyll (~> 3.4.3)
   jekyll-redirect-from (~> 0.12.1)
   jekyll-sitemap (~> 1.1.1)
+  jekyll-toc (~> 0.3.0.pre1)
   scss_lint (~> 0.53.0)
 
 BUNDLED WITH

_config.yml

@@ -21,6 +21,7 @@ exclude:          [assets/scss/]
 gems:
   - jekyll-redirect-from
   - jekyll-sitemap
+  - jekyll-toc
 
 # Social
 title: Bootstrap

docs/_layouts/docs.html

@@ -17,12 +17,18 @@
         <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
           {% include nav-docs.html %}
         </div>
-        <main class="col-12 col-md-9 col-xl-auto py-md-3 pl-md-5 bd-content" role="main">
+        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
           <h1 class="bd-title" id="content">{{ page.title }}</h1>
           <p class="bd-lead">{{ page.description }}</p>
           {% include ads.html %}
           {{ content }}
         </main>
+
+        {% if page.toc %}
+          <div class="d-none d-xl-block col-xl-2 bd-toc">
+            {{ content | toc_only }}
+          </div>
+        {% endif %}
       </div>
     </div>
 

docs/assets/scss/_content.scss

@@ -5,32 +5,6 @@
 //
 
 .bd-content {
-  @include media-breakpoint-up(xl) {
-    flex: 1;
-    padding-right: 20%;
-
-    #contents {
-      display: none;
-    }
-    #markdown-toc {
-      position: fixed;
-      top: 5rem;
-      right: 0;
-      width: 20%;
-      max-height: calc(100vh - 8rem);
-      padding-right: 1.5rem;
-      padding-left: 3rem;
-      overflow-y: auto;
-      font-size: .85rem;
-    }
-  }
-
-  @media (min-width: 2000px) {
-    #markdown-toc {
-      padding-left: 6rem;
-    }
-  }
-
   // Hack the sticky header
   h2[id],
   h3[id] {
@@ -126,21 +100,3 @@
     font-weight: 300;
   }
 }
-
-
-//
-// Markdown generated ToC
-//
-
-#markdown-toc {
-  // Hide the first child li because it's always going to be "Contents".
-  > li:first-child {
-    display: none;
-  }
-
-  ul {
-    padding-left: 2rem;
-    margin-top: .25rem;
-    margin-bottom: .25rem;
-  }
-}

docs/assets/scss/_sidebar.scss

@@ -4,6 +4,40 @@
 // Side navigation
 //
 
+.bd-toc {
+  position: sticky;
+  top: 4rem;
+  max-height: calc(100vh - 4rem);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  overflow-y: auto;
+  font-size: .85rem;
+}
+
+.section-nav {
+  padding-left: 0;
+  border-left: 1px solid #eee;
+
+  ul {
+    padding-left: 1rem;
+  }
+}
+
+.toc-entry {
+  display: block;
+
+  a {
+    display: block;
+    padding: .25rem 1.5rem;
+    color: #99979c;
+
+    &:hover {
+      color: $brand-primary;
+      text-decoration: none;
+    }
+  }
+}
+
 .bd-sidebar {
   background-color: #f5f5f5;
   border-right: 1px solid rgba(0,0,0,.1);
@@ -93,6 +127,7 @@
 
     > .bd-sidenav {
       display: block;
+      padding-bottom: .75rem;
     }
   }
 }

docs/getting-started/introduction.md

@@ -4,18 +4,13 @@ title: Introduction
 description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with the Bootstrap CDN and a template starter page.
 group: getting-started
 redirect_from: "/getting-started/"
+toc: true
 ---
 
 <!-- Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever. -->
 
 <!-- Here's how to quickly get started with the Bootstrap CDN and a template starter page. -->
 
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
 ## Quick start
 
 Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download/)