aanchal-stories/build/html.js at 85ad6f90ad5d7953b423feafbee8ca89df62bf51 · tableflip/aanchal-stories · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
require('babel-register')()

const fs = require('fs')
const path = require('path')
const mkdirp = require('mkdirp')
const { createElement } = require('react')
const { renderToStaticMarkup } = require('react-dom/server')
const requireDirectory = require('require-directory')
const { Helmet } = require('react-helmet')

console.time('Build html total')

const outputDir = path.resolve(__dirname, '../dist')
const data = require('./data')()

requireDirectory(module, '../pages', {
  include: /index.js$/,
  visit: (content, filePath) => {
    // fileDir: '/Users/oli/Code/tableflip/aanchal-stories/pages/story-4'
    const pageDir = path.dirname(filePath)
    // name: story-4
    const name = path.basename(pageDir)

    console.time(`Build ${name}`)

    const props = {
      content: data.pages[name].content,
      facts: data.facts,
      pages: data.pages
    }
    const Component = require(filePath).default

    const appHtml = renderToStaticMarkup(createElement(Component, props))
    const helmet = Helmet.renderStatic()
    const docHtml = `<!doctype html>
<html ${helmet.htmlAttributes.toString()}>
  <head>
    ${helmet.title.toString()}
    ${helmet.meta.toString()}
    ${helmet.link.toString()}
  </head>
  <body ${helmet.bodyAttributes.toString()}>
    <div id="react-root">
      ${appHtml}
    </div>
  </body>
</html>`

    const subdir = name === 'home' ? '.' : name
    const outFile = path.join(outputDir, subdir, 'index.html')
    mkdirp.sync(path.dirname(outFile))
    fs.writeFileSync(outFile, docHtml)
    console.timeEnd(`Build ${name}`)
  }
})

console.timeEnd('Build html total')

fs.writeFileSync(
  path.join(__dirname, 'data.json'),
  JSON.stringify(data, null, 2)
)