Dependency updates + full ESM (#327)

* Dependency updates

* Fix eslint issues

* Switch to esm fully

* Fix Jest tests

* Update to node 16, force mini-css-extract-plugin to 1.x

* More dep updates

* Use correct NPM version in Actions

* Fix mini-css-extract-plugin version overrides

* Don't rely on Webpack for available languages

.eslintrc.cjs

@@ -8,9 +8,10 @@ module.exports = {
     'plugin:vue/recommended',
   ],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     ecmaVersion: 2018,
     sourceType: 'module',
+    requireConfigFile: false,
   },
   rules: {
     'linebreak-style': ['error', 'unix'],
@@ -27,6 +28,7 @@ module.exports = {
     }],
     'vue/no-unused-vars': 0,
     'vue/html-self-closing': 0,
+    'vue/multi-word-component-names': 0,
   },
   globals: {
     'describe': true,

.github/workflows/do-spaces-workflow.yml

@@ -7,16 +7,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
 
-    - name: Read .nvmrc
+      - name: Read Node.js & NPM versions
-      run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
+        run: |
-      id: nvm
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions
 
-    - name: Use Node.js (.nvmrc)
+      - name: Use correct Node.js version
-      uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-        node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"
 
       - name: Install dependencies
         run: npm ci

.github/workflows/gh-pages-workflow.yml

@@ -10,16 +10,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
 
-    - name: Read .nvmrc
+      - name: Read Node.js & NPM versions
-      run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
+        run: |
-      id: nvm
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions
 
-    - name: Use Node.js (.nvmrc)
+      - name: Use correct Node.js version
-      uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-        node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"
 
       - name: Install dependencies
         run: npm ci

.github/workflows/test-workflow.yml

@@ -7,16 +7,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
 
-    - name: Read .nvmrc
+      - name: Read Node.js & NPM versions
-      run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
+        run: |
-      id: nvm
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions
 
-    - name: Use Node.js (.nvmrc)
+      - name: Use correct Node.js version
-      uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-        node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"
 
       - name: Install dependencies
         run: npm ci
@@ -28,16 +33,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
 
-      - name: Read .nvmrc
+      - name: Read Node.js & NPM versions
-        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
+        run: |
-        id: nvm
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions
 
-      - name: Use Node.js (.nvmrc)
+      - name: Use correct Node.js version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"
 
       - name: Install dependencies
         run: npm ci
@@ -49,16 +59,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
 
-      - name: Read .nvmrc
+      - name: Read Node.js & NPM versions
-        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
+        run: |
-        id: nvm
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions
 
-      - name: Use Node.js (.nvmrc)
+      - name: Use correct Node.js version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"
 
       - name: Install dependencies
         run: npm ci

.nvmrc

@@ -1 +1 @@
-v14.17.5
+v16.13.2

package.json

@@ -5,9 +5,11 @@
   "private": true,
   "license": "MIT",
   "engines": {
-    "node": "14.17.5"
+    "node": "16.13.2",
+    "npm": "8.4.1"
   },
   "main": "src/nginxconfig/mount.js",
+  "type": "module",
   "scripts": {
     "build": "npm run build:clean && npm run build:template && npm run build:prism && npm run build:static && npm run build:tool",
     "build:clean": "do-vue clean",
@@ -19,12 +21,12 @@
     "dev:tool": "vue-cli-service serve src/nginxconfig/mount.js",
     "deploy:spaces:comment": "do-vue comment nginxconfig",
     "test": "npm run test:eslint && npm run test:sass-lint && npm run test:i18n-packs && npm run test:jest",
-    "test:jest": "jest /test/.*.js?$",
+    "test:jest": "jest --env=jsdom /test/.*.js?$",
     "test:fix": "npm run test:eslint:fix",
     "test:eslint": "eslint 'src/**/*.{js,vue}'",
     "test:eslint:fix": "npm run test:eslint -- --fix",
     "test:sass-lint": "sass-lint 'src/**/*.scss' --verbose --no-exit --config .sasslintrc",
-    "test:i18n-packs": "node -r esm src/nginxconfig/i18n/verify.js"
+    "test:i18n-packs": "node --es-module-specifier-resolution=node src/nginxconfig/i18n/verify.js"
   },
   "jest": {
     "testRegex": "/test/.*.js?$"
@@ -42,7 +44,7 @@
   },
   "homepage": "https://github.com/digitalocean/nginxconfig.io#readme",
   "dependencies": {
-    "clipboard": "^2.0.8",
+    "clipboard": "^2.0.10",
     "clone": "^2.1.2",
     "do-bulma": "git+https://github.com/do-community/do-bulma.git",
     "do-vue": "git+https://github.com/do-community/do-vue.git",
@@ -51,35 +53,39 @@
     "json-to-pretty-yaml": "^1.2.2",
     "memory-tar-create": "0.0.3",
     "pretty-checkbox-vue": "^1.1.9",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.26.0",
-    "qs": "^6.10.1",
+    "qs": "^6.10.3",
     "simple-js-sha2-256": "^1.0.7",
-    "vue": "^2.6.12",
+    "vue": "^2.6.14",
-    "vue-i18n": "^8.24.4",
+    "vue-i18n": "^8.27.0",
-    "vue-select": "^3.11.2",
+    "vue-select": "^3.16.0",
-    "webpack-require-from": "^1.8.4"
+    "webpack-require-from": "^1.8.6"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/preset-env": "^7.14.2",
+    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/runtime": "^7.14.0",
+    "@babel/preset-env": "^7.16.11",
-    "@vue/cli-service": "^5.0.0-beta.1",
+    "@babel/runtime": "^7.17.0",
-    "babel-eslint": "^10.1.0",
+    "@vue/cli-service": "^5.0.0-rc.2",
-    "chalk": "^4.1.1",
+    "ajv": "^8.10.0",
+    "chalk": "^5.0.0",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.12.1",
+    "core-js": "^3.21.0",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
-    "eslint": "^7.26.0",
+    "eslint": "^8.8.0",
-    "eslint-plugin-vue": "^7.9.0",
+    "eslint-plugin-vue": "^8.4.1",
     "esm": "^3.2.25",
-    "jest": "^26.6.3",
+    "jest": "^27.4.7",
-    "node-fetch": "^2.6.7",
+    "node-fetch": "^3.2.0",
-    "postcss": "^8.2.15",
+    "postcss": "^8.4.6",
-    "sass": "^1.32.13",
+    "sass": "^1.49.7",
     "sass-lint": "git+https://github.com/do-community/sass-lint.git",
     "sass-loader": "^11.1.1",
-    "vue-template-compiler": "^2.6.12",
+    "vue-template-compiler": "^2.6.14",
-    "webpack-bundle-analyzer": "^4.4.2"
+    "webpack-bundle-analyzer": "^4.5.0"
+  },
+  "overrides": {
+    "mini-css-extract-plugin": "^1.6.2"
   }
 }

src/nginxconfig/build/prism.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -24,9 +24,9 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-const fs = require('fs').promises;
+import { promises as fs } from 'fs';
-const path = require('path');
+import { URL } from 'url';
-const fetch = require('node-fetch');
+import fetch from 'node-fetch';
 
 const main = async () => {
     const resp = await fetch('https://assets.digitalocean.com/prism/prism.css');
@@ -35,8 +35,11 @@ const main = async () => {
     // Fix $676767 -> #676767
     const fixed = text.replace(/:\s*\$((?:[0-9a-fA-F]{3}){1,2});/g, ':#$1;');
 
-    const buildDir = path.join(__dirname, '..', '..', '..', 'build');
+    const buildDir = '../../../build';
-    await fs.writeFile(path.join(buildDir, 'prism.css'), fixed);
+    await fs.writeFile(new URL(`${buildDir}/prism.css`, import.meta.url), fixed);
 };
 
-main().then(() => {});
+main().then(() => {}).catch(err => {
+    console.error(err);
+    process.exit(1);
+});

src/nginxconfig/build/template.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -24,25 +24,21 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-const path = require('path');
+import fs from 'fs';
-const fs = require('fs');
+import { URL } from 'url';
 
 // Fetch the posthtml template and convert it to an ejs template
 const main = () => {
-    const buildDir = path.join(__dirname, '..', '..', '..', 'build');
+    const buildDir = '../../../build';
-    let template = fs.readFileSync(path.join(buildDir, 'base.html'), 'utf8');
+    let template = fs.readFileSync(new URL(`${buildDir}/base.html`, import.meta.url), 'utf8');
 
     // Inject our title now
     template = template.replace('<block name="title"><title>DigitalOcean</title></block>', '<title>NGINXConfig | DigitalOcean</title>');
 
-    // We don't need the head/script blocks, vue-cli-service handles those
-    template = template.replace('<block name="head"></block>', '');
-    template = template.replace('<block name="script"></block>', '');
-
     // Inject our app mounting point
     template = template.replace('<block name="content"></block>', '<div id="app"></div>');
 
-    fs.writeFileSync(path.join(buildDir, 'index.html'), template);
+    fs.writeFileSync(new URL(`${buildDir}/index.html`, import.meta.url), template);
 };
 
 main();

src/nginxconfig/generators/to_yaml.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -24,7 +24,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-const yaml = require('json-to-pretty-yaml');
+import yaml from 'json-to-pretty-yaml';
 
 export default yamlConf => {
     return yaml.stringify(yamlConf);

src/nginxconfig/i18n/setup.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -26,9 +26,7 @@ THE SOFTWARE.
 
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
-import { defaultPack, defaultPackData } from '../util/language_pack_default';
+import { defaultPack, defaultPackData, toSep, availablePacks } from '../util/language_packs';
-import { toSep } from '../util/language_pack_name';
-import { languagePackContext, availablePacks } from '../util/language_pack_context';
 
 Vue.use(VueI18n);
 
@@ -37,32 +35,58 @@ const i18nPacks = {};
 i18nPacks[defaultPack] = defaultPackData;
 const loadedI18nPacks = [defaultPack];
 
+// Cache the i18n instance
+let i18n = null;
+
+export const getI18n = async () => {
+    // Use cached if available
+    if (i18n) return i18n;
+
     // Load in languages data from other packs
     // Use webpack magic to only build chunks for lang/languages.js
-const languagesContext = require.context('.', true, /^\.\/[^/]+\/languages\.js$/, 'sync');
+    // These are eagerly loaded by Webpack, so don't generate extra chunks, and return an already resolved Promise
     for (const availablePack of availablePacks) {
         if (availablePack === defaultPack) continue;
-    i18nPacks[availablePack] = { languages: languagesContext(`./${toSep(availablePack, '-')}/languages.js`).default };
+        if (i18nPacks[availablePack]) continue;
+        const { default: languageData } = await import(
+            /* webpackInclude: /i18n\/[^/]+\/languages\.js$/ */
+            /* webpackMode: "eager" */
+            `./${toSep(availablePack, '-')}/languages.js`
+        );
+        i18nPacks[availablePack] = { languages: languageData };
     }
 
-export const i18n = new VueI18n({
+    // Store and return the i18n instance with the loaded packs
+    i18n = new VueI18n({
         locale: defaultPack,
         fallbackLocale: defaultPack,
         messages: i18nPacks,
     });
+    return i18n;
+};
 
-const loadLanguagePack = pack => {
+const loadLanguagePack = async pack => {
     // If same language, do nothing
     if (i18n.locale === pack) return;
 
     // If language already loaded, do nothing
     if (loadedI18nPacks.includes(pack)) return;
 
-    // Load the pack with webpack magic
+    // Load in the full pack
-    return languagePackContext(`./${toSep(pack, '-')}/index.js`).then(packData => i18nPacks[pack] = packData.default);
+    // Use webpack magic to only build chunks for lang/index.js
+    const { default: packData } = await import(
+        /* webpackInclude: /i18n\/[^/]+\/index\.js$/ */
+        /* webpackMode: "lazy" */
+        `./${toSep(pack, '-')}/index.js`
+    );
+    i18nPacks[pack] = packData;
 };
 
 export const setLanguagePack = async pack => {
+    // If i18n not loaded, do nothing
+    if (!i18n) return;
+
+    // Load the pack if not already loaded, and set it as active
     await loadLanguagePack(pack);
     i18n.locale = pack;
 };

src/nginxconfig/i18n/verify.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -26,19 +26,11 @@ THE SOFTWARE.
 
 import { readdirSync, readFileSync } from 'fs';
 import { join, sep } from 'path';
+import { URL } from 'url';
 import chalk from 'chalk';
-import { defaultPack } from '../util/language_pack_default';
+import { defaultPack, availablePacks, toSep, fromSep } from '../util/language_packs';
-import { toSep, fromSep } from '../util/language_pack_name';
 import snakeToCamel from '../util/snake_to_camel';
 
-// Load all the packs in
-const packs = {};
-const packDirectories = readdirSync(__dirname, { withFileTypes: true })
-    .filter(dirent => dirent.isDirectory())
-    .map(dirent => dirent.name);
-for (const packDirectory of packDirectories)
-    packs[fromSep(packDirectory, '-')] = require(`./${packDirectory}/index.js`).default;
-
 // Recursively get all keys in a i18n pack object fragment
 const explore = packFragment => {
     const foundKeys = new Set();
@@ -61,7 +53,7 @@ const explore = packFragment => {
 const files = directory => {
     const foundFiles = new Set();
 
-    for (const dirent of readdirSync(join(__dirname, directory), { withFileTypes: true })) {
+    for (const dirent of readdirSync(new URL(`./${directory}`, import.meta.url), { withFileTypes: true })) {
         const base = join(directory, dirent.name);
 
         // If this is a file, store it
@@ -83,7 +75,7 @@ const files = directory => {
 
 // Get all the todo items in a file
 const todos = file => {
-    const content = readFileSync(join(__dirname, file), 'utf8');
+    const content = readFileSync(new URL(`./${file}`, import.meta.url), 'utf8');
     const lines = content.split('\n');
     const items = [];
 
@@ -105,6 +97,15 @@ const fileToObject = file => file
     // Replace sep with period and use camelCase
     .split(sep).map(dir => snakeToCamel(dir)).join('.');
 
+const main = async () => {
+    // Load all the packs in
+    const packs = {};
+    const packDirectories = readdirSync(new URL('./', import.meta.url), { withFileTypes: true })
+        .filter(dirent => dirent.isDirectory())
+        .map(dirent => dirent.name);
+    for (const packDirectory of packDirectories)
+        packs[fromSep(packDirectory, '-')] = await import(`./${packDirectory}/index.js`).then(pack => pack.default);
+
     // Get all the keys for the default "source" language pack
     const defaultKeys = explore(packs[defaultPack]);
 
@@ -149,10 +150,10 @@ for (const [pack, packData] of Object.entries(packs)) {
         // Output the pack results
         if (warnings.length)
             for (const warning of warnings)
-            console.log(`  ${chalk.yellow('warning')} ${warning}`);
+                console.warn(`  ${chalk.yellow('warning')} ${warning}`);
         if (errors.length)
             for (const error of errors)
-            console.log(`  ${chalk.red('error')}   ${error}`);
+                console.error(`  ${chalk.red('error')}   ${error}`);
         if (!errors.length && !warnings.length)
             console.log(`  ${chalk.green('No issues')}`);
 
@@ -163,5 +164,21 @@ for (const [pack, packData] of Object.entries(packs)) {
         console.log(chalk.reset());
     }
 
+    // Check available language packs
+    const packKeys = Object.keys(packs);
+    const missingPacks = packKeys.filter(x => !availablePacks.includes(x));
+    const extraPacks = availablePacks.filter(x => !packKeys.includes(x));
+
+    // Missing packs and extra packs are errors
+    missingPacks.forEach(pack => console.error(`${chalk.red('error')} Language pack \`${pack}\` not included in \`availablePacks\``));
+    extraPacks.forEach(pack => console.error(`${chalk.red('error')} Language pack \`${pack}\` included in \`availablePacks\` but not found`));
+    if (missingPacks.length || extraPacks.length) hadError = true;
+
     // Exit 1 if we had errors
     if (hadError) process.exit(1);
+};
+
+main().then(() => {}).catch(err => {
+    console.error(err);
+    process.exit(1);
+});

src/nginxconfig/mount.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -28,11 +28,14 @@ THE SOFTWARE.
 import './scss/style.scss';
 import Vue from 'vue';
 import './util/prism_bundle';
-import { i18n } from './i18n/setup';
+import { getI18n } from './i18n/setup';
 import App from './templates/app';
 
-// Run the app
+// Load the i18n languages and run the app
+getI18n().then(i18n => {
     new Vue({
         i18n,
         render: h => h(App),
     }).$mount('#app');
+});
+

src/nginxconfig/scss/_fields.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -214,7 +214,7 @@ THE SOFTWARE.
 
           color: $dark-grey;
           font-size: 14px;
-          padding-left: calc(#{$margin / 2} + 1.5em);
+          padding-left: calc(#{$margin * .5} + 1.5em);
           text-indent: initial;
 
           &::before,

src/nginxconfig/templates/app.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -33,7 +33,8 @@ THE SOFTWARE.
             <template #header>
             </template>
             <template #buttons>
-                <VueSelect v-model="lang"
+                <VueSelect
+                    v-model="lang"
                     :options="i18nPacks"
                     :clearable="false"
                     :reduce="s => s.value"
@@ -79,7 +80,8 @@ THE SOFTWARE.
                     </div>
 
                     <template v-for="data in activeDomains">
-                        <Domain :key="data[1]"
+                        <Domain
+                            :key="data[1]"
                             :ref="`domain-${data[1]}`"
                             :data="data[0]"
                             :style="{ display: data[1] === active ? undefined : 'none' }"
@@ -131,8 +133,7 @@ THE SOFTWARE.
     import isObject from '../util/is_object';
     import analytics from '../util/analytics';
     import browserLanguage from '../util/browser_language';
-    import { defaultPack } from '../util/language_pack_default';
+    import { defaultPack, availablePacks } from '../util/language_packs';
-    import { availablePacks } from '../util/language_pack_context';
 
     import { setLanguagePack } from '../i18n/setup';
     import generators from '../generators';

src/nginxconfig/templates/callouts/contribute.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -34,7 +34,8 @@ THE SOFTWARE.
                 <i class="fas fa-times"></i>
             </a>
         </div>
-        <a href="https://github.com/digitalocean/nginxconfig.io"
+        <a
+            href="https://github.com/digitalocean/nginxconfig.io"
             class="button is-primary"
             target="_blank"
             @click="linkClickEvent"

src/nginxconfig/templates/callouts/droplet.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -28,7 +28,8 @@ THE SOFTWARE.
     <div class="callout">
         <p>
             {{ $t('templates.callouts.droplet.lookingForAPlaceToDeploy') }}
-            <ExternalLink :text="$t('templates.callouts.droplet.tryOutDigitalOceansDroplet')"
+            <ExternalLink
+                :text="$t('templates.callouts.droplet.tryOutDigitalOceansDroplet')"
                 link="https://marketplace.digitalocean.com/apps/lemp"
                 @click.native="linkClickEvent"
             ></ExternalLink>

src/nginxconfig/templates/domain.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -42,7 +42,8 @@ THE SOFTWARE.
                 </ul>
             </div>
 
-            <component :is="tab"
+            <component
+                :is="tab"
                 v-for="tab in tabs"
                 :key="tab.key"
                 :ref="tab.key"

src/nginxconfig/templates/domain_sections/https.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -81,11 +81,13 @@ THE SOFTWARE.
                         <label class="text message is-warning">
                             <span class="message-body">
                                 {{ $t('templates.domainSections.https.http3IsANonStandardModule') }}
-                                <ExternalLink :text="$t('templates.domainSections.https.http3NginxQuicReadme')"
+                                <ExternalLink
+                                    :text="$t('templates.domainSections.https.http3NginxQuicReadme')"
                                     link="https://quic.nginx.org/README"
                                 ></ExternalLink>
                                 {{ $t('templates.domainSections.https.http3OrThe') }}
-                                <ExternalLink :text="$t('templates.domainSections.https.http3CloudflareQuicheProject')"
+                                <ExternalLink
+                                    :text="$t('templates.domainSections.https.http3CloudflareQuicheProject')"
                                     link="https://github.com/cloudflare/quiche/tree/master/extras/nginx"
                                 ></ExternalLink>
                                 {{ $t('templates.domainSections.https.http3ForBuildingNginxWithHttp3') }}
@@ -158,7 +160,8 @@ THE SOFTWARE.
             </div>
             <div class="field-body">
                 <div class="field">
-                    <div v-for="(name, value) in $props.data.certType.options"
+                    <div
+                        v-for="(name, value) in $props.data.certType.options"
                         :class="`control${certTypeChanged && value === certType ? ' is-changed' : ''}`"
                     >
                         <div class="radio">
@@ -179,7 +182,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${letsEncryptEmailChanged ? ' is-changed' : ''}`">
-                        <input v-model="letsEncryptEmail"
+                        <input
+                            v-model="letsEncryptEmail"
                             class="input"
                             type="text"
                             :placeholder="$props.data.letsEncryptEmail.computed"
@@ -196,7 +200,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${sslCertificateChanged ? ' is-changed' : ''}`">
-                        <input v-model="sslCertificate"
+                        <input
+                            v-model="sslCertificate"
                             class="input"
                             type="text"
                             :placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.crt`"
@@ -213,7 +218,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${sslCertificateKeyChanged ? ' is-changed' : ''}`">
-                        <input v-model="sslCertificateKey"
+                        <input
+                            v-model="sslCertificateKey"
                             class="input"
                             type="text"
                             :placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.key`"

src/nginxconfig/templates/domain_sections/onion.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -49,7 +49,8 @@ THE SOFTWARE.
                         </div>
                         <div class="control">
                             <label class="text">
-                                <ExternalLink :text="$t('templates.domainSections.onion.learnMoreAboutOnionServices')"
+                                <ExternalLink
+                                    :text="$t('templates.domainSections.onion.learnMoreAboutOnionServices')"
                                     link="https://community.torproject.org/onion-services/"
                                 ></ExternalLink>
                             </label>

src/nginxconfig/templates/domain_sections/php.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -72,7 +72,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${phpServerChanged ? ' is-changed' : ''}`">
-                        <VueSelect ref="phpServerSelect"
+                        <VueSelect
+                            ref="phpServerSelect"
                             v-model="phpServer"
                             :options="phpServerOptions"
                             :clearable="false"
@@ -80,7 +81,8 @@ THE SOFTWARE.
                         ></VueSelect>
                     </div>
 
-                    <div v-if="phpServerCustomEnabled"
+                    <div
+                        v-if="phpServerCustomEnabled"
                         :class="`control${phpServerCustomChanged ? ' is-changed' : ''}`"
                     >
                         <input v-model="phpServerCustom" class="input" type="text" :placeholder="$props.data.phpServerCustom.default" />
@@ -96,7 +98,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${phpBackupServerChanged ? ' is-changed' : ''}`">
-                        <VueSelect ref="phpBackupServerSelect"
+                        <VueSelect
+                            ref="phpBackupServerSelect"
                             v-model="phpBackupServer"
                             :options="phpBackupServerOptions"
                             :clearable="false"
@@ -104,7 +107,8 @@ THE SOFTWARE.
                         ></VueSelect>
                     </div>
 
-                    <div v-if="phpBackupServerCustomEnabled"
+                    <div
+                        v-if="phpBackupServerCustomEnabled"
                         :class="`control${phpBackupServerCustomChanged ? ' is-changed' : ''}`"
                     >
                         <input v-model="phpBackupServerCustom" class="input" type="text" :placeholder="$props.data.phpBackupServerCustom.default" />

src/nginxconfig/templates/domain_sections/presets.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -41,7 +41,8 @@ THE SOFTWARE.
             </div>
 
             <div class="buttons-group">
-                <a v-for="(preset, key) in $props.data"
+                <a
+                    v-for="(preset, key) in $props.data"
                     :class="`button${preset.computed ? ' is-primary' : ''}`"
                     @click="setPreset(key)"
                 >

src/nginxconfig/templates/domain_sections/restrict.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -192,7 +192,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${responseCodeChanged ? ' is-changed' : ''}`">
-                        <input v-model.number="responseCode"
+                        <input
+                            v-model.number="responseCode"
                             :class="['input', validResponseCode ? '' : 'is-danger']"
                             type="number"
                             min="100"

src/nginxconfig/templates/domain_sections/reverse_proxy.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -72,7 +72,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div :class="`field${pathChanged ? ' is-changed' : ''}`">
                     <div class="control">
-                        <input v-model="path"
+                        <input
+                            v-model="path"
                             class="input"
                             type="text"
                             :placeholder="$props.data.path.default"
@@ -89,7 +90,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div :class="`field${proxyPassChanged ? ' is-changed' : ''}`">
                     <div class="control">
-                        <input v-model="proxyPass"
+                        <input
+                            v-model="proxyPass"
                             class="input"
                             type="text"
                             :placeholder="$props.data.proxyPass.default"

src/nginxconfig/templates/domain_sections/routing.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -50,7 +50,8 @@ THE SOFTWARE.
             </div>
             <div class="field-body">
                 <div class="field">
-                    <div v-for="value in $props.data.index.options"
+                    <div
+                        v-for="value in $props.data.index.options"
                         :class="`control${indexChanged && value === index ? ' is-changed' : ''}`"
                     >
                         <div class="radio">
@@ -97,7 +98,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div :class="`field${fallbackPhpPathChanged ? ' is-changed' : ''}`">
                     <div class="control">
-                        <input v-model="fallbackPhpPath"
+                        <input
+                            v-model="fallbackPhpPath"
                             class="input"
                             type="text"
                             :placeholder="$props.data.fallbackPhpPath.default"

src/nginxconfig/templates/footer.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -32,11 +32,13 @@ THE SOFTWARE.
             </p>
             <p>
                 {{ $t('templates.footer.thisToolIs') }}
-                <ExternalLink :text="$t('templates.footer.openSourceOnGitHub')"
+                <ExternalLink
+                    :text="$t('templates.footer.openSourceOnGitHub')"
                     link="https://github.com/digitalocean/nginxconfig.io"
                 ></ExternalLink>
                 {{ $t('templates.footer.underThe') }}
-                <ExternalLink :text="$t('templates.footer.mit')"
+                <ExternalLink
+                    :text="$t('templates.footer.mit')"
                     link="https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE"
                 ></ExternalLink>
                 {{ $t('templates.footer.license') }}
@@ -44,11 +46,13 @@ THE SOFTWARE.
             </p>
             <p>
                 {{ $t('templates.footer.originallyCreatedBy') }}
-                <ExternalLink :text="$t('templates.footer.balintSzekeres')"
+                <ExternalLink
+                    :text="$t('templates.footer.balintSzekeres')"
                     link="https://b4lint.hu/"
                 ></ExternalLink>,
                 {{ $t('templates.footer.maintainedBy') }}
-                <ExternalLink :text="$t('templates.footer.digitalOcean')"
+                <ExternalLink
+                    :text="$t('templates.footer.digitalOcean')"
                     link="https://github.com/digitalocean/nginxconfig.io"
                 ></ExternalLink>.
             </p>

src/nginxconfig/templates/global.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -37,7 +37,8 @@ THE SOFTWARE.
             </ul>
         </div>
 
-        <component :is="tab"
+        <component
+            :is="tab"
             v-for="tab in tabs"
             :key="tab.key"
             :ref="tab.key"

src/nginxconfig/templates/global_sections/https.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -67,7 +67,8 @@ THE SOFTWARE.
                 <div class="field-body">
                     <div class="field">
                         <div class="field">
-                            <div v-for="(name, value) in $props.data.sslProfile.options"
+                            <div
+                                v-for="(name, value) in $props.data.sslProfile.options"
                                 :class="`control${sslProfileChanged && value === sslProfile ? ' is-changed' : ''}`"
                             >
                                 <div class="radio">
@@ -97,7 +98,8 @@ THE SOFTWARE.
                             </div>
                         </div>
                         <div v-if="$props.data.ocspCloudflare.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspCloudflareType.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspCloudflareType.options"
                                 :class="`control${ocspCloudflareTypeChanged && value === ocspCloudflareType ? ' is-changed' : ''}`"
                             >
                                 <div class="radio">
@@ -118,7 +120,8 @@ THE SOFTWARE.
                             </div>
                         </div>
                         <div v-if="$props.data.ocspGoogle.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspGoogleType.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspGoogleType.options"
                                 :class="`control${ocspGoogleTypeChanged && value === ocspGoogleType ? ' is-changed' : ''}`"
                             >
                                 <div class="radio">
@@ -139,7 +142,8 @@ THE SOFTWARE.
                             </div>
                         </div>
                         <div v-if="$props.data.ocspOpenDns.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspOpenDnsType.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspOpenDnsType.options"
                                 :class="`control${ocspOpenDnsTypeChanged && value === ocspOpenDnsType ? ' is-changed' : ''}`"
                             >
                                 <div class="radio">
@@ -160,7 +164,8 @@ THE SOFTWARE.
                             </div>
                         </div>
                         <div v-if="$props.data.ocspQuad9.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspQuad9Type.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspQuad9Type.options"
                                 :class="`control${ocspQuad9TypeChanged && value === ocspQuad9Type ? ' is-changed' : ''}`"
                             >
                                 <div class="radio">
@@ -181,7 +186,8 @@ THE SOFTWARE.
                             </div>
                         </div>
                         <div v-if="$props.data.ocspVerisign.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspVerisignType.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspVerisignType.options"
                                 :class="`control${ocspVerisignTypeChanged && value === ocspVerisignType ? ' is-changed' : ''}`"
                             >
                                 <div class="radio">
@@ -203,7 +209,8 @@ THE SOFTWARE.
                 <div class="field-body">
                     <div class="field">
                         <div :class="`control${letsEncryptRootChanged ? ' is-changed' : ''}`">
-                            <input v-model="letsEncryptRoot"
+                            <input
+                                v-model="letsEncryptRoot"
                                 class="input"
                                 type="text"
                                 :placeholder="$props.data.letsEncryptRoot.default"
@@ -220,7 +227,8 @@ THE SOFTWARE.
                 <div class="field-body">
                     <div class="field">
                         <div :class="`control${letsEncryptCertRootChanged ? ' is-changed' : ''}`">
-                            <input v-model="letsEncryptCertRoot"
+                            <input
+                                v-model="letsEncryptCertRoot"
                                 class="input"
                                 type="text"
                                 :placeholder="$props.data.letsEncryptCertRoot.default"

src/nginxconfig/templates/global_sections/logging.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -33,7 +33,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${accessLogChanged ? ' is-changed' : ''}`">
-                        <input v-model="accessLog"
+                        <input
+                            v-model="accessLog"
                             class="input"
                             type="text"
                             :placeholder="$props.data.accessLog.default"
@@ -50,7 +51,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${errorLogChanged ? ' is-changed' : ''}`">
-                        <input v-model="errorLog"
+                        <input
+                            v-model="errorLog"
                             class="input"
                             type="text"
                             :placeholder="$props.data.errorLog.default"

src/nginxconfig/templates/global_sections/nginx.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -33,7 +33,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${nginxConfigDirectoryChanged ? ' is-changed' : ''}`">
-                        <input v-model="nginxConfigDirectory"
+                        <input
+                            v-model="nginxConfigDirectory"
                             class="input"
                             type="text"
                             :placeholder="$props.data.nginxConfigDirectory.default"
@@ -50,7 +51,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${workerProcessesChanged ? ' is-changed' : ''}`">
-                        <VueSelect v-model="workerProcesses"
+                        <VueSelect
+                            v-model="workerProcesses"
                             :options="$props.data.workerProcesses.options"
                             :clearable="false"
                         ></VueSelect>
@@ -66,7 +68,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${userChanged ? ' is-changed' : ''}`">
-                        <input v-model="user"
+                        <input
+                            v-model="user"
                             class="input"
                             type="text"
                             :placeholder="$props.data.user.default"
@@ -83,7 +86,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${pidChanged ? ' is-changed' : ''}`">
-                        <input v-model="pid"
+                        <input
+                            v-model="pid"
                             class="input"
                             type="text"
                             :placeholder="$props.data.pid.default"
@@ -100,7 +104,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field has-addons">
                     <div :class="`control is-expanded${clientMaxBodySizeChanged ? ' is-changed' : ''}`">
-                        <input v-model.number="clientMaxBodySize"
+                        <input
+                            v-model.number="clientMaxBodySize"
                             class="input"
                             type="number"
                             min="0"
@@ -124,7 +129,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${typesHashMaxSizeChanged ? ' is-changed' : ''}`">
-                        <VueSelect v-model="typesHashMaxSize"
+                        <VueSelect
+                            v-model="typesHashMaxSize"
                             :options="$props.data.typesHashMaxSize.options"
                             :clearable="false"
                         ></VueSelect>
@@ -140,7 +146,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${typesHashBucketSizeChanged ? ' is-changed' : ''}`">
-                        <VueSelect v-model="typesHashBucketSize"
+                        <VueSelect
+                            v-model="typesHashBucketSize"
                             :options="$props.data.typesHashBucketSize.options"
                             :clearable="false"
                         ></VueSelect>

src/nginxconfig/templates/global_sections/performance.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -82,7 +82,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${assetsExpirationChanged ? ' is-changed' : ''}`">
-                        <input v-model="assetsExpiration"
+                        <input
+                            v-model="assetsExpiration"
                             class="input"
                             type="text"
                             :placeholder="$props.data.assetsExpiration.default"
@@ -99,7 +100,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${mediaExpirationChanged ? ' is-changed' : ''}`">
-                        <input v-model="mediaExpiration"
+                        <input
+                            v-model="mediaExpiration"
                             class="input"
                             type="text"
                             :placeholder="$props.data.mediaExpiration.default"
@@ -116,7 +118,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${svgExpirationChanged ? ' is-changed' : ''}`">
-                        <input v-model="svgExpiration"
+                        <input
+                            v-model="svgExpiration"
                             class="input"
                             type="text"
                             :placeholder="$props.data.svgExpiration.default"
@@ -133,7 +136,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${fontsExpirationChanged ? ' is-changed' : ''}`">
-                        <input v-model="fontsExpiration"
+                        <input
+                            v-model="fontsExpiration"
                             class="input"
                             type="text"
                             :placeholder="$props.data.fontsExpiration.default"

src/nginxconfig/templates/global_sections/python.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -48,7 +48,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${pythonServerChanged ? ' is-changed' : ''}`">
-                        <input v-model="pythonServer"
+                        <input
+                            v-model="pythonServer"
                             class="input"
                             type="text"
                             :placeholder="$props.data.pythonServer.default"

src/nginxconfig/templates/global_sections/reverse_proxy.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -49,7 +49,8 @@ THE SOFTWARE.
                 <div class="field-body">
                     <div class="field has-addons">
                         <div :class="`control is-expanded${proxyConnectTimeoutChanged ? ' is-changed' : ''}`">
-                            <input v-model.number="proxyConnectTimeout"
+                            <input
+                                v-model.number="proxyConnectTimeout"
                                 class="input"
                                 type="number"
                                 min="0"
@@ -73,7 +74,8 @@ THE SOFTWARE.
                 <div class="field-body">
                     <div class="field has-addons">
                         <div :class="`control is-expanded${proxySendTimeoutChanged ? ' is-changed' : ''}`">
-                            <input v-model.number="proxySendTimeout"
+                            <input
+                                v-model.number="proxySendTimeout"
                                 class="input"
                                 type="number"
                                 min="0"
@@ -97,7 +99,8 @@ THE SOFTWARE.
                 <div class="field-body">
                     <div class="field has-addons">
                         <div :class="`control is-expanded${proxyReadTimeoutChanged ? ' is-changed' : ''}`">
-                            <input v-model.number="proxyReadTimeout"
+                            <input
+                                v-model.number="proxyReadTimeout"
                                 class="input"
                                 type="number"
                                 min="0"
@@ -121,7 +124,8 @@ THE SOFTWARE.
                 <div class="field-body">
                     <div class="field">
                         <div class="field">
-                            <div v-for="(name, value) in $props.data.proxyCoexistenceXForwarded.options"
+                            <div
+                                v-for="(name, value) in $props.data.proxyCoexistenceXForwarded.options"
                                 :class="`control${proxyCoexistenceXForwardedChanged && value === proxyCoexistenceXForwarded ? ' is-changed' : ''}`"
                             >
                                 <div class="radio">

src/nginxconfig/templates/global_sections/security.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -33,7 +33,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${referrerPolicyChanged ? ' is-changed' : ''}`">
-                        <VueSelect v-model="referrerPolicy"
+                        <VueSelect
+                            v-model="referrerPolicy"
                             :options="$props.data.referrerPolicy.options"
                             :clearable="false"
                         ></VueSelect>
@@ -49,7 +50,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${contentSecurityPolicyChanged ? ' is-changed' : ''}`">
-                        <input v-model="contentSecurityPolicy"
+                        <input
+                            v-model="contentSecurityPolicy"
                             class="input"
                             type="text"
                             :placeholder="$props.data.contentSecurityPolicy.default"
@@ -57,7 +59,8 @@ THE SOFTWARE.
                     </div>
                     <div v-if="hasWordPress && !hasWordPressUnsafeEval" class="control">
                         <label class="text message is-warning">
-                            <span class="message-body"
+                            <span
+                                class="message-body"
                                 v-html="$t('templates.globalSections.security.whenUsingWordPressUnsafeEvalIsOftenRequiredToAllowFunctionality')"
                             ></span>
                         </label>
@@ -73,7 +76,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${permissionsPolicyChanged ? ' is-changed' : ''}`">
-                        <input v-model="permissionsPolicy"
+                        <input
+                            v-model="permissionsPolicy"
                             class="input"
                             type="text"
                             :placeholder="$props.data.permissionsPolicy.default"
@@ -144,7 +148,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div :class="`control${securityTxtChanged ? ' is-changed' : ''}`">
-                        <input v-model="securityTxtPath"
+                        <input
+                            v-model="securityTxtPath"
                             class="input"
                             type="text"
                             :placeholder="$props.data.securityTxtPath.default"

src/nginxconfig/templates/global_sections/tools.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -70,7 +70,8 @@ THE SOFTWARE.
             <div class="field-body">
                 <div class="field">
                     <div class="control">
-                        <input v-model="shareLink"
+                        <input
+                            v-model="shareLink"
                             class="input"
                             type="text"
                             readonly="readonly"

src/nginxconfig/templates/setup.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -35,7 +35,8 @@ THE SOFTWARE.
                 </ul>
             </div>
 
-            <component :is="tab"
+            <component
+                :is="tab"
                 v-for="tab in tabs"
                 :key="tab.key"
                 :data="$props.data"

src/nginxconfig/templates/setup_sections/certbot.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -32,7 +32,8 @@ THE SOFTWARE.
                     {{ $t('templates.setupSections.certbot.commentOutSslDirectivesInConfiguration') }}
                     <br />
                 </p>
-                <BashPrism :key="sitesAvailable"
+                <BashPrism
+                    :key="sitesAvailable"
                     :cmd="`sed -i -r 's/(listen .*443)/\\1; #/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\\1/g; s/(server \\{)/\\1\\n    ssl off;/g' ${sitesAvailable}`"
                     @copied="codeCopiedEvent('Disable ssl directives')"
                 ></BashPrism>
@@ -43,7 +44,8 @@ THE SOFTWARE.
                     {{ $t('templates.setupSections.certbot.reloadYourNginxServer') }}
                     <br />
                 </p>
-                <BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"
+                <BashPrism
+                    cmd="sudo nginx -t && sudo systemctl reload nginx"
                     @copied="codeCopiedEvent('Reload nginx')"
                 ></BashPrism>
             </li>
@@ -53,7 +55,8 @@ THE SOFTWARE.
                     {{ $t('templates.setupSections.certbot.obtainSslCertificatesFromLetsEncrypt') }}
                     <br />
                 </p>
-                <BashPrism :key="certbotCmds"
+                <BashPrism
+                    :key="certbotCmds"
                     :cmd="certbotCmds"
                     @copied="codeCopiedEvent('Obtain certificates using certbot')"
                 ></BashPrism>
@@ -64,7 +67,8 @@ THE SOFTWARE.
                     {{ $t('templates.setupSections.certbot.uncommentSslDirectivesInConfiguration') }}
                     <br />
                 </p>
-                <BashPrism :key="sitesAvailable"
+                <BashPrism
+                    :key="sitesAvailable"
                     :cmd="`sed -i -r -z 's/#?; ?#//g; s/(server \\{)\\n    ssl off;/\\1/g' ${sitesAvailable}`"
                     @copied="codeCopiedEvent('Enable ssl directives')"
                 ></BashPrism>
@@ -75,7 +79,8 @@ THE SOFTWARE.
                     {{ $t('templates.setupSections.certbot.reloadYourNginxServer') }}
                     <br />
                 </p>
-                <BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"
+                <BashPrism
+                    cmd="sudo nginx -t && sudo systemctl reload nginx"
                     @copied="codeCopiedEvent('Reload nginx (2)')"
                 ></BashPrism>
             </li>
@@ -85,10 +90,12 @@ THE SOFTWARE.
                     {{ $t('templates.setupSections.certbot.configureCertbotToReloadNginxOnCertificateRenewal') }}
                     <br />
                 </p>
-                <BashPrism cmd="echo -e '#!/bin/bash\nnginx -t && systemctl reload nginx' | sudo tee /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"
+                <BashPrism
+                    cmd="echo -e '#!/bin/bash\nnginx -t && systemctl reload nginx' | sudo tee /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"
                     @copied="codeCopiedEvent('Create nginx auto-restart on renewal')"
                 ></BashPrism>
-                <BashPrism cmd="sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"
+                <BashPrism
+                    cmd="sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"
                     @copied="codeCopiedEvent('Enable execution of auto-restart')"
                 ></BashPrism>
             </li>

src/nginxconfig/templates/setup_sections/download.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -50,7 +50,8 @@ THE SOFTWARE.
                 <p>
                     <span v-html="$t('templates.setupSections.download.navigateToYourNginxConfigurationDirectoryOnYourServer')"></span>
                     <br />
-                    <BashPrism :key="$props.data.global.nginx.nginxConfigDirectory.computed"
+                    <BashPrism
+                        :key="$props.data.global.nginx.nginxConfigDirectory.computed"
                         :cmd="`cd ${$props.data.global.nginx.nginxConfigDirectory.computed}`"
                         @copied="codeCopiedEvent('Navigate to nginx config directory')"
                     ></BashPrism>
@@ -61,7 +62,8 @@ THE SOFTWARE.
                 <p>
                     <span v-html="$t('templates.setupSections.download.createABackupOfYourCurrentNginxConfiguration')"></span>
                     <br />
-                    <BashPrism cmd="tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/"
+                    <BashPrism
+                        cmd="tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/"
                         @copied="codeCopiedEvent('Create nginx config backup tar')"
                     ></BashPrism>
                 </p>
@@ -71,7 +73,8 @@ THE SOFTWARE.
                 <p>
                     <span v-html="$t('templates.setupSections.download.extractTheNewCompressedConfigurationArchiveUsingTar')"></span>
                     <br />
-                    <BashPrism :key="$parent.tarName"
+                    <BashPrism
+                        :key="$parent.tarName"
                         :cmd="`tar -xzvf ${$parent.tarName} | xargs chmod 0644`"
                         @copied="codeCopiedEvent('Extract new nginx config tar')"
                     ></BashPrism>

src/nginxconfig/templates/setup_sections/go_live.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -32,7 +32,8 @@ THE SOFTWARE.
         <p>
             {{ $t('templates.setupSections.goLive.reloadNginxToLoadInYourNewConfiguration') }}
             <br />
-            <BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"
+            <BashPrism
+                cmd="sudo nginx -t && sudo systemctl reload nginx"
                 @copied="codeCopiedEvent('Reload nginx')"
             ></BashPrism>
         </p>

src/nginxconfig/templates/setup_sections/ssl.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -31,7 +31,8 @@ THE SOFTWARE.
                 <p>
                     <span v-html="$t('templates.setupSections.ssl.generateDiffieHellmanKeysByRunningThisCommandOnYourServer')"></span>
                     <br />
-                    <BashPrism :key="`${$props.data.global.nginx.nginxConfigDirectory.computed}-${diffieHellmanValue}`"
+                    <BashPrism
+                        :key="`${$props.data.global.nginx.nginxConfigDirectory.computed}-${diffieHellmanValue}`"
                         :cmd="`openssl dhparam -out ${$props.data.global.nginx.nginxConfigDirectory.computed}/dhparam.pem ${diffieHellmanValue}`"
                         @copied="codeCopiedEvent('Generate diffie-hellman keys')"
                     ></BashPrism>
@@ -42,11 +43,13 @@ THE SOFTWARE.
                 <p>
                     <span v-html="$t('templates.setupSections.ssl.createACommonAcmeChallengeDirectoryForLetsEncrypt')"></span>
                     <br />
-                    <BashPrism :key="letsEncryptDir"
+                    <BashPrism
+                        :key="letsEncryptDir"
                         :cmd="`mkdir -p ${letsEncryptDir}`"
                         @copied="codeCopiedEvent('Create let\'s encrypt directory')"
                     ></BashPrism>
-                    <BashPrism :key="`${nginxUser}-${letsEncryptDir}`"
+                    <BashPrism
+                        :key="`${nginxUser}-${letsEncryptDir}`"
                         :cmd="`chown ${nginxUser} ${letsEncryptDir}`"
                         @copied="codeCopiedEvent('Set let\'s encrypt directory ownership')"
                     ></BashPrism>

src/nginxconfig/util/browser_language.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -24,7 +24,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-import { fromSep } from './language_pack_name';
+import { fromSep } from './language_packs';
 
 export default availablePacks => {
     if (typeof window === 'object' && typeof window.navigator === 'object') {

src/nginxconfig/util/language_pack_context.js

@@ -1,37 +0,0 @@
-/*
-Copyright 2020 DigitalOcean
-
-This code is licensed under the MIT License.
-You may obtain a copy of the License at
-https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions :
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-
-import { fromSep } from './language_pack_name';
-
-// Use webpack magic to only build chunks for lang/index.js, not subdirectories (e.g. lang/templates/index.js)
-export const languagePackContext = require.context('../i18n', true, /^\.\/[^/]+\/index\.js$/, 'lazy');
-
-// Webpack magic to get all the packs that are available
-export const availablePacks = Object.freeze(languagePackContext
-    .keys()
-    .map(pack => pack.match(/^\.\/([^/]+)\/index\.js$/))
-    .filter(pack => pack !== null)
-    .map(pack => fromSep(pack[1], '-')));

src/nginxconfig/util/language_pack_default.js

@@ -1,30 +0,0 @@
-/*
-Copyright 2020 DigitalOcean
-
-This code is licensed under the MIT License.
-You may obtain a copy of the License at
-https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions :
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-
-
-export const defaultPack = 'en';
-
-export { default as defaultPackData } from '../i18n/en';

src/nginxconfig/util/language_packs.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -24,6 +24,10 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
+export const defaultPack = 'en';
+
+export { default as defaultPackData } from '../i18n/en';
+
 export const toSep = (pack, sep) => pack
     .match(/^([a-z]+)([A-Z]*)$/)
     .slice(1)
@@ -32,3 +36,16 @@ export const toSep = (pack, sep) => pack
     .join(sep);
 
 export const fromSep = (pack, sep) => pack.split(sep, 2)[0].toLowerCase() + (pack.split(sep, 2)[1] || '').toUpperCase();
+
+// Export a static array of all language packs
+export const availablePacks = Object.freeze([
+    'de',
+    'en',
+    'es',
+    'fr',
+    'pl',
+    'ptBR',
+    'ru',
+    'zhCN',
+    'zhTW',
+]);

vue.config.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -24,12 +24,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-const path = require('path');
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+import DuplicatePackageCheckerPlugin from 'duplicate-package-checker-webpack-plugin';
-const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
+import WebpackRequireFrom from 'webpack-require-from';
-const WebpackRequireFrom = require('webpack-require-from');
+import { URL, fileURLToPath } from 'url';
 
-module.exports = {
+export default {
     publicPath: './',
     outputDir: 'dist',
     filenameHashing: false, // Don't hash the output, so we can embed on the DigitalOcean Community
@@ -43,10 +43,10 @@ module.exports = {
             // Fix dynamic imports from CDN (inject as first entry point before any imports can happen)
             { apply: compiler => {
                 compiler.options.entry.app.import.unshift(
-                    path.join(__dirname, 'src', 'nginxconfig', 'build', 'webpack-dynamic-import.js'),
+                    fileURLToPath(new URL('src/nginxconfig/build/webpack-dynamic-import.js', import.meta.url)),
                 );
             } },
-            new WebpackRequireFrom({ methodName: '__webpackDynamicImportURL' }),
+            new WebpackRequireFrom({ methodName: '__webpackDynamicImportURL', suppressErrors: true }),
             // Analyze the bundle
             new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
             new DuplicatePackageCheckerPlugin(),
@@ -68,7 +68,7 @@ module.exports = {
 
         // Use a custom HTML template
         config.plugin('html').tap(options => {
-            options[0].template = path.join(__dirname, 'build', 'index.html');
+            options[0].template = fileURLToPath(new URL('build/index.html', import.meta.url));
             return options;
         });
     },