Merge pull request #293 from nginxinc/misc/mainframe-fixes

Mainframe: Deprecate bootstrap-table + Basic 404 Page

Author: nginx-jack

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;
@@ -1976,3 +1981,20 @@ hr {
     visibility: hidden;
   }
 }
+
+.not-found-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10vh;
+
+  .info-header {
+    font-size: var(--font-step-2);
+  }
+
+  .info-desc {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3xs);
+    font-size: var(--font-step--1);
+  }
+}

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/404.html

@@ -1,25 +1,15 @@
 {{ define "main"}}
 
-<div class="container hero">
-  <h1><i class="far fa-frown"></i></h1>
-  <h1>Page not found</h1>
-
-  <div class="row no-gutters">
-    <div class="card list-card col-md-4">
-      <div class="col-md-4">
-      </div>
-      <div class="card-body">
-
-        <div class="card-text">
-        <p>Uh oh! We couldn't find the page you were looking for.</p>
-        <p><a class="button button-solid" href="{{ "/" | absURL }}">Return to the NGINX Docs Home page.</a></p>
-      </div>
+<div class="content">
+    <div class="not-found-container">
+        <h1 class="info-header">
+          HTTP 404 - Page not found
+        </h1>
+        <div class="info-desc">
+          <p>Uh oh! We couldn't find the page/path you were looking for.</p>
+          <a href="{{ .Site.BaseURL | relLangURL }}" aria-label="Return home">Return to the {{ .Site.Title }} homepage.</a>
+        </div>
     </div>
-  </div>
-</div>
 </div>
 
-
-
-
 {{ end }}

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
+)}}