From 059a6c489ce7e512c3dd14c720cbe12d1355cab4 Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foo.dogsquared@gmail.com>
Date: Wed, 28 Oct 2020 02:06:16 +0800
Subject: [PATCH] Improve the UX of the theme

Also, this is enough for a minor release.
---
 CHANGELOG.adoc               | 25 ++++++++++++++++
 README.md                    |  4 +--
 assets/css/main.css          | 56 +++++++++++++++++++++++++++++-------
 layouts/_default/list.html   | 18 +++++++++---
 layouts/_default/single.html |  4 +--
 layouts/_default/terms.html  | 26 +++++++++++------
 6 files changed, 106 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index b3422b3..752acd1 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -7,6 +7,31 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 
 
 
+== [2.1.0] - 2020-10-28
+
+
+=== Added
+
+* Authors are now added in the post metadata template.
+
+
+=== Changed
+
+* Improve the taxonomy template inspired from the https://www.oilshell.org/blog/tags.html[Oil shell blog tags template].
+It should offer an improved user experience with the listing of the pages and a convenient link of the term as a standalone page.
+
+
+=== Fixed
+
+* The post metadata with the grey text indicating it is secondary content and whatnot.
+
+* Datetimes in the https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*[data attributes] now use full datetimes.
+
+* Authors in the data attributes in the content template now use the full data from the content frontmatter.
+
+
+
+
 == [2.0.0] - 2020-10-24
 
 
diff --git a/README.md b/README.md
index 0bf5046..eac778c 100644
--- a/README.md
+++ b/README.md
@@ -52,9 +52,9 @@ More possibilities are there if you tinker it with your own modifications.
 
 I assume you already have [Git](https://git-scm.com/) and [Hugo](https://gohugo.io/) installed.
 For future reference, the minimum Hugo version required is at v0.74.
-Additionally, the following instructions are done as if you're in a Hugo directory.
+Furthermore, the following instructions are done as if you're in a Hugo directory.
 
-Installation of a Hugo theme is pretty simple and you can do it in multiple ways.
+You can install the Hugo theme in two ways.
 
 
 ### Using Hugo module
diff --git a/assets/css/main.css b/assets/css/main.css
index ba86e51..95d060b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -23,7 +23,7 @@
     --background: #000000;
     --background-light: #363537;
     --foreground: #FAFAFA;
-    --foreground-light: #E1E1E1;
+    --foreground-light: #CCCCCC;
     --grey: #919191;
 }
 
@@ -269,14 +269,56 @@ footer {
 }
 
 .post__meta {
+    color: var(--grey);
+    display: inline-block;
     margin: 0.5rem auto;
     font-size: 0.9em;
 }
 
-.post__meta > * {
-    margin: 0.5rem auto;
+.post__meta--single {
+    color: var(--grey);
+    font-size: 0.9em;
+    margin: 0.5em auto;
 }
 
+.post__meta--single > * {
+    margin: 0.5em auto;
+}
+
+.post__meta > :not(:first-child)::before {
+    content: "|";
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+
+.taxonomy__header {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+}
+
+.taxonomy__header > * {
+    margin: 0;
+    margin-right: 0.25em;
+}
+
+.taxonomy__pages {
+    list-style: none;
+    padding-left: 1em;
+    margin: 1em auto;
+}
+
+.taxonomy__page {
+    display: flex;
+}
+
+.taxonomy__page :first-child {
+    white-space: nowrap;
+}
+
+.taxonomy__page > * {
+    margin-right: 0.5em;
+}
 
 /* Mobile styles */
 @media all and (max-width: 860px) {
@@ -284,11 +326,3 @@ footer {
         --font-size: 17px;
     }
 }
-
-/* Automatic color scheme detection */
-@media (prefers-color-scheme: dark) {
-  :root {
-  }
-}
-
-/* Table of contents autogenerated from Hugo */
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index e593ef3..700d9a7 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -13,10 +13,20 @@ Otherwise, we take the pages of a section. */ -}}
 <article class="post">
     <h1><a href="{{ .Permalink }}" aria-label="{{ .Title }}">{{ .Title }}</a></h1>
     <div class="post__meta">
-        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time>
-        {{- if and .GitInfo (ne (.Date.Format "2006-01-02") (.Lastmod.Format "2006-01-02")) }}
-        (Modified on <time datetime="{{ .Lastmod.Format "2006-01-02" }}">{{ .Lastmod.Format "2006-01-02" }}</time>)
-        {{- end }}
+        <span>
+            <time datetime="{{ .Date }}">
+                {{ .Date.Format "2006-01-02" }}
+            </time>
+            {{- if and .GitInfo (ne (.Date.Format "2006-01-02") (.Lastmod.Format "2006-01-02")) }}
+            (<time datetime="{{ .Lastmod }}">{{ .Lastmod.Format "2006-01-02" }}</time>)
+            {{- end }}
+        </span>
+
+        {{- /* The authors are appended with 'et al' if there's more than one author in the map. */ -}}
+        {{ with .Params.author }}
+            {{ $author := index (first 1 .) 0 }}
+            <span data-authors="{{ jsonify . }}">{{ $author.name }}{{ if ge (len .) 2 }}, et al.{{ end }}</span>
+        {{ end }}
     </div>
 </article>
 {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 875bc38..ad6033a 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -4,12 +4,12 @@
     <header>
         <h1>{{ .Title }}</h1>
     </header>
-    <div class="post__meta">
+    <div class="post__meta--single">
         <!-- List the author(s) of the article. -->
         {{- with .Params.author }}
         {{- $names := slice }}
         {{- range . }}{{ $names = $names | append .name }}{{ end }}
-        <p data-content-author="{{ jsonify $names }}">{{ i18n "published_by" }}: {{ delimit $names ", " (printf " %s " (i18n "and")) }}</p>
+        <p data-content-author="{{ jsonify . }}">{{ i18n "published_by" }}: {{ delimit $names ", " (printf " %s " (i18n "and")) }}</p>
         {{- end }}
 
         <!-- Only show the creation date if the `date` field is valid. -->
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 64d2485..8f90b74 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -3,12 +3,22 @@
 
 <h1>{{ .Title }}</h1>
 
-<ul>
-  {{ range .Data.Terms }}
-  <li>
-    <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a> ({{ .Count }})
-  </li>
-  {{ end }}
-</ul>
+{{- range .Data.Terms }}
+  {{- $pages := (where .Pages "Params.hidden" "!=" true) }}
+  {{- if ge (len $pages) 1 }}
+  <header id="{{ .Page.Title | urlize }}" class="taxonomy__header">
+    <h2>{{ .Page.Title }}</h2>
+    <small>(<a href="{{ .Page.RelPermalink }}">Permalink</a>)</small>
+  </header>
+  <ul class="taxonomy__pages">
+  {{- range $pages }}
+      <li class="taxonomy__page">
+          <date datetime="{{ .Date }}">{{ .Date.Format "2006-01-02" }}</date>
+          <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+      </li>
+  {{- end }}
+  </ul>
+  {{- end }}
+{{- end }}
 
-{{ end }}
\ No newline at end of file
+{{ end }}