nuxt.config.js

import i18n from './plugins/i18n.js'
import config from './static/settings/globals.json'

export default {
  target: 'static',

  /**
   * Global page headers (https://go.nuxtjs.dev/config-head)
   */
  head: {
    title: config.site_title || process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content:
          config.site_description || process.env.npm_package_description || '',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }],
    bodyAttrs: {
      class: process.env.NODE_ENV === 'development' ? 'debug-screens' : '',
    },
  },

  /**
   * Customize the progress-bar color
   */
  loading: { color: '#7c3aed' },

  /**
   * Global CSS (https://go.nuxtjs.dev/config-css)
   */
  css: [],

  /**
   * Auto import components (https://go.nuxtjs.dev/config-components)
   */
  components: true,

  /**
   * Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   */
  plugins: ['~plugins/vue-tailwind', '~/plugins/directives.client.js'],

  /**
   * Modules for dev and build (https://go.nuxtjs.dev/config-modules)
   */
  buildModules: [
    // https://composition-api.nuxtjs.org/
    // TODO: remove it when nuxt3 released
    '@nuxtjs/composition-api',
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    // https://github.com/nuxt-community/svg-module
    '@nuxtjs/svg',
    // https://color-mode.nuxtjs.org/
    '@nuxtjs/color-mode',
    // https://github.com/nuxt-community/fontawesome-module
    [
      '@nuxtjs/fontawesome',
      {
        component: 'fa', // component name
        addCss: false,
        icons: {
          regular: ['faClock'],
          solid: [
            'faHome',
            'faSearch',
            'faSkullCrossbones',
            'faChevronLeft',
            'faChevronRight',
            'faArrowLeft',
            'faArrowRight',
            'faSun',
            'faMoon',
            'faHeart',
            'faInfoCircle',
            'faCheckCircle',
            'faCheck',
            'faExclamationCircle',
            'faExclamationTriangle',
            'faExternalLinkAlt',
            'faBars',
            'faUserCircle',
            'faGlobe',
            'faAngry',
            'faCompressArrowsAlt',
            'faExpandArrowsAlt',
            'faFont',
            'faWheelchair',
            'faCaretDown',
          ],
          brands: [
            'faCreativeCommonsNcEu',
            'faDiaspora',
            'faDiscourse',
            'faGithub',
            'faGitlab',
            'faYoutube',
            'faRocketchat',
            'faFacebook',
            'faTwitter',
            'faDiscord',
            'faApple',
            'faAndroid',
            'faBitcoin',
            'faChrome',
            'faFirefox',
            'faCodepen',
            'faDev',
            'faDocker',
            'faDropbox',
            'faMastodon',
            'faMedium',
            'faNpm',
            'faReddit',
            'faSlack',
            'faSoundcloud',
            'faSpotify',
            'faSteam',
            'faTeamspeak',
            'faTelegram',
            'faTrello',
            'faVimeo',
            'faWhatsapp',
            'faWikipediaW',
            'faWordpress',
          ],
        },
      },
    ],
  ],

  /**
   * Nuxt.js modules (https://go.nuxtjs.dev/config-modules)
   */
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://pwa.nuxtjs.org
    '@nuxtjs/pwa',
    // https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
    // https://content.nuxtjs.org/fr
    '@nuxt/content',
    // https://i18n.nuxtjs.org
    ['nuxt-i18n', i18n],
    // https://github.com/Chantouch/nuxt-clipboard
    'nuxt-clipboard',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  // https://pwa.nuxtjs.org/manifest
  pwa: {
    meta: {
      name: 'Monnaie Libre',
      lang: 'fr',
      theme_color: '#5b21b6',
      description:
        config.site_description || process.env.npm_package_description,
      ogHost: 'monnaie-libre.fr',
      twitterCard: 'summary_large_image',
      twitterSite: '@monnaie_libre',
      twitterCreator: '@monnaie_libre',
    },
    manifest: {
      name: 'Monnaie Libre',
      short_name: 'monnaie-libre.fr',
      lang: 'fr',
    },
    icon: {
      fileName: 'icon-app.png',
    },
  },

  // https://github.com/Chantouch/nuxt-clipboard
  clipboard: {
    autoSetContainer: true,
  },

  // https://content.nuxtjs.org/fr/configuration
  content: {
    markdown: {
      remarkPlugins: ['remark-breaks'],
    },
  },

  // https://color-mode.nuxtjs.org
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: '',
  },

  /**
   * Nuxt hooks
   * https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-hooks
   */
  hooks: {
    // Netlifycms cannot create array in json file at root level and nuxt-content need an array. So, ressources.json is parsed to fetch 'ressources' key.
    'content:file:beforeParse': (file) => {
      if (file.extension === '.json' && /.*ressources.json$/.test(file.path)) {
        file.data = JSON.stringify(JSON.parse(file.data).ressources)
      } else if (file.extension === '.md') {
        if (/^---.*layout:.*---/s.test(file.data)) {
          let t = 0
          const data = file.data.replace(/---/g, (match) => {
            ++t
            if (t === 2) return '---\n<section>'
            if (t > 2) return '</section>\n<section>'
            return match
          })
          file.data = data + '\n</section>'
        }
      }
    },
    async 'content:file:beforeInsert'(document) {
      if (document.extension === '.md') {
        /*
         * Add reading time
         */
        document.readingTime = require('reading-time')(document.text)

        /*
         * Add lexique terms and check if terms exist
         */
        // Search lexique terms
        const lexiqueTerms = [
          ...document.text.matchAll(
            /<lexique[>]([^<]*)<\/|<lexique\s+title="(.*)"/g
          ),
        ].map((match) => {
          return (match[2] || match[1]).toLowerCase() // Priority for term in title=""
        })

        if (lexiqueTerms.length) {
          // Add terms to document
          document.lexiqueTerms = [...new Set(lexiqueTerms)] // remove duplicate

          const { $content } = require('@nuxt/content')
          // Check if term exists
          if ($content) {
            for (let i = 0; i < document.lexiqueTerms.length; i++) {
              const term = document.lexiqueTerms[i]
              const lexique = await $content('lexique')
                .where({
                  $or: [
                    { title: { $regex: [`^${term}$`, 'i'] } }, // case insensitive
                    { synonyms: { $contains: term } }, // search in synonyms
                  ],
                })
                .limit(1)
                .fetch()

              if (!lexique.length) {
                // eslint-disable-next-line no-console
                console.warn(
                  `Term "${term}" in file ${
                    document.path + document.extension
                  } doesn't exist`
                )
              }
            }
          }
        }
      }
    },
  },

  /**
   * Build configuration
   */
  build: {
    extractCSS: true,
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
  },
}