From 4dc09070eea7406d6cbfbbbaa39600fe82160137 Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Sun, 3 Oct 2021 21:30:09 +0100
Subject: [PATCH] Improve recent release list

- fix unwanted trailing separator
- better styling for the items
- more semantic markup (also enables improved CSS)
---
 assets/scss/_custom.scss             | 21 +++++++++++
 data/i18n/en/en.toml                 | 10 +++++
 layouts/shortcodes/release-data.html | 55 +++++++++++++++++-----------
 3 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index 28b6a8d6e6..7adf40e163 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -765,3 +765,24 @@ dl {
     margin-top: 1.5em;
   }
 }
+
+.release-details {
+  padding-left: 2em;
+
+  > :not(p) {
+    font-size: 1.125em;
+  }
+
+  .release-inline-heading, .release-inline-value {
+    display: inline-block
+  }
+
+  .release-inline-value {
+    padding-left: 0.25em;
+  }
+
+  p {
+     margin-top: 1em;
+     margin-bottom: 1em;
+  }
+}
diff --git a/data/i18n/en/en.toml b/data/i18n/en/en.toml
index 6ed8b8a731..f6373cdfc0 100644
--- a/data/i18n/en/en.toml
+++ b/data/i18n/en/en.toml
@@ -189,6 +189,10 @@ other = "Read about"
 [main_read_more]
 other = "Read more"
 
+[not_applicable]
+# Localization teams: it's OK to use a longer text here
+other = "n/a"
+
 [note]
 other = "Note:"
 
@@ -207,6 +211,12 @@ other = "Before you begin"
 [previous_patches]
 other = "Patch Releases:"
 
+[release_date_after]
+other = ")"
+
+[release_date_before]
+other = "(released: "
+
 [seealso_heading]
 other = "See Also"
 
diff --git a/layouts/shortcodes/release-data.html b/layouts/shortcodes/release-data.html
index d998847dfc..e182cb82ae 100644
--- a/layouts/shortcodes/release-data.html
+++ b/layouts/shortcodes/release-data.html
@@ -1,34 +1,45 @@
 {{ range $data := .Site.Data.releases.schedule.schedules }}
 {{- $dataVersion := printf "%.2f" $data.release  -}}
-<h2>{{ $dataVersion }}</h2>
-
-<br>
+{{- $dataIdVersion := replace ( printf "%.2f" $data.release ) "." "-" | anchorize -}}
+<h3 id="release-v{{ $dataIdVersion }}">{{ $dataVersion }}</h3>
 
+<div class="release-details">
 {{ if not $data.previousPatches }}
-<b>{{ T "latest_release" }}</b> {{ printf "%s.0" $dataVersion }}
-<br>
-<b>{{ T "end_of_life" }}</b> {{ printf "%s" $data.endOfLifeDate }}
-<br>
-<b>{{ T "previous_patches" }}</b> n/a
+<div>
+<b class="release-inline-heading">{{ T "latest_release" }}</b><span class="release-version release-inline-value">{{ printf "%s.0" $dataVersion }}</span>
+</div>
+<div>
+  <b class="release-inline-heading">{{ T "end_of_life" }}</b><span class="release-eoldate release-inline-value">{{ printf "%s" $data.endOfLifeDate }}</span>
+</div>
+<div>
+    <b class="release-inline-heading">{{ T "previous_patches" }}</b> <span class="notapplicable release-inline-value">{{ T "not_applicable" }}</span>
+</div>
 {{ end }}
 
 {{ if $data.previousPatches }}
-<b>{{ T "latest_release" }}</b> {{ index $data.previousPatches 0 "release" }} (released: {{ index $data.previousPatches 0 "targetDate" }})
-<br>
-<b>{{ T "end_of_life" }}</b> {{ printf "%s" $data.endOfLifeDate }}
-<br>
+<div>
+    <b class="release-inline-heading">{{ T "latest_release" }}</b><span class="release-inline-value">{{ index $data.previousPatches 0 "release" }} {{ T "release_date_before" }}{{ index $data.previousPatches 0 "targetDate" }}{{ T "release_date_after" }}</span>
+</div>
+<div>
+    <b class="release-inline-heading">{{ T "end_of_life" }}</b><span class="release-eoldate release-inline-value">{{ printf "%s" $data.endOfLifeDate }}</span>
+</div>
+<div>
 <b>{{ T "previous_patches" }}</b>
-    {{ range $previousPatchesList := $data.previousPatches }}
-        {{range $previous_patches_key, $previous_patches_value := $previousPatchesList }}
-            {{ if eq $previous_patches_key "release" }}<a href="https://git.k8s.io/kubernetes/CHANGELOG/CHANGELOG-{{ $dataVersion }}.md#v{{ replace $previous_patches_value `.` `` }}">{{ printf "%s" $previous_patches_value }}{{ T "inline_list_separator" }} </a>
-            {{ end }}
-        {{ end }}
-    {{ end }}
-{{ end }}
+    <span class="release-prevpatches release-inline-value">
+    {{- range $key, $value := sort $data.previousPatches ".targetDate" "asc" -}}
+        {{ if $key }}{{ T "inline_list_separator" }}{{ end }}
+        <a href="https://git.k8s.io/kubernetes/CHANGELOG/CHANGELOG-{{ $dataVersion }}.md#v{{ replace .release `.` `` }}">{{ printf "%s" .release }}</a>
+    {{- end -}}
+{{- end -}}
+    </span>
+</div>
 
+<!-- not yet localized, mark as English -->
+<p lang="en">
+Complete {{ $dataVersion }} <a href="/releases/patch-releases/#{{ replace $dataVersion `.` `-` }}">Schedule</a>
+and <a href="https://git.k8s.io/kubernetes/CHANGELOG/CHANGELOG-{{ $dataVersion }}.md">Changelog</a>
+</p>
 
-<br>
-Complete {{ $dataVersion }} <a href="/releases/patch-releases/#{{ replace $dataVersion `.` `-` }}">Schedule</a> and <a href="https://git.k8s.io/kubernetes/CHANGELOG/CHANGELOG-{{ $dataVersion }}.md">Changelog</a>
-
+</div>
 
 {{ end }}