Display title and tags on product pages (#2225)

Display a h1 title on product page. This is recommended to improve accessibility, and it gave the opportunity to display additional page metadata, such as last modified date and product tags.

Product description as been slightly modified to let the text flow around the logo. Moreover the image height attribute as been removed to scale it without distortion.

_layouts/product.html

@@ -2,13 +2,34 @@
 layout: default
 ---
 
-{% if page.iconUrl %}
-<img alt="{{ page.title }} logo" class=productlogo width=50 height=50 src="{{ page.iconUrl }}">
-{% else %}
-<img alt="No product logo" class=productlogo width=50 height=50 src="{{ '/assets/default-product-logo.svg' | relative_url }}">
-{% endif %}
+<div class="product-title">
+  <h1>{{ page.title }}</h1>
+
+  <div class="d-flex flex-justify-between align-items-center fw-300">
+    <time datetime="{{ page.last_modified_at | date_to_xmlschema }}">
+      📅 Last updated on {{ page.last_modified_at | date_to_long_string }}
+      {%- if page.auto %}
+      <span title="Latest releases on this page are automatically updated.">🤖</span>
+      {%- endif %}
+    </time>
+
+    <span class="labels">
+      {% for tag in page.tags %}<span class="label">{{ tag }}</span>{% endfor %}
+    </span>
+  </div>
+</div>
 
-<div class="description">{{content | extract_element:'blockquote' | first }}</div>
+<div class="product-description">
+  {%- assign iconUrl = page.iconUrl %}
+  {%- assign iconDescription = page.title %}
+  {%- unless iconUrl %}
+    {%- assign iconDescription = 'No product' %}
+    {%- assign iconUrl = '/assets/default-product-logo.svg' | relative_url %}
+  {%- endunless %}
+  <img class="product-logo" width="50" src="{{ iconUrl }}" alt="{{ iconDescription }} logo">
+
+  {{content | extract_element:'blockquote' | first | extract_element:'p' }}
+</div>
 
 {% if page.releaseImage %}
 <img alt="Release Schedule Image Gantt Chart for {{page.title}}" src="{{page.releaseImage}}" />
@@ -174,8 +195,3 @@
   See the <a href="/docs/api/">API Documentation</a> for more information.
   You can subscribe to the iCalendar feed at <a href="webcal://{{site.url | split: '://' | last}}/calendar{{page.permalink}}.ics">/calendar{{page.permalink}}.ics</a>.
 </p>
-
-<p>
-This page was last updated on {{ page.last_modified_at | date_to_long_string }}.
-{%if page.auto %}Latest releases are automatically updated.{% endif %}
-</p>

_sass/custom/custom.scss

@@ -23,8 +23,9 @@ a {
   // Icons are 50x50, so this adds another 10 pixels
   min-height: 60px;
 }
-.productlogo {
+.product-logo {
   float: left;
+  margin-right: .5em;
 }
 .bg-light {
   background-color: #f8f9fa !important;
@@ -74,3 +75,7 @@ body {
     margin-bottom: -.3rem;
   }
 }
+
+.align-items-center {
+  align-items: center;
+}