Merge pull request #709 from gethinode/validation

Fix breakpoint-specific responsive behavior of tables

data/structures/table.yml

@@ -23,7 +23,7 @@ arguments:
   class:
     type: string
     optional: true
-    comment: Class attribute of the table element, e.g. “table-striped-columns w-auto”.
+    comment: Class attribute of the table element, e.g. `table-striped-columns w-auto`.
 body:
   type: string
   optional: false

exampleSite/content/en/blog/bootstrap-elements.md

@@ -404,6 +404,22 @@ As an example, the following shortcode displays superscript text.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Table
+
+As an example, the following shortcode displays a responsive table.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="markdown" >}}
+{{</* table */>}}
+| #  | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
+|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
+| 1. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
+| 2. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
+| 3. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
+{{</* /table */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Timeline
 
 As an example, the following shortcode displays a timeline with the file `data/timeline.en.yml` as data.

exampleSite/hugo_stats.json

@@ -39,8 +39,14 @@
       "sub",
       "sup",
       "svg",
+      "table",
+      "tbody",
+      "td",
+      "th",
+      "thead",
       "time",
       "title",
+      "tr",
       "ul",
       "use"
     ],
@@ -373,6 +379,8 @@
       "syntax-highlight",
       "tab-content",
       "tab-pane",
+      "table",
+      "table-responsive",
       "tag-link",
       "text-bg-body",
       "text-bg-body-tertiary",
@@ -518,6 +526,7 @@
       "spinner",
       "sub",
       "sup",
+      "table",
       "timeline",
       "toast",
       "toast-container",

layouts/shortcodes/table.html

@@ -21,7 +21,6 @@
 {{ else }}
     {{ $breakpoint = .Get 0 }}
 {{ end }}
-{{ if eq $breakpoint "none" }}{{ $breakpoint = "" }}{{ end }}
 
 <!-- Main code -->
 {{- $input := .Inner | .Page.RenderString }}
@@ -32,6 +31,12 @@
 {{- $new := printf "<table class=\"table %s\">" $class -}}
 {{ $input := replace $input $old $new -}}
 
-<div class="{{- with $breakpoint }}table-responsive table-responsive-{{ . }}{{ end -}}">
+{{ if not $error }}
-{{ $input | safeHTML }}
+    {{ if eq $breakpoint "none" }}
-</div>
+        {{ $input | safeHTML }}
+    {{ else }}
+        <div class="table-responsive{{- with $breakpoint }}-{{ . }}{{ end -}}">
+        {{ $input | safeHTML }}
+        </div>
+    {{ end }}
+{{ end }}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.22.1",
+  "version": "0.22.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.22.1",
+      "version": "0.22.2",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.22.1",
+  "version": "0.22.2",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",