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](gohugoio/hugo#9316 (comment))). Also, make sure the rendered SHAs break correctly on mobile by adding a text-break shortcode.
sebastiancarlos · Sep 7, 2024 · 8d1c8ae · 8d1c8ae
1 parent 35cf8f7
commit 8d1c8ae
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 54 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -40,7 +40,7 @@ jobs:
       - name: Setup Hugo
         uses: peaceiris/actions-hugo@v3
         with:
-          hugo-version: '0.124.1'
+          hugo-version: '0.134.1'
 
       - name: Install Dart Sass
         run: sudo snap install dart-sass

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -29,7 +29,7 @@ jobs:
       - name: Setup Hugo
         uses: peaceiris/actions-hugo@v3
         with:
-          hugo-version: '0.124.1'
+          hugo-version: '0.134.1'
 
       - name: Install Dart Sass
         run: sudo snap install dart-sass

diff --git a/content/download/index.md b/content/download/index.md
@@ -10,7 +10,7 @@ title: "Taskwarrior - What's next?"
 
 **Taskwarrior {{< current_release "version" >}}** (Released {{< current_release "date" >}}):
 [task-{{< current_release "version" >}}.tar.gz]({{< current_release "url" >}})
-SHA256 {{< current_release "sha256" >}}
+SHA256 {{< text-break >}}{{< current_release "sha256" >}}{{< /text-break >}}
 [Changelog](https://github.com/GothenburgBitFactory/taskwarrior/blob/stable/ChangeLog)
 
 Command reference taskwarrior 2.5.3:

diff --git a/themes/bootstrap/layouts/_default/_markup/render-table.html 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
@@ -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/layouts/shortcodes/text-break.html b/themes/bootstrap/layouts/shortcodes/text-break.html
@@ -0,0 +1 @@
+<span class="text-break">{{ .Inner }}</span>
diff --git a/themes/bootstrap/static/css/theme.css b/themes/bootstrap/static/css/theme.css
@@ -237,43 +237,3 @@ h4 .callout-warning {
 .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;
-}