More content details to generic location

static/src/scss/_content.scss

@@ -1,3 +1,13 @@
 section.content {
   font-size: 1.25rem;
 }
+
+.content-details {
+  span + span {
+    margin-left: 0.5rem;
+  }
+
+  i {
+    margin-right: 5px;
+  }
+}

static/src/scss/_hero.scss

@@ -55,14 +55,4 @@ section.hero {
   nav.breadcrumb {
     margin-bottom: 0.5rem !important;
   }
-
-  .content-details {
-    span + span {
-      margin-left: 0.5rem;
-    }
-
-    i {
-      margin-right: 5px;
-    }
-  }
 }

website/common/templates/common/content-details.html

@@ -0,0 +1,7 @@
+{% if page.date %}
+  <span title="{{ page.date }}"><i class="far fa-calendar-alt"></i>{{ page.date|date:"Y-m-d" }}</span>
+{% endif %}
+<span><i class="far fa-clock"></i>4 minutes</span>
+{% if page.tags.all %}
+  <span class="is-family-code"><i class="fas fa-tags"></i>{% for tag in page.tags.all %}<a title="{{ tag.name }}">#{{ tag.slug }}</a>{% endfor %}</span>
+{% endif %}

website/common/templates/common/hero.html

@@ -15,13 +15,7 @@
             <h2 class="subtitle">{{ page.subtitle }}</h2>
           {% endif %}
           <h3 class="is-size-6 content-details">
-            {% if page.date %}
-              <span title="{{ page.date }}"><i class="far fa-calendar-alt"></i>{{ page.date|date:"Y-m-d" }}</span>
-            {% endif %}
-            <span><i class="far fa-clock"></i>4 minutes</span>
-            {% if page.tags.all %}
-              <span class="is-family-code"><i class="fas fa-tags"></i>{% for tag in page.tags.all %}<a title="{{ tag.name }}">#{{ tag.slug }}</a>{% endfor %}</span>
-            {% endif %}
+            {% include "common/content-details.html" %}
           </h3>
         </div>
         <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">

website/common/templates/common/listing-item.html

@@ -10,7 +10,7 @@
     <div class="media-content column">
       <div>
         <h2 class="title is-3"><a href="{% pageurl page %}">{{ page.title }}</a></h2>
-        <h3 class="subtitle is-6">2022-04-15 4 minutes <a>#programming</a> <a href="#security">#security</a> <a>#website</a></h3>
+        <h3 class="subtitle is-6 content-details">{% include "common/content-details.html" %}</h3>
         {% lorem 1 p %}
       </div>
     </div>