Show warning message/icon for Brotli

src/nginxconfig/i18n/en/templates/global_sections/performance.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -31,6 +31,9 @@ export default {
     enableGzipCompression: `${common.enable} gzip compression`,
     brotliCompression: 'Brotli compression',
     enableBrotliCompression: `${common.enable} brotli compression`,
+    brotliIsANonStandardModule: 'Brotli isn\'t a standard NGINX module, check the ',
+    brotliGoogleNgxBrotliProject: 'Google ngx_brotli project',
+    brotliForBuildingNginxWithBrotli: ' for how to build NGINX with Brotli!',
     expirationForAssets: 'Expiration for assets',
     expirationForMedia: 'Expiration for media',
     expirationForSvgs: 'Expiration for SVGs',

src/nginxconfig/i18n/fr/templates/global_sections/performance.js

@@ -31,6 +31,9 @@ export default {
     enableGzipCompression: `${common.enable} la compression gzip`,
     brotliCompression: 'Compression Brotli',
     enableBrotliCompression: `${common.enable} la compression brotli`,
+    brotliIsANonStandardModule: 'Brotli isn\'t a standard NGINX module, check the ', // TODO: translate
+    brotliGoogleNgxBrotliProject: 'Google ngx_brotli project', // TODO: translate
+    brotliForBuildingNginxWithBrotli: ' for how to build NGINX with Brotli!', // TODO: translate
     expirationForAssets: 'Expiration des assets',
     expirationForMedia: 'Expiration des medias',
     expirationForSvgs: 'Expiration des SVGs',

src/nginxconfig/i18n/pt-br/templates/global_sections/performance.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -31,6 +31,9 @@ export default {
     enableGzipCompression: `${common.enable} compressão gzip`,
     brotliCompression: 'Compressão Brotli',
     enableBrotliCompression: `${common.enable} compressão brotli`,
+    brotliIsANonStandardModule: 'Brotli isn\'t a standard NGINX module, check the ', // TODO: translate
+    brotliGoogleNgxBrotliProject: 'Google ngx_brotli project', // TODO: translate
+    brotliForBuildingNginxWithBrotli: ' for how to build NGINX with Brotli!', // TODO: translate
     expirationForAssets: 'Expiração de ativos',
     expirationForMedia: 'Expiração de mídia',
     expirationForSvgs: 'Expiração de SVGs',

src/nginxconfig/i18n/ru/templates/global_sections/performance.js

@@ -31,6 +31,9 @@ export default {
     enableGzipCompression: `${common.enable} gzip сжатие`,
     brotliCompression: 'Brotli сжатие',
     enableBrotliCompression: `${common.enable} brotli сжатие`,
+    brotliIsANonStandardModule: 'Brotli isn\'t a standard NGINX module, check the ', // TODO: translate
+    brotliGoogleNgxBrotliProject: 'Google ngx_brotli project', // TODO: translate
+    brotliForBuildingNginxWithBrotli: ' for how to build NGINX with Brotli!', // TODO: translate
     expirationForAssets: 'Истечение срока для ассетов',
     expirationForMedia: 'Истечение срока для медиа файлов',
     expirationForSvgs: 'Истечение срока для SVG файлов',

src/nginxconfig/i18n/zh-cn/templates/global_sections/performance.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -31,6 +31,9 @@ export default {
     enableGzipCompression: `${common.enable}Gzip压缩`,
     brotliCompression: 'Brotli 压缩',
     enableBrotliCompression: `${common.enable}brotli压缩`,
+    brotliIsANonStandardModule: 'Brotli isn\'t a standard NGINX module, check the ', // TODO: translate
+    brotliGoogleNgxBrotliProject: 'Google ngx_brotli project', // TODO: translate
+    brotliForBuildingNginxWithBrotli: ' for how to build NGINX with Brotli!', // TODO: translate
     expirationForAssets: '资源有效期',
     expirationForMedia: '媒体资源有效期',
     expirationForSvgs: 'SVGs有效期',

src/nginxconfig/i18n/zh-tw/templates/global_sections/performance.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -31,6 +31,9 @@ export default {
     enableGzipCompression: `${common.enable}Gzip壓縮`,
     brotliCompression: 'Brotli 壓縮',
     enableBrotliCompression: `${common.enable}brotli壓縮`,
+    brotliIsANonStandardModule: 'Brotli isn\'t a standard NGINX module, check the ', // TODO: translate
+    brotliGoogleNgxBrotliProject: 'Google ngx_brotli project', // TODO: translate
+    brotliForBuildingNginxWithBrotli: ' for how to build NGINX with Brotli!', // TODO: translate
     expirationForAssets: '資源有效期',
     expirationForMedia: '媒體資源有效期',
     expirationForSvgs: 'SVGs有效期',

src/nginxconfig/templates/global_sections/performance.vue

@@ -44,8 +44,8 @@ THE SOFTWARE.
             </div>
         </div>
 
-        <div class="field is-horizontal">
+        <div class="field is-horizontal is-aligned-top">
-            <div class="field-label">
+            <div class="field-label has-small-margin-top">
                 <label class="label">{{ $t('templates.globalSections.performance.brotliCompression') }}</label>
             </div>
             <div class="field-body">
@@ -58,6 +58,19 @@ THE SOFTWARE.
                             </PrettyCheck>
                         </div>
                     </div>
+
+                    <div v-if="showBrotliWarning" class="control">
+                        <label class="text message is-warning">
+                            <span class="message-body">
+                                {{ $t('templates.globalSections.performance.brotliIsANonStandardModule') }}
+                                <ExternalLink
+                                    :text="$t('templates.globalSections.performance.brotliGoogleNgxBrotliProject')"
+                                    link="https://github.com/google/ngx_brotli"
+                                ></ExternalLink>
+                                {{ $t('templates.globalSections.performance.brotliForBuildingNginxWithBrotli') }}
+                            </span>
+                        </label>
+                    </div>
                 </div>
             </div>
         </div>
@@ -134,6 +147,7 @@ THE SOFTWARE.
 
 <script>
     import PrettyCheck from 'pretty-checkbox-vue/check';
+    import ExternalLink from 'do-vue/src/templates/external_link';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
 
@@ -171,10 +185,19 @@ THE SOFTWARE.
         delegated: delegatedFromDefaults(defaults),                     // Data the parent will present here
         components: {
             PrettyCheck,
+            ExternalLink,
         },
         props: {
             data: Object,                                               // Data delegated back to us from parent
         },
-        computed: computedFromDefaults(defaults, 'performance'),        // Getters & setters for the delegated data
+        computed: {
+            ...computedFromDefaults(defaults, 'performance'),           // Getters & setters for the delegated data
+            showBrotliWarning() {
+                return this.$props.data.brotliCompression.computed;
+            },
+            hasWarnings() {
+                return this.showBrotliWarning;
+            },
+        },
     };
 </script>