add tocbot tables of contents to posts

Author: indirect

post.hbs

@@ -4,11 +4,15 @@
 
 <div class="{{post_class}}">
   {{#if feature_image}}
-    <img src="{{img_url feature_image size="m"}}" class="profile-image"> 
+    <img src="{{img_url feature_image size="m"}}" class="profile-image">
   {{/if}}
   <h1>{{title}}</h1>
   <br>
-  {{content}}
+
+  <aside class="gh-sidebar"><div class="gh-toc"></div></aside>
+  <div class="post-content">
+    {{content}}
+  </div>
   <p><em>{{date published_at format="MMMM DD, YYYY"}}</em></p>
   <br>
 </div>
@@ -21,4 +25,4 @@
 
 {{#contentFor 'scripts'}}
   <script src="{{asset 'dist/post.js'}}" defer></script>
-{{/contentFor}}
+{{/contentFor}}

src/css/app.css

@@ -22,3 +22,4 @@
 
 /* Vendor */
 @import './vendors/ghost.css';
+@import '../../node_modules/tocbot/dist/tocbot.css';

src/css/pages/post.css

@@ -38,6 +38,22 @@
   line-height: 1.25rem;
   margin-bottom: 0.5em;
 }
+
+/* tocbot stuff */
+.gh-toc > .toc-list {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.toc-list {
+  overflow: hidden;
+  list-style: none;
+}
+
+.toc-list-item {
+  margin-bottom: 5px;
+}
+
 @media (min-width: 400px) {
   .post {
     width: 95%;
@@ -64,4 +80,20 @@
   .post {
     width: 800px;
   }
+
+  .gh-sidebar {
+    position: absolute;
+    left: 0;
+  }
+
+  .gh-toc {
+    position: sticky;
+    top: 4vmin;
+    max-width: calc((100vw - 800px) / 2);
+    padding-right: 2rem;
+  }
+}
+
+.gh-toc .is-active-link::before {
+  background-color: var(--ghost-accent-color);
 }

src/js/post/index.js

@@ -1 +1,13 @@
 // Ship JS only active on post pages for better performance
+import tocbot from 'tocbot';
+
+tocbot.init({
+    // Where to render the table of contents.
+    tocSelector: '.gh-toc',
+    // Where to grab the headings to build the table of contents.
+    contentSelector: '.post',
+    // Which headings to grab inside of the contentSelector element.
+    headingSelector: 'h2, h3, h4',
+    // Ensure correct positioning
+    hasInnerContainers: true,
+});