generate-tailored-css.coffee

#!/usr/bin/env coffee

process.setMaxListeners(0)

penthouse = require('penthouse')
path = require('path')
fs = require('fs')
_ = require('lodash')
async = require('async')
os = require('os')

flatMap = (array, cb) ->
  _.flatten(_.map(array, cb))

# Height is tall enough to get >50% of traffic.
DESKTOP_SIZES = [
  width: 2800
  height: 900
,
  # Just below our large breakpoint.
  width: 1279
  height: 900
,
  # Our small breakpoint.
  width: 1024
  height: 900
]

MOBILE_SIZES = [
  width: 450
  height: 810
]

HUBPAGE_URLS = [
  "http://localhost:2100/"
  "http://localhost:2100/translation/"
]

FORCED_STYLES = [
  /\.fluencia-sidebar.*/
  /.*focus.*/
  /\.input-table*/
  /\.sd-ad.*/
  /\.ad.*/
  /\.home-articles.*/
  /\.announcement/
  /.card-announcement/
  /.card-tab/
]

# Styles needed for desktop hubpage ATF for at least 50% of users.
desktopHubpageATF =
  outputName: 'desktop-hubpage-tailored.css'
  inputName: 'desktop.css'
  sizes: DESKTOP_SIZES
  urls: HUBPAGE_URLS
  forceInclude: [
    /\.home-notice.*/
  ]

# Styles needed for desktop translate ATF for at least 50% of users.
desktopTranslationATF =
  outputName: 'desktop-translation-tailored.css'
  inputName: 'desktop.css'
  sizes: DESKTOP_SIZES
  urls: [
    "http://localhost:2100/translate/estar"
    "http://localhost:2100/translate/day%20care"
    "http://localhost:2100/translate/knknknkn"
    "http://localhost:2100/translate/i%20love%20you"
  ]
  forceInclude: [
    /\.sdmd-accent-box.*/
    /\.lang-tabs.*/
    /\.tab-content.*/
    /\.usage-note/
    /\.d-copyright/
    /\.context/
    /\.mt.*/
    /\.audio-.*/
    /\.card-tab/
  ]

addConfigDefaults = (config) ->
  {
    width
    height
    url
    inputName
    forceInclude = []
  } = config
  return {
    url: url
    strict: true
    css: path.join(__dirname, "../public/css/#{inputName}")
    width: width
    height: height
    forceInclude: FORCED_STYLES.concat(forceInclude)
    timeout: 120000
    strict: false
    maxEmbeddedBase64Length: 10000
    userAgent: 'Penthouse Critical Path CSS Generator'
    renderWaitTime: 1000
    blockJSRequests: true
  }

builds = [
  desktopHubpageATF
  desktopTranslationATF
]

getPenthouseTask = (config, cb) ->
  withDefaults = addConfigDefaults(config)
  (cb) ->
    console.log "- #{withDefaults.url}: [#{withDefaults.width} x #{withDefaults.height}]"
    penthouse(withDefaults, cb)

getConfigs = ({sizes, urls, inputName, forceInclude}) ->
  flatMap sizes, ({ width, height}) ->
    urls.map (url) ->
      { width, height, url, inputName, forceInclude }

getTasks = (pageType) ->
  configs = getConfigs(pageType)
  configs.map(getPenthouseTask)

generateTailoredStyles = (pageType, cb) ->
  outputPath = path.join(__dirname, "../public/css/#{pageType.outputName}")
  tasks = getTasks(pageType)
  async.parallel tasks, (err, results) ->
    return cb(err) if err
    cb(null, outputPath, results.join('\n'))

run = (pageType, cb) ->
  generateTailoredStyles pageType, (err, stylesPath, tailoredStyles) ->
    return cb(err) if err
    fs.writeFile stylesPath, tailoredStyles, cb

main = () ->
  async.eachSeries builds, run, (err) ->
    if err
      console.error('error when generating tailored css', err)
      process.exit(1)
    else
      process.exit(0)

if require.main is module
  main()