Add table of contents to posts, resolves #2

assets/css/screen.css

@@ -327,6 +327,11 @@ hr {
     row-gap: calc(var(--gap) * 2);
 }
 
+.kg-gallery-container {
+    box-shadow: 0px 0px 30px 50px white;
+    background-color: var(--color-white);
+}
+
 @media (max-width: 991px) {
     .gh-feed {
         display: grid;

default.hbs

@@ -6,7 +6,48 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{meta_title}}</title>
     <link rel="stylesheet" href="{{asset "built/screen.css"}}">
-    <link rel="preload" href="assets/fonts/WantedSans-Regular.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">
+
+    <style>
+        .gh-content {
+            position: relative;
+        }
+
+        .gh-toc > .toc-list {
+            position: relative;
+        }
+
+        .toc-list {
+            overflow: hidden;
+            list-style: none;
+            font-size: 16px;
+            line-height: 1.4;
+        }
+
+        @media (min-width: 1300px) {
+            .gh-sidebar {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                margin-top: 4vmin;
+                grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
+                width: 250px;
+            }
+
+            .gh-toc {
+                position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
+                top: 4vmin;
+            }
+        }
+
+        a.toc-link {
+            text-decoration: none;
+        }
+
+        .gh-toc .is-active-link::before {
+            background-color: var(--ghost-accent-color); /* Defines TOC   accent color based on Accent color set in Ghost Admin */
+        }
+    </style>
 
     {{#is "home"}}
         {{#if @site.cover_image}}
@@ -67,6 +108,21 @@
 
 <script src="{{asset "built/main.min.js"}}"></script>
 
+{{! Tocbot is used for the table of contents }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
+<script>
+    tocbot.init({
+        // Where to render the table of contents.
+        tocSelector: '.gh-toc',
+        // Where to grab the headings to build the table of contents.
+        contentSelector: '.gh-content',
+        // Which headings to grab inside of the contentSelector element.
+        headingSelector: 'h1, h2',
+        // Ensure correct positioning
+        hasInnerContainers: true,
+    });
+</script>
+
 {{#if @custom.oneko}}
     <script src="{{asset "js/oneko.js"}}"></script>
 {{/if}}

post.hbs

@@ -18,6 +18,7 @@
                 {{/if}}
 
                 <section class="gh-content gh-canvas">
+                    <aside class="gh-sidebar"><div class="gh-toc"></div></aside> {{! Table of contents }}
                     {{content}}
                     {{#unless feature_image}}
                         <header class="gh-article-header">