module.exports = {
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width,minimum-scale=1' }
    ],
    link: [
      { rel: 'canonical', href: '/' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  },
  css: ['~/assets/main.css'],
  loading: false, // Disable loading bar since AMP will not generate a dynamic page
  render: {
    // Disable resourceHints since we don't load any scripts for AMP
    resourceHints: false
  },
  hooks: {
    // This hook is called before rendering the html to the browser
    'render:route': (url, result) => {
      let html = result.html
      // Add amp-custom tag to added CSS
      html = html.replace(/<style data-vue-ssr/g, '<style amp-custom data-vue-ssr')
      // Remove every script tag from generated HTML
      html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
      // Add AMP script before </head>
      const ampScript = '<script async src="https://cdn.ampproject.org/v0.js"></script>'
      html = html.replace('</head>', ampScript + '</head>')
      // Update result html
      result.html = html
    }
  }
}