From ffd3ccd0721f3edcb607b5e5b9f15fa017f375a2 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 10 Oct 2024 10:31:34 +0200
Subject: [PATCH 1/3] hugo: use render hook for markdown tables

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 assets/css/typography.css                  |  5 ---
 hugo_stats.json                            |  2 ++
 layouts/_default/_markup/render-table.html | 39 ++++++++++++++++++++++
 3 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 layouts/_default/_markup/render-table.html

diff --git a/assets/css/typography.css b/assets/css/typography.css
index a0c6511e59..008e7af704 100644
--- a/assets/css/typography.css
+++ b/assets/css/typography.css
@@ -73,10 +73,5 @@
       @apply text-lg;
       line-height: 1.75;
     }
-    table {
-      display: block;
-      overflow-x: auto;
-      max-width: 100%;
-    }
   }
 }
diff --git a/hugo_stats.json b/hugo_stats.json
index 4ea6d584b2..a94d109722 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -155,6 +155,7 @@
       "bg-gradient-to-br",
       "bg-gradient-to-r",
       "bg-gradient-to-t",
+      "bg-gray-dark-200",
       "bg-gray-light-100",
       "bg-gray-light-200",
       "bg-gray-light-400",
@@ -416,6 +417,7 @@
       "outline-none",
       "overflow-clip",
       "overflow-hidden",
+      "overflow-x-auto",
       "overflow-x-hidden",
       "overflow-y-auto",
       "p-1",
diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html
new file mode 100644
index 0000000000..1a32125cc1
--- /dev/null
+++ b/layouts/_default/_markup/render-table.html
@@ -0,0 +1,39 @@
+<div class="overflow-x-auto">
+  <table
+    {{- range $k, $v := .Attributes }}
+      {{- if $v }}
+        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+      {{- end }}
+    {{- end }}>
+    <thead class="bg-gray-light-100 dark:bg-gray-dark-200">
+      {{- range .THead }}
+        <tr>
+          {{- range . }}
+            <th class="p-2"
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </th>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </thead>
+    <tbody>
+      {{- range .TBody }}
+        <tr>
+          {{- range . }}
+            <td class="p-2"
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </td>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>

From ecc54f2b3b356d8db9298a72301387990b50cd7b Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 10 Oct 2024 10:46:23 +0200
Subject: [PATCH 2/3] hugo: align cli table styles with defaults, add
 horizontal overflow

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/_default/cli.html | 176 +++++++++++++++++++-------------------
 1 file changed, 90 insertions(+), 86 deletions(-)

diff --git a/layouts/_default/cli.html b/layouts/_default/cli.html
index 347cce4099..58c99c2c2c 100644
--- a/layouts/_default/cli.html
+++ b/layouts/_default/cli.html
@@ -11,38 +11,40 @@
     <article class="prose min-w-0 flex-[2_2_0%] max-w-4xl dark:prose-invert">
     {{ partial "breadcrumbs.html" . }}
     <h1 class="scroll-mt-36">{{ .Title }}</h1>
-    <table>
-      <tbody>
-        {{ with $data.short }}
-        <tr>
-          <th class="text-left w-32">Description</th>
-          <td>{{ . }}</th>
-        </tr>
-        {{ end }}
-        {{ with $data.usage }}
-        <tr>
-          <th class="text-left w-32">Usage</th>
-          <td><code>{{ . }}</code></td>
-        </tr>
-        {{ end }}
-        {{ with $data.aliases }}
-        {{ $aliases := strings.Replace . (fmt.Printf "%s, " page.Title) "" }}
-        <tr>
-          <th class="text-left w-32 flex items-center gap-2">
-            <span>Aliases</span>
-            {{ partialCached "tooltip.html" "An alias is a short or memorable alternative for a longer command." "cli-alias" }}
-          </th>
-          <td>
-            <div class="flex gap-3">
-            {{ range (strings.Split $aliases ", ") }}
-              <code>{{ . }}</code>
-            {{ end }}
-            </div>
-          </td>
-        </tr>
-        {{ end }}
-      </tbody>
-    </table>
+    <div class="overflow-x-auto">
+      <table>
+        <tbody>
+          {{ with $data.short }}
+          <tr>
+            <th class="text-left w-32">Description</th>
+            <td>{{ . }}</th>
+          </tr>
+          {{ end }}
+          {{ with $data.usage }}
+          <tr>
+            <th class="text-left w-32">Usage</th>
+            <td><code>{{ . }}</code></td>
+          </tr>
+          {{ end }}
+          {{ with $data.aliases }}
+          {{ $aliases := strings.Replace . (fmt.Printf "%s, " page.Title) "" }}
+          <tr>
+            <th class="text-left w-32 flex items-center gap-2">
+              <span>Aliases</span>
+              {{ partialCached "tooltip.html" "An alias is a short or memorable alternative for a longer command." "cli-alias" }}
+            </th>
+            <td>
+              <div class="flex gap-3">
+              {{ range (strings.Split $aliases ", ") }}
+                <code>{{ . }}</code>
+              {{ end }}
+              </div>
+            </td>
+          </tr>
+          {{ end }}
+        </tbody>
+      </table>
+    </div>
     {{ .Content }}
     {{ if $data.deprecated }}
       {{ markdownify `
@@ -96,62 +98,64 @@ can be removed entirely in a future release.
         {{ $heading := dict "level" 2 "text" "Options" }}
         {{ partialCached "heading.html" $heading "cli-options" }}
         {{ $.Scratch.Add "headings" $heading }}
-        <table>
-          <thead>
-            <tr>
-              <th>Option</th>
-              <th>Default</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{ range . }}
+        <div class="overflow-x-auto">
+          <table>
+            <thead class="bg-gray-light-100 dark:bg-gray-dark-200">
               <tr>
-                {{ $short := .shorthand }}
-                {{ $long := .option }}
-                <td>
-                  {{ with .details_url }}
-                  <a class="link" href="{{ . }}">
-                    <code>{{ with $short }}-{{ . }}, {{end}}--{{ $long }}</code>
-                  </a>
-                  {{ else }}
-                  <code>{{ with $short }}-{{ . }}, {{end}}--{{ $long }}</code>
-                  {{ end }}
-                </td>
-                {{ $skipDefault := `[],map[],false,0,0s,default,'',""` }}
-                <td>
-                  {{ with .default_value }}
-                    {{ cond (in $skipDefault .) "" (printf "<code>%s</code>" . | safeHTML) }}
-                  {{ end }}
-                </td>
-                <td>
-                  {{ with .min_api_version }}
-                    {{ partialCached "components/badge.html" (dict "color" "blue" "content" (printf "API %s+" .)) "api" . }}
-                  {{ end }}
-                  {{ with .deprecated }}
-                    {{ partialCached "components/badge.html" (dict "color" "red" "content" "Deprecated") "deprecated" }}
-                  {{ end }}
-                  {{ with .experimental }}
-                    {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental (daemon)") "exp" }}
-                  {{ end }}
-                  {{ with .experimentalcli }}
-                    {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental (CLI)") "exp-cli" }}
-                  {{ end }}
-                  {{ with .kubernetes }}
-                    {{ partialCached "components/badge.html" (dict "color" "blue" "content" "Kubernetes") "k8s" }}
-                  {{ end }}
-                  {{ with .swarm }}
-                    {{ partialCached "components/badge.html" (dict "color" "blue" "content" "Swarm") "swarm" }}
-                  {{ end }}
-                  {{ if .description }}
-                    {{/* replace newlines in long desc with break tags */}}
-                    {{ markdownify (strings.Replace .description "\n" "<br>") }}
-                  {{ end }}
-                </td>
+                <th class="p-2">Option</th>
+                <th class="p-2">Default</th>
+                <th class="p-2">Description</th>
               </tr>
-            {{ end }}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {{ range . }}
+                <tr class="p-2">
+                  {{ $short := .shorthand }}
+                  {{ $long := .option }}
+                  <td>
+                    {{ with .details_url }}
+                    <a class="link" href="{{ . }}">
+                      <code>{{ with $short }}-{{ . }}, {{end}}--{{ $long }}</code>
+                    </a>
+                    {{ else }}
+                    <code>{{ with $short }}-{{ . }}, {{end}}--{{ $long }}</code>
+                    {{ end }}
+                  </td>
+                  {{ $skipDefault := `[],map[],false,0,0s,default,'',""` }}
+                  <td>
+                    {{ with .default_value }}
+                      {{ cond (in $skipDefault .) "" (printf "<code>%s</code>" . | safeHTML) }}
+                    {{ end }}
+                  </td>
+                  <td>
+                    {{ with .min_api_version }}
+                      {{ partialCached "components/badge.html" (dict "color" "blue" "content" (printf "API %s+" .)) "api" . }}
+                    {{ end }}
+                    {{ with .deprecated }}
+                      {{ partialCached "components/badge.html" (dict "color" "red" "content" "Deprecated") "deprecated" }}
+                    {{ end }}
+                    {{ with .experimental }}
+                      {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental (daemon)") "exp" }}
+                    {{ end }}
+                    {{ with .experimentalcli }}
+                      {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental (CLI)") "exp-cli" }}
+                    {{ end }}
+                    {{ with .kubernetes }}
+                      {{ partialCached "components/badge.html" (dict "color" "blue" "content" "Kubernetes") "k8s" }}
+                    {{ end }}
+                    {{ with .swarm }}
+                      {{ partialCached "components/badge.html" (dict "color" "blue" "content" "Swarm") "swarm" }}
+                    {{ end }}
+                    {{ if .description }}
+                      {{/* replace newlines in long desc with break tags */}}
+                      {{ markdownify (strings.Replace .description "\n" "<br>") }}
+                    {{ end }}
+                  </td>
+                </tr>
+              {{ end }}
+            </tbody>
+          </table>
+        </div>
       {{ end }}
     {{ end }}
     {{ with $data.examples }}

From ba347ae523e2bb254ff391d767729eb9014d958a Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 10 Oct 2024 17:57:18 +0200
Subject: [PATCH 3/3] site: bump the border contrast for dark mode tables

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 hugo_stats.json    | 1 -
 tailwind.config.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/hugo_stats.json b/hugo_stats.json
index a94d109722..e1bc72a731 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -155,7 +155,6 @@
       "bg-gradient-to-br",
       "bg-gradient-to-r",
       "bg-gradient-to-t",
-      "bg-gray-dark-200",
       "bg-gray-light-100",
       "bg-gray-light-200",
       "bg-gray-light-400",
diff --git a/tailwind.config.js b/tailwind.config.js
index 9a9a847271..b02e5903a2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -39,7 +39,7 @@ module.exports = {
             "--tw-prose-invert-hr": theme("colors.divider.dark"),
             "--tw-prose-invert-captions": theme("colors.gray.dark.600"),
             "--tw-prose-invert-th-borders": theme("colors.gray.dark.200"),
-            "--tw-prose-invert-td-borders": theme("colors.gray.dark.200"),
+            "--tw-prose-invert-td-borders": theme("colors.gray.dark.300"),
           },
         },
       }),