mirror of
https://github.com/digitalocean/nginxconfig.io
synced 2024-11-10 04:24:12 +00:00
Add Docker tweaks/preset button (#201)
* Docker preset button * All the strings * Sorry sass-lint
This commit is contained in:
parent
de86df7fe4
commit
0d920fa9bc
8 changed files with 80 additions and 17 deletions
|
@ -35,8 +35,6 @@ export default {
|
|||
https: 'HTTPS',
|
||||
letsEncrypt: 'Let\'s Encrypt',
|
||||
python: 'Python',
|
||||
docker: 'Docker',
|
||||
dockerCompose: 'Docker Compose',
|
||||
wordPress: 'WordPress',
|
||||
drupal: 'Drupal',
|
||||
magento: 'Magento',
|
||||
|
|
|
@ -26,7 +26,16 @@ THE SOFTWARE.
|
|||
|
||||
import common from '../../common';
|
||||
|
||||
const docker = 'Docker';
|
||||
const dockerfile = 'Dockerfile';
|
||||
|
||||
export default {
|
||||
dockerfile: `Include Dockerfile to run nginx with ${common.docker}`,
|
||||
dockerCompose: 'Include docker-compose to run nginx with docker-compose',
|
||||
docker,
|
||||
dockerfile,
|
||||
dockerCompose: `${docker} Compose`,
|
||||
applyDockerTweaks: `Apply ${docker} tweaks`,
|
||||
applyDockerTweaksForNginx: `Apply configuration tweaks for running ${common.nginx} with ${docker}`,
|
||||
applyDockerTweaksExplainer: `Updates the ${common.nginx} user to be <code class="slim">nginx</code> and the pid to <code class="slim">/var/run/nginx.pid</code>`,
|
||||
includeDockerfile: `Include ${dockerfile} to run ${common.nginx} with ${docker}`,
|
||||
includeDockerCompose: `Include docker-compose to run ${common.nginx} with docker-compose`,
|
||||
};
|
||||
|
|
|
@ -35,8 +35,6 @@ export default {
|
|||
https: 'HTTPS',
|
||||
letsEncrypt: 'Let\'s Encrypt',
|
||||
python: 'Python',
|
||||
docker: 'Docker',
|
||||
dockerCompose: 'Docker Compose',
|
||||
wordPress: 'WordPress',
|
||||
drupal: 'Drupal',
|
||||
magento: 'Magento',
|
||||
|
|
|
@ -26,7 +26,16 @@ THE SOFTWARE.
|
|||
|
||||
import common from '../../common';
|
||||
|
||||
const docker = 'Docker';
|
||||
const dockerfile = 'Dockerfile';
|
||||
|
||||
export default {
|
||||
dockerfile: `生成Dockerfile运行${common.nginx}与${common.docker}`,
|
||||
dockerCompose: '生成docker-compose.yaml来运行nginx docker-compose',
|
||||
docker,
|
||||
dockerfile,
|
||||
dockerCompose: `${docker} Compose`, // TODO: translate
|
||||
applyDockerTweaks: `Apply ${docker} tweaks`, // TODO: translate
|
||||
applyDockerTweaksForNginx: `Apply configuration tweaks for running ${common.nginx} with ${docker}`, // TODO: translate
|
||||
applyDockerTweaksExplainer: `Updates the ${common.nginx} user to be <code class="slim">nginx</code> and the pid to <code class="slim">/var/run/nginx.pid</code>`, // TODO: translate
|
||||
includeDockerfile: `生成${dockerfile}运行${common.nginx}与${docker}`,
|
||||
includeDockerCompose: `生成docker-compose.yaml来运行${common.nginx} docker-compose`,
|
||||
};
|
||||
|
|
|
@ -35,8 +35,6 @@ export default {
|
|||
https: 'HTTPS',
|
||||
letsEncrypt: 'Let\'s Encrypt',
|
||||
python: 'Python',
|
||||
docker: 'Docker',
|
||||
dockerCompose: 'Docker Compose',
|
||||
wordPress: 'WordPress',
|
||||
drupal: 'Drupal',
|
||||
magento: 'Magento',
|
||||
|
|
|
@ -26,7 +26,16 @@ THE SOFTWARE.
|
|||
|
||||
import common from '../../common';
|
||||
|
||||
const docker = 'Docker';
|
||||
const dockerfile = 'Dockerfile';
|
||||
|
||||
export default {
|
||||
dockerfile: `生成Dockerfile運行${common.nginx}與${common.docker}`,
|
||||
dockerCompose: '生成docker-compose.yaml來運行nginx docker-compose',
|
||||
docker,
|
||||
dockerfile,
|
||||
dockerCompose: `${docker} Compose`, // TODO: translate
|
||||
applyDockerTweaks: `Apply ${docker} tweaks`, // TODO: translate
|
||||
applyDockerTweaksForNginx: `Apply configuration tweaks for running ${common.nginx} with ${docker}`, // TODO: translate
|
||||
applyDockerTweaksExplainer: `Updates the ${common.nginx} user to be <code class="slim">nginx</code> and the pid to <code class="slim">/var/run/nginx.pid</code>`, // TODO: translate
|
||||
includeDockerfile: `生成${dockerfile}運行${common.nginx}與${docker}`,
|
||||
includeDockerCompose: `生成docker-compose.yaml來運行${common.nginx} docker-compose`,
|
||||
};
|
||||
|
|
|
@ -48,6 +48,14 @@ THE SOFTWARE.
|
|||
|
||||
&.is-aligned-top {
|
||||
align-items: flex-start;
|
||||
|
||||
> p {
|
||||
@include sailec-medium;
|
||||
|
||||
color: $dark-grey;
|
||||
font-size: 14px;
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
+ .control {
|
||||
|
@ -118,6 +126,14 @@ THE SOFTWARE.
|
|||
color: $dark-grey;
|
||||
padding: 0 ($margin * 1.5);
|
||||
}
|
||||
|
||||
&.is-tiny {
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
margin: .2rem .25rem;
|
||||
padding: ($margin * .5) ($margin * .75);
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
|
|
|
@ -28,7 +28,24 @@ THE SOFTWARE.
|
|||
<div>
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<label class="label">{{ $t('common.docker') }}</label>
|
||||
<label class="label">{{ $t('templates.globalSections.docker.docker') }}</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field is-horizontal is-aligned-top">
|
||||
<a class="button is-primary is-tiny" @click="applyDockerTweaks">
|
||||
{{ $t('templates.globalSections.docker.applyDockerTweaks') }}
|
||||
</a>
|
||||
<p>
|
||||
{{ $t('templates.globalSections.docker.applyDockerTweaksForNginx') }}
|
||||
<br />
|
||||
<small v-html="$t('templates.globalSections.docker.applyDockerTweaksExplainer')"></small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<label class="label">{{ $t('templates.globalSections.docker.dockerfile') }}</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
|
@ -36,7 +53,7 @@ THE SOFTWARE.
|
|||
<div class="checkbox">
|
||||
<PrettyCheck v-model="dockerfile" class="p-default p-curve p-fill p-icon">
|
||||
<i slot="extra" class="icon fas fa-check"></i>
|
||||
{{ $t('templates.globalSections.docker.dockerfile') }}
|
||||
{{ $t('templates.globalSections.docker.includeDockerfile') }}
|
||||
</PrettyCheck>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -45,7 +62,7 @@ THE SOFTWARE.
|
|||
</div>
|
||||
<div v-if="dockerfile" class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<label class="label">{{ $t('common.dockerCompose') }}</label>
|
||||
<label class="label">{{ $t('templates.globalSections.docker.dockerCompose') }}</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
|
@ -53,7 +70,7 @@ THE SOFTWARE.
|
|||
<div class="checkbox">
|
||||
<PrettyCheck v-model="dockerCompose" class="p-default p-curve p-fill p-icon">
|
||||
<i slot="extra" class="icon fas fa-check"></i>
|
||||
{{ $t('templates.globalSections.docker.dockerCompose') }}
|
||||
{{ $t('templates.globalSections.docker.includeDockerCompose') }}
|
||||
</PrettyCheck>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -67,6 +84,7 @@ THE SOFTWARE.
|
|||
import PrettyCheck from 'pretty-checkbox-vue/check';
|
||||
import delegatedFromDefaults from '../../util/delegated_from_defaults';
|
||||
import computedFromDefaults from '../../util/computed_from_defaults';
|
||||
import analytics from '../../util/analytics';
|
||||
|
||||
const defaults = {
|
||||
dockerfile: {
|
||||
|
@ -81,7 +99,7 @@ THE SOFTWARE.
|
|||
|
||||
export default {
|
||||
name: 'GlobalDocker', // Component name
|
||||
display: 'common.docker', // Display name for tab (i18n key)
|
||||
display: 'templates.globalSections.docker.docker', // Display name for tab (i18n key)
|
||||
key: 'docker', // Key for data in parent
|
||||
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
|
||||
components: {
|
||||
|
@ -106,5 +124,13 @@ THE SOFTWARE.
|
|||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
applyDockerTweaks() {
|
||||
analytics('apply_docker_tweaks', 'Presets');
|
||||
this.$parent.setValue('nginx', 'user', 'nginx');
|
||||
this.$parent.setValue('nginx', 'pid', '/var/run/nginx.pid');
|
||||
this.$parent.setValue('docker', 'dockerfile', true);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue