Toc

app/express.js

@@ -3,6 +3,7 @@ const path = require("path");
 const bodyParser = require("body-parser");
 
 const permissions = require("./permissions.js")
+const theme = require("./theme.js")
 
 module.exports = function(port){
   const express = require('express')
@@ -72,21 +73,10 @@ module.exports = function(port){
   }
 
     // CSS faking route
-  const cssPath = '/res/css/style.css';
-  app.get(cssPath, function (req, res) {
-    const colors = require("./theme.js")("#AAAADD")
+  app.get(theme.cssPath, function (req, res) {
+    theme.loadColor("#AAAADD")
     res.set('Content-Type', 'text/css');
-    res.send(
-      fs.readFileSync(path.join(APPLICATION_ROOT, "public", cssPath))
-      .toString()
-      .replace(/darkest_grey/g, colors.darkest_grey.rgb().string())
-      .replace(/light_grey/g, colors.light_grey.rgb().string())
-      .replace(/dark_grey/g, colors.dark_grey.rgb().string())
-      .replace(/darkest/g, colors.darkest.rgb().string())
-      .replace(/lightest/g, colors.lightest.rgb().string())
-      .replace(/dark/g, colors.dark.rgb().string())
-      .replace(/light/g, colors.light.rgb().string())
-    )
+    res.send(theme.generateCSS())
   })
 
   // Wiki contents route

app/routes/read.js

@@ -16,6 +16,7 @@ module.exports = async function (req, response){
 
     response.meta = md.meta
     response.data = md.html
+    response.tree = md.tree
     response.hierarchy = wikiMap.getHierarchyInfo(pagePath)
     response.page = page
 

app/theme.js

@@ -1,15 +1,37 @@
 const color = require('color');
+const cssPath = "/res/css/style.css"
+const fs = require("fs")
+const path = require("path")
+let scheme = {}
 
-module.exports = function(colString){
+module.exports = {
+    loadColor: loadColor,
+    generateCSS: generateCSS,
+    cssPath: cssPath
+}
+
+function loadColor(colString){
     let baseColor = color(colString)
 
-    return {
-        lightest: baseColor.whiten(0.8),
+    scheme = {
+        lightest: baseColor.whiten(0.5),
         light: baseColor,
         dark: baseColor.darken(0.6),
         darkest: baseColor.darken(0.8),
         dark_grey: baseColor.darken(0.5).grayscale(),
         darkest_grey: baseColor.darken(0.8).grayscale(),
         light_grey: baseColor.whiten(2).grayscale()
     }
+}
+
+function generateCSS(){
+    return fs.readFileSync(path.join(APPLICATION_ROOT, "public", cssPath))
+    .toString()
+    .replace(/darkest_grey/g, scheme.darkest_grey.rgb().string())
+    .replace(/light_grey/g, scheme.light_grey.rgb().string())
+    .replace(/dark_grey/g, scheme.dark_grey.rgb().string())
+    .replace(/darkest/g, scheme.darkest.rgb().string())
+    .replace(/lightest/g, scheme.lightest.rgb().string())
+    .replace(/dark/g, scheme.dark.rgb().string())
+    .replace(/light/g, scheme.light.rgb().string())
 }

app/views/read.pug

@@ -1,5 +1,17 @@
 extends ../layout/default.pug
 
+mixin create_toc(tree, depth=0)
+  each anchor, index in tree
+    div
+      span(style="display:inline-block; width:"+depth*15+"px")
+      if (index === tree.length-1)
+        | └>
+      else 
+        | ├>
+      a.link(href="#"+anchor.anchor) #{anchor.content}
+    if (anchor.nodes)
+      +create_toc(anchor.nodes, depth+1)
+
 block content
   .pageTitle #{meta.title}
     .pageToolbar
@@ -14,6 +26,7 @@ block content
         a(href=prefix+val.url, class=(val.url === page.url ? "selected" : "")) #{val.name}
         if (val.url != page.url)
           span  🡆 
-
-  //.pageSubTitle #{meta.subtitle}
+  .toc 
+    h2 Table of contents 
+    +create_toc(tree)
   div !{data}

public/res/css/style.css

@@ -250,3 +250,29 @@ blockquote.warning{
 blockquote.danger{
   background-color: #FFAAAA;
 }
+
+.toc {
+  margin-top:10px;
+  background-color:light_grey;
+  border:1px solid light;
+  padding:10px;
+  padding-top:0px;
+  display:inline-block;
+}
+
+.toc .link{
+  margin-left:5px;
+  margin-right:5px;
+  color:darkest;
+  text-decoration:none;
+}
+
+.toc .link:hover{
+  text-decoration:underline;
+}
+
+.toc h2{
+  border:none;
+  margin:none;
+  background:none;
+}