From 306f057ebcae40441f3cda21e7f1c6cf03c4dd49 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Fri, 1 May 2020 20:55:58 +0100
Subject: [PATCH] Add global performance section
---
.../templates/global_sections/index.js | 1 +
.../templates/global_sections/performance.vue | 160 ++++++++++++++++++
2 files changed, 161 insertions(+)
create mode 100644 src/nginxconfig/templates/global_sections/performance.vue
diff --git a/src/nginxconfig/templates/global_sections/index.js b/src/nginxconfig/templates/global_sections/index.js
index 6589cff..b57cf10 100644
--- a/src/nginxconfig/templates/global_sections/index.js
+++ b/src/nginxconfig/templates/global_sections/index.js
@@ -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';
diff --git a/src/nginxconfig/templates/global_sections/performance.vue b/src/nginxconfig/templates/global_sections/performance.vue
new file mode 100644
index 0000000..897b5e1
--- /dev/null
+++ b/src/nginxconfig/templates/global_sections/performance.vue
@@ -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>