Improve taxonomy handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/details.scss

@@ -0,0 +1,55 @@
+main.with-details {
+  max-width: $width-wide;
+  margin: 0 auto;
+  padding: 2rem;
+
+  > .content {
+    width: 100%;
+    padding: 0;
+  }
+
+  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
+  display: grid;
+  grid-template-columns: $width-sidebar $width-content $width-sidebar;
+  column-gap: 2rem;
+
+  .title {
+    font-size: 1.75rem;
+    margin: 0;
+  }
+
+  .length {
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    margin: 0.5rem 0 0.5rem 0;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: $width-wide) {
+  main.with-details {
+    display: block;
+    padding: 0;
+
+    > .details {
+      max-width: $width-content;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    > .content {
+      padding: 2rem;
+    }
+  }
+}
+
+@media (max-width: $width-mobile) {
+  main.with-details {
+    > .details {
+      padding: 1rem;
+    }
+
+    > .content {
+      padding: 0 1rem 1rem 1rem;
+    }
+  }
+}

assets/sass/footer.scss

@@ -36,6 +36,7 @@
         list-style: none;
 
         li {
+          margin: 0;
           font-size: 0.85rem;
         }
       }

assets/sass/hero.scss

@@ -7,22 +7,6 @@
     margin: 0;
     font-size: 2.5rem;
   }
-
-  .meta {
-    font-size: 0.8rem;
-
-    .date {
-      color: var(--text-600);
-    }
-
-    .duration {
-      color: color-mix(in srgb, var(--text) 50%, var(--background));
-    }
-  }
-
-  .captioned-image {
-    padding-top: 1.5rem;
-  }
 }
 
 .hero + .content {

assets/sass/list.scss

@@ -1,64 +1,17 @@
-main.with-meta {
-  max-width: $width-wide;
-  margin: 0 auto;
-  padding: 2rem;
-
-  > .content {
-    padding: 0;
-  }
-
-  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
-  display: grid;
-  grid-template-columns: $width-sidebar $width-content $width-sidebar;
-  column-gap: 2rem;
-
-  h1 {
-    font-size: 1.75rem;
-  }
-
-  .length {
-    color: color-mix(in srgb, var(--text) 50%, var(--background));
-    margin: 0.25rem 0;
-    font-size: 0.8rem;
-  }
-}
-
-@media (max-width: $width-wide) {
-  main.with-meta {
-    display: block;
-    padding: 0;
-
-    > .meta {
-      max-width: $width-content;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-
-    > .content {
-      padding: 2rem;
-    }
-  }
-}
-
-@media (max-width: $width-mobile) {
-  main.with-meta {
-    > .meta {
-      padding: 1rem;
-    }
-
-    > .content {
-      padding: 0 1rem 1rem 1rem;
-    }
-  }
-}
-
 .list {
   .post {
     display: block;
-    color: inherit;
+
+    >a {
+      color: inherit;
+    }
+
+    >a:hover {
+      color: var(--text-800);
+    }
 
     &:not(:first-child) {
-      margin-top: 4rem;
+      margin: 4rem 0 4rem 0;
     }
 
     .title {
@@ -67,38 +20,20 @@ main.with-meta {
     }
 
     .summary {
-      margin-top: 0.5rem;
+      margin: 0.5rem 0 0.5rem 0;
-    }
-
-    .meta {
-      margin-top: 1rem;
-      font-size: 0.8rem;
-
-      .date {
-        color: var(--text-600);
-      }
-
-      .duration {
-        color: color-mix(in srgb, var(--text) 50%, var(--background));
-      }
     }
 
     .heading-anchor {
       display: none;
     }
   }
-
-  .post:hover .title,
-  .post:hover .summary {
-    color: var(--text-800);
-  }
 }
 
 @media (max-width: $width-mobile) {
   .list {
     .post {
       &:not(:first-child) {
-        margin-top: 2rem;
+        margin: 2rem 0 2rem 0;
       }
 
       .title {

assets/sass/main.scss

@@ -11,7 +11,9 @@ $width-wide: 75rem;
 @import "blockquote";
 @import "code";
 @import "table";
+@import "meta";
 
+@import "details";
 @import "list";
 @import "gallery";
 

assets/sass/meta.scss

@@ -0,0 +1,20 @@
+.meta {
+  margin: 1rem 0 1rem 0;
+  font-size: 0.8rem;
+
+  .tag {
+    color: var(--secondary-600);
+  }
+
+  .tag:hover {
+    color: var(--secondary-800);
+  }
+
+  .date {
+    color: var(--text-600);
+  }
+
+  .duration {
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+  }
+}

layouts/_default/list.html

@@ -1,8 +1,8 @@
 {{ define "main" }}
-  {{ $withMeta := default true .Params.withMeta }}
+  {{ $details := default true .Params.details }}
-  <main class="{{- if $withMeta -}}with-meta{{- end -}}">
+  <main class="{{- if $details -}}with-details{{- end -}}">
-    {{ if $withMeta }}
+    {{ if $details }}
-      {{ partial "components/list/meta.html" . }}
+      {{ partial "components/list/details.html" . }}
     {{ end }}
     <div class="content">
       {{ partial "posts/list.html" . }}

layouts/_shortcodes/sub.html

@@ -1,2 +1 @@
-<sub>{{ .Get 0 | markdownify }}</sub>
+<sub>{{ .Get 0 | markdownify }}</sub> {{- /* chomp trailing newline */ -}}
-{{- /* chomp trailing newline */ -}}

layouts/_shortcodes/sup.html

@@ -1,2 +1 @@
-<sup>{{ .Get 0 | markdownify }}</sup>
+<sup>{{ .Get 0 | markdownify }}</sup> {{- /* chomp trailing newline */ -}}
-{{- /* chomp trailing newline */ -}}

layouts/gallery/list.html

@@ -1,10 +1,16 @@
 {{ define "main" }}
-  {{ $withMeta := default true .Params.withMeta }}
+  {{ $details := default true .Params.details }}
-  <main class="{{- if $withMeta -}}with-meta{{- end -}}">
+  <main class="{{- if $details -}}with-details{{- end -}}">
-    {{ if $withMeta }}
+    {{ if $details }}
-      {{ partial "components/list/meta.html" . }}
+      {{ partial "components/list/details.html" . }}
     {{ end }}
-    <div class="{{- if $withMeta -}}content{{- else -}}content wide{{- end -}}">
+    <div
+      class="{{- if $details -}}
+        content
+      {{- else -}}
+        content wide
+      {{- end -}}"
+    >
       {{ partial "gallery/list.html" . }}
     </div>
   </main>

layouts/partials/components/hero/index.html

@@ -1,9 +1,5 @@
 <section class="hero">
   <h1 class="title">{{ .Title }}</h1>
-  <div class="meta">
+  {{ partial "components/meta/index.html" . }}
-    <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
-    &middot;
-    <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
-  </div>
   {{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
 </section>

layouts/partials/components/image/index.html

@@ -9,8 +9,8 @@
 {{- if reflect.IsMap $image -}}
   {{- $src = $image.src | default "" -}}
   {{- $caption = $image.caption | default "" -}}
-  {{- $title = $image.title | default $caption | default "" -}}
+  {{- $title = $image.title | default $caption | default "" | plainify -}}
-  {{- $alt = $image.alt | default $title | default "" -}}
+  {{- $alt = $image.alt | default $title | default "" | plainify -}}
 {{- end -}}
 
 {{- if $src -}}
@@ -34,6 +34,7 @@
     {{- $thumb = . | images.Filter (images.Process "webp q75") -}}
   {{- end -}}
 
+
   <figure class="captioned-image lightbox">
     <a
       href="{{- $full.RelPermalink -}}"

layouts/partials/components/list/details.html

@@ -1,5 +1,5 @@
-<section class="meta">
+<section class="details">
-  <h1>{{ .Page.Title }}</h1>
+  <h1 class="title">{{ .Page.Title }}</h1>
   <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
   {{ .Content }}
 </section>

layouts/partials/components/meta/index.html

@@ -0,0 +1,18 @@
+<div class="meta">
+  <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
+  &middot;
+  {{ if eq .Kind "page" }}
+    {{ range .Params.tags }}
+      <a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
+      &middot;
+    {{ end }}
+    <span class="duration">
+      {{ printf "%d min. read" .ReadingTime }}
+    </span>
+  {{ else }}
+    {{ $count := len .Pages }}
+    <span class="duration">
+      {{ printf "%d %s" $count (cond (eq $count 1) "item" "items") }}
+    </span>
+  {{ end }}
+</div>

layouts/partials/components/postnav/index.html

@@ -1,21 +1,26 @@
 {{ $pages := .CurrentSection.Pages.ByDate.Reverse }}
 
+
 <div class="postnav">
   {{ with $pages.Prev . }}
-    <a href="{{ .RelPermalink }}">
+    {{ if eq .Kind "page" }}
-      <div class="previous">
+      <a href="{{ .RelPermalink }}">
-        <p class="caption">Previous Post</p>
+        <div class="previous">
-        <p class="title">{{ .Title }}</p>
+          <p class="caption">Previous Post</p>
-      </div>
+          <p class="title">{{ .Title }}</p>
-    </a>
+        </div>
+      </a>
+    {{ end }}
   {{ end }}
 
   {{ with $pages.Next . }}
-    <a href="{{ .RelPermalink }}">
+    {{ if eq .Kind "page" }}
-      <div class="next">
+      <a href="{{ .RelPermalink }}">
-        <p class="caption">Next Post</p>
+        <div class="next">
-        <p class="title">{{ .Title }}</p>
+          <p class="caption">Next Post</p>
-      </div>
+          <p class="title">{{ .Title }}</p>
-    </a>
+        </div>
+      </a>
+    {{ end }}
   {{ end }}
 </div>

layouts/partials/posts/list.html

@@ -1,15 +1,13 @@
 <div class="list">
   {{ range sort .Pages "Date" "desc" }}
     {{ if not .Params.private }}
-      <a href="{{- .RelPermalink -}}" class="post">
+      <div class="post">
-        <h1 class="title">{{ .Title }}</h1>
+        <a href="{{- .RelPermalink -}}">
-        <div class="summary">{{ .Summary | plainify }}</div>
+          <h1 class="title">{{ .Title }}</h1>
-        <div class="meta">
+          <div class="summary">{{ .Summary | plainify }}</div>
-          <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
+        </a>
-          &middot;
+        {{ partial "components/meta/index.html" . }}
-          <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
+      </div>
-        </div>
-      </a>
     {{ end }}
   {{ end }}
 </div>