Merge pull request #26 from Slavetomints/feat/table-of-contents implements #21

Add Table of Contents

Author: Slavetomints

Gemfile

@@ -4,3 +4,5 @@ source 'https://rubygems.org'
 
 # Specify your gem's dependencies in jekyll-theme-nyx.gemspec
 gemspec
+
+gem "jekyll-toc", "~> 0.19.0"

Gemfile.lock

@@ -18,12 +18,8 @@ GEM
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.17.3)
     ffi (1.17.3-x86_64-linux-gnu)
     forwardable-extended (2.6.0)
-    google-protobuf (4.33.2)
-      bigdecimal
-      rake (>= 13)
     google-protobuf (4.33.2-x86_64-linux-gnu)
       bigdecimal
       rake (>= 13)
@@ -51,6 +47,9 @@ GEM
       webrick (~> 1.7)
     jekyll-sass-converter (3.1.0)
       sass-embedded (~> 1.75)
+    jekyll-toc (0.19.0)
+      jekyll (>= 3.9)
+      nokogiri (~> 1.12)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     json (2.18.0)
@@ -63,19 +62,19 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
+    nokogiri (1.19.0-x86_64-linux-gnu)
+      racc (~> 1.4)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (7.0.0)
+    racc (1.8.1)
     rake (13.3.0)
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
     rexml (3.4.4)
     rouge (4.7.0)
     safe_yaml (1.0.5)
-    sass-embedded (1.97.1)
-      google-protobuf (~> 4.31)
-      rake (>= 13)
     sass-embedded (1.97.1-x86_64-linux-gnu)
       google-protobuf (~> 4.31)
     terminal-table (3.0.2)
@@ -84,11 +83,11 @@ GEM
     webrick (1.9.2)
 
 PLATFORMS
-  ruby
   x86_64-linux
 
 DEPENDENCIES
   jekyll-theme-nyx!
+  jekyll-toc (~> 0.19.0)
 
 BUNDLED WITH
    2.6.7

_config.yml

@@ -25,10 +25,14 @@ collections:
     permalink: /:name/
     sort_by: order
 
+plugins:
+  - jekyll-toc
+
 defaults:
   - scope:
       path: ""
       type: posts
     values: 
       layout: post
-      permalink: /posts/:title/
+      permalink: /posts/:title/
+      toc: true

_layouts/post.md

@@ -5,5 +5,13 @@ layout: default
   <h1>{{ page.title }}</h1>
   <p>{{ page.date | date: "%B %d, %Y" }} – Written by {{ page.author }}</p>
 </header>
-{{ content }}
 
+<div id="post-container">
+  <article>
+    {{ content }}
+  </article>
+  <aside>
+    <h2>Table of Contents</h2>
+    {{ content | toc_only }}
+  </aside>
+</div>

_sass/nyx/_layout.scss

@@ -5,6 +5,22 @@ footer {
   padding: $space-2 $space-3;
 }
 
+aside {
+  width: auto;
+  flex-shrink: 0;
+
+  position: sticky;
+  top: $space-4;
+
+  max-height: calc(100vh - $space-4 * 2);
+  overflow-y: auto;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
+}
+
+
 main {
   display: flex;
   flex-direction: column;
@@ -16,6 +32,17 @@ main {
   }
 }
 
+/* POST CONTAINER */
+#post-container {
+  display: flex;
+  gap: $space-4;
+    @media (max-width: 600px) {
+    display: block;;
+  }
+}
+
+
+
 /* STYLING FOR /POSTS/ */
 
 .post-list {
@@ -124,3 +151,17 @@ main {
   padding: 0.15rem 0.5rem;
   border-radius: 999px;
 }
+
+
+#toc li {
+  list-style: none;
+}
+
+#toc a {
+  color: $muted
+}
+
+#toc a:hover{
+  text-decoration: none;
+  color: $fg;
+}