Update asset build pipeline

.gitignore

@@ -8,3 +8,7 @@
 /erl_crash.dump
 /node_modules
 /npm-debug.log
+
+# Ignore artifacts from non-production builds
+formatters/epub/dist/epub.js
+formatters/html/dist/html.js

.travis.yml

@@ -5,13 +5,17 @@ otp_release: 20.3
 notifications:
   recipients:
     - jose.valim@plataformatec.com.br
+env:
+  global:
+    - MIX_ENV=test
+    - DISPLAY=:99.0
+    - NODE_VERSION="10.10.0"
 before_script:
-  - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
   - mix local.hex --force
   - mix deps.get
-env:
-  - MIX_ENV=test
+before_install:
+  - nvm install $NODE_VERSION
 script:
   - mix format --check-formatted
   - mix test

README.md

@@ -63,26 +63,26 @@ You can ExDoc via the command line as follows:
 
 1. Install ExDoc as an escript:
 
-    ```console
+    ```bash
     $ mix escript.install hex ex_doc
     ```
 
 2. Then you are ready to use it in your projects. First, move into your project directory and make sure it is already compiled:
 
-    ```console
+    ```bash
     $ cd PATH_TO_YOUR_PROJECT
     $ mix compile
     ```
 
 3. Next invoke the ex_doc executable from your project:
 
-    ```console
+    ```bash
     $ ex_doc "PROJECT_NAME" "PROJECT_VERSION" path/to/project/ebin -m "PROJECT_MODULE" -u "https://github.com/GITHUB_USER/GITHUB_REPO" -l path/to/logo.png
     ```
 
 4. By default, ex_doc produces HTML files, but, you can also create a EPUB document passing the option `--formatter epub`:
 
-    ```console
+    ```bash
     $ PATH_TO_YOUR_EXDOC/bin/ex_doc "PROJECT_NAME" "PROJECT_VERSION" path/to/project/ebin -m "PROJECT_MODULE" -u "https://github.com/GITHUB_USER/GITHUB_REPO" -l path/to/logo.png -f epub
     ```
 

assets/.eslintignore

@@ -0,0 +1,7 @@
+# Ignore build artifacts
+formatters/*
+doc/*
+test/*
+
+# Ignore JavaScript files in dependencies
+deps/*

.eslintrc → assets/.eslintrc

@@ -10,6 +10,7 @@
   },
   "rules": {
     "no-path-concat": 0,
-    "no-useless-escape": 0
+    "no-useless-escape": 0,
+    "object-curly-spacing": 0
   }
 }

assets/README.md

@@ -1,49 +1,41 @@
 # Assets
 
-In this directory live all assets for `ExDoc`. The ready to use built
+In this directory live all assets for `ExDoc`. The built, ready-to-use
 versions are found in `formatters/{html,epub}/dist`.
 
 To work on these assets you need to install [Node.js] (version 10) and
-[npm] (version 5.6) first (maybe as superuser or administrator).
+[NPM] (version 5.6) first (maybe as superuser or administrator).
 
-## npm run scripts
+## `npm run` scripts
 
 The following scripts are available
 
 ### `build`
 
 This will build a complete production bundle, including JavaScript and CSS.
-If you run `mix build` at `ExDoc` root after changing your assets, it will
-automatically recompile the assets, invoke `mix compile --force` and generate
+If you run `mix build` at the `ExDoc` root after changing your assets, it will
+automatically recompile the assets, invoke `mix compile --force`, and generate
 fresh docs with your changes.
 
-### `clean`
-
-Clean all content in the build folder `dist` for each format.
-
 ### `lint`
 
-Lint all JavaScript files in `js` using [ESLint].
+Lint all JavaScript files using [ESLint].
 
 ### `test`
 
-Run all the available tests for JavaScript using [Karma].
+Run all the available JavaScript tests using [Karma].
 
 ### `watch`
 
-Builds JavaScript and CSS on file changes in `assets/less/**/*.less` or
-`assets/js/**/*.js` for each format.
+Builds JavaScript and CSS on file changes for each format.
 
-## Gulp
+## Webpack
 
-Internally we use [gulp]. The project is organized in tasks
-(`watch`, `build`, etc) and subtasks based on HTML and EPUB
-formats. We also use [webpack] and [less].
+Internally we use [Webpack]. We also use [Less] for organizing stylesheets.
 
 [Node.js]: https://nodejs.org/
-[npm]: https://www.npmjs.com/
-[gulp]: https://www.npmjs.com/package/gulp
-[webpack]: http://webpack.github.io/
-[less]: http://lesscss.org/
-[ESLint]: http://eslint.org/
-[Karma]: http://karma-runner.github.io/
+[NPM]: https://www.npmjs.com/
+[ESLint]: https://eslint.org/
+[Karma]: https://karma-runner.github.io/
+[Webpack]: https://webpack.js.org/
+[Less]: http://lesscss.org/

assets/babel.config.js

@@ -0,0 +1,7 @@
+const presets = [
+  ['@babel/env', {
+    useBuiltIns: 'usage'
+  }]
+]
+
+module.exports = { presets }

assets/js/app.js

@@ -2,7 +2,26 @@
 // ------------
 
 import $ from 'jquery'
-import hljs from 'highlight.js/build/highlight.pack'
+import Handlebars from 'handlebars/runtime'
+
+import hljs from 'highlight.js/lib/highlight'
+import bash from 'highlight.js/lib/languages/bash'
+import css from 'highlight.js/lib/languages/css'
+import diff from 'highlight.js/lib/languages/diff'
+import erlang from 'highlight.js/lib/languages/erlang'
+import erlangRepl from 'highlight.js/lib/languages/erlang-repl'
+import http from 'highlight.js/lib/languages/http'
+import javascript from 'highlight.js/lib/languages/javascript'
+import json from 'highlight.js/lib/languages/json'
+import markdown from 'highlight.js/lib/languages/markdown'
+import sql from 'highlight.js/lib/languages/sql'
+import xml from 'highlight.js/lib/languages/xml'
+
+import isArray from './template-helpers/isArray'
+import isEmptyNode from './template-helpers/isEmptyNode'
+import isLocal from './template-helpers/isLocal'
+import newGroup from './template-helpers/newGroup'
+import showSummary from './template-helpers/showSummary'
 
 import {initialize as initEvents} from './events'
 import {initialize as initSidebar} from './sidebar'
@@ -12,11 +31,29 @@ import {initialize as initMakeup} from './makeup'
 window.$ = $
 
 $(() => {
-  // Setup Highlight.js
+  // Set up Handlebars.js
+  Handlebars.registerHelper('isArray', isArray)
+  Handlebars.registerHelper('isEmptyNode', isEmptyNode)
+  Handlebars.registerHelper('isLocal', isLocal)
+  Handlebars.registerHelper('newGroup', newGroup)
+  Handlebars.registerHelper('showSummary', showSummary)
+
+  // Set up Highlight.js
   hljs.configure({
     tabReplace: '    ', // 4 spaces
-    languages: []       // disable auto-detect
+    languages: [] // disable auto-detect
   })
+  hljs.registerLanguage('bash', bash)
+  hljs.registerLanguage('css', css)
+  hljs.registerLanguage('diff', diff)
+  hljs.registerLanguage('erlang', erlang)
+  hljs.registerLanguage('erlang-repl', erlangRepl)
+  hljs.registerLanguage('http', http)
+  hljs.registerLanguage('javascript', javascript)
+  hljs.registerLanguage('json', json)
+  hljs.registerLanguage('markdown', markdown)
+  hljs.registerLanguage('sql', sql)
+  hljs.registerLanguage('xml', xml)
 
   initNightMode()
   initSidebar()

assets/js/epub.js

@@ -1,8 +1,37 @@
 // Dependencies
 // ------------
 
-import hljs from 'highlight.js/build/highlight.pack'
+import hljs from 'highlight.js/lib/highlight'
+import bash from 'highlight.js/lib/languages/bash'
+import css from 'highlight.js/lib/languages/css'
+import diff from 'highlight.js/lib/languages/diff'
+import erlang from 'highlight.js/lib/languages/erlang'
+import erlangRepl from 'highlight.js/lib/languages/erlang-repl'
+import http from 'highlight.js/lib/languages/http'
+import javascript from 'highlight.js/lib/languages/javascript'
+import json from 'highlight.js/lib/languages/json'
+import markdown from 'highlight.js/lib/languages/markdown'
+import sql from 'highlight.js/lib/languages/sql'
+import xml from 'highlight.js/lib/languages/xml'
+
 import {initialize as initMakeup} from './makeup'
 
+// Set up Highlight.js
+hljs.configure({
+  tabReplace: '    ', // 4 spaces
+  languages: [] // disable auto-detect
+})
+hljs.registerLanguage('bash', bash)
+hljs.registerLanguage('css', css)
+hljs.registerLanguage('diff', diff)
+hljs.registerLanguage('erlang', erlang)
+hljs.registerLanguage('erlang-repl', erlangRepl)
+hljs.registerLanguage('http', http)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('markdown', markdown)
+hljs.registerLanguage('sql', sql)
+hljs.registerLanguage('xml', xml)
+
 initMakeup()
 hljs.initHighlightingOnLoad()

assets/js/sidebar.js

@@ -2,7 +2,7 @@
 // ------------
 
 import $ from 'jquery'
-import {throttle} from 'lodash'
+import throttle from 'lodash.throttle'
 
 // Constants
 // ---------

assets/karma.conf.js

@@ -1,4 +1,4 @@
-var webpackConfig = require('./webpack.config').development
+const webpackConfig = require('./webpack/development.js')
 
 module.exports = function (config) {
   config.set({

assets/less/app.less

@@ -1,8 +1,8 @@
 @import (inline) './fonts.css';
 
-@import 'npm://highlight.js/src/styles/tomorrow';
-@import 'npm://normalize.css/normalize';
-@import 'npm://flex.less/flex';
+@import (css) '~highlight.js/styles/tomorrow.css';
+@import (css) '~normalize.css/normalize.css';
+@import '~flex.less/flex.less';
 
 @import './mixins';
 @import './variables';

assets/less/content/code.less

@@ -1,3 +1,5 @@
+@import '../variables';
+
 a.no-underline,
 pre a {
   color: @purple;

assets/less/content/footer.less

@@ -1,4 +1,6 @@
 .footer {
+  @import '../variables';
+
   margin: 4em auto 1em;
   text-align: center;
   font-style: italic;
@@ -13,4 +15,4 @@
     color: @mediumGray;
     .linkUnderlines(@mediumGray)
   }
-}
+}

assets/less/content/functions.less

@@ -1,3 +1,5 @@
+@import '../variables';
+
 @keyframes blink-background {
   from {
     background-color: @detailGray;
@@ -102,4 +104,4 @@ div.deprecated {
   display: block;
   padding: 9px 15px;
   background-color: @deprecated;
-}
+}

assets/less/content/general.less

@@ -1,3 +1,4 @@
+@import '../variables';
 
 h1,
 h2,

assets/less/content/summary.less

@@ -1,4 +1,6 @@
 .summary {
+  @import '../variables';
+
   h2 {
     font-weight: 700;
 

assets/less/epub.less

@@ -1,5 +1,4 @@
-
-@import 'npm://highlight.js/src/styles/tomorrow';
+@import (css) '~highlight.js/styles/tomorrow.css';
 
 @import './variables';
 @import './makeup';

assets/less/night/content.less

@@ -1,4 +1,6 @@
 body.night-mode .content-inner {
+  @import '../variables';
+
   color: @nightTextBody;
 
   @import './content/general';

assets/less/night/content/code.less

@@ -1,3 +1,5 @@
+@import '../../variables';
+
 code {
   background-color: @nightCodeBackground;
   border-color: lighten(@nightCodeBackground, 10%);

assets/less/night/content/footer.less

@@ -1,4 +1,6 @@
 .footer {
+  @import '../../variables';
+
   color: @mediumGray;
 
   .line {
@@ -8,4 +10,4 @@
   a {
     color: @mediumGray;
   }
-}
+}

assets/less/night/content/functions.less

@@ -1,3 +1,5 @@
+@import '../../variables';
+
 @keyframes night-blink-background {
   from {
     background-color: @nightHeader;

assets/less/night/content/general.less

@@ -1,3 +1,5 @@
+@import '../../variables';
+
 h1,
 h2,
 h3,

assets/less/night/night.less

@@ -17,7 +17,8 @@
 }
 
 body.night-mode {
-  @import 'npm://highlight.js/src/styles/tomorrow-night';
+  @import '../variables';
+  @import (css) '~highlight.js/styles/tomorrow-night.css';
   background: @nightBackground;
 
   .content-outer {