A more generic tag/value component

Write styles and templates for a more generic tag/value component. Use this component
for the taxonomy lists, draft tag, and page dates in the summary template.

assets/css/050_tags.css

@@ -0,0 +1,50 @@
+
+
+
+
+
+/*****************
+ * COMPONENT: TAG
+ *****************/
+
+.tag {
+  display: flex;
+  gap: 1ch;
+  font-family: var(--font-family-monospace);
+
+  .tag__name {
+    color: var(--text-color-secondary);
+    text-transform: uppercase;
+    white-space: nowrap;
+
+    &::after {
+      content: " =";
+    }
+  }
+
+  .tag__value {
+    color: var(--text-color-primary);
+  }
+
+  .tag__value--list {
+    --spacing: 1ch;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 var(--spacing);
+    list-style-type: none;
+    margin-block: 0;
+    padding-inline-start: 0;
+  }
+
+  .tag__value__list-item {
+    padding-inline-start: 0;
+    white-space: nowrap;
+  }
+
+  .tag__value__list-item:not(:first-child)::before {
+    color: var(--text-color-secondary);
+    content: ":";
+    margin-inline-end: var(--spacing);
+  }
+}

assets/css/099_page_footer.css

@@ -8,6 +8,7 @@
 
 .page-footer {
   margin-block-start: var(--space-xl);
+  font-size: var(--text-s);
 
   :last-child {
     margin-bottom: 0;

assets/css/099_page_summary.css

@@ -1,3 +1,8 @@
+
+
+
+
+
 /**************************
  # COMPONENT: PAGE SUMMARY
  **************************/
@@ -16,8 +21,6 @@
   .page-summary__date {
     color: var(--text-color-secondary);
     display: block;
-    font-size: var(--text-s);
-    line-height: 1;
   }
 
   .page-summary__title {
@@ -40,6 +43,11 @@
     font-weight: normal;
   }
 
+  .page-summary__date,
+  .page-summary__draft {
+    font-size: var(--text-s);
+  }
+
   :is(
     .page-summary__heading,
     .page-summary__subtitle,

assets/css/099_taxonomy_list.css

@@ -1,46 +0,0 @@
-
-
-
-
-
-/***************************
- * COMPONENT: TAXONOMY LIST
- ***************************/
-
-.taxonomy-list {
-  display: flex;
-  gap: 1ch;
-  font-family: var(--font-family-monospace);
-
-  .taxonomy-list__name {
-    color: var(--text-color-secondary);
-    text-transform: uppercase;
-    white-space: nowrap;
-
-    &::after {
-      content: " =";
-    }
-  }
-
-  .taxonomy-list__terms {
-    --spacing: 1ch;
-
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0 var(--spacing);
-    list-style-type: none;
-    margin-block: 0;
-    padding-inline-start: 0;
-
-    li {
-      padding-inline-start: 0;
-      white-space: nowrap;
-    }
-
-    li:not(:first-child)::before {
-      color: var(--text-color-secondary);
-      content: ":";
-      margin-inline-end: var(--spacing);
-    }
-  }
-}

i18n/en.yaml

@@ -1,2 +1,8 @@
+datePublishedName: Published
+
+draft: Draft
+draftYes: "YES"
+draftNo: "NO"
+
 home: Home
 tableOfContents: Table of Contents

layouts/_default/page_summary.html

@@ -7,7 +7,10 @@
       <div class="page-summary__content">{{ . | markdownify }}</div>
     {{ end }}
   {{- end }}
-  {{ with .Date }}
+  {{- if ne hugo.Environment "production" -}}
-    <time class="page-summary__date" datetime="{{ . | time.Format "2006-01-02" }}">{{ . | time.Format ":date_medium" }}</time>
+    {{ partial "page/taxonomy_draft.html" (dict "page" . "class" "page-summary__draft") }}
-  {{ end }}
+  {{- end -}}
+  {{- if .Date -}}
+    {{- partial "page/date.html" (dict "page" . "class" "page-summary__date") -}}
+  {{- end }}
 </article>

layouts/blog/list.html

@@ -9,9 +9,11 @@
     {{ end -}}
 
     <div class="main--list__page-list">
-      {{ range .Pages.ByDate.Reverse }}
+      {{ range .Pages.ByDate.Reverse -}}
-        {{ .Render "page_summary" }}
+        {{ if or (not .Draft) hugo.IsDevelopment }}
-      {{ end }}
+          {{ .Render "page_summary" }}
+        {{ end }}
+      {{- end }}
     </div>
   </main>
 {{ end }}

layouts/partials/page/date.html

@@ -0,0 +1,25 @@
+{{/*
+
+  Outputs a date tag for a page.
+
+  @context {Page} .page  The current page
+  @context {String} .date  The date, one of "published", or "updated".
+  @context {String} .class  Additional classes to apply to the rendered content.
+
+*/}}
+
+{{- $page := .page -}}
+{{- $dateName := .date -}}
+
+{{- $name := "" -}}
+{{- $date := $page.Date -}}
+
+{{- if or (not $dateName) (eq $dateName "date") }}
+  {{- $name = T "datePublishedName" -}}
+{{- else -}}
+{{ end -}}
+
+<div class="{{ with .class }}{{ . }}  {{ end }}tag">
+  <span class="tag__name">{{ $name }}</span>
+  <span class="tag__value">{{ $date | time.Format "2006-01-02" }}</span>
+</div>

layouts/partials/page/footer.html

@@ -1,2 +1,5 @@
+{{ if or hugo.IsDevelopment .Draft }}
+  {{ partial "page/taxonomy_draft.html" (dict "page" .) }}
+{{ end }}
 {{ partial "page/taxonomy_list.html" (dict "page" . "taxonomy" "categories") }}
 {{ partial "page/taxonomy_list.html" (dict "page" . "taxonomy" "tags") }}

layouts/partials/page/taxonomy_draft.html

@@ -0,0 +1,13 @@
+{{- /*
+  Outputs a DRAFT tag for the page.
+
+  @context {Page} .page  The current page
+  @context {String} .class  A list of additional classes to apply to the top-level element
+
+*/ -}}
+
+{{- $page := .page -}}
+<div class="{{ with .class }}{{ . }}  {{ end }}tag  tag--draft" data-name="draft">
+  <span class="tag__name">{{ T "draft" }}</span>
+  <span class="tag__value">{{ T (cond $page.Draft "draftYes" "draftNo") }}</li>
+</div>

layouts/partials/page/taxonomy_list.html

@@ -13,10 +13,10 @@
   {{- with T $taxonomy (len .) }}
     {{ $name = . }}
   {{ end -}}
-  <div class="taxonomy-list">
+  <div class="tag">
-    <span class="taxonomy-list__name">{{ $name }}</span>
+    <span class="tag__name">{{ $name }}</span>
-    <ul class="taxonomy-list__terms" data-name="{{ $name }}">
+    <ul class="tag__value--list" data-name="{{ $name }}">
-      {{ range . }}<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>{{ end }}
+      {{ range . }}<li class="tag__value__list-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>{{ end }}
     </ul>
   </div>
 {{ end }}