Fix for critical CSS and added imager and minify configs

madebyshape · Jun 19, 2018 · 0b03328 · 0b03328
1 parent 16855ba
commit 0b03328
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 44 deletions.
diff --git a/config/imager.php b/config/imager.php
@@ -0,0 +1,3 @@
+<?php
+   return array(
+   );
diff --git a/config/minify.php b/config/minify.php
@@ -1,4 +1,4 @@
 <?php
-   return [
+   return array(
       'disableDevmodeMinifying' => true
-   ];
+   );
diff --git a/templates/_404.twig b/templates/_404.twig
@@ -21,6 +21,13 @@
    {% endcache %}
 {% endblock %}
 
+{# ------- Critical ------- #}
+
+{% block criticalCss %}
+   {%- spaceless -%}
+   {%- endspaceless -%}
+{% endblock %}
+
 {# ------- Inline ------- #}
 
 {% block inlineCss %}

diff --git a/templates/_410.twig b/templates/_410.twig
@@ -21,6 +21,13 @@
    {% endcache %}
 {% endblock %}
 
+{# ------- Critical ------- #}
+
+{% block criticalCss %}
+   {%- spaceless -%}
+   {%- endspaceless -%}
+{% endblock %}
+
 {# ------- Inline ------- #}
 
 {% block inlineCss %}

diff --git a/templates/_503.twig b/templates/_503.twig
@@ -23,6 +23,13 @@
    {% endcache %}
 {% endblock %}
 
+{# ------- Critical ------- #}
+
+{% block criticalCss %}
+   {%- spaceless -%}
+   {%- endspaceless -%}
+{% endblock %}
+
 {# ------- Inline ------- #}
 
 {% block inlineCss %}

diff --git a/templates/_blocks/block.twig b/templates/_blocks/block.twig
@@ -1,7 +1,4 @@
-{%- cache -%}
-   {%- minify -%}
-      {% if entry is defined and entry.matrix.block is defined %}
-        {# Block #}
-      {% endif %}
-   {%- endminify -%}
-{%- endcache -%}
+{% cache %}
+   {% minify %}
+   {% endminify %}
+{% endcache %}
diff --git a/templates/_layout/base.twig b/templates/_layout/base.twig
@@ -1,45 +1,49 @@
-{%- minify -%}
+{% minify %}
 
-{% import '_partials/macros' as macro %}
+   {% import '_partials/macros' as macro %}
 
-<!doctype html>
-<html class="no-js" lang="{{ craft.app.language|slice(0,2) }}">
-   <head>
+   <!doctype html>
+   <html class="no-js" lang="{{ craft.app.language|slice(0,2) }}">
+      <head>
 
-      <meta charset="utf-8">
-      <meta http-equiv="x-ua-compatible" content="ie=edge">
-      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+         <meta charset="utf-8">
+         <meta http-equiv="x-ua-compatible" content="ie=edge">
+         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-      {# Favicons #}
-      {{ source('_partials/favicons', ignore_missing = true) }}
+         {# Favicons #}
+         {{ source('_partials/favicons', ignore_missing = true) }}
 
-      {# Inline / Critical CSS #}
-      {% if block('inlineCss') is defined %}
-         <style>
-            {% block inlineCss %}{% endblock %}
-         </style>
-      {% endif %}
+         {# Inline / Critical CSS #}
+         {% if
+            block('inlineCss')|length or
+            block('criticalCss')|length
+         %}
+            <style>
+               {% block criticalCss %}{% endblock %}
+               {% block inlineCss %}{% endblock %}
+            </style>
+         {% endif %}
 
-      {# CSS #}
-      <link rel="preload" href="{{ rev('/dist/app.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
-      <noscript>
-         <link rel="stylesheet" href="{{ rev('/dist/app.css') }}">
-      </noscript>
+         {# CSS #}
+         <link rel="{{ block('criticalCss')|length ? 'preload' : 'stylesheet' }}" href="{{ rev('/dist/app.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+         <noscript>
+            <link rel="stylesheet" href="{{ rev('/dist/app.css') }}">
+         </noscript>
 
-   </head>
+      </head>
 
-   <body>
+      <body>
 
-      {% block body %}{% endblock %}
+         {% block body %}{% endblock %}
 
-      {# Javascript #}
-      <script src="{{ rev('/dist/app.js') }}"></script>
+         {# Javascript #}
+         <script src="{{ rev('/dist/app.js') }}"></script>
 
-      {# Inline Javascript#}
-      {% block inlineJs %}{% endblock %}
+         {# Inline Javascript#}
+         {% block inlineJs %}{% endblock %}
 
-   </body>
+      </body>
 
-</html>
+   </html>
 
-{%- endminify -%}
+{% endminify %}
diff --git a/templates/_page/entry.twig → templates/_page/_entry.twig b/templates/_page/entry.twig → templates/_page/_entry.twig
diff --git a/templates/_page/types/page.twig b/templates/_page/types/page.twig
@@ -12,17 +12,26 @@
 {% block content %}
 
    {% cache %}
-      {% for block in entry.matrix %}
-         {% include '_blocks/' ~ block.type %}
-      {% endfor %}
+      {#
+         {% for block in entry.matrix %}
+            {% include '_blocks/' ~ block.type %}
+         {% endfor %}
+      #}
    {% endcache %}
 
 {% endblock %}
 
+{# ------- Critical ------- #}
+
+{% block criticalCss %}
+   {%- spaceless -%}
+      {{ source (entry.slug ~ '.css', ignore_missing = true) }}
+   {%- endspaceless -%}
+{% endblock %}
+
 {# ------- Inline ------- #}
 
 {% block inlineCss %}
-   {{ source (entry.slug ~ '.css', ignore_missing = true) }}
 {% endblock %}
 
 {% block inlineJs %}