WIP: Implement table fragment using markdown

exampleSite/content/fragments/table/code-minimal-table.md

@@ -0,0 +1,24 @@
++++
+fragment = "content"
+weight = 121
++++
+
+<details><summary>Code</summary>
+```+++
+fragment = "table"
+#disabled = false
+date = "2017-10-10"
+weight = 120
+background = "secondary"
+
+title = "Table Fragment"
+subtitle= "Simple Markdown table"
+#title_align = "left" # Default is center, can be left, right or center
++++
+
+| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
+|----------|----------|------------|-----------|-------------|----------|
+| Row 1 | Value | Long Value | Value | {{< button url="#" color="success" >}}Long Button{{< /button >}} | {{< button color="danger" url="#" >}}Button{{< /button >}} |
+| Row 2 | Value | Value | Long Value | | {{< fontawesome icon="fas fa-download" url="#" >}} |
+```
+</details>

exampleSite/content/fragments/table/code-table.md

@@ -13,75 +13,13 @@ weight = 110
 background = "secondary"
 
 title = "Table Fragment"
-subtitle= "Tables are responsive by default"
+subtitle= "Customized table using shortcodes"
 #title_align = "left" # Default is center, can be left, right or center
-
-[header]
-  [[header.values]]
-    text = "Header 1"
-    # hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 2"
-
-  [[header.values]]
-    text = "Header 3"
-    hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 4"
-    hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 5"
-
-  [[header.values]]
-    text = "Header 6"
-
-[[rows]]
-  [[rows.values]]
-    header = "Row 1"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Long Value"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    button = "Long Button"
-    url = "#"
-    color = "success"
-
-  [[rows.values]]
-    button = "Button"
-    url = "#"
-    color = "danger"
-    align = "center"
-
-[[rows]]
-  [[rows.values]]
-    header = "Row 2"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Long Value"
-
-  [[rows.values]]
-    text = ""
-
-  [[rows.values]]
-    icon = "fas fa-download"
-    url = "#"
-    align = "center"
 +++
+
+| Header 1 | Header 2 | {{< hide-on-mobile >}}Header 3{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Header 4{{< /hide-on-mobile >}} | Header 5 | Header 6 |
+|----------|----------|------------|-----------|-------------|----------|
+| {{< row-header >}}Row 1{{< /row-header >}} | Value | {{< hide-on-mobile >}}Long Value{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Value{{< /hide-on-mobile >}} | {{< button url="#" color="success" >}}Long Button{{< /button >}} | {{< align center >}}{{< button color="danger" url="#" >}}Button{{< /button >}}{{< /align >}} |
+| {{< row-header >}}Row 2{{< /row-header >}} | Value | {{< hide-on-mobile >}}Value{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Long Value{{< /hide-on-mobile >}} | | {{< align center >}}{{< fontawesome icon="fas fa-download" url="#" >}}{{< /align >}} |
 ```
 </details>

exampleSite/content/fragments/table/minimal-table.md

@@ -0,0 +1,16 @@
++++
+fragment = "table"
+#disabled = false
+date = "2017-10-10"
+weight = 120
+background = "secondary"
+
+title = "Table Fragment"
+subtitle= "Simple Markdown table"
+#title_align = "left" # Default is center, can be left, right or center
++++
+
+| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
+|----------|----------|------------|-----------|-------------|----------|
+| Row 1 | Value | Long Value | Value | {{< button url="#" color="success" >}}Long Button{{< /button >}} | {{< button color="danger" url="#" >}}Button{{< /button >}} |
+| Row 2 | Value | Value | Long Value | | {{< fontawesome icon="fas fa-download" url="#" >}} |

exampleSite/content/fragments/table/table.md

@@ -6,73 +6,11 @@ weight = 110
 background = "secondary"
 
 title = "Table Fragment"
-subtitle= "Tables are responsive by default"
+subtitle= "Customized table using shortcodes"
 #title_align = "left" # Default is center, can be left, right or center
-
-[header]
-  [[header.values]]
-    text = "Header 1"
-    # hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 2"
-
-  [[header.values]]
-    text = "Header 3"
-    hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 4"
-    hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 5"
-
-  [[header.values]]
-    text = "Header 6"
-
-[[rows]]
-  [[rows.values]]
-    header = "Row 1"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Long Value"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    button = "Long Button"
-    url = "#"
-    color = "success"
-
-  [[rows.values]]
-    button = "Button"
-    url = "#"
-    color = "danger"
-    align = "center"
-
-[[rows]]
-  [[rows.values]]
-    header = "Row 2"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Long Value"
-
-  [[rows.values]]
-    text = ""
-
-  [[rows.values]]
-    icon = "fas fa-download"
-    url = "#"
-    align = "center"
 +++
+
+| Header 1 | Header 2 | {{< hide-on-mobile >}}Header 3{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Header 4{{< /hide-on-mobile >}} | Header 5 | Header 6 |
+|----------|----------|------------|-----------|-------------|----------|
+| {{< row-header >}}Row 1{{< /row-header >}} | Value | {{< hide-on-mobile >}}Long Value{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Value{{< /hide-on-mobile >}} | {{< button url="#" color="success" >}}Long Button{{< /button >}} | {{< align center >}}{{< button color="danger" url="#" >}}Button{{< /button >}}{{< /align >}} |
+| {{< row-header >}}Row 2{{< /row-header >}} | Value | {{< hide-on-mobile >}}Value{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Long Value{{< /hide-on-mobile >}} | | {{< align center >}}{{< fontawesome icon="fas fa-download" url="#" >}}{{< /align >}} |

layouts/partials/fragments/table.html

@@ -1,17 +1,21 @@
 {{- $self := .self -}}
 {{- $bg := $self.Scratch.Get "bg" }}
+{{- $text_color := cond (in (slice "white" "light" "secondary" "primary") $bg) "text-body" "text-white" -}}
 
 {{- partial "helpers/container.html" (dict "start" true "in_slot" .in_slot "bg" $bg "Name" .Name "Params" .Params) -}}
   {{- partial "helpers/section-header.html" (dict "self" $self "bg" $bg "params" .Params) }}
   <div class="row align-items-center text-center justify-content-end">
     <div class="col-12 order-lg-1 text-center">
-      {{- if .Params.rows }}
-        <div class="row justify-content-center">
-          <div class="col table-responsive">
-            {{ partial "helpers/table.html" (dict "header" .Params.header "rows" .Params.rows "page_scratch" .page_scratch "self" $self) }}
-          </div>
+      <div class="row justify-content-center">
+        <div class="col table-responsive">
+          {{ $content := $self.Content }}
+          {{ $content := replace $content "<table>" (printf "<table class='table table-bordered %s'>" $text_color) }}
+          {{ $content := replace $content "</table>" "</table></div>" }}
+          {{ $content := replaceRE "<(th|td)><th>(.*)</th>\n</(th|td)>" "<th>$2</th>" $content }}
+          {{ $content := replaceRE "<(th|td)><div class=['\"]hide-on-mobile['\"]>(.*)</div>\n</(th|td)>" "<$1 class='hide-on-mobile'>$2</$3>" $content }}
+          {{ $content | safeHTML }}
         </div>
-      {{- end }}
+      </div>
     </div>
   </div>
 {{- partial "helpers/container.html" (dict "end" true "in_slot" .in_slot) -}}

layouts/shortcodes/align.html

@@ -0,0 +1,6 @@
+{{- $align := .Get 0 -}}
+
+<div class="
+  {{- if (in (slice "left" "center" "right") $align) -}}
+    {{- printf " text-%s" $align -}}
+  {{- end -}}">{{ .Inner }}</div>

layouts/shortcodes/button.html

@@ -0,0 +1,8 @@
+{{- $color := (.Get "color") | default "primary" -}}
+{{- $url := .Get "url" -}}
+
+<a class="btn
+  {{- if hasPrefix $url "#" }} anchor{{- end -}}
+  {{- printf " btn-%s" $color -}}" href="{{ $url | relLangURL }}">
+  {{- .Inner -}}
+</a>

layouts/shortcodes/fontawesome.html

@@ -0,0 +1,3 @@
+<a href="{{ .Get "url" }}">
+  <i class="{{ .Get "icon" }} fa-2x"></i>
+</a>

layouts/shortcodes/hide-on-mobile.html

@@ -0,0 +1 @@
+<div class="hide-on-mobile">{{ .Inner }}</div>

layouts/shortcodes/row-header.html

@@ -0,0 +1 @@
+<th>{{ .Inner }}</th>