Reactivate Sassdoc, clean up docs build

Dockerfile

@@ -3,11 +3,6 @@ EXPOSE 3000
 
 ENV BASE_URL '/'
 
-# Will unfortunately have to keep this as long as
-# we have git deps in package.json
-RUN apt-get update && apt-get install -y --no-install-recommends git \
-	&& rm -rf /var/lib/apt/lists/*
-
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
 

docs/api/index.hbs

@@ -8,11 +8,58 @@ order: -1
 {{#> page}}
   {{#*inline "content"}}
 
-    <div class="alert alert-info" role="alert" style="margin: 50px 0;">
-      <p><strong>Heads up!</strong> This page is being rewritten
-      in order to make understanding the API of the AXA Web Toolkit
-      as easy as possible. Come back again in a couple of days!</p>
-    </div>
+    {{#with menu.sassdoc}}
+      {{#each childrenArray}}
+        {{#with file}}
+          <h2 class="h3" id="{{slug}}">{{comment.context.name}}</h2>
+          <p class="lead">{{comment.description}}</p>
+
+          <p>Type: <span class="label label-primary">{{comment.context.type}}</span></p>
+
+          {{#if comment.context.code}}
+          <div>
+            <h3 class="h4">Source:</h3>
+            <pre>{{comment.context.code}}</pre>
+          </div>
+          {{/if}}
+
+          {{#if comment.context.value}}
+          <div>
+            <h3 class="h4">Source</h3>
+            <pre>{{comment.context.value}}</pre>
+          </div>
+          {{/if}}
+
+          {{#if comment.parameter}}
+            <h3 class="h4">Parameters</h3>
+            <dl>
+              {{#each comment.parameter}}
+                <dt>{{name}} ({{type}} - Default: {{default}})</dt>
+                <dd>{{description}}</dd>
+              {{/each}}
+            <dl>
+          {{/if}}
+
+          {{#if comment.see}}
+            <h3 class="h4">See</h3>
+            <ul>
+              {{#each comment.see}}
+                <li><code>{{name}}</code></li>
+              {{/each}}
+            </ul>
+          {{/if}}
+
+          {{#if comment.example}}
+            {{#each comment.example}}
+              <div>
+                <h3 class="h4">Example {{@index}}: {{description}} ({{type}})</h3>
+                <pre>{{code}}</pre>
+              </div>
+            {{/each}}
+          {{/if}}
+        {{/with}}
+      {{/each}}
+    {{/with}}
 
   {{/inline}}
 {{/page}}

lib/build-docs.js

@@ -1,15 +1,10 @@
 import path from 'path'
-import marked from 'marked'
 import _ from 'lodash'
 import fs from 'fs'
 import handlebars from 'handlebars'
 
-import highlight from 'highlight.js'
 import Metalsmith from 'metalsmith'
-import collections from 'metalsmith-collections'
 import layouts from 'metalsmith-layouts'
-import pug from 'metalsmith-pug'
-import markdown from 'metalsmith-markdown'
 import branch from 'metalsmith-branch'
 import define from 'metalsmith-define'
 import drafts from 'metalsmith-drafts'
@@ -22,9 +17,6 @@ import watch from 'metalsmith-watch'
 import inplace from 'metalsmith-in-place'
 
 import packageJson from '../package.json'
-import sampleJadeFilter from './jade-filter-sample'
-import highlightCodeJadeFilter from './jade-filter-highlightcode'
-import markedRenderer from './marked-renderer'
 import nav from './metalsmith-nav'
 import searchIndexData from './metalsmith-search-index'
 import log from './metalsmith-log'
@@ -38,24 +30,6 @@ import hbsHighlight from './handlebars-highlight'
 const cwd = path.join(__dirname, '../')
 const metalsmithSource = './docs'
 
-// basedir for include paths
-const pugBaseDir = path.join(cwd, metalsmithSource)
-
-// Pug filters
-const pugFilters = {
-  sample: sampleJadeFilter,
-  highlight: highlightCodeJadeFilter,
-}
-
-// Configure marked
-marked.setOptions({
-  renderer: markedRenderer,
-  langPrefix: '',
-  highlight(code, lang) {
-    return highlight.getLanguage(lang) ? highlight.highlight(lang, code).value : undefined
-  },
-})
-
 handlebars.registerHelper('relative', hbsRelative)
 handlebars.registerHelper('eq', hbsEquals)
 handlebars.registerHelper('get', hbsGet)
@@ -92,7 +66,7 @@ metalsmith.use(drafts())
 metalsmith.use(log('Excluded draft pages'))
 
 metalsmith.use(
-  branch(['**/*.hbs', '**/*.pug', '!layouts/**', '**/*.md', '!_*/**/*.md', '!**/snippets/**'])
+  branch(['**/*.hbs', '**/*.json', '!layouts/**', '!**/snippets/**'])
     .use(drafts())
     .use(nav())
   )
@@ -103,11 +77,7 @@ metalsmith.use(define({
   icons: fs.readdirSync(path.join(cwd, 'icons')).map(file => ({
     name: file.replace(/\.svg$/, ''),
   })),
-  readme: fs.readFileSync(path.join(cwd, 'README.md'), 'utf8'),
   package: packageJson,
-  marked,
-  // basedir for layout files
-  basedir: pugBaseDir,
   process: {
     env: process.env,
   },
@@ -122,22 +92,13 @@ metalsmith.use(
 
 metalsmith.use(log('Prepared the html pages'))
 
-// Do the markdown pages
-metalsmith.use(
-  branch(['**/*.md', '!_*/**/*.md'])
-    .use(relative())
-    .use(markdown({
-      useMetadata: true,
-      marked,
-    }))
-)
-metalsmith.use(log('Compiled the markdown pages'))
-
 metalsmith.use(
   branch(['**/snippets/**/*.hbs'])
     .use(filepath({}))
+    // eslint-disable-next-line no-shadow
     .use((files, metalsmith, done) => {
-      _.forEach(files, file => {
+      _.forEach(files, (file) => {
+        // eslint-disable-next-line no-param-reassign
         file.link = file.link.replace('.hbs', '.html')
       })
       return done()
@@ -147,9 +108,11 @@ metalsmith.use(
       partials: 'docs/hbs-partials',
       rename: true,
     }))
+    // eslint-disable-next-line no-shadow
     .use((files, metalsmith, done) => {
       const metadata = metalsmith.metadata()
       metadata.snippets = {}
+      // eslint-disable-next-line no-shadow
       _.forEach((files, file) => {
         const name = file.link.substring(0, file.link.length - 5)
         metadata.snippets[name] = file.contents.toString()
@@ -165,8 +128,10 @@ metalsmith.use(
     '!**/snippets/**/*.hbs',
   ])
     .use(filepath({}))
+    // eslint-disable-next-line no-shadow
     .use((files, metalsmith, done) => {
-      _.forEach(files, file => {
+      _.forEach(files, (file) => {
+        // eslint-disable-next-line no-param-reassign
         file.link = file.link.replace('.hbs', '.html')
       })
       return done()
@@ -178,36 +143,6 @@ metalsmith.use(
     })))
 metalsmith.use(log('Compiled all handlebars pages'))
 
-metalsmith.use(log('Baking a cake...'))
-// Do the Pug pages
-metalsmith.use(
-  branch(['**/*.pug', '!layouts/**'])
-    .use(filepath({
-      absolute: true,
-    }))
-    .use((files, metalsmith, done) => {
-      _.forEach(files, file => {
-        file.link = file.link.replace('.pug', '.html')
-      })
-      return done()
-    })
-    .use(relative())
-    .use(collections({
-      navigation: {
-        sortBy: 'order',
-        refer: false,
-      },
-    }))
-    .use(pug({
-      useMetadata: true,
-      locals: metalsmith.metadata(),
-      pretty: true,
-      basedir: pugBaseDir,
-      filters: pugFilters,
-    }))
-)
-metalsmith.use(log('Compiled all pug pages'))
-
 // Duplicate snippets to be used as demo pages (will be wrapped with templates below)
 metalsmith.use(
   branch(['**/*.html'])
@@ -269,7 +204,10 @@ metalsmith.destination('./dist/docs/')
 // Function to run the magic
 metalsmith.build((err) => {
   if (err) {
+    // eslint-disable-next-line no-console
     console.log((new Date()).toLocaleTimeString(), 'Failed!', err)
   }
+
+  // eslint-disable-next-line no-console
   console.log((new Date()).toLocaleTimeString(), 'Done!')
 })

lib/handlebars-highlight.js

@@ -1,7 +1,7 @@
 import handlebars from 'handlebars'
 import hljs from 'highlight.js'
 
-const highlight = function(opts) {
+function highlight(opts) {
   const markup = opts.fn(this).trim()
   const highlighted = hljs.highlight('html', markup)