Merge pull request #248 from froschdesign/feature/table-of-contents

Add support for rendering Table of Contents in blog posts
laminas · Feb 11, 2025 · 81dfcc2 · 81dfcc2
2 parents 3aadb3e + 02a4639
commit 81dfcc2
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 26 deletions.
diff --git a/bootstrap/gulpfile.mjs b/bootstrap/gulpfile.mjs
@@ -58,7 +58,6 @@ function js() {
             'node_modules/jquery/dist/jquery.slim.min.js',
             'node_modules/@popperjs/core/dist/umd/popper.min.js',
             'node_modules/bootstrap/dist/js/bootstrap.min.js',
-            'node_modules/anchor-js/anchor.min.js',
             'js/base.js'
         ]))
         .pipe(concat({path: 'laminas.js'}))

diff --git a/bootstrap/js/base.js b/bootstrap/js/base.js
@@ -1,12 +1,6 @@
 'use strict';
 
 {
-    // Anchors
-    anchors.options.placement = 'left';
-    anchors.add(
-        'article h1, article h2, article h3, article h4, article h5'
-    );
-
     // Pre elements - Prism code samples
     const preElements = document.querySelectorAll('pre');
     preElements.forEach(element => {

diff --git a/bootstrap/package.json b/bootstrap/package.json
@@ -9,7 +9,6 @@
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@popperjs/core": "^2.11.8",
-    "anchor-js": "^5.0.0",
     "autoprefixer": "^10.4.14",
     "bootstrap": "^5.3.3",
     "gulp": "^5.0.0",

diff --git a/bootstrap/scss/_custom-styles.scss b/bootstrap/scss/_custom-styles.scss
@@ -168,22 +168,6 @@ pre[class*=language-] {
     font-size: smaller;
 }
 
-/*
- * anchor-js, sticky header fix
- * @see https://www.bryanbraun.com/anchorjs/#pages-with-a-sticky-navbar
- */
-article {
-    h1, h2, h3, h4, h5 {
-        &::before {
-            content: '';
-            display: block;
-            margin-top: -100px;
-            height: 100px;
-            width: 1px;
-        }
-    }
-}
-
 .dropdown-item {
     &.active,
     &:active {

diff --git a/src/App/ContentParser/Parser.php b/src/App/ContentParser/Parser.php
@@ -44,7 +44,7 @@ public function __construct()
                 'heading_permalink'  => [
                     'insert'            => 'after',
                     'min_heading_level' => 1,
-                    'max_heading_level' => 2,
+                    'max_heading_level' => 3,
                 ],
             ]
         );
@@ -62,7 +62,7 @@ public function __construct()
             [
                 'table_of_contents' => [
                     'min_heading_level' => 2,
-                    'max_heading_level' => 2,
+                    'max_heading_level' => 3,
                 ],
             ]
         );

diff --git a/src/Blog/BlogPost.php b/src/Blog/BlogPost.php
@@ -20,6 +20,8 @@ class BlogPost
     /** @var string */
     public $extended;
 
+    public ?string $toc;
+
     /** @var string */
     public $id;
 
@@ -47,6 +49,7 @@ public function __construct(
         array $tags,
         string $body,
         string $extended,
+        ?string $toc,
         bool $isDraft,
         bool $isPublic
     ) {
@@ -58,6 +61,7 @@ public function __construct(
         $this->tags     = $tags;
         $this->body     = $body;
         $this->extended = $extended;
+        $this->toc      = $toc;
         $this->isDraft  = $isDraft;
         $this->isPublic = $isPublic;
     }

diff --git a/src/Blog/CreateBlogPostFromDataArray.php b/src/Blog/CreateBlogPostFromDataArray.php
@@ -55,6 +55,7 @@ private function createBlogPostFromDataArray(array $post): BlogPost
 
         $document = $this->getContentParser()->parse($post['path']);
         $post     = $document->getFrontMatter();
+        $toc      = $document->getTableOfContents();
         $parts    = explode($this->postDelimiter, $document->getContent(), 2);
         $created  = $this->createDateTimeFromString($post['created']);
         $updated  = $post['updated'] && $post['updated'] !== $post['created']
@@ -72,6 +73,7 @@ private function createBlogPostFromDataArray(array $post): BlogPost
                 : explode('|', trim((string) $post['tags'], '|')),
             $parts[0],
             $parts[1] ?? '',
+            $toc,
             (bool) $post['draft'],
             (bool) $post['public']
         );

diff --git a/src/Blog/templates/post.phtml b/src/Blog/templates/post.phtml
@@ -53,6 +53,10 @@ $this->end();
                 <br />Last updated on <time class="dt-updated" datetime="<?= $this->formatDateRfc($post->updated) ?>"><?= $this->formatDate($post->updated) ?></time>.
                 <?php endif ?>
             </p>
+            <?php if ($post->toc): ?>
+                <h5>Table of Contents</h5>
+                <?= $post->toc ?>
+            <?php endif ?>
         </aside>
     </div>
 </div>