feat: Add table of contents to article (#12)

README.md

@@ -35,7 +35,10 @@ Handmade Blog is a classic static blog generator for people who want to start a
     ```json
     {
       "blogTitle": "Lorem Ipsum",
-      "blogSubtitle": "lorem ipsum"
+      "blogSubtitle": "lorem ipsum",
+      "article": {
+        "tableOfContents": true 
+      }
     }
     ```
 

app/src/scss/article.scss

@@ -212,6 +212,42 @@
     font-size: 11px;
   }
 
+  details {
+    display: inline;
+    margin-bottom: 25px;
+
+    &[open=""] > summary {
+      background-color: black;
+      color: white;
+    }
+
+    summary {
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+
+  .table-of-contents  {
+    font-size: 15px;
+    margin-bottom: 30px;
+
+    ul {
+      list-style-type: none;
+      counter-reset: item;
+      margin: 0;
+      padding-left: -20px;
+
+      li {
+        margin-top: 5px;
+
+        &:before {
+          content: counters(item, ".") ". ";
+          counter-increment: item
+        }
+      }
+    }
+  }
+
   section {
     margin-bottom: 15px;
 

package.json

@@ -22,7 +22,10 @@
     "highlight.js": "^9.15.6",
     "katex": "^0.10.2",
     "markdown-it": "^8.4.2",
+    "markdown-it-anchor": "^5.3.0",
+    "markdown-it-container": "^3.0.0",
     "markdown-it-footnote": "^3.0.1",
+    "markdown-it-table-of-contents": "^0.4.4",
     "markdown-it-texmath": "^0.5.5"
   },
   "devDependencies": {

services/ArticlePublisher.ts

@@ -9,6 +9,9 @@ import * as katex from 'katex';
 import * as highlightJs from 'highlight.js';
 import * as mdFootnote from 'markdown-it-footnote';
 import * as mdTex from 'markdown-it-texmath';
+import * as mdAnchor from 'markdown-it-anchor';
+import * as mdTableOfContents from 'markdown-it-table-of-contents';
+import * as mdContainer from 'markdown-it-container';
 
 import PagePublisher from './PagePublisher';
 import ArticleMetaInfo from './classes/ArticleMetaInfo';
@@ -44,8 +47,26 @@ class ArticlePublisher {
   }).use(mdFootnote)
     .use(mdTex.use(katex), {
       delimiters: 'gitlab',
+    })
+    .use(mdAnchor)
+    .use(mdTableOfContents, {
+      includeLevel: [1, 2, 3],
+    })
+    .use(mdContainer, 'toggle', {
+      validate(params) {
+        return params.trim().match(/^toggle\((.*)\)$/);
+      },
+      render(tokens, idx) {
+        const content = tokens[idx].info.trim().match(/^toggle\((.*)\)$/);
+        if (tokens[idx].nesting === 1) {
+          return `<details><summary>${ArticlePublisher.md.utils.escapeHtml(content[1])}</summary>\n`;
+        }
+        return '</details>\n';
+      },
     });
 
+  static config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json')).toString());
+
   /**
    * Extracts content excluding front matter block.
    *
@@ -68,8 +89,15 @@ class ArticlePublisher {
    * @param filename - An article filename.
    */
   private static getArticleByFilename(filename: string) {
-    const mdContent: Buffer = fs.readFileSync(`${this.ARTICLE_ORIGIN_PATH}/${filename}`);
-    const htmlContent: string = this.md.render(this.extractContent(String(mdContent)));
+    let mdContent = String(fs.readFileSync(`${this.ARTICLE_ORIGIN_PATH}/${filename}`));
+
+    // Adds table of contents to article.
+    const { tableOfContents } = PagePublisher.config.article;
+    if (tableOfContents) {
+      mdContent = `::: toggle(Table of Contents)\n[[toc]]\n:::\n${mdContent}`;
+    }
+
+    const htmlContent: string = this.md.render(this.extractContent(mdContent));
     const metaInfo: ArticleMetaInfo = this.extractMetaInfo(String(mdContent));
 
     return new Article({

services/config.json

@@ -1,4 +1,7 @@
 {
   "blogTitle": "Lorem Ipsum",
-  "blogSubtitle": "lorem ipsum"
-}
+  "blogSubtitle": "lorem ipsum",
+  "article": {
+    "tableOfContents": true 
+  }
+}