github
/
nginxconfig.io
mirror of https://github.com/digitalocean/nginxconfig.io
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
pull/326/head
Matt (IPv4) Cowley 2022-02-04 21:10:20 +00:00 committed by GitHub
parent 26e907bd81
commit 387a47b014
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 28690 additions and 8945 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.js → .eslintrc.cjs
View File

@ -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,

57
.github/workflows/do-spaces-workflow.yml vendored
View File

@ -7,35 +7,40 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: actions/checkout@v2
- name: Read .nvmrc
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
id: nvm
- name: Read Node.js & NPM versions
run: |
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)
uses: actions/setup-node@v1
with:
node-version: "${{ steps.nvm.outputs.NVMRC }}"
- name: Use correct Node.js version
uses: actions/setup-node@v2
with:
node-version: "${{ steps.versions.outputs.NODE }}"
- name: Install dependencies
run: npm ci
- name: Use correct NPM version
run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"
- name: Build tool
run: npm run build
- name: Install dependencies
run: npm ci
- name: Deploy commit to DigitalOcean Spaces
run: aws s3 sync ./dist s3://${{ secrets.SPACES_BUCKET }}/commits/nginxconfig/${{ github.sha }} --endpoint=https://${{ secrets.SPACES_REGION }}.digitaloceanspaces.com --acl public-read --content-encoding utf8
env:
AWS_ACCESS_KEY_ID: ${{ secrets.SPACES_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.SPACES_SECRET_ACCESS_KEY }}
AWS_DEFAULT_REGION: ${{ secrets.SPACES_REGION }}
- name: Build tool
run: npm run build
- name: Leave a comment
run: npm run deploy:spaces:comment
env:
REPO_NAME: ${{ github.repository }}
COMMIT_SHA: ${{ github.sha }}
GITHUB_ACCESS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
SPACES_REGION: ${{ secrets.SPACES_REGION }}
SPACES_BUCKET: ${{ secrets.SPACES_BUCKET }}
- name: Deploy commit to DigitalOcean Spaces
run: aws s3 sync ./dist s3://${{ secrets.SPACES_BUCKET }}/commits/nginxconfig/${{ github.sha }} --endpoint=https://${{ secrets.SPACES_REGION }}.digitaloceanspaces.com --acl public-read --content-encoding utf8
env:
AWS_ACCESS_KEY_ID: ${{ secrets.SPACES_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.SPACES_SECRET_ACCESS_KEY }}
AWS_DEFAULT_REGION: ${{ secrets.SPACES_REGION }}
- name: Leave a comment
run: npm run deploy:spaces:comment
env:
REPO_NAME: ${{ github.repository }}
COMMIT_SHA: ${{ github.sha }}
GITHUB_ACCESS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
SPACES_REGION: ${{ secrets.SPACES_REGION }}
SPACES_BUCKET: ${{ secrets.SPACES_BUCKET }}

47
.github/workflows/gh-pages-workflow.yml vendored
View File

@ -10,30 +10,35 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: actions/checkout@v2
- name: Read .nvmrc
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
id: nvm
- name: Read Node.js & NPM versions
run: |
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)
uses: actions/setup-node@v1
with:
node-version: "${{ steps.nvm.outputs.NVMRC }}"
- name: Use correct Node.js version
uses: actions/setup-node@v2
with:
node-version: "${{ steps.versions.outputs.NODE }}"
- name: Install dependencies
run: npm ci
- name: Use correct NPM version
run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"
- name: Test before production
run: npm test
- name: Install dependencies
run: npm ci
- name: Build tool
run: npm run build
- name: Test before production
run: npm test
- name: Deploy master to GitHub Pages
uses: JamesIves/github-pages-deploy-action@2.0.0
env:
ACCESS_TOKEN: ${{ secrets.DEV_GITHUB_TOKEN }}
BASE_BRANCH: master
BRANCH: gh-pages
FOLDER: dist
- name: Build tool
run: npm run build
- name: Deploy master to GitHub Pages
uses: JamesIves/github-pages-deploy-action@2.0.0
env:
ACCESS_TOKEN: ${{ secrets.DEV_GITHUB_TOKEN }}
BASE_BRANCH: master
BRANCH: gh-pages
FOLDER: dist

67
.github/workflows/test-workflow.yml vendored
View File

@ -7,37 +7,47 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: actions/checkout@v2
- name: Read .nvmrc
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
id: nvm
- name: Read Node.js & NPM versions
run: |
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)
uses: actions/setup-node@v1
with:
node-version: "${{ steps.nvm.outputs.NVMRC }}"
- name: Use correct Node.js version
uses: actions/setup-node@v2
with:
node-version: "${{ steps.versions.outputs.NODE }}"
- name: Install dependencies
run: npm ci
- name: Use correct NPM version
run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"
- name: Test with eslint
run: npm run test:eslint
- name: Install dependencies
run: npm ci
- name: Test with eslint
run: npm run test:eslint
sass-lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: actions/checkout@v2
- name: Read .nvmrc
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
id: nvm
- name: Read Node.js & NPM versions
run: |
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)
uses: actions/setup-node@v1
- name: Use correct Node.js version
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
run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
id: nvm
- name: Read Node.js & NPM versions
run: |
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)
uses: actions/setup-node@v1
- name: Use correct Node.js version
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

2
.nvmrc
View File

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

36400
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

58
package.json
View File

@ -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",
"qs": "^6.10.1",
"prismjs": "^1.26.0",
"qs": "^6.10.3",
"simple-js-sha2-256": "^1.0.7",
"vue": "^2.6.12",
"vue-i18n": "^8.24.4",
"vue-select": "^3.11.2",
"webpack-require-from": "^1.8.4"
"vue": "^2.6.14",
"vue-i18n": "^8.27.0",
"vue-select": "^3.16.0",
"webpack-require-from": "^1.8.6"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-runtime": "^7.14.3",
"@babel/preset-env": "^7.14.2",
"@babel/runtime": "^7.14.0",
"@vue/cli-service": "^5.0.0-beta.1",
"babel-eslint": "^10.1.0",
"chalk": "^4.1.1",
"@babel/eslint-parser": "^7.17.0",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/runtime": "^7.17.0",
"@vue/cli-service": "^5.0.0-rc.2",
"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-plugin-vue": "^7.9.0",
"eslint": "^8.8.0",
"eslint-plugin-vue": "^8.4.1",
"esm": "^3.2.25",
"jest": "^26.6.3",
"node-fetch": "^2.6.7",
"postcss": "^8.2.15",
"sass": "^1.32.13",
"jest": "^27.4.7",
"node-fetch": "^3.2.0",
"postcss": "^8.4.6",
"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",
"webpack-bundle-analyzer": "^4.4.2"
"vue-template-compiler": "^2.6.14",
"webpack-bundle-analyzer": "^4.5.0"
},
"overrides": {
"mini-css-extract-plugin": "^1.6.2"
}
}

17
src/nginxconfig/build/prism.js
View File

@ -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;
const path = require('path');
const fetch = require('node-fetch');
import { promises as fs } from 'fs';
import { URL } from 'url';
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');
await fs.writeFile(path.join(buildDir, 'prism.css'), fixed);
const buildDir = '../../../build';
await fs.writeFile(new URL(`${buildDir}/prism.css`, import.meta.url), fixed);
};
main().then(() => {});
main().then(() => {}).catch(err => {
console.error(err);
process.exit(1);
});

16
src/nginxconfig/build/template.js
View File

@ -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');
const fs = require('fs');
import fs from 'fs';
import { URL } from 'url';
// Fetch the posthtml template and convert it to an ejs template
const main = () => {
const buildDir = path.join(__dirname, '..', '..', '..', 'build');
let template = fs.readFileSync(path.join(buildDir, 'base.html'), 'utf8');
const buildDir = '../../../build';
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();

4
src/nginxconfig/generators/to_yaml.js
View File

@ -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);

62
src/nginxconfig/i18n/setup.js
View File

@ -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 { toSep } from '../util/language_pack_name';
import { languagePackContext, availablePacks } from '../util/language_pack_context';
import { defaultPack, defaultPackData, toSep, availablePacks } from '../util/language_packs';
Vue.use(VueI18n);
@ -37,32 +35,58 @@ const i18nPacks = {};
i18nPacks[defaultPack] = defaultPackData;
const loadedI18nPacks = [defaultPack];
// 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');
for (const availablePack of availablePacks) {
if (availablePack === defaultPack) continue;
i18nPacks[availablePack] = { languages: languagesContext(`./${toSep(availablePack, '-')}/languages.js`).default };
}
// Cache the i18n instance
let i18n = null;
export const i18n = new VueI18n({
locale: defaultPack,
fallbackLocale: defaultPack,
messages: i18nPacks,
});
export const getI18n = async () => {
// Use cached if available
if (i18n) return i18n;
const loadLanguagePack = pack => {
// Load in languages data from other packs
// Use webpack magic to only build chunks for lang/languages.js
// 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;
if (i18nPacks[availablePack]) continue;
const { default: languageData } = await import(
/* webpackInclude: /i18n\/[^/]+\/languages\.js$/ */
/* webpackMode: "eager" */
`./${toSep(availablePack, '-')}/languages.js`
);
i18nPacks[availablePack] = { languages: languageData };
}
// Store and return the i18n instance with the loaded packs
i18n = new VueI18n({
locale: defaultPack,
fallbackLocale: defaultPack,
messages: i18nPacks,
});
return i18n;
};
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
return languagePackContext(`./${toSep(pack, '-')}/index.js`).then(packData => i18nPacks[pack] = packData.default);
// Load in the full pack
// 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;
};

135
src/nginxconfig/i18n/verify.js
View File

@ -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 { toSep, fromSep } from '../util/language_pack_name';
import { defaultPack, availablePacks, toSep, fromSep } from '../util/language_packs';
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,63 +97,88 @@ const fileToObject = file => file
// Replace sep with period and use camelCase
.split(sep).map(dir => snakeToCamel(dir)).join('.');
// Get all the keys for the default "source" language pack
const defaultKeys = explore(packs[defaultPack]);
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);
// Track if we need to exit with an error
let hadError = false;
// Get all the keys for the default "source" language pack
const defaultKeys = explore(packs[defaultPack]);
// Work through all the packs and compare to default
for (const [pack, packData] of Object.entries(packs)) {
console.log(chalk.underline(`Language pack \`${pack}\``));
// Track if we need to exit with an error
let hadError = false;
// Get the base data
const packKeys = explore(packData);
const packFiles = files(toSep(pack, '-'));
console.log(` Found ${packKeys.size.toLocaleString()} keys, ${packFiles.size.toLocaleString()} files`);
// Work through all the packs and compare to default
for (const [pack, packData] of Object.entries(packs)) {
console.log(chalk.underline(`Language pack \`${pack}\``));
// Track all our errors and warnings
const errors = [], warnings = [];
// Get the base data
const packKeys = explore(packData);
const packFiles = files(toSep(pack, '-'));
console.log(` Found ${packKeys.size.toLocaleString()} keys, ${packFiles.size.toLocaleString()} files`);
// Get all the keys and the set differences
const missingKeys = [...defaultKeys].filter(x => !packKeys.has(x));
const extraKeys = [...packKeys].filter(x => !defaultKeys.has(x));
// Track all our errors and warnings
const errors = [], warnings = [];
// Missing keys and extra keys are errors
missingKeys.forEach(key => errors.push(`Missing key \`${key}\``));
extraKeys.forEach(key => errors.push(`Unexpected key \`${key}\``));
// Get all the keys and the set differences
const missingKeys = [...defaultKeys].filter(x => !packKeys.has(x));
const extraKeys = [...packKeys].filter(x => !defaultKeys.has(x));
// Get all the files in the pack directory
const packKeyFiles = new Set([...packFiles].filter(file => file.split(sep).slice(-1)[0] !== 'index.js'));
// Missing keys and extra keys are errors
missingKeys.forEach(key => errors.push(`Missing key \`${key}\``));
extraKeys.forEach(key => errors.push(`Unexpected key \`${key}\``));
// Get the objects from the pack keys
const packKeyObjects = new Set([...packKeys]
.map(key => key.split('.').slice(0, -1).join('.')));
// Get all the files in the pack directory
const packKeyFiles = new Set([...packFiles].filter(file => file.split(sep).slice(-1)[0] !== 'index.js'));
// Warn for any files that aren't used as pack objects
[...packKeyFiles].filter(file => !packKeyObjects.has(fileToObject(file)))
.forEach(file => warnings.push(`Unused file \`${file}\``));
// Get the objects from the pack keys
const packKeyObjects = new Set([...packKeys]
.map(key => key.split('.').slice(0, -1).join('.')));
// Locate any todos in each file as a warning
for (const file of packFiles)
todos(file).forEach(todo => warnings.push(`TODO in \`${file}\` on line ${todo[0]}`));
// Warn for any files that aren't used as pack objects
[...packKeyFiles].filter(file => !packKeyObjects.has(fileToObject(file)))
.forEach(file => warnings.push(`Unused file \`${file}\``));
// Output the pack results
if (warnings.length)
for (const warning of warnings)
console.log(` ${chalk.yellow('warning')} ${warning}`);
if (errors.length)
for (const error of errors)
console.log(` ${chalk.red('error')} ${error}`);
if (!errors.length && !warnings.length)
console.log(` ${chalk.green('No issues')}`);
// Locate any todos in each file as a warning
for (const file of packFiles)
todos(file).forEach(todo => warnings.push(`TODO in \`${file}\` on line ${todo[0]}`));
// If we had errors, script should exit 1
if (errors.length) hadError = true;
// Output the pack results
if (warnings.length)
for (const warning of warnings)
console.warn(` ${chalk.yellow('warning')} ${warning}`);
if (errors.length)
for (const error of errors)
console.error(` ${chalk.red('error')} ${error}`);
if (!errors.length && !warnings.length)
console.log(` ${chalk.green('No issues')}`);
// Linebreak before next pack or exit
console.log(chalk.reset());
}
// If we had errors, script should exit 1
if (errors.length) hadError = true;
// Exit 1 if we had errors
if (hadError) process.exit(1);
// Linebreak before next pack or exit
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);
});

17
src/nginxconfig/mount.js
View File

@ -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
new Vue({
i18n,
render: h => h(App),
}).$mount('#app');
// Load the i18n languages and run the app
getI18n().then(i18n => {
new Vue({
i18n,
render: h => h(App),
}).$mount('#app');
});

4
src/nginxconfig/scss/_fields.scss
View File

@ -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,

25
src/nginxconfig/templates/app.vue
View File

@ -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,11 +33,12 @@ THE SOFTWARE.
<template #header>
</template>
<template #buttons>
<VueSelect v-model="lang"
:options="i18nPacks"
:clearable="false"
:reduce="s => s.value"
:disabled="languageLoading"
<VueSelect
v-model="lang"
:options="i18nPacks"
:clearable="false"
:reduce="s => s.value"
:disabled="languageLoading"
>
<template #selected-option="{ label }">
<span class="has-icon">
@ -79,10 +80,11 @@ THE SOFTWARE.
</div>
<template v-for="data in activeDomains">
<Domain :key="data[1]"
:ref="`domain-${data[1]}`"
:data="data[0]"
:style="{ display: data[1] === active ? undefined : 'none' }"
<Domain
:key="data[1]"
:ref="`domain-${data[1]}`"
:data="data[0]"
:style="{ display: data[1] === active ? undefined : 'none' }"
></Domain>
</template>
@ -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 { availablePacks } from '../util/language_pack_context';
import { defaultPack, availablePacks } from '../util/language_packs';
import { setLanguagePack } from '../i18n/setup';
import generators from '../generators';

11
src/nginxconfig/templates/callouts/contribute.vue
View File

@ -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,10 +34,11 @@ THE SOFTWARE.
<i class="fas fa-times"></i>
</a>
</div>
<a href="https://github.com/digitalocean/nginxconfig.io"
class="button is-primary"
target="_blank"
@click="linkClickEvent"
<a
href="https://github.com/digitalocean/nginxconfig.io"
class="button is-primary"
target="_blank"
@click="linkClickEvent"
>
{{ $t('templates.callouts.contribute.getInvolvedOnGitHub') }}
</a>

9
src/nginxconfig/templates/callouts/droplet.vue
View File

@ -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,9 +28,10 @@ THE SOFTWARE.
<div class="callout">
<p>
{{ $t('templates.callouts.droplet.lookingForAPlaceToDeploy') }}
<ExternalLink :text="$t('templates.callouts.droplet.tryOutDigitalOceansDroplet')"
link="https://marketplace.digitalocean.com/apps/lemp"
@click.native="linkClickEvent"
<ExternalLink
:text="$t('templates.callouts.droplet.tryOutDigitalOceansDroplet')"
link="https://marketplace.digitalocean.com/apps/lemp"
@click.native="linkClickEvent"
></ExternalLink>
</p>
</div>

17
src/nginxconfig/templates/domain.vue
View File

@ -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,13 +42,14 @@ THE SOFTWARE.
</ul>
</div>
<component :is="tab"
v-for="tab in tabs"
:key="tab.key"
:ref="tab.key"
:data="$props.data[tab.key]"
:style="{ display: active === tab.key ? undefined : 'none' }"
class="container"
<component
:is="tab"
v-for="tab in tabs"
:key="tab.key"
:ref="tab.key"
:data="$props.data[tab.key]"
:style="{ display: active === tab.key ? undefined : 'none' }"
class="container"
></component>
<div class="navigation-buttons">

44
src/nginxconfig/templates/domain_sections/https.vue
View File

@ -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,12 +81,14 @@ THE SOFTWARE.
<label class="text message is-warning">
<span class="message-body">
{{ $t('templates.domainSections.https.http3IsANonStandardModule') }}
<ExternalLink :text="$t('templates.domainSections.https.http3NginxQuicReadme')"
link="https://quic.nginx.org/README"
<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')"
link="https://github.com/cloudflare/quiche/tree/master/extras/nginx"
<ExternalLink
:text="$t('templates.domainSections.https.http3CloudflareQuicheProject')"
link="https://github.com/cloudflare/quiche/tree/master/extras/nginx"
></ExternalLink>
{{ $t('templates.domainSections.https.http3ForBuildingNginxWithHttp3') }}
</span>
@ -158,8 +160,9 @@ THE SOFTWARE.
</div>
<div class="field-body">
<div class="field">
<div v-for="(name, value) in $props.data.certType.options"
:class="`control${certTypeChanged && value === certType ? ' is-changed' : ''}`"
<div
v-for="(name, value) in $props.data.certType.options"
:class="`control${certTypeChanged && value === certType ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="certType" :value="value" class="p-default p-round p-fill p-icon">
@ -179,10 +182,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${letsEncryptEmailChanged ? ' is-changed' : ''}`">
<input v-model="letsEncryptEmail"
class="input"
type="text"
:placeholder="$props.data.letsEncryptEmail.computed"
<input
v-model="letsEncryptEmail"
class="input"
type="text"
:placeholder="$props.data.letsEncryptEmail.computed"
/>
</div>
</div>
@ -196,10 +200,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${sslCertificateChanged ? ' is-changed' : ''}`">
<input v-model="sslCertificate"
class="input"
type="text"
:placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.crt`"
<input
v-model="sslCertificate"
class="input"
type="text"
:placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.crt`"
/>
</div>
</div>
@ -213,10 +218,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${sslCertificateKeyChanged ? ' is-changed' : ''}`">
<input v-model="sslCertificateKey"
class="input"
type="text"
:placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.key`"
<input
v-model="sslCertificateKey"
class="input"
type="text"
:placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.key`"
/>
</div>
</div>

7
src/nginxconfig/templates/domain_sections/onion.vue
View File

@ -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,8 +49,9 @@ THE SOFTWARE.
</div>
<div class="control">
<label class="text">
<ExternalLink :text="$t('templates.domainSections.onion.learnMoreAboutOnionServices')"
link="https://community.torproject.org/onion-services/"
<ExternalLink
:text="$t('templates.domainSections.onion.learnMoreAboutOnionServices')"
link="https://community.torproject.org/onion-services/"
></ExternalLink>
</label>
</div>

34
src/nginxconfig/templates/domain_sections/php.vue
View File

@ -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,16 +72,18 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${phpServerChanged ? ' is-changed' : ''}`">
<VueSelect ref="phpServerSelect"
v-model="phpServer"
:options="phpServerOptions"
:clearable="false"
:reduce="s => s.value"
<VueSelect
ref="phpServerSelect"
v-model="phpServer"
:options="phpServerOptions"
:clearable="false"
:reduce="s => s.value"
></VueSelect>
</div>
<div v-if="phpServerCustomEnabled"
:class="`control${phpServerCustomChanged ? ' is-changed' : ''}`"
<div
v-if="phpServerCustomEnabled"
:class="`control${phpServerCustomChanged ? ' is-changed' : ''}`"
>
<input v-model="phpServerCustom" class="input" type="text" :placeholder="$props.data.phpServerCustom.default" />
</div>
@ -96,16 +98,18 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${phpBackupServerChanged ? ' is-changed' : ''}`">
<VueSelect ref="phpBackupServerSelect"
v-model="phpBackupServer"
:options="phpBackupServerOptions"
:clearable="false"
:reduce="s => s.value"
<VueSelect
ref="phpBackupServerSelect"
v-model="phpBackupServer"
:options="phpBackupServerOptions"
:clearable="false"
:reduce="s => s.value"
></VueSelect>
</div>
<div v-if="phpBackupServerCustomEnabled"
:class="`control${phpBackupServerCustomChanged ? ' is-changed' : ''}`"
<div
v-if="phpBackupServerCustomEnabled"
:class="`control${phpBackupServerCustomChanged ? ' is-changed' : ''}`"
>
<input v-model="phpBackupServerCustom" class="input" type="text" :placeholder="$props.data.phpBackupServerCustom.default" />
</div>

9
src/nginxconfig/templates/domain_sections/presets.vue
View File

@ -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,9 +41,10 @@ THE SOFTWARE.
</div>
<div class="buttons-group">
<a v-for="(preset, key) in $props.data"
:class="`button${preset.computed ? ' is-primary' : ''}`"
@click="setPreset(key)"
<a
v-for="(preset, key) in $props.data"
:class="`button${preset.computed ? ' is-primary' : ''}`"
@click="setPreset(key)"
>
{{ $t(preset.display) }}
</a>

15
src/nginxconfig/templates/domain_sections/restrict.vue
View File

@ -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,12 +192,13 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${responseCodeChanged ? ' is-changed' : ''}`">
<input v-model.number="responseCode"
:class="['input', validResponseCode ? '' : 'is-danger']"
type="number"
min="100"
step="1"
:placeholder="$props.data.responseCode.default"
<input
v-model.number="responseCode"
:class="['input', validResponseCode ? '' : 'is-danger']"
type="number"
min="100"
step="1"
:placeholder="$props.data.responseCode.default"
/>
</div>
</div>

20
src/nginxconfig/templates/domain_sections/reverse_proxy.vue
View File

@ -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,10 +72,11 @@ THE SOFTWARE.
<div class="field-body">
<div :class="`field${pathChanged ? ' is-changed' : ''}`">
<div class="control">
<input v-model="path"
class="input"
type="text"
:placeholder="$props.data.path.default"
<input
v-model="path"
class="input"
type="text"
:placeholder="$props.data.path.default"
/>
</div>
</div>
@ -89,10 +90,11 @@ THE SOFTWARE.
<div class="field-body">
<div :class="`field${proxyPassChanged ? ' is-changed' : ''}`">
<div class="control">
<input v-model="proxyPass"
class="input"
type="text"
:placeholder="$props.data.proxyPass.default"
<input
v-model="proxyPass"
class="input"
type="text"
:placeholder="$props.data.proxyPass.default"
/>
</div>
</div>

16
src/nginxconfig/templates/domain_sections/routing.vue
View File

@ -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,8 +50,9 @@ THE SOFTWARE.
</div>
<div class="field-body">
<div class="field">
<div v-for="value in $props.data.index.options"
:class="`control${indexChanged && value === index ? ' is-changed' : ''}`"
<div
v-for="value in $props.data.index.options"
:class="`control${indexChanged && value === index ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="index" :value="value" class="p-default p-round p-fill p-icon">
@ -97,10 +98,11 @@ THE SOFTWARE.
<div class="field-body">
<div :class="`field${fallbackPhpPathChanged ? ' is-changed' : ''}`">
<div class="control">
<input v-model="fallbackPhpPath"
class="input"
type="text"
:placeholder="$props.data.fallbackPhpPath.default"
<input
v-model="fallbackPhpPath"
class="input"
type="text"
:placeholder="$props.data.fallbackPhpPath.default"
/>
</div>
</div>

22
src/nginxconfig/templates/footer.vue
View File

@ -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,24 +32,28 @@ THE SOFTWARE.
</p>
<p>
{{ $t('templates.footer.thisToolIs') }}
<ExternalLink :text="$t('templates.footer.openSourceOnGitHub')"
link="https://github.com/digitalocean/nginxconfig.io"
<ExternalLink
:text="$t('templates.footer.openSourceOnGitHub')"
link="https://github.com/digitalocean/nginxconfig.io"
></ExternalLink>
{{ $t('templates.footer.underThe') }}
<ExternalLink :text="$t('templates.footer.mit')"
link="https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE"
<ExternalLink
:text="$t('templates.footer.mit')"
link="https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE"
></ExternalLink>
{{ $t('templates.footer.license') }}
{{ $t('templates.footer.weWelcomeFeedbackAndContributions') }}
</p>
<p>
{{ $t('templates.footer.originallyCreatedBy') }}
<ExternalLink :text="$t('templates.footer.balintSzekeres')"
link="https://b4lint.hu/"
<ExternalLink
:text="$t('templates.footer.balintSzekeres')"
link="https://b4lint.hu/"
></ExternalLink>,
{{ $t('templates.footer.maintainedBy') }}
<ExternalLink :text="$t('templates.footer.digitalOcean')"
link="https://github.com/digitalocean/nginxconfig.io"
<ExternalLink
:text="$t('templates.footer.digitalOcean')"
link="https://github.com/digitalocean/nginxconfig.io"
></ExternalLink>.
</p>
</div>

17
src/nginxconfig/templates/global.vue
View File

@ -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,13 +37,14 @@ THE SOFTWARE.
</ul>
</div>
<component :is="tab"
v-for="tab in tabs"
:key="tab.key"
:ref="tab.key"
:data="$props.data[tab.key]"
:style="{ display: active === tab.key ? undefined : 'none' }"
class="container"
<component
:is="tab"
v-for="tab in tabs"
:key="tab.key"
:ref="tab.key"
:data="$props.data[tab.key]"
:style="{ display: active === tab.key ? undefined : 'none' }"
class="container"
></component>
<div class="navigation-buttons">

50
src/nginxconfig/templates/global_sections/https.vue
View File

@ -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,8 +67,9 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div class="field">
<div v-for="(name, value) in $props.data.sslProfile.options"
:class="`control${sslProfileChanged && value === sslProfile ? ' is-changed' : ''}`"
<div
v-for="(name, value) in $props.data.sslProfile.options"
:class="`control${sslProfileChanged && value === sslProfile ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="sslProfile" :value="value" class="p-default p-round p-fill p-icon">
@ -97,8 +98,9 @@ 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"
:class="`control${ocspCloudflareTypeChanged && value === ocspCloudflareType ? ' is-changed' : ''}`"
<div
v-for="(name, value) in $props.data.ocspCloudflareType.options"
:class="`control${ocspCloudflareTypeChanged && value === ocspCloudflareType ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="ocspCloudflareType" :value="value" class="p-default p-round p-fill p-icon">
@ -118,8 +120,9 @@ 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"
:class="`control${ocspGoogleTypeChanged && value === ocspGoogleType ? ' is-changed' : ''}`"
<div
v-for="(name, value) in $props.data.ocspGoogleType.options"
:class="`control${ocspGoogleTypeChanged && value === ocspGoogleType ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="ocspGoogleType" :value="value" class="p-default p-round p-fill p-icon">
@ -139,8 +142,9 @@ 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"
:class="`control${ocspOpenDnsTypeChanged && value === ocspOpenDnsType ? ' is-changed' : ''}`"
<div
v-for="(name, value) in $props.data.ocspOpenDnsType.options"
:class="`control${ocspOpenDnsTypeChanged && value === ocspOpenDnsType ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="ocspOpenDnsType" :value="value" class="p-default p-round p-fill p-icon">
@ -160,8 +164,9 @@ 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"
:class="`control${ocspQuad9TypeChanged && value === ocspQuad9Type ? ' is-changed' : ''}`"
<div
v-for="(name, value) in $props.data.ocspQuad9Type.options"
:class="`control${ocspQuad9TypeChanged && value === ocspQuad9Type ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="ocspQuad9Type" :value="value" class="p-default p-round p-fill p-icon">
@ -181,8 +186,9 @@ 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"
:class="`control${ocspVerisignTypeChanged && value === ocspVerisignType ? ' is-changed' : ''}`"
<div
v-for="(name, value) in $props.data.ocspVerisignType.options"
:class="`control${ocspVerisignTypeChanged && value === ocspVerisignType ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="ocspVerisignType" :value="value" class="p-default p-round p-fill p-icon">
@ -203,10 +209,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${letsEncryptRootChanged ? ' is-changed' : ''}`">
<input v-model="letsEncryptRoot"
class="input"
type="text"
:placeholder="$props.data.letsEncryptRoot.default"
<input
v-model="letsEncryptRoot"
class="input"
type="text"
:placeholder="$props.data.letsEncryptRoot.default"
/>
</div>
</div>
@ -220,10 +227,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${letsEncryptCertRootChanged ? ' is-changed' : ''}`">
<input v-model="letsEncryptCertRoot"
class="input"
type="text"
:placeholder="$props.data.letsEncryptCertRoot.default"
<input
v-model="letsEncryptCertRoot"
class="input"
type="text"
:placeholder="$props.data.letsEncryptCertRoot.default"
/>
</div>
</div>

20
src/nginxconfig/templates/global_sections/logging.vue
View File

@ -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,10 +33,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${accessLogChanged ? ' is-changed' : ''}`">
<input v-model="accessLog"
class="input"
type="text"
:placeholder="$props.data.accessLog.default"
<input
v-model="accessLog"
class="input"
type="text"
:placeholder="$props.data.accessLog.default"
/>
</div>
</div>
@ -50,10 +51,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${errorLogChanged ? ' is-changed' : ''}`">
<input v-model="errorLog"
class="input"
type="text"
:placeholder="$props.data.errorLog.default"
<input
v-model="errorLog"
class="input"
type="text"
:placeholder="$props.data.errorLog.default"
/>
</div>
</div>

63
src/nginxconfig/templates/global_sections/nginx.vue
View File

@ -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,10 +33,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${nginxConfigDirectoryChanged ? ' is-changed' : ''}`">
<input v-model="nginxConfigDirectory"
class="input"
type="text"
:placeholder="$props.data.nginxConfigDirectory.default"
<input
v-model="nginxConfigDirectory"
class="input"
type="text"
:placeholder="$props.data.nginxConfigDirectory.default"
/>
</div>
</div>
@ -50,9 +51,10 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${workerProcessesChanged ? ' is-changed' : ''}`">
<VueSelect v-model="workerProcesses"
:options="$props.data.workerProcesses.options"
:clearable="false"
<VueSelect
v-model="workerProcesses"
:options="$props.data.workerProcesses.options"
:clearable="false"
></VueSelect>
</div>
</div>
@ -66,10 +68,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${userChanged ? ' is-changed' : ''}`">
<input v-model="user"
class="input"
type="text"
:placeholder="$props.data.user.default"
<input
v-model="user"
class="input"
type="text"
:placeholder="$props.data.user.default"
/>
</div>
</div>
@ -83,10 +86,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${pidChanged ? ' is-changed' : ''}`">
<input v-model="pid"
class="input"
type="text"
:placeholder="$props.data.pid.default"
<input
v-model="pid"
class="input"
type="text"
:placeholder="$props.data.pid.default"
/>
</div>
</div>
@ -100,12 +104,13 @@ THE SOFTWARE.
<div class="field-body">
<div class="field has-addons">
<div :class="`control is-expanded${clientMaxBodySizeChanged ? ' is-changed' : ''}`">
<input v-model.number="clientMaxBodySize"
class="input"
type="number"
min="0"
step="1"
:placeholder="$props.data.clientMaxBodySize.default"
<input
v-model.number="clientMaxBodySize"
class="input"
type="number"
min="0"
step="1"
:placeholder="$props.data.clientMaxBodySize.default"
/>
</div>
<div class="control">
@ -124,9 +129,10 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${typesHashMaxSizeChanged ? ' is-changed' : ''}`">
<VueSelect v-model="typesHashMaxSize"
:options="$props.data.typesHashMaxSize.options"
:clearable="false"
<VueSelect
v-model="typesHashMaxSize"
:options="$props.data.typesHashMaxSize.options"
:clearable="false"
></VueSelect>
</div>
</div>
@ -140,9 +146,10 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${typesHashBucketSizeChanged ? ' is-changed' : ''}`">
<VueSelect v-model="typesHashBucketSize"
:options="$props.data.typesHashBucketSize.options"
:clearable="false"
<VueSelect
v-model="typesHashBucketSize"
:options="$props.data.typesHashBucketSize.options"
:clearable="false"
></VueSelect>
</div>
</div>

38
src/nginxconfig/templates/global_sections/performance.vue
View File

@ -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,10 +82,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${assetsExpirationChanged ? ' is-changed' : ''}`">
<input v-model="assetsExpiration"
class="input"
type="text"
:placeholder="$props.data.assetsExpiration.default"
<input
v-model="assetsExpiration"
class="input"
type="text"
:placeholder="$props.data.assetsExpiration.default"
/>
</div>
</div>
@ -99,10 +100,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${mediaExpirationChanged ? ' is-changed' : ''}`">
<input v-model="mediaExpiration"
class="input"
type="text"
:placeholder="$props.data.mediaExpiration.default"
<input
v-model="mediaExpiration"
class="input"
type="text"
:placeholder="$props.data.mediaExpiration.default"
/>
</div>
</div>
@ -116,10 +118,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${svgExpirationChanged ? ' is-changed' : ''}`">
<input v-model="svgExpiration"
class="input"
type="text"
:placeholder="$props.data.svgExpiration.default"
<input
v-model="svgExpiration"
class="input"
type="text"
:placeholder="$props.data.svgExpiration.default"
/>
</div>
</div>
@ -133,10 +136,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${fontsExpirationChanged ? ' is-changed' : ''}`">
<input v-model="fontsExpiration"
class="input"
type="text"
:placeholder="$props.data.fontsExpiration.default"
<input
v-model="fontsExpiration"
class="input"
type="text"
:placeholder="$props.data.fontsExpiration.default"
/>
</div>
</div>

11
src/nginxconfig/templates/global_sections/python.vue
View File

@ -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,10 +48,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${pythonServerChanged ? ' is-changed' : ''}`">
<input v-model="pythonServer"
class="input"
type="text"
:placeholder="$props.data.pythonServer.default"
<input
v-model="pythonServer"
class="input"
type="text"
:placeholder="$props.data.pythonServer.default"
/>
</div>
</div>

46
src/nginxconfig/templates/global_sections/reverse_proxy.vue
View File

@ -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,12 +49,13 @@ THE SOFTWARE.
<div class="field-body">
<div class="field has-addons">
<div :class="`control is-expanded${proxyConnectTimeoutChanged ? ' is-changed' : ''}`">
<input v-model.number="proxyConnectTimeout"
class="input"
type="number"
min="0"
step="1"
:placeholder="$props.data.proxyConnectTimeout.default"
<input
v-model.number="proxyConnectTimeout"
class="input"
type="number"
min="0"
step="1"
:placeholder="$props.data.proxyConnectTimeout.default"
/>
</div>
<div class="control">
@ -73,12 +74,13 @@ THE SOFTWARE.
<div class="field-body">
<div class="field has-addons">
<div :class="`control is-expanded${proxySendTimeoutChanged ? ' is-changed' : ''}`">
<input v-model.number="proxySendTimeout"
class="input"
type="number"
min="0"
step="1"
:placeholder="$props.data.proxySendTimeout.default"
<input
v-model.number="proxySendTimeout"
class="input"
type="number"
min="0"
step="1"
:placeholder="$props.data.proxySendTimeout.default"
/>
</div>
<div class="control">
@ -97,12 +99,13 @@ THE SOFTWARE.
<div class="field-body">
<div class="field has-addons">
<div :class="`control is-expanded${proxyReadTimeoutChanged ? ' is-changed' : ''}`">
<input v-model.number="proxyReadTimeout"
class="input"
type="number"
min="0"
step="1"
:placeholder="$props.data.proxyReadTimeout.default"
<input
v-model.number="proxyReadTimeout"
class="input"
type="number"
min="0"
step="1"
:placeholder="$props.data.proxyReadTimeout.default"
/>
</div>
<div class="control">
@ -121,8 +124,9 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div class="field">
<div v-for="(name, value) in $props.data.proxyCoexistenceXForwarded.options"
:class="`control${proxyCoexistenceXForwardedChanged && value === proxyCoexistenceXForwarded ? ' is-changed' : ''}`"
<div
v-for="(name, value) in $props.data.proxyCoexistenceXForwarded.options"
:class="`control${proxyCoexistenceXForwardedChanged && value === proxyCoexistenceXForwarded ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="proxyCoexistenceXForwarded" :value="value" class="p-default p-round p-fill p-icon">

41
src/nginxconfig/templates/global_sections/security.vue
View File

@ -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,9 +33,10 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${referrerPolicyChanged ? ' is-changed' : ''}`">
<VueSelect v-model="referrerPolicy"
:options="$props.data.referrerPolicy.options"
:clearable="false"
<VueSelect
v-model="referrerPolicy"
:options="$props.data.referrerPolicy.options"
:clearable="false"
></VueSelect>
</div>
</div>
@ -49,16 +50,18 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${contentSecurityPolicyChanged ? ' is-changed' : ''}`">
<input v-model="contentSecurityPolicy"
class="input"
type="text"
:placeholder="$props.data.contentSecurityPolicy.default"
<input
v-model="contentSecurityPolicy"
class="input"
type="text"
:placeholder="$props.data.contentSecurityPolicy.default"
/>
</div>
<div v-if="hasWordPress && !hasWordPressUnsafeEval" class="control">
<label class="text message is-warning">
<span class="message-body"
v-html="$t('templates.globalSections.security.whenUsingWordPressUnsafeEvalIsOftenRequiredToAllowFunctionality')"
<span
class="message-body"
v-html="$t('templates.globalSections.security.whenUsingWordPressUnsafeEvalIsOftenRequiredToAllowFunctionality')"
></span>
</label>
</div>
@ -73,10 +76,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${permissionsPolicyChanged ? ' is-changed' : ''}`">
<input v-model="permissionsPolicy"
class="input"
type="text"
:placeholder="$props.data.permissionsPolicy.default"
<input
v-model="permissionsPolicy"
class="input"
type="text"
:placeholder="$props.data.permissionsPolicy.default"
/>
</div>
</div>
@ -144,10 +148,11 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div :class="`control${securityTxtChanged ? ' is-changed' : ''}`">
<input v-model="securityTxtPath"
class="input"
type="text"
:placeholder="$props.data.securityTxtPath.default"
<input
v-model="securityTxtPath"
class="input"
type="text"
:placeholder="$props.data.securityTxtPath.default"
/>
</div>
</div>

13
src/nginxconfig/templates/global_sections/tools.vue
View File

@ -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,11 +70,12 @@ THE SOFTWARE.
<div class="field-body">
<div class="field">
<div class="control">
<input v-model="shareLink"
class="input"
type="text"
readonly="readonly"
@click="select"
<input
v-model="shareLink"
class="input"
type="text"
readonly="readonly"
@click="select"
/>
</div>
</div>

15
src/nginxconfig/templates/setup.vue
View File

@ -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,12 +35,13 @@ THE SOFTWARE.
</ul>
</div>
<component :is="tab"
v-for="tab in tabs"
:key="tab.key"
:data="$props.data"
:style="{ display: active === tab.key ? undefined : 'none' }"
class="container"
<component
:is="tab"
v-for="tab in tabs"
:key="tab.key"
:data="$props.data"
:style="{ display: active === tab.key ? undefined : 'none' }"
class="container"
></component>
<div class="navigation-buttons">

43
src/nginxconfig/templates/setup_sections/certbot.vue
View File

@ -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,9 +32,10 @@ THE SOFTWARE.
{{ $t('templates.setupSections.certbot.commentOutSslDirectivesInConfiguration') }}
<br />
</p>
<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
: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>
</li>
@ -43,8 +44,9 @@ THE SOFTWARE.
{{ $t('templates.setupSections.certbot.reloadYourNginxServer') }}
<br />
</p>
<BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"
@copied="codeCopiedEvent('Reload nginx')"
<BashPrism
cmd="sudo nginx -t && sudo systemctl reload nginx"
@copied="codeCopiedEvent('Reload nginx')"
></BashPrism>
</li>
@ -53,9 +55,10 @@ THE SOFTWARE.
{{ $t('templates.setupSections.certbot.obtainSslCertificatesFromLetsEncrypt') }}
<br />
</p>
<BashPrism :key="certbotCmds"
:cmd="certbotCmds"
@copied="codeCopiedEvent('Obtain certificates using certbot')"
<BashPrism
:key="certbotCmds"
:cmd="certbotCmds"
@copied="codeCopiedEvent('Obtain certificates using certbot')"
></BashPrism>
</li>
@ -64,9 +67,10 @@ THE SOFTWARE.
{{ $t('templates.setupSections.certbot.uncommentSslDirectivesInConfiguration') }}
<br />
</p>
<BashPrism :key="sitesAvailable"
:cmd="`sed -i -r -z 's/#?; ?#//g; s/(server \\{)\\n ssl off;/\\1/g' ${sitesAvailable}`"
@copied="codeCopiedEvent('Enable ssl directives')"
<BashPrism
:key="sitesAvailable"
:cmd="`sed -i -r -z 's/#?; ?#//g; s/(server \\{)\\n ssl off;/\\1/g' ${sitesAvailable}`"
@copied="codeCopiedEvent('Enable ssl directives')"
></BashPrism>
</li>
@ -75,8 +79,9 @@ THE SOFTWARE.
{{ $t('templates.setupSections.certbot.reloadYourNginxServer') }}
<br />
</p>
<BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"
@copied="codeCopiedEvent('Reload nginx (2)')"
<BashPrism
cmd="sudo nginx -t && sudo systemctl reload nginx"
@copied="codeCopiedEvent('Reload nginx (2)')"
></BashPrism>
</li>
@ -85,11 +90,13 @@ 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"
@copied="codeCopiedEvent('Create nginx auto-restart on renewal')"
<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"
@copied="codeCopiedEvent('Enable execution of auto-restart')"
<BashPrism
cmd="sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"
@copied="codeCopiedEvent('Enable execution of auto-restart')"
></BashPrism>
</li>
</ol>

21
src/nginxconfig/templates/setup_sections/download.vue
View File

@ -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,9 +50,10 @@ THE SOFTWARE.
<p>
<span v-html="$t('templates.setupSections.download.navigateToYourNginxConfigurationDirectoryOnYourServer')"></span>
<br />
<BashPrism :key="$props.data.global.nginx.nginxConfigDirectory.computed"
:cmd="`cd ${$props.data.global.nginx.nginxConfigDirectory.computed}`"
@copied="codeCopiedEvent('Navigate to nginx config directory')"
<BashPrism
:key="$props.data.global.nginx.nginxConfigDirectory.computed"
:cmd="`cd ${$props.data.global.nginx.nginxConfigDirectory.computed}`"
@copied="codeCopiedEvent('Navigate to nginx config directory')"
></BashPrism>
</p>
</li>
@ -61,8 +62,9 @@ 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/"
@copied="codeCopiedEvent('Create nginx config backup tar')"
<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>
</li>
@ -71,9 +73,10 @@ THE SOFTWARE.
<p>
<span v-html="$t('templates.setupSections.download.extractTheNewCompressedConfigurationArchiveUsingTar')"></span>
<br />
<BashPrism :key="$parent.tarName"
:cmd="`tar -xzvf ${$parent.tarName} | xargs chmod 0644`"
@copied="codeCopiedEvent('Extract new nginx config tar')"
<BashPrism
:key="$parent.tarName"
:cmd="`tar -xzvf ${$parent.tarName} | xargs chmod 0644`"
@copied="codeCopiedEvent('Extract new nginx config tar')"
></BashPrism>
</p>
</li>

7
src/nginxconfig/templates/setup_sections/go_live.vue
View File

@ -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,8 +32,9 @@ THE SOFTWARE.
<p>
{{ $t('templates.setupSections.goLive.reloadNginxToLoadInYourNewConfiguration') }}
<br />
<BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"
@copied="codeCopiedEvent('Reload nginx')"
<BashPrism
cmd="sudo nginx -t && sudo systemctl reload nginx"
@copied="codeCopiedEvent('Reload nginx')"
></BashPrism>
</p>
</div>

23
src/nginxconfig/templates/setup_sections/ssl.vue
View File

@ -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,9 +31,10 @@ THE SOFTWARE.
<p>
<span v-html="$t('templates.setupSections.ssl.generateDiffieHellmanKeysByRunningThisCommandOnYourServer')"></span>
<br />
<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
: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>
</p>
</li>
@ -42,13 +43,15 @@ THE SOFTWARE.
<p>
<span v-html="$t('templates.setupSections.ssl.createACommonAcmeChallengeDirectoryForLetsEncrypt')"></span>
<br />
<BashPrism :key="letsEncryptDir"
:cmd="`mkdir -p ${letsEncryptDir}`"
@copied="codeCopiedEvent('Create let\'s encrypt directory')"
<BashPrism
:key="letsEncryptDir"
:cmd="`mkdir -p ${letsEncryptDir}`"
@copied="codeCopiedEvent('Create let\'s encrypt directory')"
></BashPrism>
<BashPrism :key="`${nginxUser}-${letsEncryptDir}`"
:cmd="`chown ${nginxUser} ${letsEncryptDir}`"
@copied="codeCopiedEvent('Set let\'s encrypt directory ownership')"
<BashPrism
:key="`${nginxUser}-${letsEncryptDir}`"
:cmd="`chown ${nginxUser} ${letsEncryptDir}`"
@copied="codeCopiedEvent('Set let\'s encrypt directory ownership')"
></BashPrism>
</p>
</li>

4
src/nginxconfig/util/browser_language.js
View File

@ -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') {

37
src/nginxconfig/util/language_pack_context.js
View File

@ -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], '-')));

30
src/nginxconfig/util/language_pack_default.js
View File

@ -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';

19
src/nginxconfig/util/language_pack_name.js → src/nginxconfig/util/language_packs.js
View File

@ -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',
]);

18
vue.config.js
View File

@ -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');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
const WebpackRequireFrom = require('webpack-require-from');
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import DuplicatePackageCheckerPlugin from 'duplicate-package-checker-webpack-plugin';
import WebpackRequireFrom from '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;
});
},