Feat: Mainframe tables + deprecate bootstrap-table

Author: TasoOneAsia

assets/css/v2/style.css

@@ -1497,6 +1497,11 @@ table {
   }
 }
 
+.md-table-scroll-x {
+  overflow-x: auto;
+  width: 100%;
+}
+
 .narrow table {
   min-width: 100%;
   margin: var(--table-top-bottom-spacing) 0;

exampleSite/content/test-product/tables/examples/config-sharing.md

@@ -18,19 +18,19 @@ EXCLUDE="default.conf"
 Use a space or newline character to separate the items in each list:
 
 
-{{<bootstrap-table "table table-striped table-bordered">}}
+{{<table variant="narrow">}}
 
 | Parameter                | Description                                                                          |
 | ------------------------ | -------------------------------------------------------------------------------------|
 | `NODES`                  | List of peers that receive the configuration from the primary.                       |
 | `CONFPATHS`              | List of files and directories to distribute from the primary to the peers.           |
 | `EXCLUDE`                | (Optional) List of configuration files on the primary not to distribute to the peers.|
 
-{{</bootstrap-table>}}
+{{</table>}}
 
 ### Advanced Parameters
 
-{{<bootstrap-table "table table-striped table-bordered">}}
+{{<table variant="wide">}}
 
 | Parameter                | Description                                                                            | Default                 |
 | ------------------------ | ---------------------------------------------------------------------------------------|-------------------------|
@@ -42,4 +42,4 @@ Use a space or newline character to separate the items in each list:
 | `RSYNC`                  | Location of the `rsync` binary                                                         | **/usr/bin/rsync**      |
 | `SSH`                    | Location of the `ssh` binary                                                           | **/usr/bin/ssh**        |
 
-{{</bootstrap-table>}}
+{{</table>}}

layouts/partials/table.html

@@ -0,0 +1,7 @@
+{{ if and (not (eq .variant "narrow")) (not (eq .variant "wide")) }}
+    {{ errorf "Invalid variant supplied to <table> shortcode: Received %s. Wanted: 'narrow', 'wide'" .variant }}
+{{ end }}
+
+<div class="md-table-scroll-x {{ .variant }}">
+    {{ .content | markdownify}}
+</div>

layouts/shortcodes/bootstrap-table.html

@@ -1,20 +1,8 @@
-{{ $htmlTable := .Inner | markdownify }}
-{{ $class := .Get 0 }}
-{{ $oldTable := "<table>" }}
-{{ $newTable := printf "<table class=\"%s %s\">" $class "table-v1" }}
-{{ $oldP := "<p>" }}
-{{ $newP := printf "<p class=\"%s\">" "table-v1"}}
-{{ $htmlTable := replace $htmlTable $oldTable $newTable }}
-{{ $htmlTable := replace $htmlTable $oldP $newP }}
-{{ $htmlTable | safeHTML }}
+{{ $defaultVariant := "narrow" }}
 
-<!-- Add default option for table of "narrow" if one is not provided -->
-{{ $narrowOption := "narrow" }}
-{{ $wideOption := "wide" }}
-{{ if and (not (strings.Contains $class $narrowOption)) (not (strings.Contains $class $wideOption)) }}
-  {{ $class = printf "%s %s" $class $narrowOption }}
-{{ end }}
+{{ partial "table.html" (dict
+    "variant" $defaultVariant
+    "content" .Inner
+)}}
 
-<div class="table-v2 {{ $class }}">
-    {{ .Inner | markdownify }}
-</div>
+{{ warnf "'<bootstrap-table></bootstrap-table>' is being deprecated. Use the '<table>' shortcode instead." }}

layouts/shortcodes/table.html

@@ -1,17 +1,9 @@
-{{/* Use this shortcode to wrap big tables that you want to have scrollbars when being shown in smaller screens */}}
-<style>
-    table, th, td {
-      border: 1px solid #CCC;
-      border-collapse: collapse;
-      list-style-position: inside;
-    }
-    th, td {
-      padding: 5px;
-    }
-    th {
-      text-align: center;
-    }
-</style>
-<div class="override-table">
-{{.Inner}}
-</div>
+<!-- Use this shortcode to allow tables to be scrollable across the x-axis -->
+<!-- Params: variant=['narrow' | 'wide'] (defaults to "narrow") -->
+
+{{ $variant := default "narrow" (.Get "variant") }}
+
+{{ partial "table.html" (dict
+    "variant" $variant
+    "content" .Inner
+)}}