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

Add global performance section

pull/111/head
MattIPv4 2020-05-01 20:55:58 +01:00
parent b0d0df91c5
commit 306f057ebc
2 changed files with 161 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/nginxconfig/templates/global_sections/index.js
View File

@ -2,3 +2,4 @@ export { default as HTTPS } from './https';
export { default as Security } from './security';
export { default as PHP } from './php';
export { default as Python } from './python';
export { default as Performance } from './performance';

160
src/nginxconfig/templates/global_sections/performance.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Gzip compression</label>
</div>
<div class="field-body">
<div class="field">
<div :class="`control${gzipCompressionChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="gzipCompression" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
enable gzip compression
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Brotli compression</label>
</div>
<div class="field-body">
<div class="field">
<div :class="`control${brotliCompressionChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="brotliCompression" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
enable brotli compression
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Expiration for assets</label>
</div>
<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"
/>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Expiration for media</label>
</div>
<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"
/>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Expiration for SVGs</label>
</div>
<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"
/>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Expiration for fonts</label>
</div>
<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"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import i18n from '../../i18n';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
const defaults = {
gzipCompression: {
default: true,
enabled: true,
},
brotliCompression: {
default: false,
enabled: true,
},
assetsExpiration: {
default: '7d',
enabled: true,
},
mediaExpiration: {
default: '7d',
enabled: true,
},
svgExpiration: {
default: '7d',
enabled: true,
},
fontsExpiration: {
default: '7d',
enabled: true,
},
};
export default {
name: 'GlobalPerformance', // Component name
display: 'Performance', // Display name for tab
key: 'performance', // Key for data in parent
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
components: {
PrettyCheck,
},
props: {
data: Object, // Data delegated back to us from parent
},
data () {
return {
i18n,
};
},
computed: computedFromDefaults(defaults, 'performance'), // Getters & setters for the delegated data
};
</script>