Merge pull request #24 from oleeskild/toc

Implemented support for table of content
oleeskild · Dec 15, 2022 · 5a20bf8 · 5a20bf8
2 parents 71f87ad + 8da3c93
commit 5a20bf8
Show file tree

Hide file tree

Showing 12 changed files with 252 additions and 109 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -3,6 +3,10 @@ const markdownIt = require("markdown-it");
 const fs = require('fs');
 const matter = require('gray-matter');
 const faviconPlugin = require('eleventy-favicon');
+const tocPlugin = require('eleventy-plugin-toc');
+
+const {headerToId, namedHeadingsFilter} = require("./src/helpers/utils") 
+
 module.exports = function(eleventyConfig) {
 
     let markdownLib = markdownIt({
@@ -184,6 +188,7 @@ module.exports = function(eleventyConfig) {
 
     eleventyConfig.addPassthroughCopy("src/site/img");
     eleventyConfig.addPlugin(faviconPlugin, { destination: 'dist' });
+    eleventyConfig.addPlugin(tocPlugin, {ul:true, tags: ['h1','h2', 'h3', 'h4', 'h5', 'h6']});
     eleventyConfig.addFilter('jsonify', function (variable) {
       return JSON.stringify(variable);
     });
@@ -201,47 +206,3 @@ module.exports = function(eleventyConfig) {
     };
 
 };
-
-function headerToId(heading) {
-    return slugify(heading);
-}
-
-//https://github.com/rstacruz/markdown-it-named-headings/blob/master/index.js
-function namedHeadingsFilter(md, options) {
-    md.core.ruler.push('named_headings', namedHeadings.bind(null, md));
-}
-
-function namedHeadings(md, state) {
-
-    var ids = {}
-
-    state.tokens.forEach(function(token, i) {
-        if (token.type === 'heading_open') {
-            var text = md.renderer.render(state.tokens[i + 1].children, md.options)
-            var id = headerToId(text);
-            var uniqId = uncollide(ids, id)
-            ids[uniqId] = true
-            setAttr(token, 'id', uniqId)
-        }
-    })
-}
-
-function uncollide(ids, id) {
-    if (!ids[id]) return id
-    var i = 1
-    while (ids[id + '-' + i]) { i++ }
-    return id + '-' + i
-}
-
-function setAttr(token, attr, value, options) {
-    var idx = token.attrIndex(attr)
-
-    if (idx === -1) {
-        token.attrPush([attr, value])
-    } else if (options && options.append) {
-        token.attrs[idx][1] =
-            token.attrs[idx][1] + ' ' + value
-    } else {
-        token.attrs[idx][1] = value
-    }
-}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
         "axios": "^0.26.1",
         "dotenv": "^10.0.0",
         "eleventy-favicon": "^1.1.2",
+        "eleventy-plugin-toc": "^1.1.5",
         "fs-file-tree": "^1.1.1",
         "gray-matter": "^4.0.3",
         "lunr": "^2.3.9",

diff --git a/src/helpers/constants.js b/src/helpers/constants.js
@@ -5,5 +5,6 @@ exports.ALL_NOTE_SETTINGS= [
     "dgShowLocalGraph",
     "dgShowInlineTitle",
     "dgShowFileTree",
-    "dgEnableSearch"
+    "dgEnableSearch",
+    "dgShowToc"
 ];
diff --git a/src/helpers/utils.js b/src/helpers/utils.js
@@ -0,0 +1,47 @@
+const slugify = require("@sindresorhus/slugify");
+
+function headerToId(heading) {
+    return slugify(heading);
+}
+
+function namedHeadings(md, state) {
+
+    var ids = {}
+
+    state.tokens.forEach(function(token, i) {
+        if (token.type === 'heading_open') {
+            var text = md.renderer.render(state.tokens[i + 1].children, md.options)
+            var id = headerToId(text);
+            var uniqId = uncollide(ids, id)
+            ids[uniqId] = true
+            setAttr(token, 'id', uniqId)
+        }
+    })
+}
+
+function uncollide(ids, id) {
+    if (!ids[id]) return id
+    var i = 1
+    while (ids[id + '-' + i]) { i++ }
+    return id + '-' + i
+}
+
+function setAttr(token, attr, value, options) {
+    var idx = token.attrIndex(attr)
+
+    if (idx === -1) {
+        token.attrPush([attr, value])
+    } else if (options && options.append) {
+        token.attrs[idx][1] =
+            token.attrs[idx][1] + ' ' + value
+    } else {
+        token.attrs[idx][1] = value
+    }
+}
+
+//https://github.com/rstacruz/markdown-it-named-headings/blob/master/index.js
+exports.namedHeadingsFilter = function (md, options) {
+    md.core.ruler.push('named_headings', namedHeadings.bind(null, md));
+}
+
+exports.headerToId = headerToId;
diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk
@@ -117,7 +117,7 @@
                 ctx.textBaseline = 'top';
                 ctx.fillText(label, node.x, node.y + nodeR + 2);
             })
-            .linkColor(() => getCssVar("--text-normal"))
+            .linkColor(() => getCssVar("--text-muted") || getCssVar("--text-normal"))
             .graphData(gData)
             .onNodeClick(node => {
                 window.location = node.url;

diff --git a/src/site/_includes/components/sidebar.njk b/src/site/_includes/components/sidebar.njk
@@ -5,32 +5,53 @@
                   {%if settings.dgShowLocalGraph === true%}
                         <div class="graph">
                               <div style="display: flex; justify-content: flex-end;">
-                                    <div class="graph-title">Interactive graph</div>
+                                    <div class="graph-title">Connected Pages</div>
                               </div>
                               <div id="link-graph"></div>
                         </div>
-                  {%endif%}
-
-                  {%if settings.dgShowBacklinks === true %}
-                        <div class="backlinks">
-                              <div class="backlink-title" style="margin: 4px 0 !important;">Links to this page</div>
-                              {%- if backlinks.length === 0 -%}
-                                    <div class="backlink-card">
-                                          No backlinks
+                        {%endif%}
+
+                        {%if settings.dgShowToc === true%}
+                              {%set tocHtml= (content and (content|toc)) %}
+                              {%if tocHtml %}
+                                    <div class="toc">
+                                          <div class="toc-title-container">
+                                                <div class="toc-title">
+                                                      On this page
+                                                </div>
+                                          </div>
+                                          <div class="toc-container">
+                                                {{ tocHtml | safe }}
+                                          </div>
                                     </div>
-                              {%- endif -%}
+                              {%endif%}
+
+                        {%endif%}
+
+                              {%if settings.dgShowBacklinks === true %}
+                                    <div class="backlinks">
+                                          <div class="backlink-title" style="margin: 4px 0 !important;">Pages mentioning this page</div>
+                                                <div class="backlink-list">
+
+                                                {%- if backlinks.length === 0 -%}
+                                                      <div class="backlink-card">
+                                                            <span class="no-backlinks-message">No other pages mentions this page</span>
+                                                      </div>
+                                                {%- endif -%}
 
-                              {%- for backlink in backlinks -%}
-                                    <div class="backlink-card">
-                                          <a href="{{backlink.url}}">{{backlink.title}}</a>
+                                                {%- for backlink in backlinks -%}
+                                                      <div class="backlink-card">
+                                                            <i class="fa fa-link"></i> <a href="{{backlink.url}}">{{backlink.title}}</a>
+                                                      </div>
+                                                {%- endfor -%}
+
+                                                </div>
                                     </div>
-                              {%- endfor -%}
+                                    {%endif%}
+                              </div>
                         </div>
-                  {%endif%}
-            </div>
-      </div>
-</div>
-
-{%if settings.dgShowLocalGraph === true %}
-      {%include "components/graphScript.njk"%}
-{% endif %}
+                  </div>
+
+                  {%if settings.dgShowLocalGraph === true %}
+                        {%include "components/graphScript.njk"%}
+                  {% endif %}
diff --git a/src/site/_includes/layouts/note.njk b/src/site/_includes/layouts/note.njk
@@ -27,7 +27,7 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
       {% endif %}
       {{ content | link | highlight | safe}}
 
-      {% if settings.dgShowBacklinks === true or settings.dgShowLocalGraph === true%}
+      {% if settings.dgShowBacklinks === true or settings.dgShowLocalGraph === true or settings.dgShowToc === true%}
         {%include "components/sidebar.njk"%}
       {% endif %}
     </div>

diff --git a/src/site/index.11tydata.js b/src/site/index.11tydata.js
@@ -4,6 +4,11 @@ const settings = require("../helpers/constants");
 
 const wikilink = /\[\[(.*?\|.*?)\]\]/g
 
+const markdownIt = require("markdown-it");
+const md = markdownIt({
+    html: true,
+}).use(require("../helpers/utils").namedHeadingsFilter);
+
 function caselessCompare(a, b) {
     return a.toLowerCase() === b.toLowerCase();
 }
@@ -111,6 +116,13 @@ module.exports = {
                 return currentnote.data.page.fileSlug;
             }
             return "";
+        },
+        content: (data) => {
+            const currentnote = data.collections.gardenEntry && data.collections.gardenEntry[0];
+            if (currentnote && currentnote.template && currentnote.template.frontMatter && currentnote.template.frontMatter.content) {
+                return md.render(currentnote.template.frontMatter.content);
+            }
+            return "";
         }
     }
 }
diff --git a/src/site/index.njk b/src/site/index.njk
@@ -24,7 +24,7 @@
       {%- endfor -%}
 
 
-      {%if settings.dgShowBacklinks === true or settings.dgShowLocalGraph === true%}
+      {% if settings.dgShowBacklinks === true or settings.dgShowLocalGraph === true or settings.dgShowToc === true%}
         {%include "components/sidebar.njk" %}
       {%endif%}
       </div>

diff --git a/src/site/notes/notes.11tydata.js b/src/site/notes/notes.11tydata.js
@@ -99,6 +99,6 @@ module.exports = {
                 noteSettings[setting] = settingValue;
             });
             return noteSettings;
-        } 
+        }
     }
 }