refactor post meta, use svg icons for identifier

assets/css/common/post-entry.css

@@ -81,7 +81,8 @@
     -webkit-line-clamp: 2;
 }
 
-.entry-footer {
+.entry-footer,
+.entry-footer span > a {
     color: var(--secondary);
     font-size: 13px;
 }

assets/css/common/post-single.css

@@ -19,26 +19,22 @@
 .post-meta,
 .breadcrumbs {
     font-size: 15px;
-    display: flex;
-    flex-wrap: wrap;
 }
 .post-meta * {
     color: var(--secondary);
 }
 
-.post-meta ul {
+.post-meta .item:not(:last-of-type):after {
-    margin: 0;
+    content: "·";
-    padding: 0;
+    margin-inline-start: .3em;
+    margin-inline-end: .3em;
 }
-.post-meta .i18n_list li {
+
-    display: inline-flex;
+.post-meta svg {
-    list-style: none;
+    width: 1em;
-    margin: auto 3px;
+    height: 1em;
-    box-shadow: 0 1px 0 var(--secondary);
+    display: inline-block;
-}
+    vertical-align: -0.15em;
-.post-meta .delimiter {
-    margin-inline-start: .5em;
-    margin-inline-end: .5em;
 }
 
 .post-tags a:hover {
@@ -52,9 +48,12 @@
 }
 .post-tags a:before {
     content: "#";
-    margin-inline-end: 2px;
 }
 
+.breadcrumbs {
+    display: flex;
+    flex-wrap: wrap;
+}
 .breadcrumbs a {
     font-size: 16px;
 }

layouts/_default/list.html

@@ -65,7 +65,11 @@
   </header>
   {{- if (ne (.Param "hideSummary") true) }}
   <section class="entry-content">
+    {{ if .Description }}
+      <p>{{ .Description | plainify | htmlUnescape }}</p>
+    {{ else }}
       <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
+    {{ end }}
   </section>
   {{- end }}
   {{- if not (.Param "hideMeta") }}

layouts/_default/single.html

@@ -14,24 +14,10 @@
     {{- end }}
     {{- if not (.Param "hideMeta") }}
     <div class="post-meta">
-      {{- if not .Date.IsZero -}}
-        <span>{{ .Date | time.Format (default "January 2, 2006" site.Params.DateFormat) }}</span>
-        <span class="delimiter">&nbsp;·&nbsp;</span>
-      {{- end }}
-
-      {{- if .Params.tags }}
-        <span class="post-tags">
-          {{- range ($.GetTerms "tags") -}}
-          <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
-          {{- end -}}
-        </span>
-        <span class="delimiter">&nbsp;·&nbsp;</span>
-      {{- end }}
-
       {{- partial "post_meta.html" . -}}
-      {{- partial "translation_list.html" . -}}
+      {{/* TODO move to footer */}}
-      {{- partial "edit_post.html" . -}}
+      {{/* partial "edit_post.html" . */}}
-      {{- partial "post_canonical.html" . -}}
+      {{/* partial "post_canonical.html" . */}}
     </div>
     {{- end }}
   </header>

layouts/partials/post_meta.html

@@ -1,24 +1,68 @@
-{{- $scratch := newScratch }}
+
+{{- if not .Date.IsZero -}}
+<span class="item">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar" style="user-select: text;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" style="user-select: text;"></rect><line x1="16" y1="2" x2="16" y2="6" style="user-select: text;"></line><line x1="8" y1="2" x2="8" y2="6" style="user-select: text;"></line><line x1="3" y1="10" x2="21" y2="10" style="user-select: text;"></line></svg>
+  <span>{{ .Date | time.Format (default "January 2, 2006" site.Params.DateFormat) }}</span>
+</span>
+{{- end }}
+
+
+{{- if .Params.tags }}
+<span class="item">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon" style="user-select: text;"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" style="user-select: text;"></path><line x1="7" y1="7" x2="7" y2="7" style="user-select: text;"></line></svg>
+  <span class="post-tags">
+    {{- range ($.GetTerms "tags") -}}
+    <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+    {{- end -}}
+  </span>
+</span>
+{{- end }}
+
 
 {{- if (.Param "ShowWordCount") -}}
-{{- $scratch.Add "meta" (slice (i18n "words" .WordCount | default (printf "%d words" .WordCount))) -}}
+<span class="item">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text" style="user-select: text;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" style="user-select: text;"></path><polyline points="14 2 14 8 20 8" style="user-select: text;"></polyline><line x1="16" y1="13" x2="8" y2="13" style="user-select: text;"></line><line x1="16" y1="17" x2="8" y2="17" style="user-select: text;"></line><polyline points="10 9 9 9 8 9" style="user-select: text;"></polyline></svg>
+  <span>
+    {{- i18n "words" .WordCount | default (printf "%d words" .WordCount) -}}
+  </span>
+</span>
 {{- end }}
 
+
 {{- if (.Param "ShowReadingTime") -}}
-{{- $scratch.Add "meta" (slice (i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime))) -}}
+<span class="item">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="12" r="9"></circle><polyline points="12 7 12 12 15 15"></polyline></svg>
+  <span>
+    {{- i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime) -}}
+  </span>
+</span>
 {{- end }}
 
+
 {{- if (.Param "ShowAuthor") -}}
-{{- with (partial "author.html" .) }}
+<span class="item">
-{{- $scratch.Add "meta" (slice .) }}
+  <svg xmlns="http://www.w3.org/2000/svg"width="24" height="24" viewBox="0 0 24 24" stroke="black" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="7" r="4"></circle><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg>
-{{- end }}
+  {{- partial "author.html" . }}
+</span>
 {{- end }}
 
-{{- with ($scratch.Get "meta") }}
+
-{{ range $i, $e := . }}
+{{- if .IsTranslated -}}
-{{ if $i }}
+<span class="item">
-<span class="delimiter">&nbsp;·&nbsp;</span>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 5h7"></path><path d="M7 4c0 4.846 0 7 .5 8"></path><path d="M10 8.5c0 2.286 -2 4.5 -3.5 4.5s-2.5 -1.135 -2.5 -2c0 -2 1 -3 3 -3s5 .57 5 2.857c0 1.524 -.667 2.571 -2 3.143"></path><path d="M12 20l4 -9l4 9"></path><path d="M19.1 18h-6.2"></path></svg>
-{{ end }}
+  <span class="i18n-links">
-<span>{{ $e  }}</span>
+  {{- range $i, $e := .Translations }}
-{{- end -}}
+    {{- if $i }}&nbsp;|&nbsp;{{ end -}}
-{{- end -}}
+    {{- with $e }}
+    <a href="{{ .Permalink }}">
+      {{- if (and site.Params.displayFullLangName (.Language.LanguageName)) }}
+        {{- .Language.LanguageName | emojify -}}
+      {{- else }}
+        {{- .Lang | title -}}
+      {{- end -}}
+    </a>
+    {{- end }}
+  {{- end }}
+  </span>
+</span>
+{{- end }}