hugo: use render hook for markdown tables

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

assets/css/typography.css

@@ -73,10 +73,5 @@
       @apply text-lg;
       line-height: 1.75;
     }
-    table {
-      display: block;
-      overflow-x: auto;
-      max-width: 100%;
-    }
   }
 }

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",

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>