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

diff --git a/Gemfile b/Gemfile
index 1a8977f8dbe2ef8c2e520b530dfa6a8af012b8b2..2fa340d111936c3076cfbc2bc6863a2163f5a38e 100644 (file)
--- a/Gemfile
+++ b/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

diff --git a/Gemfile.lock b/Gemfile.lock
index 4df2612fcdb947ea7c3dd21f61e734ac5e8200ba..71753d9e8f0e5f53b4f8861a42f6a9ab024c6a93 100644 (file)
--- a/Gemfile.lock
+++ b/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

diff --git a/_config.yml b/_config.yml
index 96ffe8f9d71b22b7b6f0c42049ee0d5f266ccdab..3f6732ae8c8911a60f9e61744c771cce8ade5ff7 100644 (file)
--- a/_config.yml
+++ b/_config.yml
@@ -21,6 +21,7 @@ exclude:          [assets/scss/]
 gems:
   - jekyll-redirect-from
   - jekyll-sitemap
+  - jekyll-toc
 
 # Social
 title: Bootstrap

diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index 540c4c733d6b71580a057a67bd5a06aa5c414af8..58b9482c017ee32e76b8d401801a561b9e6eb8c9 100644 (file)
--- a/docs/_layouts/docs.html
+++ b/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>
 

diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss
index c8749c1d42e5edd773c8732a7d69386dec1711af..33d89d40d2fc1eae209019c508d85d39aeb11492 100644 (file)
--- a/docs/assets/scss/_content.scss
+++ b/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;
-  }
-}

diff --git a/docs/assets/scss/_sidebar.scss b/docs/assets/scss/_sidebar.scss
index d8e5f9304512906ff24826a93a0f86680e04e558..55bed3036b18032fe6c5e1b10239103bd318a169 100644 (file)
--- a/docs/assets/scss/_sidebar.scss
+++ b/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;
     }
   }
 }

diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
index b07e4aacea75d626a4638081fb984cec1fa233b7..6be5d493dddb50f07d5fbfe9a01964855632b2bd 100644 (file)
--- a/docs/getting-started/introduction.md
+++ b/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/)