Extract common head markup to a dedicated template.

This also moves common js and css out of their corresponding blocks so we can't override them anymore (which I don't think we want to do anyway)

Author: jean-gui

src/Extensions/Twig/GetFromFrontendExtension.php

@@ -30,7 +30,8 @@ public function getFunctions(): array
         return [
             new TwigFunction('global_nav', [$this, 'globalNav']),
             new TwigFunction('lang_nav', [$this, 'langNav']),
-            new TwigFunction('footer', [$this, 'footer'])
+            new TwigFunction('footer', [$this, 'footer']),
+            new TwigFunction('common-head', [$this, 'commonHead'])
         ];
     }
 
@@ -69,5 +70,10 @@ public function footer(): string
     {
         return $this->fromFrontend('/_fragments/footer/');
     }
+
+    public function commonHead(): string
+    {
+        return $this->fromFrontend('/_fragments/common-head/');
+    }
 }
 

templates/_common-head.html.twig

@@ -0,0 +1,45 @@
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="home" href="https://www.w3.org/"/>
+    <link rel="icon" type="image/png" href="https://www.w3.org/assets/logos/w3c/favicon-32.png"/>
+    <link rel="apple-touch-icon" type="image/png" href="https://www.w3.org/assets/logos/w3c/favicon-180.png"/>
+
+    <link rel="stylesheet" href="{{ asset('styles/core.css?ver=1.4', 'website-2021') }}" media="screen"/>
+
+    <!--
+    CSS Mustard Cut
+    Print (Edge doesn't apply to print otherwise)
+    Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+, Android UCBrowser ~11.8+
+    FF 47+
+    -->
+    <link rel="stylesheet" id="advanced-stylesheet"
+          href="{{ asset('styles/advanced.css?ver=1.4', 'website-2021') }}" media="
+                only print,
+                only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
+                only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
+            ">
+    <link rel="stylesheet" href="{{ asset('styles/print.css', 'website-2021') }}" media="print"/>
+
+    <script src="{{ asset('js/libraries/fontfaceobserver.js', 'website-2021') }}"></script>
+
+    <script>
+        var myFont = new FontFaceObserver('Noto Sans');
+
+        Promise.all([myFont.load()]).then(function () {
+            document.documentElement.className += " fonts-loaded";
+        });
+
+        (function () {
+            var linkEl = document.getElementById('advanced-stylesheet');
+            if (window.matchMedia && window.matchMedia(linkEl.media).matches) {
+                var script = document.createElement('script');
+                script.src = '{{ asset('js/main.js?ver=1.4', 'website-2021') }}';
+                script.defer = true;
+                document.querySelector('head').appendChild(script);
+                (function (H) {
+                    H.className = H.className.replace(/\bno-js\b/, 'js')
+                })(document.documentElement);
+            }
+        })();
+    </script>

templates/base.html.twig

@@ -44,8 +44,8 @@
         {%- endblock -%}
     </title>
 
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{~ include('@W3CWebsiteTemplates/_common-head.html.twig') }}
+
     <meta name="description" content="{% block description %}{{ page.excerpt|default('page.default_description'|trans({}, 'w3c_website_templates_bundle')) }}{% endblock %}"/>
     <meta name="thumbnail" content="{{ thumbnail }}"/>
 {# <meta property="fb:app_id" content="__hardcoded_fb_app_id__"> #}
@@ -72,52 +72,10 @@
     {%- if page.expiryDate is defined and page.expiryDate -%}
         <meta name="robots" content="unavailable_after: {{ page.expiryDate }}"/>
     {% endif %}
-    <link rel="home" href="https://www.w3.org/"/>
-    <link rel="icon" type="image/png" href="https://www.w3.org/assets/logos/w3c/favicon-32.png"/>
-    <link rel="apple-touch-icon" type="image/png" href="https://www.w3.org/assets/logos/w3c/favicon-180.png"/>
-
-    {% block stylesheets %}
-        <link rel="stylesheet" href="{{ asset('styles/core.css?ver=1.4', 'website-2021') }}" media="screen"/>
-
-        <!--
-        CSS Mustard Cut
-        Print (Edge doesn't apply to print otherwise)
-        Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+, Android UCBrowser ~11.8+
-        FF 47+
-        -->
-        <link rel="stylesheet" id="advanced-stylesheet"
-              href="{{ asset('styles/advanced.css?ver=1.4', 'website-2021') }}" media="
-            only print,
-            only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
-            only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
-        ">
-        <link rel="stylesheet" href="{{ asset('styles/print.css', 'website-2021') }}" media="print"/>
-    {% endblock stylesheets %}
-
-    {% block javascripts %}
-        <script src="{{ asset('js/libraries/fontfaceobserver.js', 'website-2021') }}"></script>
-
-        <script>
-            var myFont = new FontFaceObserver('Noto Sans');
 
-            Promise.all([myFont.load()]).then(function () {
-                document.documentElement.className += " fonts-loaded";
-            });
+    {% block stylesheets %}{% endblock stylesheets %}
 
-            (function () {
-                var linkEl = document.getElementById('advanced-stylesheet');
-                if (window.matchMedia && window.matchMedia(linkEl.media).matches) {
-                    var script = document.createElement('script');
-                    script.src = '{{ asset('js/main.js?ver=1.4', 'website-2021') }}';
-                    script.defer = true;
-                    document.querySelector('head').appendChild(script);
-                    (function (H) {
-                        H.className = H.className.replace(/\bno-js\b/, 'js')
-                    })(document.documentElement);
-                }
-            })();
-        </script>
-    {% endblock javascripts %}
+    {% block javascripts %}{% endblock javascripts %}
 
     {% if page.feeds is defined %}
         {% for feed in page.feeds %}