feat: unify and always show post metadata (#283)

layouts/partials/posts/metadata.html

@@ -0,0 +1,54 @@
+<span class="no-wrap">
+  <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
+  <span class="gdoc-post__tag">
+    <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
+      {{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
+        Updated on
+      {{ end }}
+      {{ .Lastmod.Format "Jan 2, 2006" }}
+    </time>
+  </span>
+</span>
+
+<span class="no-wrap">
+  <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
+  <span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
+</span>
+
+{{ $tc := 0 }}
+{{ with .Params.tags }}
+  {{ range sort . }}
+    {{ $name := . }}
+    {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
+      {{ if eq $tc 0 }}
+        <span class="no-wrap">
+          <svg class="icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
+          {{ template "post-tag" dict "name" $name "page" . }}
+        </span>
+      {{ else }}
+        {{ template "post-tag" dict "name" $name "page" . }}
+      {{ end }}
+    {{ end }}
+    {{ $tc = (add $tc 1) }}
+  {{ end }}
+{{ end }}
+
+{{ define "post-tag" }}
+  <span class="gdoc-post__tag gdoc-button">
+    <a
+      class="gdoc-button__link"
+      href="{{ .page.RelPermalink }}"
+      title="All posts tagged with '{{ .name }}'"
+    >
+      {{ .name }}
+    </a>
+  </span>
+{{ end }}
+
+{{ define "post-author" }}
+  <span class="gdoc-post__tag gdoc-button">
+    <a class="gdoc-button__link" href="{{ .page.RelPermalink }}" title="All posts of this author">
+      {{ .name }}
+    </a>
+  </span>
+{{ end }}

layouts/posts/list.html

@@ -21,40 +21,7 @@
       </div>
 
       <footer class="gdoc-post__footer">
-        <span class="no-wrap">
+        {{ partial "posts/metadata.html" . }}
-          <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
-          <span class="gdoc-post__tag">
-            <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
-              {{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
-                Updated on
-              {{ end }}
-              {{ .Lastmod.Format "Jan 2, 2006" }}
-            </time>
-          </span>
-        </span>
-
-        <span class="no-wrap">
-          <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
-          <span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
-        </span>
-
-        {{ $tc := 0 }}
-        {{ with .Params.tags }}
-          {{ range sort . }}
-            {{ $name := . }}
-            {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
-              {{ if eq $tc 0 }}
-                <span class="no-wrap">
-                  <svg class="icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
-                  {{ template "post-tag" dict "name" $name "page" . }}
-                </span>
-              {{ else }}
-                {{ template "post-tag" dict "name" $name "page" . }}
-              {{ end }}
-            {{ end }}
-            {{ $tc = (add $tc 1) }}
-          {{ end }}
-        {{ end }}
       </footer>
     </article>
   {{ end }}

layouts/posts/single.html

@@ -3,22 +3,7 @@
     <header class="gdoc-post__header">
       <h1 class="gdoc-post__title">{{ .Title }}</h1>
       <div class="gdoc-post__meta">
-        <span class="no-wrap">
+        {{ partial "posts/metadata.html" . }}
-          <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
-          <span class="gdoc-post__tag">
-            <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
-              {{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
-                Updated on
-              {{ end }}
-              {{ .Lastmod.Format "Jan 2, 2006" }}
-            </time>
-          </span>
-        </span>
-
-        <span class="no-wrap">
-          <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
-          <span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
-        </span>
       </div>
     </header>
     <div>

layouts/taxonomy/list.html

@@ -21,40 +21,7 @@
       </div>
 
       <footer class="gdoc-post__footer">
-        <span class="no-wrap">
+        {{ partial "posts/metadata.html" . }}
-          <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
-          <span class="gdoc-post__tag">
-            <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
-              {{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
-                Updated on
-              {{ end }}
-              {{ .Lastmod.Format "Jan 2, 2006" }}
-            </time>
-          </span>
-        </span>
-
-        <span class="no-wrap">
-          <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
-          <span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
-        </span>
-
-        {{ $tc := 0 }}
-        {{ with .Params.tags }}
-          {{ range sort . }}
-            {{ $name := . }}
-            {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
-              {{ if eq $tc 0 }}
-                <span class="no-wrap">
-                  <svg class="icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
-                  {{ template "post-tag" dict "name" $name "page" . }}
-                </span>
-              {{ else }}
-                {{ template "post-tag" dict "name" $name "page" . }}
-              {{ end }}
-            {{ end }}
-            {{ $tc = (add $tc 1) }}
-          {{ end }}
-        {{ end }}
       </footer>
     </article>
   {{ end }}

src/sass/_base.scss

@@ -163,9 +163,9 @@ img {
 
 .icon {
   display: inline-block;
-  width: 1em;
+  width: 1.3em;
-  height: 1em;
+  height: 1.3em;
-  top: 0.125em;
+  vertical-align: middle;
   stroke-width: 0;
   stroke: currentColor;
   fill: currentColor;
@@ -456,12 +456,8 @@ img {
   &__tag {
     margin: $padding-4 0 !important;
 
-    .gdoc-button {
+    .gdoc-button__link {
-      background: var(--body-background);
+      padding: $padding-4 $padding-8;
-
-      &__link {
-        padding: $padding-4 $padding-8;
-      }
     }
   }