tabbit

Mon Feb 14 2022
Copied to clipboard! Copy reply
/* Imports */
import fse from "fs-extra";
import { execSync } from "child_process";
import yaml from "js-yaml";
import { pages } from "./i18n/pages";
import { fastSpringPathsInclude, fastSpringConfigurationFromPath } from "./modules/fastspring/path-configuration";
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport"; // Storybook addon better defaults for viewports

/**
 * The environment. This will be used to load the right
 * .env.* file when compiling. It should be either
 * 'staging' or 'production'. Use production as default to ensure
 * urls with .stg in them never make it to production.
 */
const ENV = process.env.env || "production";

/**
 * The locale we are generating pages for.
 * LOCALE can be either en, es, de, etc.
 */
const LOCALE = process.env.locale || "en";

/**
 * Config values to store in env vars so we can use in components.
 * It's like .env files, but lets us use yaml. Seemed like the better approach
 * as opposed to having .env.es.stg, .env.en.stg, .env.es.prod, .env.en.prod, etc
 */
const CONFIG = require("dotenv-yaml").config({ path: `.env.${ENV}.yaml` }).parsed;

/*
 * A Group is basically a template. For instance,
 * if GROUP is 'catalog-pages', we will store our app in
 * `_nuxt-catalog-pages/`. Pages that don't belong in a group,
 * will use default `_nuxt-single-pages/` dir. So this means that when
 * deploying a page that does not belong to a group (ie, homepage),
 * all other non-group pages will be deployed too.
 */

const GROUP = process.env.group || null;

/**
 * This is the deploy folder. Normally it should just be 'dist/'.
 * Because landing page generation has to create two dist folders (one for
 * `en' and one for 'es' locale), we have to change the name, so that the
 * contents of 'dist/` don't get overwritten when generating the next locale
 */

const distDir = GROUP === "landing-pages" ? `dist-${GROUP}-${LOCALE}` : "dist";

/**
 * Routes for our dynamic pages  - normally a dir inside group/.
 * If the group is single-pages, we don't need a route because
 * those are the pages on the root ftp server (ie, /homepage, /freetrial, /demo, etc), and
 * are not dynamic. Read more about dynamic routing here
 * https://nuxtjs.org/api/configuration-generate/#routes
 */
const routesMap = {
  "landing-pages": getLandingPages,
  "catalog-pages": getCatalogPages,
};
const route = GROUP === "single-pages" ? null : routesMap[GROUP];

/**
 * The publicPath, which is determined by LOCALE and GROUP.
 * This is the _nuxt* dir, where js files for the app are stored.
 * We create different ones so we can deploy parts of the site independently,.
 * Each group gets its own app folder (_nuxt-<group>-<locale>) so we can deploy
 * a group by itself without breaking the site. For example, deploying `single-pages`
 * will deploy the html files, and js app directory _nuxt-single-pages, leaving the html files
 * and app directory of landing-pages untouched (_nuxt-landing-pages)
 */

const publicPath = `/_nuxt-${GROUP}-${LOCALE}`;

const config = {
  target: "static",

  env: {
    ENV,
    LOCALE,
    ...CONFIG.allLocales,
    ...CONFIG[LOCALE],
  },

  // render: {
  //   asyncScripts: true,
  // },

  /**
   * Auto imported components which does away with the need
   * to import every component in the nuxt pages.If a component
   * is stored in a sub-folder of the components directory,
   * prefix the component name with the name of the folder and
   * an import statement need not be added.
   *
   * Add "lazy" prefix to auto-imported components to enable
   * lazy load of that component on the page Lazy loaded components
   * still must be provided a condition on which to load and is not
   * automatically assumed to be when the component comes into the viewport.
   */
  components: true,

  /**
   * Customize the progress-bar color
   */
  loading: false,

  /**
   * Global CSS
   */
  css: ["~/assets/css/normalize.css", "~/assets/css/fonts.styl", "~/assets/css/mixins.styl"],

  /**
   * Global <head> element
   * Only GTM here at the moment. May later add as a plugin to keep nuxt config cleaner
   * Not using the community GTM module anymore since it does not allow for customization of GTM environments
   */
  head() {
    if (this.$nuxtI18nHead) {
      const i18nHead = this.$nuxtI18nHead({ addSeoAttributes: true });

      return {
        htmlAttrs: {
          ...i18nHead.htmlAttrs,
        },
        meta: [{ charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }],
        link: [
          { rel: "shortcut icon", href: "/favicon.ico" },
          { rel: "preconnect", href: "//resources.rosettastone.com" },
          {
            rel: "preload",
            as: "font",
            href: "/nuxt-assets/fonts/effra/effra.woff",
            crossorigin: true,
          },
          {
            rel: "preload",
            as: "font",
            href: "/nuxt-assets/fonts/gotham/gothamhtf-book.woff",
            crossorigin: true,
          },
          {
            rel: "preload",
            as: "font",
            href: "/nuxt-assets/fonts/helvetica/helvetica.woff",
            crossorigin: true,
          },
          ...i18nHead.link,
        ],

        script: [
          {
            hid: "gtm",
            innerHTML: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl${
              this.ENV === "staging" ? "+ '&gtm_auth=p61245cv7fFWvNjVaBm10g&gtm_preview=env-249&gtm_cookies_win=x'" : ""
            };f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-TLH67WS');`,
          },
          {
            hid: "optimize",
            src: "https://www.googleoptimize.com/optimize.js?id=OPT-5VBSJ4Q",
            async: true,
          },
        ],
        noscript: [
          {
            hid: "gtmnoscript",
            innerHTML: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TLH67WS${
              this.ENV === "staging" ? "&gtm_auth=A4nRhWPBAjR6j8iRa343MQ&gtm_preview=env-249&gtm_cookies_win=x" : ""
            }" height="0" width="0" style="display:none visibility:hidden"></iframe>`,
            body: true,
          },
        ],
        __dangerouslyDisableSanitizersByTagID: {
          gtm: ["innerHTML"],
          gtmnoscript: ["innerHTML"],
        },
      };
    }
  },

  /**
   * Plugins to load before mounting the App
   */
  plugins: [
    "~/plugins/event-bus",
    { src: "~/plugins/globalErrorHandler.js", mode: "client" },
    { src: "~/plugins/swiper.js", mode: "client" },
  ],

  generate: {
    dir: distDir,
    crawler: false,
    routes: route ? route() : null,
    // exclude: [/ww-fastspring/gi],
  },

  hooks: {
    "generate:route": ({ route, setPayload }) => {
      /*
       * FastSpring Localization Routing
       */
      if (fastSpringPathsInclude(route)) {
        const config = fastSpringConfigurationFromPath(route);
        const model = JSON.parse(fse.readFileSync(config.modelPath, "utf8"));
        setPayload({ locale: config.locale, masthead: model.mastheadText, id: model.id });
      }

      if (/gift/.test(route) || /regalo/.test(route)) {
        const model = JSON.parse(fse.readFileSync(`../data-models/${LOCALE}/json/products/gift.json`, "utf8"));
        setPayload({ model });
      }

      if (/coaching-upgrade-2/.test(route)) {
        const model = JSON.parse(
          fse.readFileSync(`../data-models/${LOCALE}/json/products/coaching-upgrade-2.json`, "utf8")
        );
        setPayload({ model });
        return; // NOTE THIS
      }

      if (/crm-coaching/.test(route)) {
        const model = JSON.parse(fse.readFileSync(`../data-models/${LOCALE}/json/products/crm-coaching.json`, "utf8"));
        setPayload({ model });
      }

      if (/\/coaching-upgrade\/?$/.test(route)) {
        const model = JSON.parse(fse.readFileSync(`../data-models/${LOCALE}/json/products/crm-coaching.json`, "utf8"));
        setPayload({ model });
      }

      if (/\/coaching\/?$/.test(route)) {
        const model = JSON.parse(fse.readFileSync(`../data-models/${LOCALE}/json/products/crm-coaching.json`, "utf8"));
        setPayload({ model });
      }
    },

    // If we have a group, delete any other file that isn't the html files we need,
    // so that Jenkins can push everything inside dist/ with no worries.
    // Similarly, if we're deploying single-pages (pages that don't belong to a group),
    // we remove the groups/ directory.
    "generate:done": () => {
      /**
       * nuxti18n will create directories named after each locale not compiled for.
       * ie, if we run `generate:single-pages:en`, it will create directories named
       * `es/`, `pt/`, `kr/`, etc and put compiled files for that locale in there.
       * We don't want that, we only want to upload the locale we compiled for, which is root.
       * We grab list of available locales by reading the keys of any entry from i18n/pages.js
       */
      const locales = require("./i18n/pages.js").pages.buynow;
      delete locales[LOCALE];
      for (const locale of Object.keys(locales)) {
        fse.remove(`dist/${locale}`);
      }
      /*
       * Landing pages is a bit of a special case because we deploy both en and es
       * locale with 1 deploy. So after nuxt is done generating each locale, we bring the
       * interested folders into the dist/ folder so Jenkins can push it in one go.
       */
      if (GROUP === "landing-pages") {
        fse.ensureDirSync("dist/groups");
        // Takes dist-landing-pages-{LOCALE} and put in to dist/landing-pages-{LOCALE}
        execSync(`cp -R ${distDir}/groups/ dist/`);

        // Copy the _nuxt folder from dist-landing-pages-{LOCALE} into dist/
        execSync(`cp -R ${distDir}/${publicPath}/ dist/`);

        // Copy assets too
        execSync(`cp -R ${distDir}/nuxt-assets/ dist/`);
      }

      // Try to put data-models inside /nuxt-assets in case we're compiling
      // product pages. This will let, ie, catalog pages include from
      // `<script src="/data-models/,,,>
      try {
        execSync("cp -R ../data-models dist/");
        execSync("cp -R ../data-models/ dist/nuxt-assets/");
      } catch (e) {
        // Catch error
      }

      // If we're not uploading single pages, delete everything
      // that is not the 'groups' directory so when rsync pushes everything
      // inside dist/, singles pages (home page & siblings) don't go with it.
      //
      if (GROUP !== "single-pages") {
        execSync("ls -d dist/* | egrep -v 'groups|static|nuxt-assets|_nuxt*|data-models' | xargs rm -rf"); // TODO: Maybe check quotes around 'groups|static...' section
      }

      // Move catalog pages inside root dir so we don't need nginx alias to map /groups/catalog-pages/comprar-*
      // to /comprar-*. For this to work, there must be a custom route in the router section of this file.
      if (GROUP === "catalog-pages") {
        execSync("mv dist/groups/catalog-pages/* dist/");
      }

      // Sitemap Index Copying
      // This is done at this location so we can insure the correct locales
      // are used when uploading the sitemap index. The sitemap index is currently a manually
      // created file and should not need to be updated often.
      execSync(`cp ${distDir}/nuxt-assets/sitemapindices/sitemapindex-${LOCALE}.xml dist/`);
    },

    "generate:routeFailed": (errors) => {
      console.log("-------- ERROR GENERATING ROUTES --------");
      console.log(errors.route);
      console.log(errors.errors[0].error);
    },
  },

  router: {
    extendRoutes(routes, resolve) {
      // Pages aliased by nginx must be listed here, or JS won't run on compiled page.
      routes.push(
        {
          path: "/lp/(sbsr|sbsr-es)/*",
          component: resolve(__dirname, "pages/groups/landing-pages/sbsr/_sbsr/_.vue"),
        },
        {
          path: "/lp/(pricing|pricing-es)/*",
          component: resolve(__dirname, "pages/groups/landing-pages/pricing/_pricing/_.vue"),
        },
        {
          path: "/lp/(ppc|ppc-es)/*",
          component: resolve(__dirname, "pages/groups/landing-pages/sbsr/_sbsr/_.vue"),
        },
        {
          path: "/(buy|comprar)-*",
          component: resolve(__dirname, "pages/groups/catalog-pages/_.vue"),
        }
      );
    },
  },

  /*
   ** Nuxt.js Build Modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/stylelint-module
    //'@nuxtjs/stylelint-module',
    [
      "vue-toastification/nuxt",
      {
        filterBeforeCreate: (toast, toasts) => {
          if (toasts.filter((t) => t.type === toast.type).length !== 0) {
            // Returning false discards the toast
            return false;
          }
          // You can modify the toast if you want
          return toast;
        },
      },
    ],
    ["@nuxtjs/router-extras", { routerNativeAlias: false }],
    // Doc: https://github.com/nuxt/postcss8
    "@nuxt/postcss8",
    [
      "@nuxtjs/eslint-module",
      {
        cache: true,
        emitWarning: true,
        emitError: true,
        extensions: ["js", "vue"],
        failOnError: true,
        failOnWarning: true,
        fix: true,
        lintDirtyModulesOnly: true,
      },
    ],
    "@aceforth/nuxt-optimized-images",
  ],

  /*
   ** Nuxt.js modules and config/options
   * If you use other modules (eg. nuxt-i18n), always declare the sitemap module at end of array
   */
  modules: [
    "@nuxtjs/axios",
    [
      "@nuxtjs/i18n",
      {
        parsePages: false,
        seo: true,
        lazy: true,
        langDir: "i18n/",
        pages,
        defaultLocale: LOCALE,
        locales: [
          {
            code: "es",
            iso: "es-419",
            file: "translations.js",
            domain: "espanol.rosettastone.com",
          },
          {
            code: "pt",
            iso: "pt-BR",
            file: "translations.js",
            domain: "pt.rosettastone.com",
          },
          {
            code: "ko",
            iso: "ko",
            file: "translations.js",
            domain: "kr.rosettastone.com",
          },
          {
            code: "en",
            iso: "en-US",
            file: "translations.js",
            domain: "rosettastone.com",
          },
        ],
      },
    ],
    [
      "nuxt-lazy-load",
      {
        directiveOnly: true,
        observerConfig: {
          rootMargin: "10px 0px",
          threshold: 0.01,
        },
      },
    ],
    "@nuxtjs/style-resources",
    "@nuxtjs/sitemap",
  ],

  // Doc: https://github.com/juliomrqz/nuxt-optimized-images
  optimizedImages: {
    handleImages: ["jpeg", "png", "svg", "webp", "gif"],
    optimizeImages: true,
    optimizeImagesInDev: true, // NOTE: If needing to troubleshoot image optimization, feel free to change the value
    mozjpeg: {
      quality: 80,
    },
    gifsicle: {
      interlaced: true,
      optimizationLevel: 3,
    },
    webp: {
      preset: "default",
      quality: 75,
    },
  },

  storybook: {
    addons: [
      /* @nuxt/storybook and storybook are inconsistent on what should
       * come in addon-essentials by default, so certain addons may be redundant
       */
      "@storybook/addon-a11y",
      "@storybook/addon-measure" /* The icon for this has been showing up invisible... */,
      "@storybook/addon-storysource",
      "storybook-addon-designs",
      "storybook-addon-outline",
    ],
    stories: ["~/components/stories/**/*.stories.js"],
    parameters: {
      viewport: {
        viewports: INITIAL_VIEWPORTS,
      },
    },
  },

  // This is inluded in every component, so be careful or it will clutter.
  styleResources: {
    stylus: ["~/assets/css/variables.styl"],
  },

  /**
   * Currently we are only generating the sitemap on ES locale. This will likely change with future requests.
   * By default, the sitemap is setup to the following path: /sitemap.xml
   * All static routes (eg. /pages/about.vue) are automatically added to the sitemap, but you can exclude each of them with the exclude property.
   * For dynamic routes (eg. /pages/_id.vue), you have to declare them with the routes property. This option can be an array or a function.
   * In addition, the routes defined in generate.routes will be automatically used for the sitemap.
   */
  sitemap: [
    // {
    //   hostname: CONFIG[LOCALE].ORIGIN,
    //   path: `/sitemap-${LOCALE}.xml`,
    //   trailingSlash: false,
    //   filter({ routes }) {
    //     return routes.filter((route) => route.locale === LOCALE);
    //   },
    //   gzip: false,
    // },
    {
      hostname: CONFIG[LOCALE].ORIGIN,
      exclude: ["/**"], // Exclude static routes in /pages
      path: `/sitemap-catalogs-${LOCALE}.xml`,
      trailingSlash: true,
      routes: async () => {
        const catalogPages = getCatalogPages();
        return catalogPages.map((page) => `/${page.payload.language.catalog}`);
      },
      gzip: false,
    },
  ],

  /**
   * Build configuration
   */
  build: {
    babel: {
      plugins: [["@babel/plugin-proposal-private-property-in-object", { loose: true }]], // Temporary fix for log flooding until https://github.com/nuxt/nuxt.js/pull/9631 is resolved,
    },

    // The _nuxt directory inside dist/
    publicPath,

    // Watch this directory for changes, too.
    watch: ["~/data"],

    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: false,
        trimCustomFragments: true,
        useShortDoctype: true,
      },
    },

    loaders: {
      stylus: { sourceMap: false } /* Fixes the issue where live editing CSS in Chrome Dev Tools breaks page */,
    },

    // Until this bug is fixed https://github.com/nuxt/nuxt.js/issues/3877, use this.
    splitChunks: {
      layouts: true,
      //pages: true,
      //commons: true,
    },

    /**
     * You can extend webpack config here
     */
    extend(config, { dev, isClient }) {
      productionSourceMap: false,

      // This is so we can use import yaml files. Handy during dev.
      config.module.rules.push({
        test: /\.yaml$/,
        loader: "js-yaml-loader",
      });

      if (isClient) {
        config.devtool = dev ? "eval-source-map" : false;
      }
    },
  },
};

if (ENV === "production") {
  config.build.terser = {
    sourceMap: false,
    // https://github.com/terser/terser#compress-options
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  };
}

/**
 * Generates routes for landing pages.
 *
 * @return {Array} array of objects.
 */
function getLandingPages() {
  // We use JSON because the js model has "window.data = {...}" prefixed.
  const models = fse.readdirSync("../data-models/en/json/products");
  const routes = [];
  // Landing page templates - scan pages/groups/landing-pages for dirs
  const directories = fse.readdirSync("./pages/groups/landing-pages");
  for (const dir of directories) {
    // If we have a locale other than 'en', append it to directory. ie, sbsr-es.
    const dynamicDirectory = LOCALE === "en" ? dir : `${dir}-${LOCALE}`;
    for (const model of models) {
      // Remove '.json' from filename
      const name = model.slice(0, -5);
      const modelJSON = JSON.parse(fse.readFileSync(`../data-models/${LOCALE}/json/products/${model}`, "utf8"));
      // if we have a template then only generate this route if it's specified in templates
      if (!modelJSON.templates || modelJSON.templates.includes(dir)) {
        routes.push({
          route: `/groups/landing-pages/${dir}/${dynamicDirectory}/${name}`,
          payload: { model: modelJSON },
        });
      }
    }
  }
  return routes;
}

/**
 * Generates routes for catalog pages.
 *
 * @return {Array} array of objects.
 */
function getCatalogPages() {
  const languages = require(`./locales/config/languages/${LOCALE}.js`).default;
  const yamlFile = yaml.safeLoad(fse.readFileSync(`./data/catalog-pages/${LOCALE}.yaml`, "utf8"));
  return languages.map((language) => {
    return {
      route: `/groups/catalog-pages/${language.catalog}`,
      payload: {
        language,
        content: yamlFile,
      },
    };
  });
}

export default config;