From 35356a58d301db72040448bc1d60087956ee6b47 Mon Sep 17 00:00:00 2001
From: Sebastian Carlos <sebastiancarlos@gmail.com>
Date: Sat, 7 Sep 2024 17:12:22 -0300
Subject: [PATCH] Make website fully responsive

This commit upgrades to Hugo 0.134.1 and enables Bootstrap 5's responsive
tables. This effectively makes the entire site responsive.

Hugo added support for table render hooks in version 0.134.1 ([release
notes](https://github.com/gohugoio/hugo/releases/tag/v0.134.0),
[docs](https://gohugo.io/render-hooks/tables/)), which are needed to support
Bootstrap 5's responsive tables
([source](https://github.com/gohugoio/hugo/issues/9316#issuecomment-2318297419)).
---
 .github/workflows/gh-pages.yml                |  2 +-
 .../_default/_markup/render-table.html        | 37 ++++++++++++++
 themes/bootstrap/layouts/_default/tools.html  | 24 ++++-----
 themes/bootstrap/static/css/theme.css         | 49 -------------------
 4 files changed, 51 insertions(+), 61 deletions(-)
 create mode 100644 themes/bootstrap/layouts/_default/_markup/render-table.html

diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index bcad93e9..817bf8a6 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -30,7 +30,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.124.1
+      HUGO_VERSION: v0.134.1
     steps:
       - name: Install Hugo CLI
         run: |
diff --git a/themes/bootstrap/layouts/_default/_markup/render-table.html b/themes/bootstrap/layouts/_default/_markup/render-table.html
new file mode 100644
index 00000000..da56a55f
--- /dev/null
+++ b/themes/bootstrap/layouts/_default/_markup/render-table.html
@@ -0,0 +1,37 @@
+{{/*
+Extends the defaul Hugo table rendering
+(https://gohugo.io/render-hooks/tables/#example) to support Bootstrap 5's
+responsive tables by adding a wrapper div with a "table-responsive" class and
+by adding the class "table" to the table element.
+*/}}
+<div class="table-responsive">
+  <table class="table">
+    {{- range $k, $v := .Attributes }}
+      {{- if $v }}
+        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+      {{- end }}
+    {{- end }}
+    <thead>
+      {{- range .THead }}
+        <tr>
+          {{- range . }}
+            <th {{ printf "style=%q" (printf "text-align: %s" .Alignment) | safeHTMLAttr }}>
+              {{- .Text -}}
+            </th>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </thead>
+    <tbody>
+      {{- range .TBody }}
+        <tr>
+          {{- range . }}
+            <td {{ printf "style=%q" (printf "text-align: %s" .Alignment) | safeHTMLAttr }}>
+              {{- .Text -}}
+            </td>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>
diff --git a/themes/bootstrap/layouts/_default/tools.html b/themes/bootstrap/layouts/_default/tools.html
index b5a6a44c..7de210f7 100644
--- a/themes/bootstrap/layouts/_default/tools.html
+++ b/themes/bootstrap/layouts/_default/tools.html
@@ -119,18 +119,20 @@
         <p class="lead" id="search-result-message">
           Loading...
         </p>
-        <table class="table table-striped" aria-label="tools table">
-          <thead>
-          <tr>
-            <th scope="col">Tool</th>
-            <th scope="col">Description</th>
-            <th scope="col">License</th>
-          </tr>
-          </thead>
-          <tbody id="tools-table">
+        <div class="table-responsive">
+          <table class="table table-striped" aria-label="tools table">
+            <thead>
+            <tr>
+              <th scope="col">Tool</th>
+              <th scope="col">Description</th>
+              <th scope="col">License</th>
+            </tr>
+            </thead>
+            <tbody id="tools-table">
 
-          </tbody>
-        </table>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
diff --git a/themes/bootstrap/static/css/theme.css b/themes/bootstrap/static/css/theme.css
index 8f507e55..061209f7 100644
--- a/themes/bootstrap/static/css/theme.css
+++ b/themes/bootstrap/static/css/theme.css
@@ -84,18 +84,9 @@ dl dd {
 }
 
 td, th {
-  padding: 8px;
-  line-height: 1.428571429;
-  vertical-align: top;
   border-top: 1px solid #ddd;
 }
 
-table {
-  width: 100%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
 footer {
   width: 100%;
   padding: 20px 0;
@@ -213,43 +204,3 @@ footer {
 .goat svg {
   font-size: 14px;
 }
-
-/** 
- * Bootsrap 5 has table styles as opt-in by adding the class .table to <table>.
- * However Hugo converts Markdown tables to HTML directly, and there are
- * currently no Hugo render hooks for tables. As a workaround, we copy the
- * styles for .table in bootstrap.css to the table tag here.
- */
-table {
-  --bs-table-color-type: initial;
-  --bs-table-bg-type: initial;
-  --bs-table-color-state: initial;
-  --bs-table-bg-state: initial;
-  --bs-table-color: var(--bs-emphasis-color);
-  --bs-table-bg: var(--bs-body-bg);
-  --bs-table-border-color: var(--bs-border-color);
-  --bs-table-accent-bg: transparent;
-  --bs-table-striped-color: var(--bs-emphasis-color);
-  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
-  --bs-table-active-color: var(--bs-emphasis-color);
-  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
-  --bs-table-hover-color: var(--bs-emphasis-color);
-  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
-  width: 100%;
-  margin-bottom: 1rem;
-  vertical-align: top;
-  border-color: var(--bs-table-border-color);
-}
-table > :not(caption) > * > * {
-  padding: 0.5rem 0.5rem;
-  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
-  background-color: var(--bs-table-bg);
-  border-bottom-width: var(--bs-border-width);
-  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
-}
-table > tbody {
-  vertical-align: inherit;
-}
-table > thead {
-  vertical-align: bottom;
-}