feat: TOC, scroll to header, page UI improvements

server/db/migrations/2.0.0.js

@@ -116,6 +116,7 @@ exports.up = knex => {
       table.string('publishEndDate')
       table.text('content')
       table.text('render')
+      table.json('toc')
       table.string('contentType').notNullable()
       table.string('createdAt').notNullable()
       table.string('updatedAt').notNullable()

server/jobs/render-page.js

@@ -1,6 +1,7 @@
 require('../core/worker')
 
 const _ = require('lodash')
+const cheerio = require('cheerio')
 
 /* global WIKI */
 
@@ -21,15 +22,43 @@ module.exports = async (job) => {
       })
     }
 
+    // Parse TOC
+    const $ = cheerio.load(output)
+    let isStrict = $('h1').length > 0 // <- Allows for documents using H2 as top level
+    let toc = { root: [] }
+
+    $('h1,h2,h3,h4,h5,h6').each((idx, el) => {
+      const depth = _.toSafeInteger(el.name.substring(1)) - (isStrict ? 1 : 2)
+      const leafPath = _.reduce(_.times(depth), (curPath, curIdx) => {
+        if (_.has(toc, curPath)) {
+          const lastLeafIdx = _.get(toc, curPath).length - 1
+          curPath = `${curPath}[${lastLeafIdx}].children`
+        }
+        return curPath
+      }, 'root')
+
+      const leafSlug = $('.toc-anchor', el).first().attr('href')
+      $('.toc-anchor', el).remove()
+      _.get(toc, leafPath).push({
+        title: _.trim($(el).text()),
+        anchor: leafSlug,
+        children: []
+      })
+    })
+
     // Save to DB
     await WIKI.models.pages.query()
-      .patch({ render: output })
+      .patch({
+        render: output,
+        toc: JSON.stringify(toc.root)
+      })
       .where('id', job.data.page.id)
 
     // Save to cache
     await WIKI.models.pages.savePageToCache({
       ...job.data.page,
-      render: output
+      render: output,
+      toc: JSON.stringify(toc.root)
     })
 
     WIKI.logger.info(`Rendering page ${job.data.page.path}: [ COMPLETED ]`)

server/models/pageHistory.js

@@ -96,8 +96,8 @@ module.exports = class PageHistory extends Model {
       isPublished: opts.isPublished,
       localeCode: opts.localeCode,
       path: opts.path,
-      publishEndDate: opts.publishEndDate,
-      publishStartDate: opts.publishStartDate,
+      publishEndDate: opts.publishEndDate || '',
+      publishStartDate: opts.publishStartDate || '',
       title: opts.title
     })
   }

server/models/pages.js

@@ -108,6 +108,7 @@ module.exports = class Page extends Model {
       publishStartDate: 'string',
       render: 'string',
       title: 'string',
+      toc: 'string',
       updatedAt: 'string'
     })
   }
@@ -125,9 +126,10 @@ module.exports = class Page extends Model {
       isPublished: opts.isPublished,
       localeCode: opts.locale,
       path: opts.path,
-      publishEndDate: opts.publishEndDate,
-      publishStartDate: opts.publishStartDate,
-      title: opts.title
+      publishEndDate: opts.publishEndDate || '',
+      publishStartDate: opts.publishStartDate || '',
+      title: opts.title,
+      toc: '[]'
     })
     const page = await WIKI.models.pages.getPageFromDb({
       path: opts.path,
@@ -154,8 +156,8 @@ module.exports = class Page extends Model {
       content: opts.content,
       description: opts.description,
       isPublished: opts.isPublished,
-      publishEndDate: opts.publishEndDate,
-      publishStartDate: opts.publishStartDate,
+      publishEndDate: opts.publishEndDate || '',
+      publishStartDate: opts.publishStartDate || '',
       title: opts.title
     }).where('id', ogPage.id)
     const page = await WIKI.models.pages.getPageFromDb({
@@ -243,6 +245,7 @@ module.exports = class Page extends Model {
       publishStartDate: page.publishStartDate,
       render: page.render,
       title: page.title,
+      toc: page.toc,
       updatedAt: page.updatedAt
     }))
   }

server/views/page.pug

@@ -15,6 +15,7 @@ block body
       author-name=page.authorName
       :author-id=page.authorId
       :is-published=page.isPublished
+      :toc=page.toc
       )
       template(slot='sidebar')
         each navItem in sidebar