feat: beautify HTML output

Indent child templates according to the their place in the parent
template, and likewise for rendered posts

Needs refactoring

4 files changed, 42 insertions, 7 deletions

diff --git a/package.json b/package.json
index 858e015..4c17cbe 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "configly": "^4.1.0",
     "gray-matter": "^2.1.1",
     "highland": "^2.11.0",
+    "indent-string": "^3.1.0",
     "koa": "^2.2.0",
     "koa-helmet": "^3.2.0",
     "koa-router": "^7.2.1",
diff --git a/posts/testfile.md b/posts/testfile.md
index bafc456..31d35a0 100644
--- a/posts/testfile.md
+++ b/posts/testfile.md
@@ -4,3 +4,8 @@ Description = "Test file"
 Tags = ["a", "b"]
 +++
 # Lorem ipsum
+
+Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum
+integer. At auctor urna nunc id cursus metus aliquam eleifend mi in
+nulla posuere sollicitudin aliquam ultrices sagittis orci, a
+scelerisque?
diff --git a/src/domain/posts.js b/src/domain/posts.js
index aedf58e..ea81729 100644
--- a/src/domain/posts.js
+++ b/src/domain/posts.js
@@ -4,6 +4,7 @@ const fs = require('fs')
 const path = require('path')
 const matter = require('gray-matter')
 const markdown = require('../modules/markdown.js')
+const { indentForTemplate, postIndentLevel } = require('../responders.js')
 
 const grayMatterOptions = {
   lang: 'toml',
@@ -33,7 +34,10 @@ function get (filename) {
   const fileMatter = matter.read(filename, grayMatterOptions)
   fileMatter.basename = getTitle(fileMatter)
   delete fileMatter.orig
-  fileMatter.body = markdown(fileMatter.content)
+  fileMatter.body = indentForTemplate(
+    markdown(fileMatter.content),
+    postIndentLevel
+  )
   return canonicaliseMetadata(fileMatter)
 }
 
diff --git a/src/responders.js b/src/responders.js
index 778580c..824195b 100644
--- a/src/responders.js
+++ b/src/responders.js
@@ -1,15 +1,36 @@
 'use strict'
 
+const h = require('highland')
 const fs = require('fs')
 const rheo = require('rheo')
+const indent = require('indent-string')
+
+const toLines = string =>
+  string.split('\n').map((s, i, arr) => (i === arr.length - 1 ? s : s + '\n'))
+
+const getTemplate = name =>
+  fs.readFileSync(`${__dirname}/templates/${name}.html`, 'utf8')
+
+const findMain = /^(\s+)<main/m
+const baseIndentLevel = findMain.exec(getTemplate('layout'))[1].length
+const postIndentLevel =
+  baseIndentLevel + findMain.exec(getTemplate('post'))[1].length
+
+function indentForTemplate (text, indentLevel) {
+  return indent(text, indentLevel).slice(indentLevel).replace(/\n+$/, '')
+}
+
+function templateReader (template, indentLevel) {
+  const content = toLines(indentForTemplate(getTemplate(template), indentLevel))
+  console.log(template, content)
+  return () => h(content)
+}
 
-const templateReader = template => () =>
-  fs.createReadStream(`${__dirname}/templates/${template}.html`)
 const templates = {
   layout: templateReader('layout'),
-  home: templateReader('home'),
-  post: templateReader('post'),
-  taxon: templateReader('taxon')
+  home: templateReader('home', baseIndentLevel),
+  post: templateReader('post', baseIndentLevel),
+  taxon: templateReader('taxon', baseIndentLevel)
 }
 
 function setTitle (siteTitle, pageTitle) {
@@ -35,6 +56,10 @@ function showPage (name) {
 }
 
 module.exports = {
+  baseIndentLevel,
+  postIndentLevel,
+  indentForTemplate,
+
   home (ctx, config, postsStream) {
     ctx.type = 'html'
     ctx.body = templates
@@ -55,7 +80,7 @@ module.exports = {
       .pipe(rheo())
       .outer('main', showPage('post'))
       .inner('article h1', rheo(post.data.get('title')))
-      .inner('article main', rheo(post.body))
+      .outer('article main', rheo(post.body))
       .pipe(setTitle(config.site.title, post.data.get('title')))
       .render()
   },