const pkg = require('./package')

module.exports = {
  mode: 'universal',

  server: {
    port: process.env.PORT_APP,
    host: '0.0.0.0',
  },

  serverMiddleware: [
    '~/api/contact',
  ],
  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    titleTemplate: 'Marc Leopold | %s',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

      { hid: 'description', name: 'description', content: 'Photographer, Marc Leopold has images in numerous collections and publications. Here is a glimpse of his work, an insight into his philosophy and motivations.' },

      { property: 'og:image', content: 'https://leopold.rayelliott.dev/img/open-graph/marc-leopold-ss.png'},
      { property: 'og:image:width', content: '1200'},
      { property: 'og:image:height', content: '600'},
      { property: 'og:image:type', content: 'image/png' },
      { property: 'og:title', content: 'Marc Leopold Photography' },
      { property: 'og:url', content: 'https://leopold.rayelliott.dev' },
      { property: 'og:site_name', content: 'Marc Leopold Photography' },
      { property: 'og:type', content: 'website'},
      { property: 'og:description', content: 'Marc Leopold is a Chicago born photographer whose images have appeared in many collections and publications. His website is a showcase of his outstanding work and an insight into his philosophy and motivations.' },
      { name: 'twitter:card', content: 'summary' },
      { name: 'twitter:title', content: 'Marc Leopold Photography' },
      { name: 'twitter:creator', content: '@studiovxweb' },
    ],
    link: [
      { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
      { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
      { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
      { rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=' +
              'Montserrat:400,600|' +
              'Raleway:400,600|' +
              'Satisfy'
      },
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: {
    color: '#fff',
    height: '1px',
  },

  /*
  ** Global CSS
  */
  css: [
    '@/assets/scss/style.scss'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~/plugins/Vuelidate' },
    // { src: '~/plugins/owa.js', mode: 'client' }
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
    'nuxt-buefy',
    '@nuxtjs/style-resources',
    '@nuxtjs/proxy',
    ['@nuxtjs/dotenv', {
      path: '../',
      systemvars: false,
      only: [
        'URL_INTERNAL',
        'URL_CMS',
        'URL_APP',
        'PORT_APP',
        'PORT_CMS',
      ],
    }]
  ],

  styleResources: {
    scss: './assets/scss/_globals.scss',
  },

  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    proxy: true,
    baseURL: process.env.URL_CMS,
    browserBaseURL: process.env.URL_APP,
    debug: false,
  },

  proxy: {
    '/api/v1/': 'https://cms.leopold.rayelliott.dev',
    // FIXME: why this no work?
    // '/api/v1/': process.env.URL_CMS,
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // vue-svg-loader
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
      svgRule.test = /\.(png|jpe?g|gif|webp)$/
      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      })

      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}