feat(docz-core): add support for custom head or scripts

packages/docz-core/package.json

@@ -47,7 +47,6 @@
     "koa-static": "^4.0.3",
     "load-cfg": "^0.0.1",
     "lodash.get": "^4.4.2",
-    "lodash.template": "^4.4.0",
     "prettier": "^1.12.0",
     "react-hot-loader": "4.2.0",
     "remark-frontmatter": "^1.2.0",
@@ -78,7 +77,6 @@
     "@types/express": "^4.11.1",
     "@types/html-webpack-plugin": "^2.30.3",
     "@types/lodash.get": "^4.4.3",
-    "@types/lodash.template": "^4.4.3",
     "@types/node": "10.1.2",
     "@types/prettier": "^1.12.4",
     "@types/resolve": "^0.0.8",

packages/docz-core/src/Entries.ts

@@ -3,12 +3,13 @@ import * as path from 'path'
 
 import * as paths from './config/paths'
 import { propOf } from './utils/helpers'
-import { mkd, touch, compiled } from './utils/fs'
+import { mkd, touch, compiled, readIfExist } from './utils/fs'
 
 import { Entry, parseMdx } from './Entry'
 import { Config } from './commands/args'
 
 const fromTemplates = (file: string) => path.join(paths.templates, file)
+const fromDocz = (file: string) => path.join(paths.docz, file)
 
 const writeAppFiles = async (config: Config): Promise<void> => {
   const { plugins, title, description, theme } = config
@@ -20,6 +21,8 @@ const writeAppFiles = async (config: Config): Promise<void> => {
   const root = await compiled(fromTemplates('root.tpl.js'))
   const js = await compiled(fromTemplates('index.tpl.js'))
   const html = await compiled(fromTemplates('index.tpl.html'))
+  const head = await readIfExist(fromDocz('_head.html'))
+  const scripts = await readIfExist(fromDocz('_scripts.html'))
 
   const rawRootJs = root({
     theme,
@@ -35,6 +38,8 @@ const writeAppFiles = async (config: Config): Promise<void> => {
   const rawIndexHtml = html({
     title,
     description,
+    head: head ? head.trimRight() : '',
+    scripts: scripts ? scripts.trimRight() : '',
   })
 
   await touch(paths.rootJs, rawRootJs)
@@ -44,7 +49,7 @@ const writeAppFiles = async (config: Config): Promise<void> => {
 
 const writeImports = async (entries: EntryMap): Promise<void> => {
   const imports = await compiled(fromTemplates('imports.tpl.js'))
-  await touch(paths.importsJs, imports({ entries }))
+  await touch(paths.importsJs, imports({ entries: Object.values(entries) }))
 }
 
 export type EntryMap = Record<string, Entry>

packages/docz-core/src/utils/fs.ts

@@ -1,7 +1,7 @@
 import * as path from 'path'
 import * as fs from 'fs'
 import { test, mkdir } from 'shelljs'
-import template from 'lodash.template'
+import { compile } from 'art-template'
 
 import { format } from './format'
 
@@ -20,17 +20,22 @@ export const touch = (file: string, raw: string) =>
     stream.end()
   })
 
-export const read = (filepath: string): Promise<string> =>
+export const read = (file: string): Promise<string> =>
   new Promise<string>((resolve, reject) => {
     let data = ''
-    const stream = fs.createReadStream(filepath, { encoding: 'utf-8' })
+    const stream = fs.createReadStream(file, { encoding: 'utf-8' })
 
     stream.on('data', chunk => (data += chunk))
     stream.on('end', () => resolve(data))
     stream.on('error', err => reject(err))
   })
 
+export const readIfExist = async (file: string): Promise<string | null> => {
+  if (!test('-f', file)) return Promise.resolve(null)
+  return read(file)
+}
+
 export const compiled = async (file: string): Promise<(args: any) => string> =>
   read(file)
-    .then(data => template(data))
+    .then(data => compile(data))
     .catch(err => err)

packages/docz-core/templates/imports.tpl.js

@@ -1,4 +1,4 @@
 export const imports = {
-  <% Object.values(entries).forEach(function(entry) { %>'<%- entry.filepath %>': () =>
+  <% entries.forEach(function(entry) { %>'<%- entry.filepath %>': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "<%- entry.slug %>" */ '<%- entry.filepath %>'),<% }) %>
 }

packages/docz-core/templates/index.tpl.html

@@ -6,8 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title><%- title %></title>
+  <%- head %>
 </head>
 <body>
   <div id="root"></div>
+  <%- scripts %>
 </body>
 </html>

yarn.lock

@@ -1429,12 +1429,6 @@
   dependencies:
     "@types/lodash" "*"
 
-"@types/lodash.template@^4.4.3":
-  version "4.4.3"
-  resolved "https://registry.npmjs.org/@types/lodash.template/-/lodash.template-4.4.3.tgz#3c6df2eb7e964cd56b12ce55ac0e6669fef6216f"
-  dependencies:
-    "@types/lodash" "*"
-
 "@types/lodash@*":
   version "4.14.108"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.108.tgz#02656af3add2e5b3174f830862c47421c00ef817"
@@ -5538,7 +5532,7 @@ lodash.sumby@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/lodash.sumby/-/lodash.sumby-4.6.0.tgz#7d87737ddb216da2f7e5e7cd2dd9c403a7887346"
 
-lodash.template@^4.0.2, lodash.template@^4.4.0:
+lodash.template@^4.0.2:
   version "4.4.0"
   resolved "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
   dependencies: