const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

const name = 'CEBG'

const YOUTUBE_WIDGET_SCRIPT = /<script type="text\/javascript" id="www-widgetapi-script".+?<\/script>/g
const YOUTUBE_PLAYER_SCRIPT = '<script src="https://www.youtube.com/player_api"></script>'
module.exports = {
  // TODO: Remember to change publicPath to fit your need
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    https: false,
    port: 8992
  },
  pwa: {
    name: name
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, 'src/scss/breakpoints.scss')
      ]
    }
  },
  chainWebpack(config) {
    // provide the app's title in html-webpack-plugin's options list so that
    // it can be accessed in index.html to inject the correct title.
    // https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
    config.plugin('html').tap(args => {
      args[0].title = 'CEBG: CRYPTO ELITE‘S BATTLEGROUNDS'
      return args
    })
  },
  configureWebpack(config) {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new PrerenderSPAPlugin({
          indexPath: path.resolve('dist/index.html'),
          staticDir: path.resolve('dist'),
          routes: ['/', '/nft', '/gameplay', '/tokenomic', '/roadmap', '/team'],
          renderer: new Renderer({
            headless: true,
            defaultViewport: {
              width: 1920,
              height: 1080
            }
          }),
          postProcess(renderedRoute) {
            renderedRoute.html = renderedRoute.html.replace(YOUTUBE_WIDGET_SCRIPT, '').replace(YOUTUBE_PLAYER_SCRIPT, '')
            return renderedRoute
          }
        })
      )
    }
  }
}