chore: better layout + SEO fixes (#143)

COil · web-flow · commit 035e2eedaa52 · 2024-12-21T13:09:14.000+01:00
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -10,15 +10,18 @@
 
     {% block preconnect %}{% endblock %}
 
-    {% block stylesheets %}
-    {% endblock %}
+    {% block stylesheets %}{% endblock %}
 
-    {% block javascripts %}
-        {{ importmap() }}
-    {% endblock %}
+    {% block javascripts %}{{ importmap() }}{% endblock %}
 </head>
 
-{% set gitHubSvgIcon = '<svg class="github-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>' %}
+{% macro gitHubIcon(placement) %}
+    <a aria-label="The MicroSymfony GitHub repository" class="contrast" data-tooltip="{{ website }}" data-placement="{{ placement }}" href="{{ website }}" target="_blank">
+        <svg role="img" class="github-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+        </svg>
+    </a>
+{% endmacro %}
 
 <body>
 
@@ -44,20 +47,17 @@
                                 Menu
                             </summary>
                             <ul role="group-menu">
-                                <li><a href="{{ path(ctrl_fqcn('HomeAction')) }}"
-                                            {{ attr_if(app.current_route == ctrl_fqcn('HomeAction'), 'aria-current', 'page')|raw }}>📒 README</a></li>
+                                <li><a href="{{ path(ctrl_fqcn('HomeAction')) }}"{{ attr_if(app.current_route == ctrl_fqcn('HomeAction'), 'aria-current', 'page')|raw }}>📒 README</a></li>
                                 <li><a href="{{ path(ctrl_fqcn('HelloWorldAction')) }}"{{ attr_if(app.current_route == ctrl_fqcn('HelloWorldAction'), 'aria-current', 'page')|raw }}>Hello world! 👻</a></li>
                                 <li><a href="{{ path('App\\Controller\\StimulusAction') }}"{{ attr_if(app.current_route == 'App\\Controller\\StimulusAction', 'aria-current', 'page')|raw }}><b>J</b>ava<b>S</b>cript with Stimulus</a></li>
                                 <li><a href="{{ path(ctrl_fqcn('ComposerAction')) }}"{{ attr_if(app.current_route == ctrl_fqcn('ComposerAction'), 'aria-current', 'page')|raw }}>The <code>composer.json</code> file</a></li>
                                 <li><a href="{{ path(ctrl_fqcn('FormAction')) }}"{{ attr_if(app.current_route == ctrl_fqcn('FormAction'), 'aria-current', 'page')|raw }}>📝 Form example</a></li>
                                 <li><a href="{{ app.environment == 'dev' ? '/_error/404.html' : '/404' }}">❌ Custom error page</a></li>
-                                <li><a href="https://picocss.com/docs" target="_blank">✨ Pico CSS documentation</a></li>
+                                <li><a href="https://picocss.com/docs" target="_blank">✨ Pico CSS documentation ⤴️</a></li>
                             </ul>
                         </details>
                     </li>
-                    <li>
-                        <a class="contrast" data-tooltip="{{ website }}" data-placement="bottom" href="{{ website }}" target="_blank">{{ gitHubSvgIcon|raw }}</a>
-                    </li>
+                    <li>{{ _self.gitHubIcon('bottom') }}</li>
                     <li>
                         <a class="theme-icon" {{ stimulus_target('header', 'lightEmoji') }} {{ stimulus_action('header', 'setDarkMode', 'click') }} data-tooltip="Switch to dark mode" data-placement="bottom">🔆</a>
                         <a class="theme-icon" {{ stimulus_target('header', 'darkEmoji') }} {{ stimulus_action('header', 'setLightMode', 'click') }} data-tooltip="Switch to light mode" data-placement="bottom">🌘 </a>
@@ -89,7 +89,7 @@
         </div>
 
         <div class="github">
-            <a class="contrast" data-tooltip="{{ website }}" data-placement="top" href="{{ website }}" target="_blank">{{ gitHubSvgIcon|raw }}</a>
+            {{ _self.gitHubIcon('top') }}
         </div>
     </div>
 </footer>
